buttons - jsdo.it - Share JavaScript, HTML5 and CSS
<button>Push!</button><button>Push!</button><button>Push!</button><button>Push!</button> * { margin: 0; padding: 0; border: 0; } body { background: #2A2A2A; } button { font-size: 30pt; padding: 24px; margin: 5px; background-color: #383838; color: rgb(5, 182, 176); /*text-shadow: #666 0 1px 1px, #222 0 -1px;*/ box-shadow: #222 0 2px, #000 0 2px 6px 1px; } button:hover { box-shadow: #222 0 2px, #000
CSSだけでAppleっぽい立体感のある影を落とす - jsdo.it - Share JavaScript, HTML5 and CSS
CSSのbox-shadowを使ってボックス要素にアップルのような影をつけて立体感を出します。 ### ポイント ポイントは 擬似要素:after で影を作るための擬似要素を加え、 border-radius で要素を丸くすることで影も丸く柔らかくなります。 この擬似要素の高さは top と bottom の差が高さになっています。 .box { margin: 1em auto; width: 60%; padding: 3em; border: 1px solid #cacaca; text-align:center; position: relative; background: #ffffff; } .box:after { z-index: -1; position: absolute; content: ""; overflow:hidden; bottom: 2%;
3Dグラフィックデザインのまとめエントリ
Ultimate Guide to Business Cards: Infographics and Other Resources
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
