[B! 半透明] kuroaka1871のブックマーク

[CSS]OS X Yosemiteのように背景が透ける美しいパネルを実装するスタイルシート

昨日発表された2014年秋リリースのOS X 10.10 Yosem iteで採用予定の背景を半透明のブラーで透けさせる美しいパネルを実装するスタイルシートを紹介します。記事は一日遅れですが、スタイルシートは当日で、仕事が早いですｗ OS X Yosem ite Style UI ※Chrome, Safari, Firefox, IE11でどうぞ。コードは、簡略化するとこんな感じになります。実際のコードは上記ページを参考にしてください。 HTML タイトルのバーとコンテンツをdivで実装し、articleで内包します。 <article> <div class="title"> <h1>タイトル</h1> </div> <div class="content"> <p>コンテンツ</p> </div> </article> CSS 半透明のパネルのスタイルシートです。 *, *:aft

kuroaka1871 2014/06/09

リンク

背景固定で美しいブラーがかかった半透明のパネルだけがスクロールするスタイルシート | コリス

レスポンシブ対応で背景画像は固定表示、美しいブラーがかかった半透明のパネルだけがスクロールするコンテンツを実装するスタイルシートを紹介します。最低限の要素にしたデモ実装は、こんな感じになります。 HTML パネルはarticle要素で実装します。中身はテキストでも画像でもフォームでも何でもOK。 <body> <article> <h1>半透明の美しいパネル</h1> <p>洋酒といえば、誰でも最初に思い浮かべるのがウイスキー。いわば洋酒のシンボル的な存在なのだが、英語表記が［一般に〔米〕では Whiskey,〔英〕では Whisky.］であることはあまり知られていない。米英両国では、このスペルの差で自国産と輸入品を区別しているという。わが和製ウイスキーの“Whisky”という英国式表示は、手本にしたスコッチのフォルムに倣ったものであり、それ以上の意味はないようだ。カナ表記にしても、ご

kuroaka1871 2013/11/17

リンク

CSS filter プロパティで「半透明ガラス」効果を再現してみる

2つ前の記事、「Chrome Canary が dialog 要素に対応、ダイアログボックスの表示が簡単に」で、::backdrop 疑似要素に色々スタイル当てて遊んでたとき、::backdrop 疑似要素に対しては半透明の白いレイヤーになるようにスタイル当てて、その上で、CSS filter プロパティを使って画面全体をぼやかしたら、iOS 7 （Windows Aero ...）とかで使われてる、所謂「半透明ガラス」っぽい効果が出せるんじゃね？と思ってやってみました。実際に iPhone の Safari で表示してみた例が下記の画像です。ただし、dialog 要素や ::backdrop 疑似要素を使っちゃうと、現時点では Chrome Canary で、さらにフラグを立てないと動作しないっていう、ほとんどの人が試せない状態になってしまうので、今回は div 要素を J

kuroaka1871 2013/09/29

リンク

25 Examples of Websites with Transparent Backgrounds - Dezign Matterz

As designers try to become more creative with their web sites there have been a few inspiring trends appearing in web design. The use of a large photographic background within a web site is a common design being used currently. Using a transparency effect allows for the photograph to be seen fully but all vital information needed can be placed over the top. This creates a stunning visual effect wh