スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > CSS3でソーシャルメディアのサイトのアイコンを作る方法

CSS3でソーシャルメディアのサイトのアイコンを作る方法

投稿日:2013年1月22日   レベル:初心者    ソフトウェア:

このチュートリアルではCSS3でソーシャルメディアのサイトのアイコンを作る方法について紹介します。


Step1:はじめに

私が「Sexy Image Hover Effect」などの「Pure CSS3」の記事を投稿してからだいぶ経ちました。そこで、今回はソーシャルメディアのサイトのアイコンをCSS3だけで作ってみようと思いました。ここでは画像は使いません。ソーシャルメディアのサイトのアイコンを作るには、グラデーションと半径プロパティを使います。今回説明するソーシャルメディアのサイトのアイコンのスナップショットは次の通りです。

このチュートリアルではCSS3でソーシャルメディアのサイトのアイコンを作る方法について紹介します。

それではコードを一通り見ていきましょう。

Step2:Facebookのアイコンを作る

通常のCSS

.common{
text-shadow:0 -2px 0 rgba(0, 0, 0, 0.5);
-moz-border-radius:5px;
-webkit-border-radius:5px;
height:32px;
width:32px;
text-align:center;
-moz-box-shadow:2px 2px 4px #ABABAB;
-webkit-box-shadow:2px 2px 4px #ABABAB;
cursor:pointer;
margin-left:30px;
}

FACEBOOK:
HTML

<div id='facebook' class='common'>
<span>f</span>
</div>

CSS

#facebook{
float:left;
background:-moz-linear-gradient(center top , #4AA9ED, #2E73B8) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #4AA9ED),color-stop(1, #2E73B8));
border:2px solid #518EC4;
color:#FEFEFE;
font-family:arial,Times New Roman;
font-size:28px;
font-weight:bold;
}

#facebook span{
}

#facebook:hover{
background:-moz-linear-gradient(center top , #4FB8FF, #378CDF) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #4FB8FF),color-stop(1, #378CDF));
}

#facebook:active{
background:-moz-linear-gradient(center top , #378CDF, #4FB8FF) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #378CDF),color-stop(1, #4FB8FF));
}




Step3:Twitterのアイコンを作る

Twitter:
HTML

<div id='twitter' class='common' >
<span>t</span>
</div>

CSS

#twitter{
float:left;
background:-moz-linear-gradient(center top , #C0F0F2, #6FCFCE) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #C0F0F2),color-stop(1, #6FCFCE));
border:2px solid #78D1D7;
color:#FEFEFE;
font-family:PicoWhiteRegular,arial,Times New Roman;
font-size:30px;
}

#twitter:hover{
background:-moz-linear-gradient(center top , #BFFDFF, #86EAEF) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #BFFDFF),color-stop(1, #86EAEF));
}

#twitter:active{
background:-moz-linear-gradient(center top , #6FCFCE, #C0F0F2) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #6FCFCE),color-stop(1, #C0F0F2));
}

Step4:完成

今回はFacebookとTwitterのアイコンについて紹介しました。

ファイルはここからダウンロードできます。


引用:Web Design Library  翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

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