Help us understand the problem. What is going on with this article?

ドラ〇もんも大好きな「どら焼き」をCSSだけで作ってみた。

どうも7noteです。なんか偶然の副産物でできてしまったので、記事にしてみました。

※ちなみに筆者はあんこが苦手なのでどら焼きは食べません。

完成図

dorayaki.png

ソース

index.html
<div class="dorayaki"></div>
style.css
.dorayaki {
  height: 60px;          /* どらやきの大きさ */
  width: 75px;           /* どらやきの大きさ */
  position: relative;    /* 疑似要素たちの基準値とする */
}

/* 上の生地と下の生地の共通CSS */
.dorayaki::before, .dorayaki::after {
  content: "";          /* 疑似要素では必須の指定 */
  display: block;       /* ブロック要素に変更 */
  width: 100%;          /* オススメ値 */
  height: 90%;          /* オススメ値 */
  position: absolute;   /* 相対位置に指定 */
  left: 0;              /* 左からの距離は0の位置 */
  border-radius: 100%;  /* 丸くないとどら焼きじゃないので */
}

/* 下の生地 */
.dorayaki::before {
  background: #B6733A;  /* ほどよい美味しそうな色を指定 */
  box-shadow: 0 -2px 2px 2px rgba(255,255,255,0.4) inset;  /* 生地の淵をほんのり薄い色にする */
  top: 13%;             /* 上の生地よりも少し前に出ているようにみせるため */
}

/* 上の生地 */
.dorayaki::after {
  background: radial-gradient(at 40% 80%,#CF924D,#CF924D 30%, #B6733A);  /* 光が当たっているように見せかけるため、円形グラデーションで生地の色を指定 */
  box-shadow: 0 8px 1px -5px rgba( 0, 0, 0, 0.8), inset 0 -2px 2px 2px rgba(255,255,255,0.4);  /* あんこの部分の表現、生地の淵をほんのり薄い色にする */
  top: 0;     /* こちらは0を指定 */
}

感想

当初は波線のCSSを作成していたのですが、気が付けば制作物がどら焼きに見えてしまいおもわず作ってしまいました。
改良を入れればチーズバーガーくらいなら作れそう。また暇になった時に挑戦してみます。

-追記-
挑戦してみた。
マク○ナルド風ハンバーガーをCSSだけで作ってみた

おそまつ!

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

7note
フロントエンジニア4年目。4〜5人ほど後輩の育成経験もあり。HTML・CSS初心者向けにわかりやすい記事を意識して書いていきます!目標毎日更新。自社開発を中心にWEBサイト制作を行っています。約40件のHP制作経験あり。Wordpressで独自テーマの開発などもちょこちょこやってます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away