CSSで美しいシャドウをつけるbox-shadowの書き方を紹介します。 少し大きめのシャドウを適用し、ネガティブに縮小させることで、通常のシャドウより少しだけ彩度が高くなり、要素がくっきり見えます。
CSSで美しいシャドウをつけるbox-shadowの古い書き方とこれからの書き方
CSSで美しいシャドウをつけるbox-shadowの書き方を紹介します。 少し大きめのシャドウを適用し、ネガティブに縮小させることで、通常のシャドウより少しだけ彩度が高くなり、要素がくっきり見えます。
[CSS]さまざまな要素に利用できる美しいシャドウ、カードやボタンをふわりと浮かび上がらせるスタイルシート
カードやボタンをはじめ、さまざまな要素をふわりと浮かび上がらせる繊細なシャドウを与えるスタイルシートを紹介します。 box-shadowを重ねがけした複雑なスタイルシートですが、スニペットに登録しておくと簡単に利用できます。 Multiple Shadows 繊細なシャドウを与えるスタイルシート カードにシャドウを与える ボタンにシャドウを与える デモ 繊細なシャドウを与えるスタイルシート シャドウはbox-shadowを使用し、複数のシャドウを重ねがけします。 カードやボタンなど、さまざまな要素に利用できるので、スニペットに登録しておくと便利です。 .shadow { box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 1
![[CSS]さまざまな要素に利用できる美しいシャドウ、カードやボタンをふわりと浮かび上がらせるスタイルシート](https://cdn-ak-scissors.b.st-hatena.com/image/square/cccac0355724bfe7dc9918bf680d2dec1a8da97b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017102401.png)
さまざまなデザインのボタンを最小限のHTMLで実装する、HTML5とCSS3のテクニックのまとめ
.alpha .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.8em 1.6em;font-weight:normal;border-width:0;border-style:solid;background:transparent;border-radius:0.2666666667em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:box-shadow 0.2s, transform 0.2s, color 0.2s} .alpha .btn:hover{box
意外と盲点だったCSS3の役立つ小技まとめ - コムテブログ
TL;DR リニューアルを行った時に、CSS3 で気づいたことや次回もまた使いそうなものなどを備忘録として書いておきます。基本的なものから見慣れないものまで。 CSS3 オートフィルの背景色を解除 chrome にて、テキストボックスのオートコンプリートした際、背景色が黄色になります。これを消したかったので を追記。色指定の箇所に任意の色を指定できますが、とりあえず白色で。 無事消えました。 Coderwall | Change background color for autocompleted inputs in Google Chromeでinputがオートフィルされてると背景色が黄色になるのを回避 – CSS | ごろつきめも backface-visibility で Chrome のチラつきを解決 fadeIn などのアニメーションを取り入れると Chrome でヘッダーやサイ
IEに互換表示をさせないX-UA-Compatibleの指定 - loconoco
IEはバージョンごとに表示方法（レンダリング）がガッツリ変わると言う、とてもやっかいなブラウザです。 また、各バージョンごとに下位バージョンの表示方法を再現できたり、互換表示なる表示方法があったりと、ありがた迷惑この上ない機能が搭載されています。 このサイトのトップページをIE10で表示すると・・・ アドレスバーに紙が破けたようなアイコンが表示されます。そしてこのアイコンをクリックすると互換表示に切り替わり、再レンダリングがはじまります。 box-shadow、background-sizeなどのCSSが効かなくなってしまいました。 また同じアイコンをクリックすれば互換表示が通常表示に戻ります。もし通常表示に戻さなかったか場合、IEは設定を覚えてしまい、再度同じURLにアクセスすると、また互換表示になってしまいます。IEを終了して再起動しても戻りません。 新バージョンのIEを使用しているユ
[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ
Creating Different CSS3 Box Shadows Effects [ad#ad-2] デモ 実装 デモ デモはbox-shadowに対応した下記のブラウザでご覧ください。 対応ブラウザ Internet Explorer 9.0+ Firefox 3.5+ Chrome 1+ Safari 3+ Opera 10.5+ デモページ [ad#ad-2] 実装 基本となるHTML 8つの各デモのHTMLの基本は同じで、class名が異なるだけです。 <div class="box effect"> <h3>Effect</h3> </div> 基本となるCSS div要素とh3要素の基本となるスタイルです。 .box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height
[CSS]box-shadowを使って、三連リングのようなカワイイ囲いを作るテクニック
三連リングのようなカワイイ囲いをスタイルシートで実装するテクニックを紹介します。 左のSingleだと、divは一つだけ！ 左のSingleを例に、実装方法を紹介します。 HTML div一つにclassを加えます。 <div class="hoja">SINGLE</div> CSS 複数のリングは、box-shadowで作成します。アニメーションさせたくない場合は、keyframesは必要ありません。 ※利用する際は、ベンダープレフィックスを加えてください。 参考：面倒なCSS3のベンダープレフィックスを自動で付与するスクリプト -Prefix free .hoja { color: #dcdce2; position: absolute; top: 50%; left: 50%; margin-left: -180px; margin-top: -90px; width: 180px
![[CSS]box-shadowを使って、三連リングのようなカワイイ囲いを作るテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/bef7bf928dc917611c060c7f63ae5b39c925d844/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014112601.png)
Project Parfaitで尋常じゃない速さでpsdファイルからウェブサイトを組み立てる - 素人がプログラミングを勉強していたブログ
Project Parfaitとは、adobeが開発してるβ版の、ウェブサイト作成支援のサービス。これを使うと、.psdのデザインファイルからHTMLを書き起こすのが異常に高速になるので、オススメしておこうと思う。 具体的には、psdファイルをアップロードすると、psdファイルの要素がレイヤー別に選択できるようになる。わかりやすいように画像で実例を出すと（一部塗りつぶしてあるが） このようになる。 あとは、Copy Textをクリックするとクリップボードに文字が選択されるので、HTMLファイルを書きながら <li><a href="#">{テキストをペーストする}</a></li> のように書いて、その後、Copy CSSをクリックし li { /*CSSをペーストする*/ } のように、貼り付けて上記の画像の場合はfont-weightがおかしいのでboldに手動で直して、widthやh
CSS3を使ってできる画像まわりのエフェクトやスタイリング18
CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました 目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード（シャドウ編） 13. フェード（グラデーション編） 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレーム まとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません
[CSS]パタパタっと折り畳むアニメーションが気持ちいいナビゲーションを実装するテクニック
子アイテムをパタパタっと折り畳むアニメーションが気持ちいいナビゲーションを実装するスタイルシートのテクニックを紹介します。 デモページ 実装 HTML ナビゲーションの親のカテゴリはdivでまとめ、各子供はリストで実装します。 <div class="navbar"> <a class="menu" href="#">MENU</a> <div class="link large" href="#"> <span class="active"><i class="icon-twitter"></i>Twitter</span> <ul class="hover-bot"> <a href="">Reply</a> <a href="">Favorite</a> </ul> <ul class="hover-top"> <a href="">Follow</a> <a href="">Ret
[CSS]ボタンにぷるるんとかわいいアニメーションを与えるスタイルシート -Galatin effect
a要素にテキストを配置して実装したシンプルなボタンに、ゼリーのようにぷるるんとさせるアニメーションを与えるスタイルシートを紹介します。 ↓は、デモをアニメーションgifにしてみました。 Gelatin over button effect with Sass HTML HTMLは非常にシンプルです。 <a href="#" class="btn">Click Here</a> <a href="#" class="btn btn-secondary">Click Here</a> CSS スタイルシートは少々長いですが、こぴぺでそのまま利用できます。 Sass版は、Gelatin effectをご覧ください。 a.btn { display: inline-block; margin: 15px 15px 0; padding: .6em 1.1em; font-size: 26px; f
webnonotes.com - webnonotes リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
[CSS]ナイスアイデア！二つの繋がる要素を一つのドロップシャドウで処理するテクニック
div, p, aなどの要素を二つ繋げたものを一つのドロップシャドウで処理するスタイルシートのテクニックを紹介します。 上がborder:1px;の状態、下がbox-shadowで一つにした状態です。 Drop shadow for 2 elements preserving the intersection in CSS 凸型の要素はタブや上からコンテンツをひっぱりだす時によく使われ、デモではひっぱりだすトグル用に「Show / Hide」と書いてあります。 ※このデモではトグルとしての機能は実装されていません。 デモページ 実装は非常にシンプルです。 HTML 二つの要素はdivでもpでもaでもブロックとなる要素なら何でも構いません。ポイントは二つの要素を内包するdiv要素を設けることです。 <div class="block"> <div class="innerblock"> <p
[CSS]このホバーエフェクトかわいい！蝶番を軸にぷら〜んと開くCSS3アニメーション
Twitterのボタンをホバーすると、蝶番を軸に開くかわいいアニメーションを実装したスタイルシートのデモを紹介します。 パタリと開いた後、ぷら〜んとするのいいですね。 Hinged Twitter Button 実装は、こんな感じです。 HTML TwitterのアイコンにはFont Awesomeが使われており、アイコン、アカウント、蝶番をそれぞれspan要素で配置しています。 <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <a href="http://twitter.com/jonitrythall"> <span class="button"> <i class="fa fa-twitter"></i> </span> <span cl
[CSS]かっこいいアイデアが盛り込まれた横からスライドするナビゲーション
スクリプト無しで、コンテンツをスライドさせ、横からアニメーションで表示されるナビゲーションを実装するスタイルシートを紹介します。 このオフキャンバスのスタイルも少しずつ確実に進化してますね。 デモのアニメーション スライドの切替にはチェックボックスを使われており、ナビゲーションが表示される際には各アイテムが異なるタイミングでアニメーションします。 HTML コンテンツエリアはsection要素で、そこにナビゲーション表示のトグルとなるチェックボックスのラベルを配置します。ナビゲーションは、普通にリスト要素で実装します。 <div id="wrapper"> <div class="mobile"> <!-- トグルとなるチェックボックス --> <input type="checkbox" id="tm" /> <!-- ナビゲーション --> <ul class="sidenav"> <
Coveloping
box-shadowでふわりとした影をつくるCSSのジェネレーター、レスポンシブのチェック、アスペクト比の計算機、CSS/JSの軽量化など、たくさんの便利な時短ツールがありますが、それらの便利なツールを一つの場所にまとめたCovelopingを紹介します。 FacebookのOPGチェックやGoogle Mapsの地図生成ツールもあり、新しいプロジェクトを始める時にも役立つものが揃っています。 Coveloping 便利ツールは現在23種類、アスペクト比の計算や一つのカラーに黒と白を加えたバリエーションを生成したり、box-shadowでふわりとした影をつけたり、jQueryのアニメーションのエフェクトなどがあります。 これからもどんどん増えていくそうです。 その中から、いくつか紹介します。
jQueryを使った一定以上スクロールすると上に固定される横メニュー
最近、上部に固定された横メニューをよく見かけます。最初から一番上にあるものだと最初から「position:fixed」で問題ないと思いますが、最初は一番上にはなく、メニューがページの最上部までスクロールされた時点で固定されるものだとちょっと工夫が必要です。 今回はそんな横メニューをできるだけ親切に解説してみます。 今回のメインはjQueryで固定するところなのですが、一応今回のサンプルで使用したHTMLとCSSも解説します。 HTML よくあるタイプの普通のリストメニューです。 <div id="menu-wrap"> <ul id="menu"> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <l
box-shadowを使って実用的で素敵なUIエレメントを実装するCSSのスニペットのまとめ
CSS3初心者でも簡単に利用でき、上級者でも実装のヒントになる、ページでよく使うパネルやボックス、ボタン、バーなどをbox-shadowを使って実装するスタイルシートのスニペットを紹介します。 10 Creative Techniques Using CSS3 Box Shadow 10個のスニペットは、Apple, Pinterest, Facebookなどで使用されているエレメントのHTML/CSSを簡略化したものです。 1. スクロールしてもバーを常に最上部に表示 2. サブナビゲーションのドロップダウン 3. シャドウを使った光沢が美しいボタン 4. 吹き出しスタイルの通知パネル 5. Appleのページラッパー 6. Appleのコンテンツボックス 7. Appleのフィーチャーリンク 8. 画像にさりげなくシャドウを添える 9. フォームの入力を目立たせる 10. エラステック
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://indigonote.com/2011/04/26/css3-pie/