CSS3’s Tilted Text Effect

Here’s a cool text effect that can be achieved easily using CSS3: tilted text. To create this effect, you’ll need to create to divs — one for the text that is to be tilted to the left, and another for the text that is to be tilted to the right. Your HTML should look something like this:

<div id="container">
<div id="tilted-left">TILTED</div>
<div id="tilted-right">TEXT</div>
</div>

To style this properly, you’ll have to use the transform property with rotate values (which you can customize depending on just how titled you want your text to be). You can also use the text-shadow property to give the text a slight 3D effect. Here’s what your CSS needs to look like:

#tilted-left {
 font-size: 100px;
 color: #fff;
 text-shadow:#fff 1px 1px 0,
 #f1f1f1 2px 2px 0,
 #f2f2f2 3px 3px 0,
 #f3f3f3 4px 4px 0,
 #f4f4f4 5px 5px 0,
 #f5f5f5 6px 6px 0;
 transform: rotate(-4deg) rotateX(10deg) skewX(2deg);
 float: left;
}
 
#tilted-right {
 font-size: 100px;
 color: #fff;
 text-shadow:#fff 1px 1px 0,
 #f1f1f1 2px 2px 0,
 #f2f2f2 3px 3px 0,
 #f3f3f3 4px 4px 0,
 #f4f4f4 5px 5px 0,
 #f5f5f5 6px 6px 0;
 transform: rotate(4deg) rotateX(-10deg) skewX(-2deg);
 float: right;
}

Play around with the text-shadows, colors, and degrees of rotations to customize this tilted text to your own liking.

Screen Shot 2017-01-11 at 1.33.14 PM

How to Use the @font-face Rule

Sick of using web-safe fonts, or scouring Google fonts (https://fonts.google.com/) for something new and innovative? With the @font-face rule, it’s totally possible to use ANY font in your web apps, as long as you have access to the .ttf/.otf or .woff file on a server somewhere (preferably on the server that’s local to your project). […]

Read on...

5 Cool CSS Tutorials for Your Next Project

Screen Shot 2017-01-08 at 6.06.08 AM

Looking for some inspiration of something cool or unique to add to your next project? Check out any of these tutorials below: 1. Blur Menu with CSS Transitions This tutorial comes complete with several different options for creating a navigation menu with cool blurred text effects and smooth CSS transitions. 2. Animated Content Tabs Learn […]

Read on...

The Newbie’s Guide to Code Snippets

If you’re new to CSS (or even if you aren’t!), you can learn a lot from checking out different CSS code snippets. Not only can you use them to learn some new CSS techniques or skills (studying snippets is a great way to see how properties can be used in different ways to achieve all […]

Read on...

Using CSS3’s text-overflow Property

The text-overflow property is a useful one that is used to indicate how to handle text overflow. Text overflow occurs when the text or content of an element is too big for the space of the container, meaning that it overflows from its boundaries. It’s a really great way to handle the sometimes sloppy look […]

Read on...

CSS3’s Word-Break Property

Have you ever wondered if there’s a way to control where and how the words break in your HTML? Like if for some inexplicable reason, the text doesn’t break exactly where you want it to due to the the width restrictions of the parent element? If this is the case, you should try using CSS’s […]

Read on...

How to Get Rid of Scroll in Textarea Fields

Textarea fields are great because they’re useful and they’re super easy to work with. Sometimes, however, a scrollbar appears within the textarea field, usually because the amount of text in the textarea exceeds the height of the textarea field because the field is just too small — there’s not much that can be done (or should […]

Read on...

How to Give an Element the Height of the Window

Setting the width of an element to the full window height is done pretty commonly, but it’s a lot more rare for an element to be given the full height of a window. The strategy behind stretching an element to the full height of the window is essentially the same as stretching an element to the […]

Read on...

How to Add a Highlight Effect to Checked Input Field

Screen Shot 2016-12-17 at 11.18.34 AM

This tutorial shows you an easy way to add a highlight effect to an input field that has been checked by the user. Not only is this a cool and different way to add some style to your sites, but it also improves user experience by making it pretty impossible for the user to accidentally […]

Read on...

Get Web Safe Fonts with Awesome Fontstacks

Screen Shot 2016-12-17 at 11.32.57 AM

Awesome Fontstacks is a really great tool that can be used not only to create a beautiful font stack for your projects, but also to make sure that your font stacks have web safe options as backups, just in case. This way no matter what browser your user is on, or what type of machine […]

Read on...