Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: CSS

[CSS3] CSS3 Generator – ボックス要素をデザインできる、CSS3ジェネレーター

  • Pocket
  • このエントリーをはてなブックマークに追加

ボックス要素をデザインできる、CSS3ジェネレーター。スライダーをグリグリするだけで、リアルタイムに描画結果が反映されます。指定できるのは角丸、シャドウ、グラデーション、透明度の4つ。ボックス要素を気に入った感じにデザインできたら、画面下の「Get the Code!」でCSS記述を見る事ができます。後はコピペすれば完了。IE7 & 8のサポートも選べるようです。簡単かつ一通りの事ができるので、この手のジェネレーターにしてはなかなかナイス。CSS3の勉強にもイイっすね。

[Generator] 25 Super Web-based HTML & CSS Tools – HTML & CSSに関するジェネレーターまとめ

  • Pocket
  • このエントリーをはてなブックマークに追加

HTMLやCSSに関するオンラインジェネレーターのまとめ記事。とは言ってもほとんどがCSSジェネレーターです。フォントやレイアウト、カラーピッカー、角丸生成、グラデーション生成、単位変換、CSSスプライト生成、グリッドレイアウト、コード圧縮などが紹介されてます。ソース記述が面倒な作業を、こうしたオンラインツールにやらせるのもイイかも。グラデとか。

[CSS] Full Screen Background Image – Pure CSS Code – CSSだけで描画するフルスクリーン背景

  • Pocket
  • このエントリーをはてなブックマークに追加

CSSだけでサイトの背景にフルスクリーン表示させるためのTips。JSもFlashもいらず、CSS3の機能も使ってません。お手軽です。デモはこちら。これを見ると、ブラウザのウィンドウが一定値より細い場合は水平方向に縮小し、広げると徐々に本来の大きさになり、一定値より大きくなると拡大になるという挙動が分かります。ただしmin-heightとかmin-width使ってるので、IE6とか微妙かも(試してませんが)。最近じゃこういう表現も結構見ますよね。覚えておきたい小技。

[CSS] A Hand-Coded Designer CSS UI Kit – HTML5 + CSS3でコーディングされたウェブUIキット

  • Pocket
  • このエントリーをはてなブックマークに追加

HTML5 + CSS3でコーディングされたWebUIキット。モダンブラウザー向けにはモダンコーディングで、またレガシーブラウザにも対応しているようです。ウェブでよく使われるボタン、フォーム、水平ナビゲーション、垂直ナビゲーション、ログインパネル、テーブルなどがその内容。コードも美しく、また各パーツの背景には共通の画像が使われているため、サイト内においてデザイン的な統一を図りつつ汎用性やメンテ時の効率化を行えそうです。早速ソースをDLしてみましたが、コードもキレイでなかなか使えそうな印象。アラいいですねぇ。右も左もイイですねぇという感じでございます。

[CSS] 5 Place to Generate CSS Buttons Online – 5つのCSSボタンジェネレーター

  • Pocket
  • このエントリーをはてなブックマークに追加

CSSボタンを生成する事のできる5サイトが紹介された記事。画像を使わずにコードだけで表現できるものばかりで、サイトによってはCSS3が使われています。ただし2つめのBonBonはジェネレーターではなくZipファイル配布です(けどこれが一番すごい)。使いやすいなと思ったのは、1つめのCSSButtonGeneratorで、各色の指定からボタンのシェイプまで、分かりやすくリアルタイムに編集できます。イメージレスのボタンを制作する際に便利なまとめ記事。

[Generator] 3D Ribbon Generator – CSS3で描画するリボンヘッドライン

  • Pocket
  • このエントリーをはてなブックマークに追加

CSS3で描画するリボン状のヘッドラインジェネレーター。海外のサイトでよく見かける、ボックス要素に回り込むアレです。この手のデザインって折り返しの部分を画像にするのが一般的ですが、ここで吐き出されるコードはフルCSSで、単純に吐き出されたコードのみをコピペすれば使えるようです。ちょっとメンドくさそうなコードをオンラインで生成でき、かつコード貼り付けのみで対応できるのはなかなかナイスです。

[CSS3] CSS drop-shadows without images – CSSで描画する、画像を使わないドロップシャドウ

  • Pocket
  • このエントリーをはてなブックマークに追加

CSS3を使って描画する、ボックス要素に対するドロップシャドウの作例集。様々な手法のドロップシャドウと、そのコーディングの仕方が紹介されてます。角丸やロテーションなどを組み合わせたものもあり、一言でドロップシャドウとは言っても実際にはいろんな影の落とし方があるんだなと、そんな印象を受けます。デザインフェイズにおけるシャドウ描画のネタ帳としてもイイかも。

[CSS] CSS: Innovative Techniques and Practical Solutions – CSSを使った野心的な表現

  • Pocket
  • このエントリーをはてなブックマークに追加

CSSを使ったイノベーティブな表現がまとめられた記事。たまに見かける「うおおこれテキストかよ!」的なスゴいアレをまとめたような感じ。もちろんテキスト関係だけでなく、様々な新しい表現が紹介されてます。CSS3のトランジション関連なかなかアツいです。会社の連中と見てて「こんな事できるんや!」的な感じでひとしきり盛り上がりました。レガシーブラウザさえ切り捨てる事ができれば、サイト内におけるデザイン要素の主軸として使えそうです。素晴らしい。