How to Create the Gmail Logo with CSS3
A while back, I showed you how to make an RSS feed logo with CSS3. But that was just the beginning! Today, I’m going to teach you how to make not one, but two different versions of the Gmail logo using only CSS3.
Shortcut to:
- CSS Tutorial #1 – Gmail logo Preview
- CSS Tutorial #2 – Gmail logo Preview
Gmail Logo #1
The first logo is simple and pretty easy to create. So let’s jump right in! Open up your favorite code editor and enter the following HTML code. Save it as logo-gmail.html.
<head><title>Gmail CSS Logo</title> <style type=’text/css’></style> </head>
Add the following CSS styles in order to reset the default CSS values.
The code below will help us create the Gmail logo with its signature red background and rounded sides.
“`css
.gmail-logo,
.gmail-logo *,
.gmail-logo *:before,
.gmail-logo *:after {
margin:0;
padding:0;
background:transparent;
border:0;
outline:0;
display:block;
font:normal normal 0/0 serif;
}
“`
Next, we will create a white box within the red background to complete the logo design.
“`css
.gmail-logo .gmail-box {
}
“`
To achieve the effect of the red “M” in the logo, we will start by creating a box with a red border.
“`css
.gmail-logo .gmail-box:before {
}
“`
Then, we will hide the excess parts to form the complete red “M” shape.
“`css
.gmail-logo .gmail-box {
}
“`
To give the logo the appearance of an envelope, we will add two thin red borders.
“`css
.gmail-logo .gmail-box:after {
}
“`
Finally, we will add a gradient to the red envelope to add a finishing touch to the logo.
That’s it! We’re almost done with creating the Gmail logo.
Now, don’t forget this small yet important step: changing the color when someone hovers over it. To achieve this, include the following HTML DOCTYPE right before we move any further. And remember to add the following CSS styles before we finish up with this task.
Gmail Logo #2
Hey there! Let’s dive into creating a Gmail logo with a cool 3D effect. It’ll be a fun ride, so buckle up!
Gmail Logo 2
Okay, so here’s the deal. Since we want to give the logo a different perspective, we’ll start by giving it a little twist. Then, we’ll work our magic and create the different layers, or as I like to call them, “elements.”
I’m going to show you how to adjust the priority of z-index. It’s important to keep your HTML markup intact, so let’s dive in and I’ll guide you through the process step by step.
First, let’s take a look at the HTML code provided. We have a div with the ID “gmail-logo2” that contains five elements nested within it. Each element has a unique class name – element1, element2, element3, element4, and element5.
Now, to adjust the priority of z-index, we can use CSS pseudo-elements ::before and ::after. These pseudo-elements allow us to insert content before or after an element, which can be useful in modifying its appearance or behavior.
To begin, let’s target the first element (element1) and set its display property to “block”. This ensures that the element is rendered as a block-level element, taking up its own horizontal space.
“`
#gmail-logo2 .element1 {
display: block;
width: 380px;
height: 290px;
}
“`
Next, we can use the ::before and ::after pseudo-elements to modify the appearance of element1. Let’s add some content to these pseudo-elements using the content property.
“`
#gmail-logo2 .element1::before {
content: “”;
}
#gmail-logo2 .element1::after {
content: “”;
}
“`
We can also apply transformations to element1 using the transform property. For example, we can rotate it by 6 degrees clockwise.
“`
#gmail-logo2 .element1 {
transform: rotate(6deg);
-moz-transform: rotate(6deg);
-webkit-transform: rotate(6deg);
-o-transform: rotate(6deg);
}
“`
Now that we’ve adjusted the priority of z-index for element1, we can apply similar modifications to the other elements (element2, element3, element4, and element5) by following the same process.
Remember, it’s crucial to preserve the HTML markup exactly as it is shown to ensure that the code is valid and functional.
So that’s how you adjust the priority of z-index. Give it a try and see what creative designs you can come up with. Happy coding!
I’m almost finished with your Gmail logo. It should look like this:
Finally, let’s change its color when you hover over it.
When you hover over the logo, the background will change to a nice green color: rgba(20, 196, 7, 1). The first element will also have a box shadow effect, giving it a 3D appearance. The shadow will be slightly darker green: rgb(10, 90, 4).
The second element will also have a box shadow effect, with a lighter green shadow: rgb(10, 90, 4). This will help create a realistic depth effect.
The third and fourth elements will have the same box shadow effect as the second element.
That’s it! Your Gmail logo is complete, and it will look great with the new hover effects.
