スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > CSS3で縫い目風のデザインを作る

CSS3で縫い目風のデザインを作る

投稿日:2013年7月25日   ソフトウェア:CSS3

このチュートリアルではCSS3で縫い目風のデザインを作る方法について紹介します。


Step1:はじめに

デザインの世界では、要素をより減らし、効果をより増やすことが重要になります。
要素が多すぎると、ぐちゃぐちゃになってしまいますし、逆に少なすぎると90年代のような古臭い印象を与えてしまいます。

幸せなことに、ウェブデザインには、CSS3という素晴らしい武器があります。
CSS3を使えば、ページやページ内のコンテンツにポップさが加わります。
そして、サイトをごちゃごちゃさせることなく、一部分を際立たせたりきれいに見せることができるようになります。






Step2:CSS3

ページの一部分に注目を集める必要が出てきたときには、次のCSS3の効果を使ってみてください。

.stitched {
height:100px;
width:500px;
padding: 5px 10px 5px 10px;
margin: 15px;
background: #e2e2e2;
border: 2px dashed rgba(255,255,255,0.4);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 0 0 4px #e2e2e2, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 4px #e2e2e2, 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 4px #e2e2e2, 2px 1px 6px 4px rgba(10,10,0,.5);
}


Step3:完成

要素がページに縫い付けられて見えるようになります。

完成



引用:Web Design Library   著者:arcologo  翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング