HTMLとCSSの勉強(4)

CSSで使えそうなサンプルをまとめてみました。

1、IMGに枠をつくる
padding で画像の枠を付けて、ボックスシャドウで影を付けて、写真のようにする例

【HTML】
リストで画像ファイル(image01.jpg)を設定
<ul class="gallery">
    <li><a href="#"><img class="pic-1" src="image01.jpg" alt="" /></a></li>
</ul> 

【CSS】
クラス(gallery)のimgのスタイルを設定
.gallery img {
    padding: 10px;
    background: #fff;
    -moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, .4);
    -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, .4);
    box-shadow: 0px 3px 3px rgba(0, 0, 0, .4);
    position: relative /* z-index を指定するので */
} 

次に、画像に傾きを持たせてみます。
rotate ファンクションで回転、z-indexで重なりを指定して、画像を回転させます。
ul.gallery .pic-1 {
    z-index: 1;
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
} 

２、丸角、グラデーション、シャドウの組み合わせでボタン
(説明) border-radius と text-shadow、box-shadow、gradient（グラデーション）を組み合わせる
【HTML】
/* リンク */
<a class="button blue" href="example.com">CSS Button</a>
/* 送信ボタン */
< input class="button blue" type="submit" name="signin" value="Signin" />

<div>
    <a href="#" class="button orange">Orange</a>
    <a href="#" class="button orange bigrounded">Rounded</a>
    <a href="#" class="button orange medium">Medium</a>
    <a href="#" class="button orange small">Small</a>
    <br /><br />
    <input class="button orange" type="button" value="Input Element" />
    <button class="button orange">Button Tag</button>
    <span class="button orange">Span</span>
    <div class="button orange">Div</div>
    <p class="button orange">P Tag</p>
    <h3 class="button orange">H3</h3>
</div>

【CSS】
webkit系 は、left top から、left bottom といった感じで、グラデーションの向きを指定します。
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
mozilla系は、グラデーションの向き、グラデーションの開始色、グラデーションの終了色の順に指定します。
background: -moz-linear-gradient(top,  #00adee,  #0078a5);

.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    text-decoration: none;
}
.button:active {
    position: relative;
    top: 1px;
}
.bigrounded {
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}
.medium {
    font-size: 12px;
    padding: .4em 1.5em .42em;
}
.small {
    font-size: 11px;
    padding: .2em 1em .275em;
}
.orange {
    color: #fef4e9;
    border: solid 1px #da7c0c;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
    color: #fcd3a5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

３、CSS3 のマルチカラム
HTML5では、カラムを指定しなければなりませんが、HTML5では簡単にできます。
【HTML】
<div class="wrapper">
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
</div>

【CSS】
(説明) column-count でカラム数、column-gap でカラムの間隔を指定
.wrapper{
    /* Safari Chrome */
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    /* CSS */
    column-count: 3;
    column-gap: 10px;
}

４、フォームの、フォーカス時にシャドウの色を変える
【CSS】
(説明) input/textareaに、フォーカス時に、枠に色をつけて強調させます。
input:hover,
textarea:hover,
input:focus,
textarea:focus {
    border-color: #C9C9C9;
    -webkit-box-shadow: 0px 0px 6px rgba(255,15,135,.7);
    -moz-box-shadow: 0px 0px 6px rgba(255,15,135,.7);
    box-shadow: 0px 0px 6px rgba(255,15,135,.7);
} 

５、displayプロパティ
 display:blcok ブロックレベル要素(要素の前後に改行が入り、カチッとしたブロックを積んでいくような表示)
 display:inline インライン要素(テキストの一部として扱われるので、要素の前後には改行は入らず、テキスト状に横に横にずーっと流れていくような表示)

 display:inline-block インラインブロック要素（インライン要素のように横に並んでブロック要素のように幅や高さ、margin や padding　を指定できます）

【参考URL】
http://webdesignrecipes.com/css-visual-formating-model/
http://webdesignrecipes.com/spice-up-web-design-with-css3/
http://www.css-lecture.com/log/css3/css3-gradient.html
http://webdesignerwall.com/tutorials/css3-gradient-buttons
http://www.pvmgarage.com/2010/01/how-to-create-depth-and-nice-3d-ribbons-only-using-css3/
http://code.tutsplus.com/tutorials/design-a-prettier-web-form-with-css-3--net-9542
http://nutz22.web.fc2.com/h5c3.html#
http://blog.3streamer.net/html5-css3/css3-styling-231/
http://midashi-maker.v-colors.com/
http://photo.v-colors.com/
http://codezine.jp/article/detail/7681
http://taneppa.net/display-inline-block/