box-shadowを使って実用的で素敵なUIエレメントを実装するCSSのスニペットのまとめ
CSS3初心者でも簡単に利用でき、上級者でも実装のヒントになる、ページでよく使うパネルやボックス、ボタン、バーなどをbox-shadowを使って実装するスタイルシートのスニペットを紹介します。 10 Creative Techniques Using CSS3 Box Shadow 10個のスニペットは、Apple, Pinterest, Facebookなどで使用されているエレメントのHTML/CSSを簡略化したものです。 1. スクロールしてもバーを常に最上部に表示 2. サブナビゲーションのドロップダウン 3. シャドウを使った光沢が美しいボタン 4. 吹き出しスタイルの通知パネル 5. Appleのページラッパー 6. Appleのコンテンツボックス 7. Appleのフィーチャーリンク 8. 画像にさりげなくシャドウを添える 9. フォームの入力を目立たせる 10. エラステック
見出し要素をシンプルなHTMLで美しくスタイルするテクニックのまとめ | コリス
h1やh2などの見出し要素をシンプルなHTMLで実装し、美しいスタイルを適用するスタイルシートを紹介します。 Cool headings with pseudo-elements [ad#ad-2] デモ 実装 デモ デモは擬似要素だけでなく、background-clipなどのCSS3を使用しているため、Safari 5+, Chrome 7+, Firefox 3.6+, Opera 10+, IE 9+ でご覧ください。 デモページ 実装 HTML HTMLは非常にシンプルで、h1要素にclassを与えるだけです。 <h1 class="headline1">I took lessons</h1> ※デモは4つあり、classを変更するだけです。 CSS: 各デモ共通のベース body要素をメインのラッパーとして使用します。 h1要素にはfont-familyとsizeのみ共通で指定
12 Fun CSS Text Shadows You Can Copy and Paste
Typography is everyone’s favorite toy in web design. One particularly fun tool that CSS gives you to play with your type is text-shadow, which seems simple enough at first but can be used to create some remarkable effects with a little ingenuity and creativity. Today we’re going to run through several text-shadow examples that you can copy and paste for your own work. 2 Million+ Digital Assets, Wi
CSS Shadow Effects: Tips and Tricks
The art of incorporating drop shadows and inner shadows became a skill I acquired through my exploration of Photoshop’s Blending options. However, in the present era marked by the ascent of CSS3, the dependency on Adobe’s design tool to infuse a box with a drop shadow or an inner shadow has waned. In this contemporary landscape, a fascinating revelation emerges: the ability to craft exquisite CSS3
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
