H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -
HTMLはh1要素だけで、CSSの「border」や「box-shadow」「transform」「linear-gradient」、擬似要素の「:before」や「:after」を使った見出しデザインをご紹介します。まずはサンプルをご覧ください。 サンプルページ » 01.切り取り線 紙を切り取ったようなデザインです。 サンプルとソースを見る » ポイント垂直方向の影のオフセット距離を設定しただけでは、左右両脇にも影ができてしまうので、一旦5px下に影をオフセットしたうえで、広がり距離を負の値(-4px)にし縮小することで、上部の影のみを残しています。 border-top:1px dashed #aaa; border-bottom:1px dashed #aaa; background:#eee; text-shadow:1px 1px 0 rgba(255,255,255,1);
[CSS]角丸を使用しないで、四隅をすっきりみせるスタイルシート | コリス
divで実装したパネルの四隅を1px欠けにして、角をすっきりみせるスタイルシートをonderhond.comから紹介します。
bodyに62.5％と指定する方法 - purazumakoiの[はてなブログ]
これもWeb Directions East 2008に参加した人から紹介された フォントサイズをブラウザ間で統一するためのTips なんでも業界では有名な、ダン・セダーホルムという人がこのやり方でやっているらしい bodyに62.5%と指定すると何がよいのか？ ブラウザのデフォルトサイズは何もしないと16pxなので 16px × 0.625 = 10px という風にまず基本サイズを10pxにする。 で、12pxで表示したかったらfont-size:1.2emとか、px単位で考えれるようになる。 直感的に指定できるとここが味噌みたい。 例 body { font-size: 62.5%; } p.text1 { font-size: 1.2em; } /* 12px相当 */ p.text2 { font-size: 1.4em; } /* 14px相当 */ 参考 RedLine Mag
![bodyに62.5％と指定する方法 - purazumakoiの[はてなブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/1a33c6a8fe3a04f712c3947a8dc9a720520819a9/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F12704538227038789114%2F11696248318755873160%2F1374114784)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
borderプロパティを使用した華麗なる四つのエフェクト | コリス
