CSSデザインサンプル

by php-archive.net


境界線(border)

 
通常の線(solid)
 
点線(dotted)
 
破線(dashed)
 
二重線(double)
 
立体(groove)
 
立体(ridge)
 
立体(inset)
 
立体(outset)
 
線の太さを個別に指定
 
部分的にスタイルを変える

文字のアウトライン(text-stroke)

Hello,
World
ほとんどのブラウザは
まだ対応していない
Hello,
World
Webkit専用(-webkit-)
線は内側に描かれる

水平線

1px の水平線


太さを変える


点線(dotted)


破線(dashed)


二重線(double)


二重線応用(double)


2色



シャドウ・光彩(box-shadow, text-shadow) [IE9+]

ボックスやテキストに対して影をつけられます。上下左右の位置や不透明度、ぼかし方、色などを変更できますが、乗算やスクリーンなどのモードはありません。

 
ぼかしのない影
 
やわらかい影
 
色を指定する
 
影の位置を自由に変える
 
内側にシャドウをつける
(inset)
 
光彩のような表現
 
境界線との併用
SUBMIT
立体ボタン風の表現
Hello,
World
文字へのドロップシャドウ
Hello,
World
装飾例

グラデーション(linear-gradient, radial-gradient) [IE10+]

ブラウザによりやや実装が異なるため、標準の記法だけでは正しく表示されないケースが有ります。

 
水平方向
linear-gradient
 
3色以上も指定可能
 
垂直方向
 
角度指定(45deg)
 
楕円形(radial-gradient)
 
正円形(radial-gradient)

角丸(border-radius) [IE9+]

基本的に要素の形状は長方形のみです。角丸の応用によってある程度変形できます。

 
基本形
 
角丸(border-radius)
 
個別に指定
 
角丸の応用による楕円
 
応用
 
応用
 
応用
 
応用

不透明度(opacity) [IE9+]

opacity や rgba を利用すると半透明にできます。

 
 

Copyright © 2015 php-archive.net