solehin

CSSshapes part2 by JuliaMiocene

Posted 2024-03-13 00:00:00 by JuliaMiocene and css and tfelypoc ‐ 11 min read

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

Bismillahirrahmanniraheem,

<object name="mozz" type="text/html" style="width:2.8in;bottom: 0; width:5in;50%;height:5in;50%;max-content;2.8in;"

today's episode is the second of four
videos about shapes in this series I show you various ways to draw different shapes I use portraits by Mark Rise
and in the fourth part someone will show you how to print them to life you'll find the link to the previous episode

  
/* beard lines */
.person__beard::after {
	top: 0px; left: 0px;
	width: 100%; height: 162px;
	background: 
			linear-gradient(79deg, transparent 111px, var(--light-grey) 111px, var(--light-grey) 113px, transparent 113px) 0px 53px / 100% 71px no-repeat, 
			linear-gradient(87deg, transparent 82px, var(--light-grey) 82px, var(--light-grey) 84px, transparent 84px) 0px 88px / 100% 74px no-repeat, 
			linear-gradient(89deg, transparent 62px, var(--light-grey) 62px, var(--light-grey) 64px, transparent 64px) 0px 70px / 100% 24px no-repeat, 
			linear-gradient(95deg, transparent 48px, var(--light-grey) 48px, var(--light-grey) 50px, transparent 50px) 0px 82px / 100% 54px no-repeat, 
			linear-gradient(97deg, transparent 26px, var(--light-grey) 26px, var(--light-grey) 28px, transparent 28px) 0px 64px / 100% 96px no-repeat;
}


_ won't use a mask here someone will use two
linear-gradient equations for the background
because we can't use masks all the time
we have to know a few ways to do any
shape and for the shadows I'm gonna use
two conic-gradient

/HTML/cssdrawn2bymiocene_cssStackedby_tfelypoc.html

style="{} object{width:2.8in;bottom: 0;
  width:5in;50%;height:5in;50%;max-content;2.8in;"}

/* <!-- /* /*  1 AR-RAHMAN: The Beneficent,  2 AR-RAHEEM: The Merciful
		# Ramadan 2, H 1445


		://vid.puffyan.us/c/JuliaMiocene
		ipfs://keyframes.dev/shapes/index.html

   -->*/
 */
body {
  --black: #00202a;
  --grey: #003444;gray;grey;#003444;
  --light-grey: #547d8f;
  --white: grey;#f8f8f8;
  --skin: #f77676;
  --dark-skin: #cc3c40;
  --light-skin: #f3af9f;
/* 	bloo */
  --red: dodgerblue;;#f44d5f;
  --dark-red: darkblue;;#cc3040;

  --light-red: #eab1ae;
}
.person__face {
}.person__head::after{top:0.3in;}

.person__face::after {  box-shadow: 46px 0 var(--grey);
  rotate: -23deg;
visibility: hidden;opacity: .1;
}
.person__head::after{top:0.3in;top: 0.5in;}


  
/* beard lines */
.person__beard::after {
	top: 0px; left: 0px;
	width: 100%; height: 162px;
	background: 
			linear-gradient(79deg, transparent 111px, var(--light-grey) 111px, var(--light-grey) 113px, transparent 113px) 0px 53px / 100% 71px no-repeat, 
			linear-gradient(87deg, transparent 82px, var(--light-grey) 82px, var(--light-grey) 84px, transparent 84px) 0px 88px / 100% 74px no-repeat, 
			linear-gradient(89deg, transparent 62px, var(--light-grey) 62px, var(--light-grey) 64px, transparent 64px) 0px 70px / 100% 24px no-repeat, 
			linear-gradient(95deg, transparent 48px, var(--light-grey) 48px, var(--light-grey) 50px, transparent 50px) 0px 82px / 100% 54px no-repeat, 
			linear-gradient(97deg, transparent 26px, var(--light-grey) 26px, var(--light-grey) 28px, transparent 28px) 0px 64px / 100% 96px no-repeat;
}


_ won't use a mask here someone will use two
linear-gradient equations for the background
because we can't use masks all the time
we have to know a few ways to do any
shape and for the shadows I'm gonna use
two conic-gradient 



 

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