css3files.com

Choose a category and enjoy CSS3

Blog posts

Welcome to the ultimate resource for CSS help and tutorials. We have excellent, well thought out tutorials that can give you the tips and tricks to out design the rest. WordPress and Drupal are the main CMS we cover as well.

CSS3’s mix-blend-mode property is a handy tool for developers to use to create some cool effects without having to use image editing software like Photoshop. The mix-blend-mode property dictates how an element’s content should blend with the element’s background. For this tutorial, we’re going to use it to create a window text effect, like you see in the image above.

To start, you’ll need a div, and some text inside that div, like this:

CSS3’s text-shadow property makes it super easy to create some neon text. All you need to do to create the neon glow effect is to keep adding values to the text-shadow property, making sure that the horizontal and vertical shadow values remain at 0, while the blur radius values keep increasing. Check out the code below:

The text-shadow values with the smallest blur radius (5px and 10px) are the same color as the text to make the edges of the letters appear a little fuzzy — this enhances the neon glow effect we’re going for.… Continue Reading

<h1class="first-class second-class third-class">I have THREE classes</h1>

The syntax is pretty straightforward. All of the classes need to go within the one set of quotation marks, and they all need to be separated by one space. The example above shows an HTML element with 3 classes, but there’s truly no limit to how many classes an HTML element can be assigned.

In some cases, an element will belong to multiple classes that have overlapping properties.… Continue Reading

CSS3 allows you to set the background of any HTML element to a gradient using the background or background-image property (background-color is used for solid colors only).

The syntax is fairly straightforward. If you want to create a gradient like the one above of two or more (your gradient can be comprised of as many colors as you’d like) shades, all you need is one line of CSS: