Blog posts

CSS3Files: CSS Tips, Tricks and Tutorials

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.

Style Blockquotes with CSS3

With CSS you can easily take any standard, basic blockquote (like the ones pictured below) and completely customize it.

blockquotes

Start off with a few blockquotes, and give each one an alternating class of “right” and “left”, like this:

  1. <blockquote class="left">Sint pork chop irure in eu. Quis tempor sausage cupim salami. Meatloaf pancetta prosciutto tenderloin pig short ribs corned beef t-bone porchetta. Leberkas aliquip jerky enim kevin eiusmod in.</blockquote>
  2.  
  3. <div class="clear"></div>
  4.  
  5. <blockquote class="right">Sint pork chop irure in eu.
Continue Reading

Create Window Text Effect Using CSS3’s Blend Mode Property

windowtext3

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:

  1. <div class="background">
  2. <h1 class="window">WINDOW TEXT</h1>
  3. </div>

The div should have a designated width and height, and a cool image for a background.… Continue Reading

CSS3 Neon Glow Text Effect

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:

neon

  1. h1{
  2. text-align: center;
  3. font-size: 50px;
  4. font-family: "Roboto";
  5. color: #fff;
  6. text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff0080, 0 0 30px #ff0080, 0 0 40px #ff0080, 0 0 55px #ff0080, 0 0 75px #ff0080;
  7. }

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

Assigning Multiple Classes to an HTML Element

Any given HTML element can have more than one class. Assigning multiple classes to a single HTML element looks like this:

  1. <h1 class="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

Using Linear Gradients

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:

  1. .colors{
  2. background-image: linear-gradient(#ffcccc, #6666ff. #ccff66);
  3. }

By default, the gradient is vertical, but you can easily change the gradient’s direction with CSS.… Continue Reading