IDEA * IDEAドットインストール代表のライフハックブログ
超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル:phpspot開発日誌
How to Create CSS3 Speech Bubbles Without Images JavaScript & CSS SitePoint Blogs 超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル。 吹き出しというと実装には若干階層を作ったマークアップが必要と考えますが、CSS3を使うと<p>だけで実現できるようです。 次のような吹き出しも、「<p class="bubble speech">SitePoint Rocks!</p> 」というシンプルなマークアップで実現出来ます。 影もついてますね。 角丸だけなら border-radiusで簡単に実現できそうですが、角のとんがったやつはちょっとしたハックを使っています。 border プロパティで枠線を設定し、左と上の線のみに色をつけることで三角形にしてます。それを２枚重ねることでとんがった
CSSでリアルでクールなドロップシャドウ効果を描画するサンプル例色々:phpspot開発日誌
CSS drop-shadows without images ? Nicolas Gallagher CSSでリアルでクールなドロップシャドウ効果を描画するサンプル例が色々公開されています。 一昔前なら、どう考えても画像を使っていると思ってしまうこうしたグラフィックもCSSで実現できてしまいます。 パターンも多くて実用的です。ヘッダ、メニュー等、ありとあらゆる部分に応用できそう。 画像編集ツールは一切不要です。 例えば、1個の要素を見てみましょう。 HTML では <div> にclassをふって中身は<p>のみだけというのに、これだけのデザインが実現します。 当然、要素を回転させることも出来ますが綺麗に描画できています。 なんとも夢のような話ですが、CSS3対応の Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+ という大体の
美しいデザインのECサイト35 – creamu
Eコマースサイトを綺麗にデザインしたい。 そんな時に参考になるのが、『35 Beautiful E-Commerce Websites』。美しいデザインのECサイト集です。 気になったのをいくつかご紹介しますね。 Blik 手作り感とテクスチャが美しいBlik Ten Little Monkeys メニューデザインとラフなラインが特徴のTen Little Monkeys ’47 テクスチャとグラデーションが美しい’47 The Famous 4th Street Cookie クッキーの画像を使ったドロップダウンメニュー、スピード感と動きの気持ちいいスライドギャラリーなどが優れているThe Famous 4th Street Cookie Twelve South Appleのアクセサリを販売しているTwelve South。商品がどれも魅力的。スライドギャラリーの動きも斬新 その他にも
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]画像を使用しないでもCSS3ならここまでできる実用的な実装サンプル
