CSSでSNSアイコン作るのに夢中になった時期が昔ありました.
結構みなさん作られていて、すごいなぁと思いました !
気になったのは、インスタグラムのcss実装です.
ガチのあのインスタグラムのようなアイコンをcssで作るには、すこし頭が痛くなります.
今回、インスタグラムアイコンをcssで再現してみたので、どのような構造になっているのか見ていきたいと思います. (グラデーションの数値などは見た目雰囲気なのでそこは勘弁してください)
※もちろん、コピペでオッケーという方はそれはそれでいいと思います !
参考サイト1
グラデーションの数値は以下のサイトを参考にしました.
参考サイト2
インスタグラム
とりあえずコードです. ( Twitter Facebook に関しては無視してください)
.instagram { /*アイコン背景*/
text-decoration: none;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 0px 8px 3px rgba(176, 169, 169, 0.3) ;
position:relative;
background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
overflow: hidden;
}
.instagram::before { /*アイコン */
font-family: "Font Awesome 5 Brands";
font-weight: 400;
content: '\f16d';
color: white;
font-size: 19px;
position: relative;
z-index: 1;
}
.instagram-light { /*アイコン背景ライト*/
position: absolute;
top: 16px;
left: -6px;
width: 30px;
height: 30px;
background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
}
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="https://kit.fontawesome.com/fc9fe893cc.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./css/style.css" />
<title></title>
</head>
<body>
<div class="sns">
<ul>
<li> <a class="facebook" href="#"></a> </li>
<li> <a class="twitter" href="#"></a> </li>
<li> <a class="instagram" href="#"> <span class="instagram-light"></span></a> </li>
</ul>
</div>
</body>
</html>
仕組み
アイコン背景 ( .instagram )の中に、アイコン( .instagram::before )とアイコン背景ライト( .instagram-light ) がはいっています.
背景は、インスタのおなじみのグラデーション色を、背景ライトは左下に少し顔をのぞかせている太陽のような部分を表しています.
このように、Twitter や Facebook アイコンと違い、Instagram アイコンは一枚ほどレイヤーが多く挿入されているといった感じでしょうか. (Adobe風に)
アイコン背景
.instagram { /*アイコン背景*/
text-decoration: none;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 0px 8px 3px rgba(176, 169, 169, 0.3) ;
position:relative;
background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
overflow: hidden;
}
ここでのポイントは以下のコード.
display: flex;
justify-content: center;
align-items: center;
これらがやっていることは、「アイコンを中央に配置している」です.
flex めちゃくちゃ便利です.
アイコン
次に、アイコンみていきましょう.
.instagram::before { /*アイコン */
font-family: "Font Awesome 5 Brands";
font-weight: 400;
content: '\f16d';
color: white;
font-size: 19px;
position: relative;
z-index: 1;
}
ここでのポイントは以下のコード.
font-family: "Font Awesome 5 Brands";
font-weight: 400;
content: '\f16d';
contentの中身を、バックスラッシュ + 使いたいアイコンのユニコード(ここでは f16d)というふうに設定しています. font-family は Font Awesome 5 Brands とし、この Brands が重要です.
自分の場合、font-weight は Brands の場合、400 に設定します.
そして、アイコンが一番上にくるように、z-index を指定します.
アイコン背景ライト
.instagram-light { /*アイコン背景ライト*/
position: absolute;
top: 16px;
left: -6px;
width: 30px;
height: 30px;
background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
}
ライトがうまい具合に、左下に重なるように absolute で位置指定します.
アイコン背景の overflow: hidden にて、はみ出した部分を切り取ります.
思ったこと
こんな感じです ! やっぱりスタイリングって楽しいですね～.
FontAwesome は html に直接 i タグで書いていたのですが、このアイコンのように、疑似要素で FontAwesome 使えるんだなぁ ! と感動しました.
個人的に、スタックしたところは、疑似要素の FontAwesome によるアイコン指定の font-family のところを、Font Awesome 5 free とか普通に Font Awesome 5 って指定してて、ずっとアイコンが表示されないってとこでした.
このインスタアイコンの場合は Font Awesome 5 Brands でしたね !
ここらへんの詳しいことはFont Awesome 5 を疑似要素で使う にて.
誤字・脱字、コード間違えなどありましたら、コメントにてお待ちしております.
ここまで、読んでくださってありがとうございました.