CSS3 の text-shadow を使って文字を強調したり装飾したり | TM Life
久々に CSS3 についてのエントリーです. 以前書いた, 『CSS3 の display:box; を使ったフレキシブルな段組みレイアウト』 が大変好評だったので, CSS3 関連のエントリーもちょくちょく投稿していこうかなと思います. 今回は, text-shadow についてまとめました. text-shadow はその名の通りテキストに影をつけるプロパティです. しかし, そんな単純なプロパティだったらわざわざエントリーにしません. text-shadow プロパティはオフセット値やぼかし具合が指定可能であることはよく知られています. が, なんとこれいくらでも指定できちゃうんです!! コンマ区切りで! 複数の text-shadow を指定することで文字をぼかしたり強調したり光らせたり燃やしたりといったさまざまな装飾が簡単に行えます. そんな活用例をサンプルとしてまとめましたので
HTML5で組んでるならこの魔法のjsも入れておけっていう話
現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS
[CSS]くるっとして、ゆらゆらしてぴたっと止まる素敵アニメーションを備えたメニュー -CSS Swinging Panel Menu
ホバー時に、子アイテムが上からくるっとスイングして、ゆらゆら揺れて、ぴたっと止まって表示する素敵なアニメーションを備えたメニューを実装するスタイルシートを紹介します。 CSS Swinging Panel Menu ゆらゆらとした動きはCSS3アニメーションで実装されています。 スクリプトは実装には使用されていません。 HTML リスト要素を入れ子にしたシンプルな実装です。 <div id="container"> <ul id="menu"> <li><a href="#">item 1</a> <ul> <li><a href="#">item 1-1</a></li> <li><a href="#">item 1-2</a></li> <li><a href="#">item 1-3</a></li> </ul> </li> <li><a href="#">item 2</a> <u
フェード・スライド・バウンド・フリップ・スターウォーズなど、CSS3アニメーションのコードを自動で生成するオンラインツール -liffect
フェード・スライド・バウンド・フリップ・スターウォーズなど、CSS3アニメーションのコードを自動で生成するオンラインツール -liffect
ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life
CSS3 と LESS でページ右上に表示するリボンを作ってみました. jsdo.it を使って Step by Step で作りながら解説しています. よかったら参考にしてください. Table of contents サンプル Step 00 – ベースとなる HTML を書こう Step 01 – CSS(LESS) の下準備 Step 02 – #tm .ribbon ミックスインを作ろう Step 03 – #tm .ribbon の中身を作っていこう サンプル 今回は下記のようなサンプルの作り方を解説していきます. up Step 00 – ベースとなる HTML を書こう リボンとして使う要素を div タグで作り, その中に 表示する内容を書きます. 今回はヘッダーとその説明の２行を h1, p タグで追加しました. <div class="ribbon"> <h1> <a
CSS の border プロパティを使って見出しを装飾しよう – シンプルな見出し | TM Life
『CSS の border プロパティを使って見出しを装飾しよう』 第１弾!(第４弾まであります!!) シンプルな見出し←今ここ ちょい派手な見出し ド派手な見出し(近日公開予定) 超有名サイトの見出し(近日公開予定) CSS の border プロパティを使って見出しを装飾する方法について紹介します. シンプルな見出しです. 中見出しから小見出しを想定して作りました. CSS もシンプルなので簡単に使えます. 色については, 並べたときに見栄えするように hsl を使って色相を 60度ずつずらしていますが今回のエントリーとは無関係なので気にしないで下さい. Table of contents サンプル Header Type 01 Header Type 02 Header Type 03 Header Type 04 Header Type 05 Header Type 06 サンプル
phiary
今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます. あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.
意外に簡単！CSS3を使ったシンプルな横メニューの作り方
CSS3をいくつか使ったシンプル横メニューの作り方を順番に説明してみます。特に目新しいものではないですが、CSS3をこれから勉強する人や使い方が分からないという人のお役に立てばと思います。 以前に「細部にこだわってみた！CSS3を使った美しい横メニューの作り方」というのを書きましたが、こちらの方が難しいと思います。 例によってCSS3はブラウザによって対応状況が違い、IE8以下だと今回紹介するCSS3プロパティに対応していません。他の主要ブラウザはよほど古いバージョンでない限り問題ないと思います。 ここら辺のCSS3の基礎について勉強したい方は「CSS3について知っておきたいことのまとめ」をご覧ください。 HTMLはこんな感じです。Internet Explorerだけ文字数の関係でIEと略させていただきました。 <ul id="menu"> <li><a href="#">IE</a><
「CSS3を使って美しく装飾されたテーブルの作り方｜Webpark」のサンプルを LESS で作ってみた | TM Life
昨日 に引き続き LESS 関連エントリーです. 「CSS3を使って美しく装飾されたテーブルの作り方｜Webpark」で紹介されていた, テーブルを CSS3 で装飾するサンプル. 非常に良く出来ていて見た目もコードもとてもキレイです. 今回は, このエントリーに触発されて, サンプルをパクってオマージュしてみました. ただパクったオマージュしたわけではなく LESS で作っていたり, 色々と私の都合の良いように変えてたりします. LESS だと変数が使えるのでベースとなるカラーを変更したり, 幅や高さの調整も超簡単にできますよん♪ サンプルは jsdo.it で作成したので, よかったら fork して色々とイジッてみて下さい. Table of contents サンプルを実行してみよう テーブルのメインカラーを変数化 linear-gradient を使ってヘッダーにテカリフィルター
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
実用的なスタイルシートのテクニックのまとめ | コリス
ご存知、ないのですか？CSSの優先順位