こんにちは、キャスレーコンサルティングのSD(システム・デザイン)部：平野です。
一年ぶりにブログを書きます。よろしくお願いします。
前回はCSSで遊ぼう「CSSで絵を描き、さらに動かしてみよう」-入門編-という内容でドット絵を再現して遊んでみました。
次回予告として「CSSで目玉描こうぜっ！の巻」と宣言していたため、今回は目玉を作っていきましょう。
推奨ブラウザはchromeです。
注意：今回のテーマはchromeのみを想定し制作しております。
border-radiusなどの挙動がブラウザごとに異なりますので、他のブラウザでは表示が崩れることもありえますので
お気をつけ下さい。
私の書くブログは「業務で使えるかわからない、ただ色々遊びたいだけだっ！」がテーマです。
ちなみに今回はMacのchromeで表示確認をしながら制作しました。
さて、いきなりですがこちら完成系です。
前回の予告とは少しデザインを変えました。
では、いきましょう。
準備
以下のようにhtml,cssを準備してください。
html
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<!-- 中央配置 -->
<div class="box">
<div class="stage">
<div class="eye"></div>
</div>
</div>
</body>
</html>
css
@charset "utf-8";
* {
padding: 0;
margin: 0;
}
html {
font-size: 62.5%;
}
body {
background-color: rgba(235,235,235,1);
height: 100%;
width: 100%;
position: relative;
}
/*中央配置*/
.box {
height: 17rem;
width: 20rem;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.stage {
height: 100%;
width: 100%;
position: relative;
}
輪郭を作る
border-radiusで目の輪郭を作る
border-radiusとは簡単に言ってしまうと、divなどのブロックの4つの角を丸めたりするプロパティです。
詳しく知りたい方は調べてみてくださいね。
先ほどのhtmlに書いたclass=”eye”のdivを目の輪郭にしていきましょう。
以下のようにcssを記述してみましょう。
css
/** 輪郭 **/
.eye {
border: 1px solid #000;
border-radius: 0% 145% 0% 193%/0% 134% 0% 193%;
height: 17rem;
width: 20rem;
position: absolute;
/* 角度調整 */
transform: rotate( -30deg );
}
目の輪郭が出来ました。
box-shadowで目らしくする
box-shadowはこちらも簡単に言ってしまうと、ボックスに影を落とすプロパティです。
前回のブログ、CSSで遊ぼう「CSSで絵を描き、さらに動かしてみよう」-入門編-でも利用したので
参考にしてみてください。
ではさっそく以下のように先ほどの.eyeにbox-shadowを追記してみましょう。
css
.eye {
/** 追記 **/
box-shadow:
/* 肌色全体大 */
-2.5rem -3.3rem 9rem 7rem rgba( 210,167,145,0.8 );
}
肌色の影を落としてみました。
box-shadowはいくつも重ねることができます。
色や透明度を変えたりぼかしたりした影をレイヤーのように重ねていくことで立体感を再現するわけです。
私はこのように影を落としてみました。
一行ずつ記述して何がどれなのか、記述の順番なども確認してみてください。
※先程は輪郭を視覚化したかっただけなので、borderは削除します。
css
.eye {
/*borderは削除した*/
border-radius: 0% 145% 0% 193%/0% 134% 0% 193%;
height: 17rem;
width: 20rem;
/* 重なり順大事うしろになるほど奥になる */
box-shadow:
0 .1rem 5rem 1.5rem rgba( 40,0,0,1 )inset,
1rem 0rem 0rem -0.6rem rgba( 180,45,0,1 )inset,
-1rem -0.1rem 1rem -0.9rem rgba( 255,255,255,.9 ),
-4rem -4.1rem 6rem -0.5rem rgba( 0,0,0,.9 ),
-2rem 2.9rem 5rem 0.1rem rgba( 197,143,132,.9 ),
-1rem 0.9rem 2rem -0.9rem rgba( 255,255,255,.9 ),
-1rem -0.1rem 1rem -0.5rem rgba( 0,0,0,.9 ),
-.1rem -.9rem .1rem .3rem rgba( 0,0,0,0.5 ),
-1.3rem .9rem 2.9rem -.1rem rgba( 255,255,255,0.3 ),
-.6rem -1.4rem 2.1rem 1.3rem rgba( 171,137,125,1 ),
-.3rem -2rem .3rem .9rem rgba( 0, 0, 7, 1),
-0.3rem -3rem 1.3rem 0.9rem rgba( 255, 255, 255, .6),
-.8rem -.9rem .6rem 1rem rgba( 0, 0, 7, 0.5 ),
-1.5rem .1rem 1rem .3rem rgba( 177,116,98,1 ),
-2.2rem 2rem 3rem 0rem rgba( 125,88,65,1 ),
0 .1rem 2rem 3rem rgba( 210,167,145,0.5 ),
-2.5rem -3.3rem 9rem 7rem rgba( 210,167,145,0.8 )
;
position: absolute;
transform: rotate( -30deg );
}
目です。白目です。
目玉を作る
擬似要素を使い目玉を作る
擬似要素に関してはこちらもCSSで遊ぼう「CSSで絵を描き、さらに動かしてみよう」-入門編-で利用しているので
参考にしてみてください。
基本的な考え方は同じなのでまとめて記述します。
こちらも一行ずつ確認してみてください。
ここでは.eyeにoverflow:hiddenを追記することがポイントとなります。
なぜかわからない方は、追記しないで表示してみましょう。
css
.eye {
/** 追記 **/
overflow: hidden;
}
/** 目玉 **/
.eye::before {
content: "";
background: rgba( 0,0,0,.9 );
border-radius: 50%;
box-shadow:
0 0 1rem .7rem rgba( 34,43,22,1 ),
0 0 1.5rem 1.8rem rgba(125,143,220,0.5 ),
0 0 1.5rem 4rem rgba(123,169,196,1 ),
0 0 .8rem 4.5rem rgba(3,3,20,1 ),
0 0 1.5rem 22rem rgba(187,185,212,0.2 );
color: rgba(70, 70, 74, 0);
font-size: 1.7rem;
height: 4rem;
width: 4rem;
position: absolute;
top: 6rem;
left: 10rem;
}
.eye::after {
content: "";
border-radius: 50%;
box-shadow:
6.5rem 9.5rem 1.4rem -1.2rem rgba(54, 23, 54, 1),
6.5rem 9rem 1.4rem -1.2rem rgba( 213,188,213,1 ),
8.2rem 7.6rem 1.4rem -1.2rem rgba( 213,188,213,1 ),
7rem 10.5rem 2rem 0 rgba(164,143,140,0.5 ),
10.5rem 12rem 1rem 4rem rgba(181,103,108,1 );
color: rgba(70, 70, 74, 0);
font-size: 1.7rem;
height: 4rem;
width: 4rem;
position: absolute;
top: 6rem;
left: 10rem;
}
目玉が出来ました。
なんだかまだ物足りないので、光を表現してみましょう。
新しくdivを追加し、class=”light”としcssを書いてみましょう。
html
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="box">
<div class="stage">
<div class="eye"></div>
<!-- 追記 -->
<div class="light"></div>
</div>
</div>
</body>
</html>
css
.light {
height: 100%;
width: 100%;
position: absolute;
}
/* 丸い光 */
.light::before {
content: "";
border-radius: 50%;
box-shadow: -2.5rem -.4rem .4rem 0 rgba( 255,255,255,0.9 );
height: 1rem;
width: 1rem;
position: absolute;
top: 6rem;
left: 10rem;
}
/* 四角い光 */
.light::after {
content: "";
background: rgba( 255,255,255, 0 );
box-shadow: 0 0 1rem .5rem rgba( 255,255,255,1 );
height: 4rem;
position: absolute;
top: 5rem;
left: 4rem;
transform: rotate( -102deg );
}
いい感じになってきました。
ちなみに上記にありませんが.eyeにborder-bottomを追加し目に白いラインを出してみました。
まつげをつけよう
text-shadowを使いまつげを再現
text-shadowはその名の通りテキストに影を落とすプロパティです。
text-shadowもいくつも影が落とせます。
私はこのように再現してみました。
html
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="box">
<div class="stage">
<div class="eye"></div>
<div class="light"></div>
<!-- 追記 -->
<div class="matuge_b01"></div>
</div>
</div>
</body>
</html>
css
.matuge_b01 {
font-family: serif;
height: 100%;
width: 100%;
position: absolute;
}
.matuge_b01::before {
content: ")";
display: block;
font-size: 2.2rem;
height: 1.3em;
opacity: 0.4;
position: absolute;
top: 14.1rem;
left: 8rem;
text-shadow:
10.8rem -1.9rem 0 #000,
9.2rem -1.9rem 0 #000,
9.7rem -1.8rem 0 #000,
8.5rem -2.4rem 0 #000,
8rem -2rem 0 #000,
11rem -1.5rem 0 #000,
9rem -1.9rem 0 #000,
5.3rem -2.1rem 0 #000,
3.8rem -1.6rem 0 #000,
6.2rem -1.8rem 0 #000,
.5rem -.4rem 0 #000,
12.2rem -1.5rem 0 #000,
6rem -2.2rem 0 #000,
-1.4rem .8rem 0 #000,
7.4rem -2.1rem 0 #000,
-1.3rem .7rem 0 #000,
2.1rem -1.1rem 0 #000,
-1.7rem 1.2rem 0 #000,
-3.7rem 2.8rem 0 #000,
-2.9rem 2rem 0 #000,
-2.5rem 1.4rem 0 #000,
-.6rem .4rem 0 #000,
-5.2rem 4.2rem 0 #000,
0rem -.2rem 0 #000,
-3.8rem 2.6rem 0 #000;
transform: rotate( 212deg );
}
.matuge_b01::after {
content: ")";
display: block;
font-size: 2.7rem;
height: 1.3em;
opacity: 0.4;
position: absolute;
top: 13.3rem;
left: 5.9rem;
text-shadow:
8.2rem -5.6rem 0 #000,
9.5rem -6.2rem 0 #000,
7.9rem -6rem 0 #000,
6.8rem -5.6rem 0 #000,
6.4rem -5.4rem 0 #000,
10.5rem -6.1rem 0 #000,
2.2rem -1.9rem 0 #000,
2.9rem -3rem 0 #000,
1.4rem -1.6rem 0 #000,
3.8rem -3.9rem 0 #000,
1.1rem -.6rem 0 #000,
1.7rem -1.5rem 0 #000,
3.9rem -3.4rem 0 #000;
transform: rotate( 243deg );
}
半角カッコを使いまつげを再現してみました。
いくつか試しましたがfont-family：serifはいい感じにまつげらしさを発揮してくれている気がします。
なんだかそれっぽくなってきました。きてます。きてますよ。
ここまで出来れば後は同じ要領でいけるはずです。
新たなdivや擬似要素を駆使して頑張ってまつげを増殖していきましょう。
完成しました！(はぁーまつげめんどくさいし難しかった。ぼそっ)
はいっおつかれさまでした！
どうでしょう？作れましたか？？
各プロパティの値が少し違うだけで表情がものすごく変わるので、完全に同じものはなかなか出来ないかと思います。
ですがそこがまた面白いと思います。（全部ソースを載せていないのもそのためです。めんどくさいからではないです。）
多分作っている途中に色々ひらめいて脱線する方もいるのではないでしょうか？
ぜひオリジナルを生み出してください。
調整しだいで色々出来る
影の落とし方、色、角度など変えたり、アイデア次第で色々遊べます。
目玉の色を変える
怒りを感じると目の色が変わる一族です。
目玉に影を落として丸みを強調する
ピクサーのような目玉が再現できそうです。
.eye::beforeにアニメーションを付けて動かす
今回は.eye::beforeに動かしたい目玉の部分を分けて記述しているので独立して動かせるわけです。
目玉にtext-shadowで模様を作る
小文字のsを並べてみました。
メイクする
綺麗です。メイクとかわかりませんが、とにかく綺麗です。間違いないです！
むすび
業務で使えるかは不明ですが、アイデア次第で面白いことが出来そうですよね。
簡単ではありますが、皆様のアイデアのヒントになれれば幸いです。
