mitchikeuchiのクリップ (6410) / css (111)
-
[CSS]複数のスタイルシートのフレームワークのいいとこ取りをした -BlueTrip | コリス
ベースにBlueprint, Tripoli、グリッドに960.gs、印刷用にhartija、エレメントにelementsと複数のスタイルシートのフレームワークのいいとこ取りをし結合させたフレームワーク「BlueTrip」を紹介します。
BlueTripの主な特長は下記の通りです。
24カラムのグリッドに対応
実用的なタイポグラフィのスタイル
クリーンなフォームのスタイル
印刷用のスタイルシート
空のスターターキット
セクシーなデザインのボタン
ステータスメッセージのスタイル
デモでは、各要素のサンプル -
WordPressのテーマをBlueprint CSSで作る | クレコ
Blueprint CSSはCSSのフレームワーク（ブラウザ間の表示差違をなくすリセットや、グリッドデザインが簡単にできたり便利！）なんですが、それをWordPressのテーマにあわせると幸せになれそうなのでやってみた。下にポイントをいくつか。
-
Mozilla Re-Mix: 閲覧しているページのCSSをリアルタイムに編集して状態を維持できるGoogle Chromeエクステンション「Stylebot」
「Stylebot」は、表示しているサイトのスタイルをユーザー側で変更し、変更後は常にそのスタイルで表示することができるようになるという拡張機能です。
-
MS Font Block - soundscape out
Web ページで MS ゴシック/明朝が指定されていても無視する Safari 機能拡張「MS Font Block」。
-
クオリティの高いフリーCSS、XHTMLテンプレート集2010「40+ Elegant Free CSS/(X)HTML Templates from 2010」 | DesignDevelop
現在WEBデザインは基本的にはCSSとXHTMLで構築されている場合が多いと思います。今日紹介するのは主流であるクオリティの高いフリーCSS、XHTMLテンプレートを集めたエントリー「40+ Elegant Free CSS/(X)HTML Templates from 2010」を紹介したいと思います。
-
幅とカラム数を指定し、整数値のカラムと溝のサイズを一覧表示するグリッド生成ツール -Gridulator | コリス
ページの幅とカラム数を指定し、そのカラムと溝のサイズに指定可能な整数値のパターンを一覧表示するグリッド生成ツールを紹介します。
-
選んで、見て、使える簡単CSS3ジェネレーター「CSS3 Generator」 | DesignDevelop
次世代の規格として注目されているCSS3。新しいブラウザではすでに対応していて、すでに利用しているという方もいらっしゃると思いますが、今回紹介するのは様々なCSS3ならではの処理を簡単に実現できるCSS3ジェネレーター「CSS3 Generator」です。
-
Six Useful CSS3 Tools | Tools
CSS3ジェネレータまとめ
-
13 Pure CSS Techniques for Creating JavaScript-like Interactions | Tutorials
CSSを使用したウェブギャラリーまとめ
-
-
CSS3 Generator
CSS3のジェネレータ。
-
[CSS]サイズが不明なボックスいっぱいに背景画像を表示するスタイルシート | コリス
一枚の画像で、サイズ指定があるものやないものなど異なるサイズのボックスいっぱいに背景を表示するスタイルシートを紹介します。
-
CSSで作るナビゲーションとボタンのコーディングチュートリアル55「Complete Toolbox: 55 CSS Menu And Button Coding Tutorials」 | DesignDevelop
スライダー用から、タブメニュー、角アールのグラデーションメニュー、動きの付いたアコーディオン、プルダウンなどなど、CSS作れる様々なナビゲーションとボタンが公開されています。全部で55のチュートリアルが公開されていますが、今回はその中からいくつか気になったものを紹介したいと思います。
-
[CSS]画像に美しい角丸とボックスシャドウを適用する方法 | コリス
img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。
これを解消するCSSのTrickを紹介します。 -
Jack the Clipper was captured - Tumblrのタグ表示
おぼえがき
Tumblrで記事作成時に挿入できるタグの表示方法
CustomizeでThemeからcustomHTMLを選択し
{/block:Posts}直上にあるの前に以下のタグを挿入
{block:HasTags}
{block:Tags}
{Tag}
{/block:Tags}
{/block:HasTags}
さらにcssを編集したり、Searchあたりのhtmlをモニョモニョすれば
なんちゃってカテゴリが実現 -
CSS3－HTMLクイックリファレンス
CSS3では、CSS2.1には無かった以下のプロパティなどが、新たに追加される可能性があります。 勧告までに追加・廃止・変更されるプロパティもあると思われます。
-
[CSS]CSS 3の属性と値が一覧できるクィックリファレンス | コリス
HTML 3の属性と値が一覧できるPDFのクィックリファレンスをSmashing Magazineから紹介します。
ダウンロードできるCSS 3のクィックリファレンスはPDFで全5ページで、属性とそれぞれの値が一覧となっています。 -
スクロールバーの有無によるセンタリングのズレを解消する | blog | fublicbox
FireFoxでは、コンテンツの高さがブラウザの高さよりも短くなった場合、スクロールバーが表示されず、スクロールバーが表示されるページへ移行したときにセンタリングのズレが生じてしまいます。
そのため、FireFoxでは常にスクロールバーを表示させるよう、CSSに下記を記述します。
body {
overflow-y: scroll;
}
しかし、これだけではIE6、IE7で表示したときに、ブラウザ自体のスクロールバーの内側に、さらにもう一つスクロールバーが表示されてしまいます。
そこで、C -
CSS3のみで実現する先進的なフォトギャラリー集「10 Pure CSS3 Image Galleries and Sliders」 | DesignDevelop
角丸、ドロップシャドウ、グラデーションなど今までは画像と組み合わせたり、様々な工夫を用いて表現してた手法が簡単に実装できるCSS3。対応ブラウザも増えてきて、すでに利用されていると言う方も多いと思いますが、今日紹介するのはCSS3のみで実現する先進的なフォトギャラリー集「10 Pure CSS3 Image Galleries and Sliders」です。
FLASHのような派手なアクションなどはありませんが、CSSだけでここまで表現できる、CSS3の良さを感じることができます。全部で１０個のCSS3 -
[CSS]スクリプト無しで、画像に鏡面効果を与えるスタイルシート | コリス
CSS3を使用して、画像に鏡面効果を与えるスタイルシートをNettuts+から紹介します。
