solehin

CSSshapes part1 by JuliaMiocene

Posted 2024-03-10 00:00:00 by JuliaMiocene and css and tfelypoc ‐ 6 min read

1 AR-RAHMAN: The Beneficent, 2 AR-RAHEEM: The Merciful

Bismillahirrahmanniraheem,

11	position: relative;

12	height: 100vh;

13	margin: 0;

15	

16	--black: #00202a;

17  --white: #f8f8f8;

18  --blue: #2348cd;

19  --skin: #f77676;

20  --dark-skin: #cc3c40;

21  --light-skin: #f3af9f;

22  --yellow: #f6d359;

23  --dark-yellow: #e9a964;

24}

25

1/* ear and hair */

2.person__head {

3	top: -145px; left: 5px;

4	width: 50px; height: 50px;

5	background: var(--dark-skin);

6	border-radius: 50%;

7	box-shadow:

8			/* ear */

9			135px 0 var(--light-skin),

10			/* front hair */

11			120px -40px 0 10px var(--yellow),

12			80px -60px var(--yellow),

13			30px -100px 0 15px var(--yellow),

14			/* back hair */

/* ear and hair /
.person__head {
top: -145px; left: 5px;
width: 50px; height: 50px;
background: var(--dark-skin);
border-radius: 50%;
box-shadow:
/ ear /
135px 0 var(--light-skin),
/ front hair /
120px -40px 0 10px var(--yellow),
80px -60px var(--yellow),
30px -100px 0 15px var(--yellow),
/ back hair */


as a before element because _ have a lot
of things behind it so head element I'm
gonna use to draw an ear it's just a
circle circles and ellipses are
rectangles with border radius 50 percent
if you see other round elements it's the
sign that you can use box Shadow to
duplicate the original Circle
and also _ can change the size of these
duplicates with the fourth number of the
Box Shadow property spread Shadows
if _ Define spread radiuses for example
10 pixels it will add 10 pixels to all
the sides of the original block if _
Define the spread radius as minus 10
pixels it will reduce the original block
to 10 pixels from each side