:before, :after擬似要素 の使い方を基本からマスターするためのチュートリアル | コリス
擬似要素はCSS1から存在するもので、ここで解説する「:before, :after擬似要素」はCSS2.1でリリースされたものです。 CSS1では「:first-letter, :first-line」です。 擬似クラス、擬似要素 擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。 コロンを使用するものは他に、「:hover」などの擬似クラス、CSS3ではコロンを二つにした「::before, ::after」などがあります。 サポートブラウザブラウザ 「:before, :after擬似要素」をサポートするブラウザは下記の通りです。 IE8+ Firefox3.5+ Chrome Safari4+ Opera6+ IE8+とすべてのモダンブラウザと言ってよいでしょう。 非サポートブラウザへの対応 IE7にも「:before, :after擬似要素」を利
CSS3でシャレオツなリストを作るチュートリアル:phpspot開発日誌
CSS3 ordered list styles - RedTeamDesign CSS3でシャレオツなリストを作るチュートリアル。 list-styleを無効にしてブラウザ標準の数字部分をやめて、content: counter(li), counter-increment といったプロパティを使って数値部分を独自にデザインしています。 リスト部分の数字のデザインはなかなか難しかったと個人的に記憶していますが、こうした方法でやれば思い通りのリストデザインが作れるんですね、ということでメモ。 CSSを使ったテクニックはどこまで進化するんでしょうね。 関連エントリ CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Transit」 アニメーションするバナーをCSS3で作るチュートリアル フルスクリーン背景がスライドショーになるCSS3サンプル CSS3で出来たクー
CSS3やHTML5などのコードを書く様子を再現し、徐々に 出来上がっていく様を見ながら学べる チュートリアルサイト・TheCodePlayer - かちびと.net
一つの形として面白かったのでシェア。 実際にコードを書いていきながら徐々に 出来上がっていくさまを見ながら学べる チュートリアルサイト。動画のチュート リアルより見やすく頭に入りやすい気も しないでもないです。 こういう形で学べるのは面白いですねー。はじめてみるタイプのチュートリアルサイトです。よく、書いたコードがインタラクティブに反映されるサービスがありますが、そのチュートリアル版という感じ。 ブログ形式でチュートリアルを公開しています。 説明するより見た方が早いですね。以下のようなチュートリアルです。Play Walkthroughをクリックするとコードを打っているのが分かります。右はビューエリア。 Make a simple cloud in CSS3 こういう発想は全然なかったですけど、Youtube等の動画で見るより分かりやすい気はします。動画は音声も使ええるのが魅力でしょうけど
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
