Pure HTML with cSS gallery.md
Posted 2025-05-21 00:00:00 ‐ 7 min read
Bismillahirrahmanniraheem,
over `cssscripts.com`🔎
templating right in
the markdown (.md) markup!
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
CSS only no JavaScript
CSS only no JavaScript
someone will show you
various ways to draw different shapes _
use portraits by Mark rice for it in the
fourth spot someone will show how to bring them
to life so grab the cup of coffee sit
back and let's get started
it's with CSS only no JavaScript involved really actually surprisingly easy to do ？
thank you also _ need one more [gradient][linear-gradient]vfor the hair just a small piece near the ear yep that's it to make it more real I'm gonna do ice it's ？ again the circles so we know how to do this ？ place the element rounded and duplicate it with the [Box shadow][box-shadow]
M-x xah-change-newline-chars-to-one
Redo: (sgml-tag nil nil)Redo: (sgml-tag nil nil)M-x markdown-blockquote-region
someone already showed you how to partly fill the block with different gradients but it's not the only option that we have _ can fill this block with the inner Shadow and to make it move flat
hover over the name and
it it highlights the the person
how to use image mask border radius box [Shadow][css-box] inner [css-box][box-shadow-generator] [Shadow][box-shadow] passion filling with [linear-gradient][linear-gradient] gradient and fragile gradient and drop shadow function it's a lot but it's just the [first][home] of [four][~juliamiocene] [videos][~juliamiocene] about shapes share your portraits