価値ある人になって勝ち人に。

Webデザイン関連(RSSRSS)のトピックです。SEOとWebデザインを共有する、という観点で情報を配信します。

Webデザインのトピック
かちびと.net > WEBデザイン > ソースが公開されているcss小技11エントリーまとめ

ソースが公開されているcss小技11エントリーまとめ

css-tec
cssを使った小技テクニックの
エントリーが様々なブログで
公開されていますが、必要な時に
探すのが面倒なのでまとめます。
ソースコードを公開している記事に
絞ってまとめています。

CSSで実装する、ちょっと凝ったパンくずリスト

css-tec01
cssでパンくずをデザインする方法とサンプル

CSSで実装するちょっと凝ったパンくずリスト

CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント

css-tec02
ユーザービリティ（見易さ）を考慮したbodyに設定する。CSS HappyLifeさんも
記事を参考に別コードを公開。

CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント

CSSだけでフレームを作るテクニック

css-tec03
frameタグを使用しないで擬似フレームを作成。IE6対応。

CSSだけでフレームを作るテクニック

テキストに影を付け印象的にする

css-tec04
JSとｃｓｓでテキストに影を付けるテクニック。凄い。

テキストに影を付け印象的にする

コンテンツのみ印刷するようにCSSで制御

css-tec05
印刷したくない場所をdisplayプロパティで非表示する、という発想。

コンテンツのみ印刷するようにCSSで制御

CSSを使ったli要素の装飾におけるちょっとした小技メモ

css-tec06
罫線を消す方法。意外と便利かも。

CSSを使ったli要素の装飾におけるちょっとした小技メモ

CSSだけで文字列を省略して「・・・」を付けて表示する方法

css-tec07
text-overflow: ellipsis;を使う。僕は全く初耳でした。。。

CSSだけで文字列を省略して「・・・」を付けて表示する方法

border-radiusを使って角丸を作る

css-tec08
画像不使用で角丸を実装。例によってIE非対応・・

border-radiusを使って角丸を作る

CSSでピンバルーンを作成するチュートリアル

css-tec09
噴出しをPNGで用意してｃｓｓで位置を指定。

CSSでピンバルーンを作成するチュートリアル

CSSだけで作れる吹き出しボックス

css-tec10
本当はhtmlタグも必要ですが、細かい事抜きに、簡単に実装できます。

CSSだけで作れる吹き出しボックス

便箋のようなデザインにする

css-tec11
カラーと下線で便箋っぽく。ちょい難点あり。
僕は下線を画像で作ってpタグに指定して便箋っぽくしてました。

便箋のようなデザインにする

ｃｓｓ小技のまとめエントリー

ｃｓｓ小技をまとめたエントリーもご紹介。

以上11エントリー＋αをご紹介しました。全部日本語で読めるエントリーです。
ｃｓｓはホント課題です・・・

カテゴリ » WEBデザイン

【ソースが公開されているcss小技11エントリーまとめ】に8 コメント頂いています

  • KumaCrow

    高橋洋平さん

    はじめまして、こんばんは！(・∀・)/ぐいぶにん

    ブログの記事を紹介していただき、
    ありがとうございます。

    高橋さんの記事は、よく「はてブ」が付くので、
    ちょくちょく拝見させていただいていましたが、

    まさか今回、その中にうちのCSSネタが、
    紛れ込んでいようとは！(´Д｀;)いやはや

    ありがたや、ありがたや。

    それでは、また勉強させてもらいに来ます。
    今後もよろしくお願い申し上げます。（*’‐’*)

    引用

    09-07-02 » 7:14 PM »

  • kachiaru

    ＞KumaCrowさん

    はじめまして。(・∀・)/ぐいぶにん

    KumaCrow: 高橋さんの記事は、よく「はてブ」が付くので、
    ちょくちょく拝見させていただいていましたが、

    まさか今回、その中にうちのCSSネタが、
    紛れ込んでいようとは！(´Д｀;)いやはや

    僕は横着者でまとめて記録するのが好きなのですが、
    同思考の方がブクマしてくれるんだと思いますｗ
    KumaCrowさんの小技もWeb製作者にとっては有益な
    情報だと思いましたので勝手ながらご紹介させて頂きました :P
    こちらこそ、今後とも宜しくお願い致します :!:

    引用

    09-07-02 » 11:34 PM »

トラックバック

  1. ソースが公開されているcss小技11エントリーまとめ - かちびと.net | 次なるもの
  2. 私的MEMO - links for 2009-07-03
  3. links for 2009-07-03
  4. 07月03日 今日のWEB担当者向けニュース拾い読み – WEBマーケティング ブログ
  5. ソースが公開されているcss小技11エントリーまとめ at exちゃん second (wp)
  6. INFINITYブログ » Blog Archive » css小技11エントリーまとめ

TrackbackとURL

URL:
Trb:

お気軽にコメントして下さい

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!:

コメント欄に画像を表示できます。 ココをクリックして画像のURLを入力してください。