Follow me
Bookmark
RSS講読
Webデザイン関連(
RSS)のトピックです。SEOとWebデザインを共有する、という観点で情報を配信します。
ソースが公開されているcss小技11エントリーまとめ
カテゴリ » WEBデザイン
cssを使った小技テクニックの
エントリーが様々なブログで
公開されていますが、必要な時に
探すのが面倒なのでまとめます。
ソースコードを公開している記事に
絞ってまとめています。
CSSで実装する、ちょっと凝ったパンくずリスト
cssでパンくずをデザインする方法とサンプル
CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント
ユーザービリティ（見易さ）を考慮したbodyに設定する。CSS HappyLifeさんも
記事を参考に別コードを公開。
CSSだけでフレームを作るテクニック
frameタグを使用しないで擬似フレームを作成。IE6対応。
テキストに影を付け印象的にする
JSとｃｓｓでテキストに影を付けるテクニック。凄い。
コンテンツのみ印刷するようにCSSで制御
印刷したくない場所をdisplayプロパティで非表示する、という発想。
CSSを使ったli要素の装飾におけるちょっとした小技メモ
罫線を消す方法。意外と便利かも。
CSSだけで文字列を省略して「・・・」を付けて表示する方法
text-overflow: ellipsis;を使う。僕は全く初耳でした。。。
border-radiusを使って角丸を作る
画像不使用で角丸を実装。例によってIE非対応・・
CSSでピンバルーンを作成するチュートリアル
噴出しをPNGで用意してｃｓｓで位置を指定。
CSSだけで作れる吹き出しボックス
本当はhtmlタグも必要ですが、細かい事抜きに、簡単に実装できます。
便箋のようなデザインにする
カラーと下線で便箋っぽく。ちょい難点あり。
僕は下線を画像で作ってpタグに指定して便箋っぽくしてました。
ｃｓｓ小技のまとめエントリー
ｃｓｓ小技をまとめたエントリーもご紹介。
以上11エントリー＋αをご紹介しました。全部日本語で読めるエントリーです。
ｃｓｓはホント課題です・・・
【ソースが公開されているcss小技11エントリーまとめ】へのコメント 8
トラックバック
お気軽にコメントして下さい
*は必須です
サイト内検索
- (3月14日)今日の「簡単海外記事」
- 高いところから地面を見下ろすとこんな感じ
- AmazonアソシエイトのツールはAZlinkが一番シンプルで使いやすい
- 日本語を完璧に使いこなすタイ人デベロッパー・タムタム氏のTwitterサービス3つ
- シンプル、ミニマルなサイトを作りたい時に役立ちそうなアイコンやフォント、ギャラリーなどのまとめ
- WordPressユーザーにお勧め。管理メニューを表示するブックマークレット・WP Toolbar
- 無料でユーザー登録も不要。Webサイトのモックアップを直感で作成、PDFやjpgで保存できるLumzy
- アメリカで宗教団体に属している人の所得の差が分かる（かもしれない）1枚の図
- 4分間の歌と共にひたすらピタゴラ装置が動き続ける「OK Go」のPVが楽しい
- 要連絡、漢字無しなど、条件付だけど商用利用可能なフリーの日本語フォントいくつか
RSSフィード
ブックマーク
Twitter
Web Tips on Twitter
まとめ記事 on TwitterTwitter Counter
ads
高橋洋平さん
はじめまして、こんばんは！(・∀・)/ぐいぶにん
ブログの記事を紹介していただき、
ありがとうございます。
高橋さんの記事は、よく「はてブ」が付くので、
ちょくちょく拝見させていただいていましたが、
まさか今回、その中にうちのCSSネタが、
紛れ込んでいようとは！(´Д｀;)いやはや
ありがたや、ありがたや。
それでは、また勉強させてもらいに来ます。
今後もよろしくお願い申し上げます。（*’‐’*)
引用
09-07-02 » 7:14 PM »
＞KumaCrowさん
はじめまして。(・∀・)/ぐいぶにん
僕は横着者でまとめて記録するのが好きなのですが、
同思考の方がブクマしてくれるんだと思いますｗ
KumaCrowさんの小技もWeb製作者にとっては有益な
情報だと思いましたので勝手ながらご紹介させて頂きました
こちらこそ、今後とも宜しくお願い致します
引用
09-07-02 » 11:34 PM »