StartUp Sass + Compass [基本と活用]1. 第１回 Creators Meetup : StartUp Sass+Compass ∼基本と活用∼ 大竹孔明 Sunday, 24 February 13 2. 大竹 孔明 こうめ コーディングを中心に Twitter : @Bamboo_C Web制作をしています Facebook : komei.otake Sunday, 24 February 13
![StartUp Sass + Compass [基本と活用]](https://cdn-ak-scissors.b.st-hatena.com/image/square/7768d8b0c259cc3fe69178f4113b7eb1890d4d61/height=288;version=1;width=512/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2Fsasscompasscmujp01-130223095651-phpapp02-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds)
[CSS3]擬似要素とbox-shadowを駆使したエレメントデザインのコツ(サンプルコード付き)
先日擬似要素のまとめを書きましたが、用途の説明に留まり不完全燃焼だったので…今回それを使った表現のコツなんかを突き詰めてみました。サンプルコード付きですー！★ 擬似要素で出来ることを考えていて、先日[CSS]擬似要素の実用的な使用用途のまとめ – WEBCRE8.jpというまとめを書きましたが、やっぱり自分で作ったりしたかったですｗ 今回は実際に擬似要素などを使ってCSSのみでどんな表現が出来るのか、どこが難しいのか、どんなことなら出来るのかを掘り下げてみました。その過程で出来たサンプルも公開しますー。 まずは枠線の作り方。通常枠線はCSSのborderプロパティを使い、値にdoubleを設定する事で二重線が出来ます。ここではそれにバリエーションをつける方法を解説します。 デモ：box-shadowによる実線のボーダー box-shadowで実線を作れる borderで枠線をつけるところ、
![[CSS3]擬似要素とbox-shadowを駆使したエレメントデザインのコツ(サンプルコード付き)](https://cdn-ak-scissors.b.st-hatena.com/image/square/7d32ad08c42abf3adf6023a2cf5a9740723afbdb/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F02%2Fcss-design-sample-02-150x150.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
