タグ ボックスシャドウ
人気順 5 users 10 users 50 users 500 users 1000 usersCSSで面倒なコード、HTML5の新要素やスニペット、FacebookのOGPやTwiterカードなどのコードを生成できるオンラインツール | コリス
CSSで面倒なコード、アニメーションやグラデーションやボックスシャドウなど、実装の結果を見ながら値を調整してコードを生成でき、HTML5の新要素やよく使うスニペット、FacebookのOGPやTwitterカードやmic ...記事の続きを読む 続きを読む
面倒なシャドウもグラデも簡単に作成できるCSS3のボタンを作成するジェネレーター -CSS Button Generator | コリス
ボタンのカラー、グラデーション、角丸、ブラー、テキストシャドウ、ボックスシャドウなど、さまざまなスタイルを簡単に適用できるCSS3のボタンを作成できるオンラインツールを紹介します。 CSS Button Generator 使い方は簡単です。 ボタンのColor, Size, Shadow(text), Shadow(button)のスライダーを変更すると、リアルタイムにボタンにデザインが反映され... 続きを読む
CSS3のボックスシャドウを使って写真のフチの装飾をするサンプル作りました。【サンプルコード付き】 | HTML5でサイトをつくろう
写真ブログcruzinで紹介している写真に背景画像で影をつけていますが、写真のブログとして作った「cruzin」では正方形型の写真用のフチ3パターンと長方形型の写真用のフチ3パターン、計6パターンのpng画像を背景画像としてあらかじめ用意しそれぞれにclass名をつけ指定しておきました。そしてフチをつけたい写真に先ほど用意したclassを指定することで写真のフチを表現していました。 写真ブログcr... 続きを読む
[CSS]画像に美しい角丸やボックスシャドウ、グラデーション、アニメーションを適用する方法と注意点 | コリス
最近のブラウザで生じる問題点 画像に角丸やドロップシャドウを適用すると期待通りにならないことがあります。これはChrome, Safari, Firefoxなど、最近のブラウザでも生じます。 Chromeでの表示 デモでは「border-radius」と内側に「box-shadow」を適用していますが、Chrome, Safariではキャプチャのように欠けて表示されてしまいます。 また、Firef... 続きを読む
[CSS]画像に美しい角丸とボックスシャドウを適用する方法 | コリス
img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ(Safari)のそれぞれにCSS3の角丸とボックスシャドウを適用す... 続きを読む
[CSS]実例から学ぶCSS3の効果的な使い方 | コリス
CSS3の角丸、テキストシャドウ、ボックスシャドウ、RGBA、グラデーションなどを効果的に使用したサイトをSix Revisionsから紹介します。 Examples of CSS3 in the Wild 下記は各 [...] 続きを読む
[JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3 | コリス
IE6/7/8のブラウザでも角丸やボックスシャドウなどCSS3のプロパティのいくつかが使えるようになるbehaviorスクリプトを紹介します。 .box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari and Chrome */ border-radius: 15px; /* Oper... 続きを読む