[B! shadow] tarchanのブックマーク

[CSS]エレガントからレトロまで、text-shadowを使った美しいエフェクト集

text-shadowを使った美しい4種類のエフェクトを紹介します。エフェクトはCSSのみで、もちろん画像は使っていません。 HTML <h1 class="elegantshadow">Elegant Shadow</h1> CSS まずは、各見出し共通のスタイルシートから。 h1 { font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "Apple Gothic", sans-serif; font-size: 92px; padding: 80px 50px; text-align: center; text-transf orm: uppercase; text-rendering: optimizeLegibility; } Elegant Shadow用のスタイルシートです。 .eleg

tarchan 2013/03/23

css
shadow

リンク

ページに美しいシャドウを加え、奥行きを与えるスタイルシート -Depth | コリス

ブラウザ上枠のすぐ下、ページの上部に、いい感じのシャドウを加えるスタイルシートを紹介します。 Chrome, Safari, Firefox, Operaでご覧ください、IEは9+で。 Depth 実装は簡単で、HTMLは特に変更することなく、下記のスタイルシートを加えるだけです。 position: fixed;なので、スクロールしてもシャドウが表示されています。 body:before { /* top shadow */ content: ""; position: fixed; top: -10px; left: -10px; width: 110%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -ms-box

tarchan 2013/02/27

css
shadow

リンク

ドロップシャドウのバリエーションを増やしたい人用、ボックスに美しいさまざまなシャドウを適用した画像素材

昨日の記事でも扱ったシャドウの美しい繊細な画像素材を紹介します。シャドウも単にボックスの下につけるだけでなく、さまざまなパターンがあります。

tarchan 2013/01/11

css
shadow

リンク

アドビの新ツール「Shadow」は、モバイル用Webアプリ開発者必須のツール

モバイルデバイス用のWebサイトやWebアプリケーション開発で大変なものの1つが動作確認です。何台ものデバイスを机の上に並べて、ひとつひとつ確認しなければなりません。アドビシステムズのAdobe Labsが公開した「Adobe Shadow」は、そうした苦労をしているデベロッパー、デザイナーにとって手放せないツールになるでしょう。複数デバイスに対する同時表示とリモートインスペクション Shadowがどんなツールなのか解説用ビデオの説明を紹介しましょう。 iPhoneアプリのShadowを起動すると番号が表示されます。その番号を、MacOSかWindows用Chromeブラウザのエクステンションとして配布されているShadowに入力します。これで、ChromeブラウザとiPhoneがペアになりました。同じように、Android用ShadowもChromeブラウザとペアにすることができ

tarchan 2012/03/08

＞複数のモバイルデバイスで問題なく表示されているか、崩れていないかが、PCの操作だけで次々とチェックできる

リンク

CSS box-shadow "inset" and blur (tests, examples)

zur Version in deutscher Sprache see also: requestAnimationFrame (one-line polyfill) -webkit-prefixes are safe to remove CSS cursors -webkit-box-shadow -moz-box-shadow { box-shadow: inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? && <color>? ] } CSS 3 box-shadow property, inset keyword and spread radius test case The examples on this site don't use -webkit- or -moz- prefixes. As

tarchan 2012/02/10

css3
shadow

リンク

box-shadowを極めて「Mac風UI」を作る！ (1/6)

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