Blog posts

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

Quick Tip: Keeping Your Footer at the Bottom of the Page

By definition, footers are meant to be at the bottom of a web page. However, a footer’s default positioning typically dictates that the footer will appear directly below the main content of a page, and if a particular page doesn’t have a lot of HTML content, the content and, in turn, the footer may not reach the bottom of the screen.

footer1

See all that space underneath the footer? That last line of the page really belongs at the bottom of the browser window. The footer positioning can be fixed by playing around with the margins, but that’s an inconsistent solution at best. … Continue Reading

Using CSS Float Property

The CSS float property is used to determine the position of HTML elements. Elements with the float property applied to them align themselves (or “float”) to the left or right sides of their container while retaining their position within the page’s flow. Float takes four values: left, right, none (this is the default), and inherit, which means that the element should inherit the float value of its parent element. Floats are commonly used to wrap text around images. Here’s how it works:

Let’s say you have an image in your HTML that is followed by text, like this:

float1

And let’s say you want the text to appear to the right of the image rather than underneath it.… Continue Reading