CSS の力: DIV_html/css_WEB-ITnose で絵を描く

これらの絵はすべて DIV を使用して描画されています。実際、その原理は複雑ではありません。

これらの画像は CSS によって描画され、背景画像オーバーレイを通じて実装されます

たとえば、キノコの頭は、次のように、放射状グラデーション放射状グラデーションと線形グラデーション線形グラデーションを互いに重ね合わせることによって実装されます。

1

2

3

4

5

6

7

8

9

10

11

12

div {

幅 : 170px

高さ ; : 140px ;

背景画像 :

radial-gradient( 50% の円 120% , rgba( 0 , 0 , 0 , 0.7 ) 23% , rgba( 0 , 0 , 0 , 0 ) 48% ),

Linear-gradient( 30 deg, rgba( 0 , 0 , 0 , 0.4 ) 10% , rgba( 0 , 0 , 0 , 0 ) 20% ),

radial-gradient( 50% の円 33% , #f8f6f7 32% , rgba( 255 , 255 , 255 , 0 ) 32% ),

radial-gradient( -13% の円 55% , #f8f6f7 20% , rgba( 255 , 255 , 255 , 0 ) 20% ),

radial-gradient(circle at 113% 55% , #f8f6f7 20% , rgba( 255 , 255 , 255 , 0 ) 20% ),

Linear-gradient(tobottom , #ef0015 20% , #b2000c 100% :) 達成するイメージ。

PS: この方法は古いバージョンの IE を完全にはサポートしていません