CSS Tricks Round I

CSS is pretty essential in designing Web sites. You can do so much with it to customize the look and feel of your site. It was what started my interest in designing/developing web sites in the first place. Here are some fun tricks you can do with CSS that you may or may not have used. They may not all be compatible with earlier browsers, but as we're moving forward with newer versions of browsers, more people will be using newer versions than old. Sometimes it may be better to move forward with the new than to accomodate for the old when new stuff can make coding or designing easier and more efficient.

Truncating Single Lined Text

Did you know you can truncate single-lined text and add ellipsis after it using CSS? That's right, you don't have to do any programming with jQuery or javascript or server side scripting etc. Here's how to do it:

First create a div container or span tag or list etc. Give it a class name such as “truncate”. Well, you will probably want to give it a more meaningful class name, but for this tutorial's purpose, I will use “truncate”.

The width is there so the text will know when to stop horizontally. You don't want the text to wrap to the next line because you want to truncate it on the first line, so that's why nowrap is used for white-space. Overflow: hidden is used so the text doesn't make the container wider than it is because the text doesn't fit otherwise. Text-overflow: ellipsis tells the text to stop before 200px and add three dots (“…”) after the text, indicating the text has been cut off. Display: block is used to make the width work even on elements that normally are not block elements.

Rounded Corners

Here's an example that I had shown previously but had too much code and not enough explaination for the code. You can specify the radius for rounded corners in several ways. For instance, if you want all corners to be 4px, you can use this:

.rounded {
    border-radius: 4px;
}

Here's an example of all corners rounded with 50px radii to make a circle with a letter “C” in the middle:

The border-radius attribute makes the corners have a radius of 100px each. The width and height of the div are set to 100px as well so it can be a circle. I applied a pink background color to this circle div. To position the letter “C” in the center of the circle, I made the line-height equal to the height of the circle and the text to be centered horizontally with text-align: center. I chose the color white or #ffffff for the text, and 1.5 em for the font-size, which in this case is about 15px since the base font-size is about 10px.

You can even make cute animals with CSS such as those found on Paranoida.com.

But if you want different corners to have different radii, here's the way you would specify each corner:

border-radius: 20px 0px 20px 0px;

first: 20px = top left

second: 0px = top right

third: 20px = bottom right

fourth: 0px = bottom left

Here’s an example:

Box-Shadows

Box-shadows are also pretty popular. Here's a small example:

.shadow {
   box-shadow: 0 0 10px #dddddd;
}

The first 0 is the horizontal position of thfe shadow, the second 0 is the vertical position of the shadow, and the 10px is the blur distance of the shadow. If you don't specify that, then the shadow will not have a blur effect. The #dddddd is the color of the shadow. The shadow can also have a translucent opacity like this:

box-shadow: 5px 5px 5px rgba(0,0,0,0.5);

That's a box-shadow with the color black for the shadow, with 50% opacity, and a horizontal and vertical positioning of 5px so the shadow will appear towards the bottom right direction.

Here's what it would look like with the blurb above using that box-shadow:

Clearing floats

There are several ways you can clear floating elements so that whatever is below it doesn't wrap around it if it's not what you want it to do. For instance, if you have a photo gallery with each thumbnail image floating, and then you have some text or other elements underneath that you don't want to be wrapping around the last thumbnail image, you'll want to clear the floating after the thumbnails.

Here's a classic way to do this:

Another method that is less conventional that I learned recently is to set a width to the main container and set the overflow to be hidden so that the container holds the floating elements instead of the floating elements floating over the container. That way, what's outside of the container will not be affected by the floating elements.

.container {
   width: 400px; 
  overflow: hidden; 

}
.thumb {
 width: 110px;
   height: 110px;
  float: left;
}

This method does not require a div element called clear with the attribute clear: both. It's important to note that this means the stuff in the container cannot have negative margins that extend outside the container, or that content will be cut off. Also, you must set a width to the container. It can be 100% if you want it to be the width of the window. Overflow should be hidden and not auto so no scrollbars will show on Macs.

Targeting First Element with a Certain Class

Here's a trick to target the first element with a class even when that element is within other elements. Normally .class:first-child would work for simple cases, such as “if this element is the first child of the parent element”, but sometimes the structure is complicated and the parent element may only contain one child with that class name, but there are multiple instances of the parent with child.

If you want the first heading to have a different style attribute than the other headings, you can do this:

.container > .intro + .wrap .heading {
  color: #6699ff;
}

It looks for the first heading directly after the intro class. This may not work if there's no intro class or whatever element before it.

Another method would be this:

First add the style you want for the first heading by making it general for all elements:

.wrap .heading {
 color: #6699ff;
}

Then make a different style for the elements after the first one and target those elements this way:

.container > .wrap ~ .wrap .heading {
  color: #666666;
}

The ~ is a general siblings combinator. You can learn more here.

That's it for now. I hope you enjoyed this tutorial. I will make more CSS tutorials in the future.