5 CSS tricks you may not know

1. Using multiple classes together

Usually attributes are assigned just one class, but this doesn't mean that that's all you're allowed. You can actually assign as many classes as you like.

For example:


<div class="class1 class2"></div>


The class names are separates by a space. So that means "class1" and "class2" calls up the rules assigned to the div. If any rules overlap

between the two classes then the class which is below the other in the CSS document will take precedence.

2. !important ignored by IE

Normally in CSS whichever rule is specified last takes precedence. However if you use !important after a command then this CSS command will take precedence regardless of what appears after it. This is true for all browsers except IE.

For example:


margin-top: 3.5em !important; margin-top: 2em;


So, the top margin will be set to 3.5em for all browsers except IE, which will have a top margin of 2em.

3. Centre aligning a block element

If you wanted to fixed a width website of layout, and the content floated in the middle of the screen.

For example:


#content
{
width: 750px;
margin: 0 auto;
}



4. Changing Cursor

The cursor property specifies the type of cursor to be displayed when pointing on an element.

For example:


#wrapper a:hover
{
cursor: pointer;    /*crosshair*/
}



5. Transparency

This makes any element transparent.

For example:


.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}


This code makes the element 50% transparent- you can adjust the levels accordingly. Transparency is a bit weird because each browser reads it differently, so you need to make separate statements.

opacity: This will work in most versions of Firefox, Safari, and Opera. This would be all you need if all browsers supported current standards.

filter: This one you need for IE.

-moz-opacity: You need this one to support way old school versions of the Mozilla browsers like Netscape Navigator.

-khtml-opacity: This is for way old versions of Safari (1.x) when the rendering engine.

SlideShow using jQuery

Creating Image Slide Show using jQuery:

In the code below you will see a surrounding div (id slideshow-area) which holds our slideshow content scroll area and our next and previous buttons. Inside our scroll area we have a div to hold the content and finally the content itself. As far as html goes this is pretty simple stuff.

<div id="slideshow-area">
<div id="slideshow-scroller">
<div id="slideshow-holder">
<div class="slideshow-content">
<img src="eureka_small.jpg" />
</div>
<div class="slideshow-content">
<img src="wallace_gromit_small.jpg" />
</div>
<div class="slideshow-content">
<img src="dead_like_me_small.jpg" />
</div>
</div>
</div>
<div id="slideshow-previous"></div>
<div id="slideshow-next"></div>
</div>

CSS is up next, it is slightly more complicated than the html but nothing too crazy. The first piece to look at is the positioning and sizing of main slide show area and scroller, which can have pretty much the same css. We do however add a border to our area to bring it out a little. The code below is fairly understandable, I make sure to set the position to relative so that I can easily position the next and previous buttons absolutely.

#slideshow-area, #slideshow-scroller {
width: 500px;
height: 500px;
position: relative;
overflow: hidden;
margin: 0 auto;
}

#slideshow-area {
border: 1px solid #000;
}

We are also going to set the height of the content holder to 500px, same as the area.

#slideshow-holder {
height: 500px;
}

The next two items are the previous and next buttons. They take a little bit more work to make sure they are in the correct position. The buttons also have background images for pretty arrows (sorry IE6 users it may look bad since the arrows are png files). I also set the cursor to hand and pointer - for browser compatibility. And finally we also have classes to identify and float left each piece of content in the slideshow.

#slideshow-previous, #slideshow-next {
width: 50px;
height: 50px;
position: absolute;
background: transparent url("arrow_left.png") no-repeat 50% 50%;
top: 225px;
display: none;
cursor: pointer;
cursor: hand;
}

#slideshow-next {
display: block;
background: transparent url("arrow_right.png") no-repeat 50% 50%;
top: 225px;
right: 0;
}

.slideshow-content {
float: left;
}

Well onto the real work, we now have to create the JavaScript to handle our functionality. jQuery makes this relatively simple though. First item is adding code to the document ready event.

var totalSlides = 0;
var currentSlide = 1;
var contentSlides = "";

$(document).ready(function(){
$("#slideshow-previous").click(showPreviousSlide);
$("#slideshow-next").click(showNextSlide);

var totalWidth = 0;
contentSlides = $(".slideshow-content");
contentSlides.each(function(i){
totalWidth += this.clientWidth;
totalSlides++;
});
$("#slideshow-holder").width(totalWidth);
$("#slideshow-scroller").attr({scrollLeft: 0});
updateButtons();
});

Next we need to create the two functions showPreviousSlide and showNextSlide. These two functions do mainly three things: change current slide number, update the buttons, and scroll the content. These functions along with support functions are below.

function showPreviousSlide()
{
currentSlide--;
updateContentHolder();
updateButtons();
}

function showNextSlide()
{
currentSlide++;
updateContentHolder();
updateButtons();
}

function updateContentHolder()
{
var scrollAmount = 0;
contentSlides.each(function(i){
if(currentSlide - 1 > i) {
scrollAmount += this.clientWidth;
}
});
$("#slideshow-scroller").animate({scrollLeft: scrollAmount}, 1000);
}

function updateButtons()
{
if(currentSlide < totalSlides) {
$("#slideshow-next").show();
} else {
$("#slideshow-next").hide();
}
if(currentSlide > 1) {
$("#slideshow-previous").show();
} else {
$("#slideshow-previous").hide();
}
}

Rounded Corners

When CSS3 is fully supported across browsers rounded corners will be as simple as:

.element {border-radius: 5px}

which will set a 5px radius on all 4 corners. For now we need some browser specific CSS combined with a little JavaScript to make this work in all browsers.

In Safari, Chrome, and other webkit browsers we use -webkit-border-radius and in Firefox and other Mozilla based browsers we use -moz-border-radius.

.element {
border-radius: 5px
-webkit-border-radius: 5px
-moz-border-radius: 5px
}

Webkit and Mozilla use different syntax when specifying one corner.

.element {
border-top-left-radius: 5px
-webkit-border-top-left-radius: 5px
-moz-border-radius-top-left
}

For non Webkit and Mozilla browsers a little jQuery plugin will mimic the border-radius property.

$(".element").corner("5px");

The jQuery corner plugin allows for more than setting the radius of the corner. You can also set the corner to show as a number of other patterns.

Make 3D buttons view in CSS

3D CSS buttons are easy to create. The trick is to give your elements borders with different colors. Lighter where the light source shines and darker where it doesn't.

div#button {background: #888; border: 1px solid; border-color: #999 #777 #777 #999 }

The CSS above will create a button with the light source at the upper left. Usually one or two shades of color change is all that’s needed, but you can experiment for different effects.