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

Browse By

Tag Archives: CSS

[WEB DESIGN] CSS Design-Wettbewerb: Newsletterbox Designideen – CSSでデザインされた入力フォーム

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

WordPress内にある、過去の下書きを見ていたらこんな記事が(2006年の記事でした)。CSSでデザインされた入力フォーム。フォームをデザインしたものってSafariでは再現できない場合をよく見かけるんだけど、こちらで紹介されているものはSafariでも全然オッケー。しかもZipファイルでソースや画像まで配布されてます。最近じゃECサイトやCMSガラみのサイト等、入力フォームのある仕事も多いからとってもありがたい。いつか使おっと。

[CSS] Create Resizing Thumbnails Using Overflow Property – Javascriptを使わずに、CSSだけでサムネール画像を大きく見せる方法

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

などのJavascriptを使わずに、サムネール画像をユーザーの必要に応じて大きく見せる方法。デモはこちらで見る事ができます。概要を読むと、CSS書いた事のある人なら「あぁなるほどね」と思うような、ごくシンプルな内容です。リンク指定した画像の上にマウスオーバーすると、“overflow:hidden”されていたものが“visible”に変化するというもの。JSを使えば確かにリッチな見せ方はできますが、ロードに時間がかかったり、他のJSライブラリとのからみで導入できない場合もあるので、そんな時に便利な小技。

[CSS] CSS Type Set – テキスト関係のCSSのジェネレーター

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

テキスト関係のCSSを、分かりやすいインターフェースで生成してくれるジェネレーター。左の入力欄にサンプルテキストを放り込んで、入力欄下部にある各種項目を指定するだけで、ページ右側にCSS記述を生成してくれます。この手のサイトっていくつかあるけど、ロードレスであること、スライダーを動かした時に連動するサンプルテキストの動き、マック環境でも変な動きをしないカラーパレット等、かなり使いやすい印象。特に“line-height”、“letter-spacing”、“word-spacing”の指定方法が秀逸。サイト内のpタグの基本指定を作る際に役立ちそうです。といってもフォントの種類に関しては基本的に英語圏でのサンプルしかないので、日本語フォントに関しては自分で指定する必要があります。

[WEB DESIGN] CSS レイアウト切り替えスイッチ

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

CSSレイアウトの切替スイッチ。いわゆる2カラムと3カラムの切り替えというものではなく、フローズンレイアウト(横幅固定)、リキッドレイアウト(ブラウザウィンドウに追従)、エラスティックレイアウト(文字サイズのサイズ切り替えにレイアウトも連動)の3種を切り替えるという点で新しいと思います。サイトの作り手としてはフローズンレイアウト(ソリッドって言うのが普通なのかな?)の方が作りやすいんだけど、横幅可変の方が見やすいという人もいれば、最近流行りのエラスティックレイアウトが理にかなってるという意見もあるでしょう。だからまぁそのへんは見る人で切り替えちゃってくださいという感じで、親切な機能ですね。その内使おうと思い備忘録。