[CSS3] Tabs with Round Out Borders – 角と付け根を丸くしたタブ表現
CSS3の角丸指定を使って、角と付け根を丸くしたタブ表現。どうやって画像を使わずにコードだけで描画するかが説明されてます。角のところはいいとして、付け根を丸くする流れがなかなか興味深い。ソースコードも公開されているので導入も簡単そうです。こうしたTips記事なかなか読んでて楽しいです。
Tag Archives: CSS
[CSS3] 23 Creative Uses of CSS3 Text Effects to Enhance Your Web Presence – CSS3で描画するクリエイティブなテキストエフェクト
CSS3を使って描画する、クリエイティブなテキストエフェクト。この記事なかなか素晴らしい感じです。テキストエフェクトの作例を23例紹介してるんだけど、内容の質がなかなかアツいです。これとかこれとかこれとかこれあたり「これテキストか！」っていうビックリ感がアレだしナニです（マウスオーバーして動くものもあります）。text-shadowやgradationを使ってここまで出来るんスね。いやーかっけース。スマートフォン向けのサイトなどで応用できそうですねこれ。
23 Creative Uses of CSS3 Text Effects to Enhance Your Web Presence
[CSS] 100 Great CSS Menu Tutorials – CSSで記述するメニューのチュートリアルと作例
CSSで作られたメニューの作例と、そのチュートリアル。100もの作例が紹介されてます。ボタン、タブ形式、ドロップダウン、JSを組み合わせて動きで魅せるもの、アコーディオンなど、様々な形のメニューが紹介されてます。よくこれだけ集めたなぁという感じ。リンク先ではソースコードがDLできる場合も多いので、コーディングやデザイニングの参考になりそうです。
[Web Design] 18 Time Saving Web Apps for CSS/Web Designers – デザイナーが時間を節約できるウェブアプリ
ウェブデザイナーが時間を節約する事のできるウェブアプリ。まぁいわゆるHTMLやCSSのジェネレーターです。CSS3のジェネレーター、Canvasコード生成、イメージエディタ、カラースキーム生成、ブラウザウィンドウのリサイザー、CSSグラデーションのジェネレーター、グリッドビルダー、フォント指定、レイアウト、フォーム装飾、メニューボタン生成などが紹介されてます。いくつか便利そうなのがあったので、早速ブックマークしときました。ただし「仕事の早いデザイナー」と思われ過ぎると仕事量増えたりするので、そのあたりアレだしナニだったりするのでアレゲな感じですな。何事もほどほどが良いというか、そんなアレです。
[CSS3] Cutting Edge Text Effect and Web Typography Tutorials – CSS3を使った流行りのテキストエフェクト
CSS3を使った流行りのテキストエフェクト。12の作例が紹介されてます。CSS3を使ったテキストエフェクトなので、主にテキストシャドウやグラデーション、Webフォントに関する内容が多いです。画像ではなくコーディングで表現できるタイポグラフィーなので、使い回しや汎用性が高く、使い勝手イイですね。CSS3でできる事の勉強やネタ帳にもナイスな記事。
CSS3 Cookbook: Cutting Edge Text Effect and Web Typography Tutorials
[CSS3] Shading with CSS text-shadows – テキストシャドウを使ったWebタイポグラフィー
CSS3のtext-shadowを使ったWebタイポグラフィー。デモページはこちら。作例の数は3つと少ないけど、あーこういう事もできるのね、という感じで参考になります。ちょっとレトロな印象のエフェクトですね。ヴィンテージっぽいデザインなんかに向きそうです。
[CSS3, Javascript] Syropia Labs – CSSとjQueryで作られたウェブパーツの作例紹介サイト
CSSとjQueryを使って作られたWebパーツの作例紹介サイト。いろんな人の作例をまとめたものではなく、個人のデザイナーの作例集なので、紹介されてる数はそれほど多くないけど、作風がクールなのと、各パーツのソース一式がダウンロード可能な点がナイスです。iOSのUIからの影響が濃く、Webフォームにおいて使いやすそうなパーツがいくつか紹介されてます。インターフェース考察の参考としてもナイスですねー。
[CSS] CSS1K – 1kbのCSSでどこまで表現できるかを考察するサイト
同一のHTMLに1kb以内のCSSを当てる事で、どれだけのデザイン表現ができるかを考察するサイト。左メニュー内にあるボタンが作例を示していて、クリックする事でCSSが変わります。Web業界に身を置いてそこそこ経験のある人は、CSS Zen Gardenを思い出すはず。このサイトはCSS Zen Gardenと、同じ「1kbで何ができるか」に注目したJS1kに影響されたものです。1kbにこだわる点などにミニマリズムを感じますな。各作例の中にはクールなものもあれば、ネタも含まれています。古くから個人でWeb制作してた人ならきっと「GeoCities」でクスってなります。古き良き（いや良くはねーか）オールドスタイルなウェブデザインを今の技術であえて表現するというのもクールですな。