Category: Web Development

One of the best things about CSS is that it gives developers the tools to create things that normally would have to be created with photo editing or illustrator software. One of the coolest effects you can achieve using only CSS is the versatile and super simple window text effect. This is an effect you can add to your projects as a header, a logo, a hover state…the possibilities are endless. And the best part is, it’s relatively easy to achieve from scratch.

To start, you’re going to need to pick a cool image or color that you want to use as the background for your page/container. Then we’ll begin with the HTML.

The HTML

The only HTML for this effect that’s absolutely essential is a div tag and a text tag (the bigger the better, so we used an h1 tag) somewhere within that div:

<div class="container">
<h1 class="window">COOL TEXT</h1>
</div>

The CSS

This effect is achieved entirely using CSS code. First, we’re going to import a font (we’re using Droid Sans, but feel free to experiment with your own font-family), assign that font-family to the HTML, and set up the cool image that we chose as the background of our container div:

body{
font-family: ‘Droid Sans’, sans-serif;
}

.container{
background: url(../sky.jpg);
background-size: cover;
}

That’s the easy part. Now it’s time to style the h1 tag. To style our h1, we’ll want to position it on the page using the left, top, and transform properties, change the positioning to position: absolute to ensure that all of the text remains positioned on the page once we apply the window effect, and set a large font-size and line-height property so that the effect is visible. It’s also very important that the background of the h2 tag is a dark color (we used #222) and that the color of the text is white (#fff).

h1.window{
 position: absolute;
 top: 30%;
 left: 50%;
 transform: translate(-50%, -50%);
 font-size: 100px;
 line-height: 80px;
 text-align: center;
 padding: 30px;
 color: #fff;
 cursor: pointer;
 background: #222;
}

The result of the above CSS will leave you with a result looking like this:

As you can see, the “window” effect hasn’t been applied to the text yet, because the text is white and opaque. To make the text transparent, you’ll only need one more line of CSS: the mix-blend-mode property. The mix-blend-mode property defines how an element’s content should blend with the background. When you apply it to light text on a dark background, the text will become see-through. Here is the final line you’ll need to add to the h1’s style:

h1.window{
  mix-blend-mode: multiply;
}

Your final result should now look like this:

Customize the code in this tutorial by adding your own text, images, colors, etc. Get creative and be sure to include this effect in one of your next projects!

In honor of Rogue One‘s recent release, we’ve compiled a list of our favorite (and the very best) Star Wars related CSS code snippets around. These snippets are yours to use, customize, or add to any of your space-themed projects.

1. Pure CSS Star Wars Lightsaber Checkboxes

This pure CSS snippet creates the lightsabers of everyone’s favorite Star Wars characters — Luke, Vader, Yoda, and Obi Wan. They’re created by adding a lot of different styling techniques to checkbox input fields, so that the lightsabers’ beam toggles when you click on the any of the handles.

2. Star Wars Opening Crawl from 1977

This tutorial demonstrates how to make a completely accurate version of the opening scene text crawl from the original Star Wars films. Complete with audio!

3. Pure CSS Storm Trooper

Create a realistic storm trooper helmet using only CSS with this CodePen tutorial.

4. AT-AT Walker

This snippet creates a detailed, animated AT-AT that walks and shoots lasers.

5. BB-8

This snippet creates a CSS version of everyone’s favorite new droid, BB-8. BB-8 responds to mouse movements and will actually move left to right depending on which way you point your mouse.

6. Pure CSS Princess Leia

Create a CSS rendering of Princess Leia and her iconic space buns using this code snippet.

7. Star Wars Menu Icon

This snippet is a really interesting take on the traditional “hamburger” menu icon — instead of three boring lines, the lines of the menu icon are actually lightsabers that light up when they’re hovered upon and animate when clicked.

8. Pure CSS R2-D2

Create an incredibly accurate pure CSS R2-D2 using this code snippet.

9. 3D Death Star

Use this code snippet to create a 3D Death Star that spins in space.

10. HTML5 Canvas X-Wing Animation

The x-wing plane in this code snippet is speeding past mountains and canyons just like it might in the Star Wars films.

In the famous old story of Hansel and Gretel, the children spread breadcrumbs behind them as they made their way into the woods. They left this trail of breadcrumbs so that they would always be able to find their way home. In web development, breadcrumbs are a navigational element that, much like Hansel and Gretel’s breadcrumbs, show you the path you took to get to the page you’re currently visiting, and allow you to retrace your steps, if you like. This helpful navigational element was actually named for the breadcrumbs in the old fairy tale.

While breadcrumbs are certainly a useful feature to add to any project, they’re often overlooked when it comes to adding style. Most of the time, they’re treated just like any other link in terms of style. If you want to add some flair to your breadcrumbs, check out the snippet below.

The HTML

Here’s the easy part. For the purposes of this example, we’ll just use static HTML to create our breadcrumbs, which will be <li> elements within a <ul> tag.

<ul id="breadcrumb">
 <li><a href="#"><i class="fa fa-home"></i></a></li>
 <li><a href="#">Crumb 1</a></li>
 <li><a href="#">Crumb 2</a></li>
 <li><a href="#">Crumb 3</a></li>
 <li><a href="#">Crumb 4</a></li>
 </ul>

Here’s how it looks so far:

As you might be able to tell, we used a Font Awesome icon to indicate the home page. If you plan on using Font Awesome too, make sure you link to their library somewhere in the <head> section of your code. Here’s the link to their library:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

The CSS

In the CSS, we’re going to give the breadcrumbs a nice arrow shape. This effect is achieved by utilizing the :before and :after pseudo-selectors (if you take a look at the code, you’ll see that all of the shaping of the breadcrumbs happens within the #breadcrumb li a:before and #breadcrumb li a:after selectors. If you’re interested in learning how to achieve that shaping, pay special attention to the uses of border and border-color within those selectors).

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);

body{
 font-family: 'Source Sans Pro';
 background-color: #d6fffb;
}

#breadcrumb{
 list-style-type: none;
 display: inline-block;
}

