Here are a few examples of some of the advanced css features that you can try on your site.
NOTE: There is a lot of places in the example code where “-moz” is used. This denotes mozilla firefox. If you need or want this code to work in webkit based browsers just replace the “-moz” with “-webkit”.
Here are a few code snippits on how to get certain background effects that aren’t too well known or at least aren’t covered in most html/css textbooks.
background: -moz-linear-gradient(left, rgba(0,0,250,0.9) 0%, rgba(0,0,250,0.9) 25%, rgba(0,0,250,0.6) 50%, rgba(0,0,250,0.3) 75%, rgba(0,0,250,0) 100%);
Here is a very basic linear fade that fades from 90% opacity to 0% opacity in 25% increments. Take note that rgba stands for re,green,blue,alpha and corresponds with the rgb colour and alpha transparency values.
background: url(“background_image.png”); /*fallback*/
Here is a green background set to 40% opacity. The line of code with the “/* fallback */” note in it is a fallback option to use a semi-transparent png image in case the browser were not to support alpha transparencies.
The horizontal rule is usually that ugly black line that is used as a separator on most sites. It doesn’t have to look bad however as there are many ways to spruce up your hr. Also most of the following tutorials are image gradient based so they can be used as backgrounds in other things than the hr. I try to explain how the gradients work from colour to colour in these tutorials so that you can experiment with them to get whatever look you desire.
background: -moz-radial-gradient(center, ellipse cover, rgba(255,0,120,1.0) 0%, rgba(255,0,120,1.0) 20%, rgba(3,3,3,0) 80%, rgba(1,1,1,0) 100%);
This gives the horizontal rule or any other background a cool laser effect.
background: -moz-linear-gradient(left, transparent 0% ,blue 5%, blue 95%, transparent 100%);
transparent starts at 0% and blends into blue to 5%. Blue ranges from 5% to 95% and then blends into transparent to 100%.
background: -moz-repeating-linear-gradient(45deg, white 0px, white 10px, red 11px, red 21px );
The colours slant at a 45* angle. If given a -45* angle the colours will slant in the opposite direction. White goes from 0 – 10 pixels, while red goes from 11 – 21 pixels. Each colour takes up a 10 pixels block that doesn’t blend into each other making a nice candy cane effect. Also I’ve rounded the edges so that it looks better.
border-top: 6px blue ridge;
The height of the horizontal line is reduced to 0 so that it does not appear. Then a standard border is added, but only to the top. I used this for several years to get a nice hr effect. Now days however there is a lot that can be done with css3 and gradients so this is no longer necessary. Although it is still a good technique if you need something that will work with older browsers.