Bulut Bayi YönetimiA fully featured admin theme which can be used to build CRM, CMS, etc.
CSSだけでスライドショーはつくれるよ。
この記事はCSS Programming Advent Calendar 2012、22日目のための記事です。 CSS Programmingとは、jsを使わないでHTMLとCSSを駆使してゲームとかスライドショーとか作る技術です ということで、ここでは、前回の記事で作った、グローバルナビの下の大きめの画像のところ（以下：スライドショー）を、CSSだけで実装してみます。JavaScriptで実装したサンプルはこちら。 以下が目次になります。 まえがき CSS Programmingに使える便利なやつ transitionプロパティ E ~ F（間接セレクタ） :not(s)否定疑似クラス :checked疑似クラス <label>要素 それCSSで出来るよ。 きっかけづくり チョボのところの仕組み ~と:checked <label> transition :first-childと:fi
Sass と Stylus の比較 - CSS Preprocessor Advent Calendar 2012 - kojika17
CSS Preprocessor Advent Calendar 2012 19日目の記事です。 CSS Preprocessorは、CSSに拡張機能を持たせるメタ言語と呼ばれるものです。 CSS Preprocessorでよく耳にするものに、SassやLessがあります。 私も以前からSassを使用していましたが、最近Stylusを使い始めたので、SassとStylusの比較を行ってみます。 拡張子とシンタックス 使用できる拡張子は.sassと.scssの2つ。 拡張子によってSass記法かSCSS(Sassy CSS)記法に分かれます。 Sass記法(.sass) #header color: #000 h1 font-size: 2em SCSS記法(.scss) #header { color: #000; h1 { font-size: 2em; } } SCSS記法の方がもとも
最近のLESSの小話と新機能紹介（一部） - inkdesign
08 Dec 2012 ※この記事は、CSS Preprocessor Advent Calendar 2012の7日目の記事のおまけです。 CSSプリプロセッサ（CSSメタ言語）は、Sassが人気かつ、アップデートも頻繁、新機能増えてる！みたいな空気を感じたりするんですが、LESSもがんばってます。 開発の停滞 5ヶ月ほど前にCrunchというLESS対応エディタを開発しているMatthew Dean氏が、 LESSの開発止まってますやん。それに比べてSassはめっちゃ更新してんで。 Is LESS in need of support? というissueをあげた。 それに対し、開発者のAlexis Sellier氏（[cloudhead](http://cloudhead.io/）が同issueにて、このようにコメントをあげた。 他にやることあるから、今LESSに割く時間ありませんわー
WebGL のシェーダーでグリグリできる CSS Shaders の使い方 - WebOS Goodies
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 こちらの記事を見て「おお、ついに CSS Shaders 実装されたんか！」と喜び勇んで試した後、すべてが終わってから Dev 版 Chrome でも使えることに気づくという情弱ぶりを発揮した今日この頃、みなさんいかがお過ごしでしょうか。いったいいつから使えてたんだろう・・・（´・ω・｀） そんなわけで、最新の話題でもないみたいですが、せっかく試したので記事にして
CSSが速くかけるようになるHayakuで、世界が変わるらしい - inkdesign
27 Nov 2012 Zen CodingもといEmmetを使いこなすとまでいかなくとも、それなりに使ってはいるが、実はCSSではあんまり活用していなかった。 というもCSSに関しては、多少Emmetや他のコード補完プラグイン（パッケージ）の支援はあるものの、HTMLよりも手グセというか、自然とプロパティなり値なりをさっさと書いてしまうし、それほどありがたい、と思えるほどでもない。 またZen Codingにせよ、Emmetにせよ、短縮形のルールが決まっているし、それらを覚えないといけないので少し大変だ。 そこでHayaku、らしい 二度見しそうな名前だが、これはHayakuというSublime Text2のパッケージ。Emmetと違い、対象になるのはCSS（とCSSプリプロセッサ）であり、前述の通りCSSの記述に関してはこれといったツールを使っていない自分でも感動した。 ちなみにHay
CSSプログラミング新作出来ませんでした – No.1026
CSSプログラミングの新作としてインベーダーゲームを作っていたんですが、途中で心が折れて中途半端なまま投げました。 [ incomplete ] CSS Invaders インベーダーを作りたかったというのはわかっていただけると思います。 敵の横移動が絡むと予想以上に自機の動きや位置が綺麗にできず、面倒くさくなって投げちゃったってとこです。 打つシステムとしては、敵をラッピングしているlabelを縦長に伸ばして、敵を直接クリックせずとも、その延長線上をクリックすると打った風になるという感じです。 この説明では何を言ってるか全くわからないと思うので、ソース見てください。 こういった、クラス名だけ変えて延々繰り返しみたいなコードを書くときはSCSSはほんとうに便利ですね。人力では絶対書きたくないです。 お暇な方、興味のある方は、forkして調整・機能追加してみませんか？ 『皆で作ろう、CSSイ
クロスブラウザな css3 linear-gradient が面倒になりそうな件について - ほむらちゃほむほむ
2012 年の 4月に CR(勧告候補) になった，CSS Image Values and Replaced Content Module Level 3 とそこで規定されてる，Linear Gradients: the ‘linear-gradient()’ notation の幾つかのブラウザでの対応具合が面倒な事になってるなぁってお話． 経緯とか 最初期 もともと，グラデーションだーと提案された頃には，WebKit の独自実装としてこんな感じの書式だった．(cf. Introducing CSS Gradients) background: -webkit-gradient(linear, left top /* 始点 */, left bottom /* 終点 */, from(#000) /* 始点の色 */, to(#FFF) /* 終点の色 */); 途中にもっと色を挟むと
CSS.2012 CSS Nite in OSAKA, Vol.31 with Mozilla Japan ～Firefox Developers Conference 2012 in Osaka 前夜祭～
patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後Akira Inoue
【ほぼ網羅】CSS3だけでアニメーションを実装する方法のまとめ
まずは、transitionプロパティでアニメーションを定義する方法です。 transitionプロパティは、開始時の状態と、終了時の状態を定義して使用します。 開始時と終了時を定義する方法には、以下の二種類があります。 1. hoverなどの擬似クラスを使用する方法 2. javascriptを使用して、CSSのプロパティを変更する方法 transitionでアニメーションを定義する際に、以下の４つの項目を指定することができます。 1. アニメーションにかかる時間 2. 対象のプロパティ 3. イージング 4. 遅延時間 この４つのプロパティはtransitionプロパティでまとめて定義することも出来ますし、個別に設定することも可能です。 まず、transitionプロパティを用いて、まとめて指定する方法ですが、以下の形式で設定を行います。 transition: アニメーションにかかる
CSS shaders: Cinematic effects for the web | Adobe Developer Connection
Advances in HTML5 and CSS (for example transitions, animations, transforms, text shadows, box-shadows, gradients, SVG) have improved the graphical and interactive richness of HTML. SVG filter effects are now moving to Filter Effects 1.0 to become available in CSS and HTML, in addition to SVG, and will bring effects such as grayscale, sepia tone, or hue-rotate to all web content. Note: Since CSS Sh
CSS Variables Module Level 1 (Editor's Draft)
CSS Custom Properties for Cascading Variables Module Level 1 W3C Candidate Recommendation Snapshot, 16 June 2022 More details about this document This version: https://www.w3.org/TR/2022/CR-css-variables-1-20220616/ Latest published version: https://www.w3.org/TR/css-variables-1/ Editor's Draft: https://drafts.csswg.org/css-variables/ Previous Versions: https://www.w3.org/TR/2021/CRD-css-variables
はてなにおけるCSSメタ言語（CSSプリプロセッサ）の導入について - Hatena Developer Blog
こんにちは、id:tikedaです。数年前から登場して以来、利用されるケースが増え続けているCSSメタ言語（CSSプリプロセッサ）。近年、様々な大規模サービスへの導入が進む中、はてなのサービス開発においても導入を行うため、2012/3/6に勉強会を実施しました。その内容を公開いたします。CSSメタ言語そのものの説明よりも、社内導入の為に必要な内容が中心となります。 アジェンダ どんなものがあるか 導入の背景と目的 はてなでの選択 何がやれるか どう使うか 事例・実演 運用ルール 今後の展望 どんなものがあるか Sass(scss,sass) http://sass-lang.com/ Less http://lesscss.org/ Stylus http://learnboost.github.com/stylus/ Tass http://cho45.github.com/tasscs
CSS で作るスマートフォン向け片手操作メニュー
ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。 久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。 CSS で作るスマートフォン向け片手操作メニュー サンプル 現在最新版の Firefox
IE 9以下に存在するセレクター数制限にはまった
IE 9以下に存在するセレクター数制限にはまった 開発中にいきなりCSSが壊れて原因を探っていたらこれに行き着きました。IE 9以下では1つのCSSファイル当たり4,095個までしかセレクターを認識しない。4,096個以上は無視される。ええええ。。 SCSSだと割とカジュアルにセレクター数が増える CSSは出来るだけ1ファイルにまとめたい（リクエスト数削減のため） との組み合わせがやばい。SCSSはセレクターが他のページに影響しないように以下のように書いていました。 // 共通部分 @mixin foo { color: red; .foo { font-size: 2em; // たくさんの指定… ... } } // 影響範囲を以下のページのみに限定したい #page-a { @include foo; } #page-b { @include foo; color: yellow;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS でフォームの値を読む
ST2: Hayaku ja
The Sexy Assassinで紹介されてるCSS HTML Attribute Readerがどこまで危険か検証してみた
CSS3D Clouds
Grad3
