Create a Logo with CSS
Today, we’re creating a simple logo with CSS. Since CSS3 became generally available in all browsers a few years ago, we can use a lot more builtin browser features where before Photoshop became necessary (I just say rounded corners!). Creating a simple logo with CSS is one of these situations where we can leverage recent CSS features such as transform and animation to create something visually appealing!
Create a div container
Create a container that will contain our logo
Create a CSS Class
We’re assigning a new font-size to verify that the class gets applied.
Pick colors and configure display settings
If you don’t already have a color scheme, go ahead and create one. I use https://coolors.co for that. With the new color scheme in place, let’s define a background and text color:
After plugging in the colors you will notice that the expands over the site’s full width.
This happens because is a block element. It automatically expands over the full page width.
By default, a block-level element occupies the entire space of its parent element (container), thereby creating a “block.”
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
In our case, we’d like the to occupy only as much space as it really needs. We can accomplish this by changing its display setting to inline-block .
What you can see now is that its width has changed so that it only is as long as its content.
With display we can change an HTML element’s way of rendering itself. The setting block ensures that it takes up the full width of its parent container, where inline on the other hand works like this:
The element generates one or more inline element boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space
https://developer.mozilla.org/en-US/docs/Web/CSS/display
inline-block is a combination of inline and block :
The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).
https://developer.mozilla.org/en-US/docs/Web/CSS/display
Set a new font
It’s time for a different font. Right now the logo text is rendered using the browser’s default font. We’d like to customize this a bit.
Instead of the default font, we now use Courier. Add font-family: Courier to the class.
Margin and Padding
The next step is to add some margin and padding to improve optics. Add margin: 15px; and padding: 15px; to the class:
Margin defines the space between the element’s outer borders and its parent conainer, where with padding we can control the space between the element’s inner border and its children.
Time for Transformations
Did you know that CSS can also animate and transform your HTML elements? Let’s get into it.
First, we’ll do some rotation and skew.
Add transform: rotate(-10deg) skew(-17deg); to the class:
transform accepts a bunch of different values. In our case, we’re configuring a -10 degree rotation, followed by a skew. The skew ensures that the text looks a bit more natural. The logo now looks like this:
Animate!
In the last step we’re adding some animation as well. It’s possible to animate a lot of different properties. In our case, we’re focusing on the background color.
We start with defining keyframes .
These define the different states of the animation. We specify a color at 0%, 50% and 100% to ensure a gradient. Once the keyframes are in place, it’s time to use them on our logo class. We add animation: pulse 5s infinite; style for that:
Let’s break down the animation style. We specify that we’d like to use the pulse keyframes in a five second interval. Also, the animation is supposed to run indefinitely. The browser takes care of everything else.
And with this we’re done! You just created your first logo with CSS and animations!
Make sure to checkout the source code for this example on Codepen!