CSSで簡単な図形の作り方。 三角形 取り敢えず、要素はdivで <div id="triangle"></div> #triangle{ height:0px; width:0px; border:50px solid #000; }
先日 HTML5 + CSS3 で書かれた、素敵な雑誌の表紙みたいな Webサイトを見つけました。それ以来、CSS3 だったらコレもできそう ... アレもできるかも ... なんてことを、雑誌のデザインなどを見ながらひとり盛り上がってます w まだまだ IE では CSS3 が使えないけれど、今回はいくつか CSS3 のサンプル作りに挑戦してみました。 まるで雑誌の表紙のようなデザインで、とっても感動してしまいました。HTML5 と CSS3 で書かれていて、ブロック要素、内包するテキストも斜めにレイアウトされています。細いテキストを斜めにすると、とても読みにくくなってしまうんですけどフォントも工夫されてて判読性も十分です。 もちろん IE では斜めではなくて水平に表示されてしまうんですけど、それでも閲覧するのに困らないようなハイブリットなデザインで、またまた感動! これから近い将来、C
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にて解説。乞うご期待!)。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く