[B! box-shadow] hama_shunのブックマーク

hama_shun id:hama_shun

box-shadowに関するhama_shunのブックマーク (9)

CSS Box Shadow Effects - Demo
CSS Box Shadow Effects - Demo View Sass version Effect 1 Effect 2 Effect 3 Effect 4 Effect 5 Effect 6 Effect 7 Effect 8 Return To Article
hama_shun 2012/03/03
box-shadow

css3
リンク
Two-Tone Borders with CSS3
We love texture at Paravel. When you settle on a good texture, there’s nothing better than a slighly embossed horizontal rule to give a letterpress like feel in between sections. Typically, we’d use a 1×2px image based approach —background-images on nested DIVs (CSS2) or multiple background-images (CSS3)— to accomplish this effect. Challenging ourselves to reduce HTTP Requests, we came up with a s
hama_shun 2011/06/25
2px の立体感あるラインをCSSで実装

border

box-shadow
リンク
nikki.: Safariでborder-radius＋box-shadowを狂ったように使うとバグ
2011年4月25日月曜日 Safariでborder-radius＋box-shadowを狂ったように使うとバグ css3のborder-radiusとbox-shadowを使って☁にしてみました。これはchrome, firefoxなどの表示です。問題なくくも！もくもくも〜コードは以下のとおり。 ==== html ==== <span class="kumo"></span> ==== css ==== .kumo { display: block; width: 120px; height: 120px; background: #fff; border-radius: 60px; -moz-border-radius: 60px; -webkit-border-radius: 60px; box-shadow: -80px 10px 0 -30
hama_shun 2011/04/26
隣のお姉さん

border-radius

box-shadow

css3
リンク
[CSS]box-shadowを使って洗練されたエフェクトを加える二つのテクニック
CSS3の「box-shadow」を使用して、ウェブデザインに洗練された美しいエフェクトを加えるテクニックを二つ紹介します。 How to create slick effects with CSS3 box-shadow デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 box-shadowプロパティとはページ全体に奥行きを加えるエフェクト紙がめくれたようなエフェクト対応ブラウザ box-shadowプロパティとは「box-shadow」は、ボックス要素の内側・外側に多数のシャドウを加えることができるプロパティです。フォーマットは下記のようにオフセット、サイズ、ブラー、カラーの値を指定します。 <shadow> = inset? && [ <length>{2,4} && <color>? ] 簡単な例をみてみましょう。 box-shadow: 3px 3px
hama_shun 2011/04/19
box-shadow

コリス
リンク
box-shadowを極めて「Mac風UI」を作る！ (1/6)
box-shadow プロパティは、CSS3の「Background and Borders Module Level3」で定義されているプロパティだ。ボックスに対して1つもしくは複数のシャドウを適用できる。今回のCSS3道場では、box-shadowプロパティをWebデザインに取り入れる具体的な方法を紹介しよう。 box-shadow の記述方法 box-shadowプロパティの値は、距離＋色で構成される。基本的な記述方法は以下のとおりだ。
hama_shun 2011/02/17
css3

box-shadow
リンク
[CSS]さまざまなデザインのドロップシャドウを適用するチュートリアル
CSS2の疑似要素を使用することで、HTMLを汚さずに、さまざまなデザインのドロップシャドウを簡単に適用することができます。その美しいドロップシャドウのスタイルを適用するチュートリアルを紹介します。画像の使用は一切ありません。 CSS drop-shadows without images デモページ [ad#ad-2] デモの対応ブラウザは:before, :after, box-shadowなどを使用しているため、Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+ です。下記に、デモにある5つのドロップシャドウを紹介します。 HTML HTMLはdiv要素にスタイルシートを適用します。 5つのドロップシャドウはclass名を変更するだけです。 <div class="drop-shadow round"> <h1>CSS drop-sh
hama_shun 2011/01/06
コリス

チュートリアル

box-shadow
リンク
Matt Hamm on about.me
Matt HammDesigner, Director, and Small Business Owner in Jávea, Spain Matt HammDesigner, Director, and Small Business Owner in Jávea, SpainHire me Creative Director and co-founder of Supereight Studio Matt Hamm is a British designer currently based in Spain. With over 30 years experience in the design industry Matt has established himself as a sought-after creative professional.
hama_shun 2010/12/08
css3

box-shadow
リンク
CSS3の-box-shadowで個人的にハマったところ - なんというていたらく
最近よくCSS3のbox-shadowを使ったサイトをよく見る。むしろ使ってないサイトはないんじゃないかってくらい使われている。 TwitterとかBloggerとかmixiとか... 地味だから気づかない人は気づかないだろうけど。使ってみて2点ハマったのでメモ。 Firefoxでは横方向のオフセットを0にしても、横方向に影がついてしまう症状影を付けたボックス要素をwidth:100%とかにしてると、横スクロールが発生するので困ったことになる。対策ぼかし分、横方向のオフセットをマイナス値で指定してあげる。 -moz-box-shadow: -3px 1px 3px #000; Chromeで影が表示されない症状 webkit-box-shadowを指定しているのに、Chromeでは影が表示されない対策 -moz-box-shadow: 1px 1px 3px #000;　/
hama_shun 2010/11/17
Firefox で横スクロールが出るアレ

box-shadow

firefox
リンク
1