Back in the ancient days of fixed-width web design, adding a drop shadow to an element used to be a matter of exporting an image containing the shadow from Photoshop and placing it as a background image on the element. Job done. However, if you want some flexibility (as many of us have always wanted) it isn’t quite that easy. Sure, if you have a straight drop shadow that can be created with a CSS
2011年の9月に「CSSとSVG filterでガラスっぽい効果をつける」というのを書きましたが、これはFirefoxのみを対象としたものでした。 そこで今回はできるだけ多くのブラウザに対応したものを作ってみます。 完成品Frosted glass effect with CSS & SVG 背景画像にはWetFoto.comによる#246 Wetlook with Beautiful Brunette in Leggings and Jacket. Girl in black jacket, white wetlook leggings and skirt in boots, get wet fully clothed in the sea.を使用しています（リンク先はFlickrです）。 この画像はCC BY-NC-SA 2.0でライセンスされています。 背景画像にはBeryl Ch
半透明のパネルにテキストを配置したり、ナビゲーションを半透明にしたりなど、ウェブデザインでよく利用される透過のエフェクトの効果的な使い方と注意点を紹介します。 Using Transparency in Web Design- Dos and Don'ts 下記は各ポイントを意訳したものです。 はじめに コントラストを作るために透過を使う イメージの重要な部分は隠さない さまざまなレベルの透明度を使う 透過するとテキストが読みやすくなるとは限らない 透過を使うのは少しのスペースに 激しいコントラストの画像には透過は置かない 透過をアートとして使う 透過を飾りとして使用しない 背景に透過を使う 同時に多くの透過のエフェクトは使わない 循環するイメージに透過を使用する おわりに はじめに 透過を使ったウェブデザインは非常に美しいですが、慎重にデザインする必要があります。透過はカラーのブロック・
この記事は賞味期限切れです。（更新から1年が経過しています） 先日リニューアルのご報告をした Matsukaze.で使用している ブラー効果をつけたスライダーで、実験的に採用した手法を記録しておきます。 基本的な仕組み ぼかし画像の透明度について 簡単なデモ まとめ 基本的な仕組み まずスライダーに使用する絵を連結して一枚の画像にしたものを作成。 そして、その画像を横にブレさせた画像を別途用意します。 ぼかし画像は、例えばFireworksなら「移動（ぼかし）」を水平方向にかけ、 さらにその上に反対方向の「移動（ぼかし）」をかけたものを透明度50%ぐらいで重ねています。 ぼかしの強さはコンテンツの内容・大きさとご相談で、いい按排を探ります。 HTML上ではその2つの画像を、ぼかし画像を上にして重ね合わせて配置し、 スライダーが動く時にぼかし画像の透明度を変更してスピード感を出します。 基本
A tutorial about how to create a simple expanding overlay effect using the CSS clip property and CSS transitions. Our previous article, Understanding the CSS Clip Property by Hugo Giraudel offers a great overview of the CSS clip property and the rect() function. Today we want to explore the practical side of it a little bit more. We are going to create a neat and simple effect for revealing some e
By Louis Lazaris / November 13, 2012 / 14 Comments Updated: August 7, 2022 In most cases, when you place an element on the page in your markup, if you don’t specify any special styles, it will occupy exactly the same space that it appears to occupy visually. In other words, if you place a box sized at 200px by 200px on your page, anything you place after it in the source order, with no further sty
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
