Font Fun with CSS

Here at House of Margot, FUN is part of our brand. Give us all the colors and things that make us happy.

We wanted to show a few different text effects that were inspired by a Pen we found by Moslim over on Code Pen. If you haven’t played around on Code Pen, please do; it’s immensely helpful and addictive!

*Click on the ‘HTML’ and ‘CSS’ buttons on the Pen to view the HTML and CSS used to create the effect

RAINBOW FUN WITH GIFS

This text effect is created by using the CSS element ‘background-clip’ and transparent text. It’s kind of like using the clipping mask in Photoshop. You can customize this code by changing the text, font-family, and replacing the GIF URL - just head to GIPHY to search for a new one.

See the Pen (cool) text effect by Mariah Rockwell (@mariahrockwell) on CodePen.

BRING ATTENTION TO YOUR NEWSLETTER

Help grow your newsletter list by ensuring the sign-up section is attention-grabbing. We created this by using Wingdings as our font-family, so feel free to play around on your keyboard and see what other icons you can use.

See the Pen Fun Newsletter by Mariah Rockwell (@mariahrockwell) on CodePen.

To add to your blog:

  1. Create a ‘code’ block

  2. Copy the HTML from the Pen

  3. Add it to the block

<div class="title">
 <h1>shine<br/>bright</h1>

4. Above that HTML - within the same block - add <style></style> tags. Within those, style tags, you’re going to place the CSS that you copied from the Pen, like so:

<style>
body {
    background-color: #000;
}

.title {
    font-family: "Bebas Neue";
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    letter-spacing: 1px;
}

h1 {
    background-image: url(https://media.giphy.com/media/URZcG7uLd9h4s/giphy.gif);
    background-size: cover;
    color: transparent;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    text-transform: uppercase;
    font-size: 120px;
    line-height: .85;
    margin: 10px 0;
    letter-spacing: 22px;
}

</style>
<div class="title">
 <h1>shine<br/>bright</h1>

5. Feel free to make any changes and save!


LOVE THIS POST?

PIN THIS IMAGE TO YOUR BOARD!

fun-fonts-with-CSS.jpg