thisiszeev
/
css-tricks
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update beating-heart/README.md

This commit is contained in:
Ze'ev Schurmann 2025-04-22 17:06:22 +02:00
parent 76e2d96220
commit 14c5d062fa
1 changed files with 62 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
beating-heart/README.md
View File

@ -4,3 +4,65 @@ This is a nice effect of a heart being constructed step by step then animating w
![Beating Heart](https://git.zaks.web.za/thisiszeev/css-tricks/raw/branch/main/beating-heart/beating-heart.gif)
# The CSS Explained
Inside the HTML file is some CSS code. Let's take a look at the various elements...
## Tags
### body
This block of CSS defines the formatting for the entire HTML document. Every element inside the `<body></body>` tags will inherit these settings.
````CSS
body {
background: linear-gradient(to right, #ffdee9, #b5fffc);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
font-family: 'Segoe UI', sans-serif;
}
````
1. First we set a background gradient going from left to right. (https://www.w3schools.com/css/css3_gradients.asp)
2. We define the display as a flex mode. (https://www.w3schools.com/css/css3_flexbox.asp)
3. We set the content justification to center so that the content is in the vertical center of the viewport. (https://www.w3schools.com/css/css_align.asp)
4. We set the content alignment to center so that the content is in the horizontal center of the viewport. (https://www.w3schools.com/css/css_align.asp)
5. We define the height of the viewport to 100% of the viewport height where 1vh = 1% of viewport height. (https://www.w3schools.com/cssref/css_units.php)
6. We set the flex direction from top to bottom.
7. We define the font to be used as **Sefoe UI** or to fall back to the system default sans-serif font as defined in the users operating system.
### h1
This CSS block defines custom formatting for all H1 tags.
````css
h1 {
color: #e6005c;
margin-top: 30px;
font-size: 2.2em;
}
````
1. Using RGB Hex Values, the color is defined as 230 Red (e6), 0 Green (00) and 92 Blue (5c).
2. The top margin is set to 30 pixels.
3. The font size is set to 2.2 X the inherited font size, which in this case is the browser's default font size for H1.
### p
This CSS block defines custom formatting for all P tags.
````css
p {
font-size: 1.2em;
margin-top: 10px;
color: #444;
}
````
1. The font size is set to 1.2 times the inherited font size, which in this case is the browser's default font size for P.
2. The top margin is set to 10 pixels.
3. Using singled digit RGB Hex Values, the color is defined as 60 Red (4), 68 Green (4) and 68 Blue (4).