CSS(スタイルシート)のテクニックとトピックのまとめ

どういう需要があるのかはわかりませんが、画像ファイルを一切使わずにCSSのみで作ったアイコン集「Peculiar」です。ページ上ではサンプルとして16×16ピクセルですが、実際にはいくらでも拡大が可能となっています。 詳細は以下から。 Peculiar http://lucianmarin.com...

8になってもCSS3が使えないIEですが、CSS3を使わなくてもいろんなデザインエフェクトを表現できます。 （記事中CSS3のトリックも出てきますが） どれも簡単に、すぐにできるものばかりなのであなたのWebサイトのデザインにもちょっとスパイスを加えてみてはいかがですか？ 自分のブログなどでやって...

「CSS3 Playground」はCSS3を自動生成してくれるジェネレータです。 角丸やシャドウなどの調整を手軽に行え、コードを生成してくれます。 真四角の図形にほどこせる装飾ならお任せって感じですね。 以下に使ってみた様子を載せておきます。まず「CSS3 Playground」にアクセスしまし...

クロスブラウザ対応、CSS3をベースにして作成したナビゲーションのテンプレート集を紹介します。HTML/CSSの初心者の人でも簡単に利用できると思います。CSS Menu -Only for CSS現在四つの [...]

1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design and inspirational articl...

「Peculiar」なるアイコンセットがあるのですが、執念で作り込んでいる感が素晴らしいですよ。↑ こういうアイコン。一見画像っぽいですが、全部CSSで描かれています。↑ マークアップはこんな感じ（HTML）。↑ さらにCSS。まぁ、よくぞここまで作り込んだと感心というかなんというか。なお、実際に...

最近TODOがたまりまくってうまく消化できません‥。 8月後半になれば落ち着くはずー。今日は旅行に行ってます。 さて、今週のネタ帳TOPはCSS3関連。 CSS3の角丸+グラデーションを簡単に作成できるジェネレータ「CSS Corners」という記事を以前書きましたが、 こういったサイトってたくさ...

一枚の画像で、サイズ指定があるものやないものなど異なるサイズのボックスいっぱいに背景を表示するスタイルシートを紹介します。CSS3 Background Images – 100% width/height of container デモ上記三つのデモは上から順に、widthとheightの指定あ...

繊細のポイントは「気がつくかな？」ぐらいにすること。 そんなわずかな繊細をウェブデザインに加えるスタイルシートを紹介します。Take Advantage of CSS3 to Achieve Subtle Design デモページ下記は各ポイントを意訳したものです。はじめに繊細の大事なポイントは人...

デモのキャプチャ（100%） ※クリックで全表示実装は下記のようになります。HTML疑似要素「:after」を使用するため、spanでimg要素を内包します。疑似要素「:after」を使用して、スタイルを適用します。span,img{padding:0;margin:0;border:0;}.fa...

Webkit系のCSSの表現力（というかCSS3か）は半端ないですが、CSSだけで描いたiOSアイコンが紹介されていましたよ。Safariで見ると一番良いので是非どうぞ。↑ 画像は一切使われておりません。Round Corners、Shadows、Gradientsなどなどがフル実装されているよう...

ツールチップの基本スタイルです。.tooltip {border-bottom: 1px dotted #000000;color: #000000; outline: none;cursor: help; text-decoration: none;position: relative;}.to...

CSS3のマルチプルバックグランドを使用せずに、CSS2.1の擬似要素を使用して一つの要素に複数の背景やボーダーを配置するテクニックを紹介します。Multiple Backgrounds and Borders with CSS 2.1CSS3のサポートは必要なく、対応ブラウザはCSS2.1の擬似...

Over the last years we’ve got a pretty good understanding of what CSS does, how it works and how we can use it for our layouts, typography and visual...

スクリプトを使用しないで、ツールチップがふんわりとアニメーションで浮かび上がるスタイルシートをAdmix Webから紹介します。Creating a Bubble Coda Style with CSS3 デモページ使用しているのはCSS3で、ふんわりと浮かび上がるアニメーションはChrome, ...

ここ数年でたくさんの情報が揃ってきたCSS3。古いブラウザでは対応されていないため、まだまだ一般に普及するまでは時間がかかってしまうのかもしれませんが…。CSS3を使えば、ウェブデザインの可能性をさらに広げてくれることは間違いありません。デザイナーの皆さんは、是非CSS3でどんなことができるの？っ...

『 webkit-marquee関連のプロパティ初めて見た 』

画像は一切使ってない！？CSS3だけで描いた“ドラえもん”がすごい2010年5月6日 14時05分コンピュータ・IT文：飯塚朋子こちらの“ドラえもん”のイラスト、どうやって描かれていると思いますか？PhotoshopやIllustratorなどの画像編集ソフトで描かれているようにも見えますが、実は...

Adobe の CS5 はなんか凄そうですね。「でもお高いんでしょ？」「ハイ、とても！」 いま会社で使っているアプリは「Macromedia」の Dreamweaver8 と Fireworks8 です。結構バリバリ制作作業していますが、別に不便に感じてないしなー、と思っている sakai です。...

CSS3アニメーションを使用して、アイコンがアニメーションでズームするスタイルシートをCSSplayから紹介します。CSS3 – The future now – menus デモ対応ブラウザはCSS3アニメーションに対応しているSafari, Chrome, Operaで、滑らかなアニメーション...