Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8664

ハーイ、バブー、ちゃーん

$
0
0

まじでこの世の全てのイクラ好きに教えてあげたいんだが

このQiitaの記事には全ての人間を虜にする禁断のイクラのレシピがある。
これが美味しそうでもなく、もはや食べられないのだが、
HTMLとCSSだけでイクラを再現したからぜひ全国のイクラ好き、
イクラを愛する者たち、イクラを憎む者たち、全てのイクラ関係者に伝われ

イラストチックなイクラを作った

スクリーンショット 2019-12-03 18.01.55.png

イクラのレシピ

HTMLを用意する

イクラの枠組みを作る

<divclass="container"><divclass="ikura"><divclass="ikura_inner"><divclass="ikura_luster"><divclass="ikura_lusterInner"></div></div></div></div></div>

スタイルシートを用意する

イクラに命を捧げましょう
まずは色を適当につけます。

スクリーンショット 2019-12-03 17.51.11.png

なんだか、心もとないですね。
イクラの色は箇所によって薄いところと、濃い色の箇所があるので、
そこを linear-gradientで再現しましょう。

.ikura{background:linear-gradient(#D83F28,#FB8B0095%);&_inner{background:rgba(246,74,7,0.5);}}

スクリーンショット 2019-12-03 17.52.07.png

少しイクラ感出てきました。
ただ、なんかまだイラスト感がありますね。
外側のイクラの色と内側のイクラの色の境目がパキっとなっているので、
box-shadowで境目のパキっと感をぼかしてあげましょう。

.ikura_inner{box-shadow:5px5px10px0pxrgba(246,74,7,0.5);}

スクリーンショット 2019-12-03 17.54.27.png

少し柔らかい印象になりました。

最後に、白い光沢の部分に若干影をつけてあげるとより近づきます。

.ikura_luster{background:#fff;box-shadow:-7px2px7px11px#DA8151;}

スクリーンショット 2019-12-03 17.57.00.png

イクラーーーー!チャーーーーーーン!!!!

最後に全体のscssを置いておきますね。(汚いとかはちょっとすみません)

.ikura{background:$ikura;width:200px;height:200px;border-radius:100%;transform-style:preserve-3d;perspective-origin:0%50%;&_inner{background:rgba(246,74,7,0.5);box-shadow:5px5px10px0pxrgba(246,74,7,0.5);width:180px;height:180px;border-radius:50%;transform:translateX(5px)translateY(3px);}&_luster{background:#fff;border-radius:50%;width:40px;height:30px;margin:auto;transform:translateX(-70%)translateY(90%)rotate(-40deg);box-shadow:-7px2px7px11px#DA8151;position:relative;&:after{content:"";display:block;position:absolute;width:30px;height:40px;background:#fff;border-radius:50%;transform:rotate(118deg);right:-6px;top:-4px;}}}

おわりに

か、カレーは明日から()


Viewing all articles
Browse latest Browse all 8664

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>