thisiszeev
/
css-tricks
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
css-tricks/beating-heart/README.md

2.5 KiB
Raw Blame History

Beating Heart

This is a nice effect of a heart being constructed step by step then animating with a double pulse like a heart beat. You can customize this to send someone a love letter or a digital valentine.

Beating Heart

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.

    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.

    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.

    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).