ヘッダーイラスト
SORARA
CREATIVE BLOG
今日も楽しくクリエイティブ・ライフ!
プロフィール画像

あっちのそらら

趣味で創作活動をしています。
イラスト・グラフィックデザイン・ウェブデザイン・写真撮影など、さまざまなクリエイティブに挑戦中。

【CSSイラスト】スイカを描いてみた

htmlとcssで作るスイカ
こんにちはです。あっちのそららです。
夏の到来!ということで今回は、HTMLとCSS(ウェブ制作などで使う言語)で、スイカを描いてみました。

あまり需要のなさそうな内容ですが、一応レスポンシブ対応です。
「Result」でイラストを確認できます。

果肉と皮の色は、まとめて円形グラデーションにしました。各色の比率指定に神経を使いますが、色の境目のぼかしをなくすだけで、一気にスイカらしくなります。

そのままだと、スイカの輪郭からはみ出すので、親要素に「overflow: hidden;」を指定し、トリミングしてあります。

別バージョン。
1つ目とほぼ同じ描き方ですが、スイカを三角形にするため「clip-path」を使用しました。

全体を通して、面倒だったのは「種」の部分。
描画する種の数だけspanを作り、グリッドレイアウトで規則的に並べています。

種のグリッドレイアウト
スイカに沿った三角形の配置になるように、5×3のグリッドを作成。
あとは、それぞれの種(span)を何番目のグリッドに配置するかを指定します。

例として、上から2番目+左から4番目のグリッドに配置する場合は

grid-row: 2;
grid-column: 4;

という記述になります。
また、ズームによるはみ出しを防ぐため、種のサイズに上限値を設定しました。

皮と種をどう表現するか悩むテーマでしたが、技術的にまた一歩前進できた気がします。

あちぃ~

©2017 Sorara Creative Blog