#breadcrumb li{
 float: left;
}

#breadcrumb li a{
 color: #fff;
 display: block;
 background: #f40c81;
 text-decoration: none;
 position: relative;
 height: 40px;
 line-height: 40px;
 padding: 0 10px 0 5px;
 text-align: center;
 margin-right: 23px;
}

#breadcrumb li:nth-child(even) a:before{
 border-left-color: transparent;
}

#breadcrumb li:first-child a{
 padding-left: 15px;
 border-radius: 4px 0 0 4px;
}

#breadcrumb li:first-child a:before{
 border: none;
}

#breadcrumb li:last-child a{
 padding-right: 15px;
 border-radius: 0 4px 4px 0;
}

#breadcrumb li:last-child a:after{
 border: none;
}

#breadcrumb li a:before, #breadcrumb li a:after{
 content: "";
 position: absolute;
 top: 0;
 border: 0 solid #f40c81;
 border-width: 20px 10px;
 width: 0;
 height: 0;
}

#breadcrumb li a:before{
 left: -20px;
 border-left-color: transparent;
}

#breadcrumb li a:after{
 left: 100%;
 border-color: transparent;
 border-left-color: #f40c81;
}

#breadcrumb li a:hover{
 background: #7dd49a;
}

#breadcrumb li a:hover:before{
 border-color: #7dd49a;
 border-left-color: transparent;
}

#breadcrumb li a:hover:after{
 border-left-color: #7dd49a;
}

It’s a lot of CSS, but don’t worry, most of it is rather simple. Here’s what it looks like now:

Finishing Touches

Let’s add some polish to this design by adding a cool hover effect that changes the background color from pink to green when the breadcrumbs are hovered upon. Because the #breadcrumb li a:before and #breadcrumb li a:after make up part of the background of the breadcrumbs, it’s important to remember to include hover effect style rules for them too, or else your breadcrumbs could end up looking a little funky when a user hovers upon them.

#breadcrumb li a:hover{
 background: #7dd49a;
}

#breadcrumb li a:hover:before{
 border-color: #7dd49a;
 border-left-color: transparent;
}

#breadcrumb li a:hover:after{
 border-left-color: #7dd49a;
}

This is what your finished product should look like (notice that the hover effect is applied to Crumb 4).