CSS3に関するpussyvideoのブックマーク (5)

  • CSSで図形 三角形&台形

    CSSで簡単な図形の作り方。 三角形 取り敢えず、要素はdivで <div id="triangle"></div> #triangle{ height:0px; width:0px; border:50px solid #000; }

  • Loading...

  • ボタン作りの手間を削減!CSSボタンデザインジェネレーターまとめ

    CSS3のサポートが進んだおかげで、昔はフォーム... / CSSボタンジェネレーターいろいろ / CSS3 Button Generator他...全16件 CSS3のサポートが進んだおかげで、昔はフォームのボタン1つデザインするにも、いちいち画像を作る必要がありましたが、最近ではCSSのみで装飾することも増えてきました。CSSであれば、デザインの変更も簡単なので、制作時間短縮にも上手に活用したいですね。 ここでは、そんなCSSだけでボタンデザインが簡単にできる便利なジェネレーターを集めました。

    ボタン作りの手間を削減!CSSボタンデザインジェネレーターまとめ
  • デザインをちょっと素敵にするサンプル 8

    先日 HTML5 + CSS3 で書かれた、素敵な雑誌の表紙みたいな Webサイトを見つけました。それ以来、CSS3 だったらコレもできそう ... アレもできるかも ... なんてことを、雑誌のデザインなどを見ながらひとり盛り上がってます w まだまだ IE では CSS3 が使えないけれど、今回はいくつか CSS3 のサンプル作りに挑戦してみました。 まるで雑誌の表紙のようなデザインで、とっても感動してしまいました。HTML5 と CSS3 で書かれていて、ブロック要素、内包するテキストも斜めにレイアウトされています。細いテキストを斜めにすると、とても読みにくくなってしまうんですけどフォントも工夫されてて判読性も十分です。 もちろん IE では斜めではなくて水平に表示されてしまうんですけど、それでも閲覧するのに困らないようなハイブリットなデザインで、またまた感動! これから近い将来、C

    pussyvideo
    pussyvideo 2013/07/02
    エロサイトでも見た目は大事。エロサイトだからこそ大事。
  • MdN Design|総合情報サイト

    01 text-shadow プロパティは「textshadow:X方向の距離、Y方向の距離、ぼかしの距離、影の色」の順に指定する。現在、FirefoxとGoogle Chromeではベンダープレフィックスなしで使用できる。まず、文字に単純なドロップシャドウをつけてみる【1-1】。コードは【1-2】だ。 【1-1】X方向とY方向10ピクセルの距離に影をつけた 【1-2】この後複数のタイポグラフィをつくっていくので、h1に共通のスタイルを指定しておく 02 X方向とY方向の距離を0にして、ぼかしの距離のみを指定すると、いわゆるグロ ー(光彩)を表現できる【2-1】【2-2】。写真等の上に文字を載せるときに、背景色にとらわれず文字を見やすくすることができる。この場合はRGBAのアルファ値の設定を併用するとより自然な表現になるだろう(アルファ値についてはLesson10にて解説。乞うご期待!)。

    MdN Design|総合情報サイト
    pussyvideo
    pussyvideo 2013/07/02
    テキストシャドウ例いろいろ
  • 1