5 Advanced CSS Techniques To Increase Your Skill Set
Thursday, December 3rd, 2009 Tags: CSS
The number of CSS techniques that can be used to achieve a certain effect is plentiful. As CSS standards progress, so do our options when it comes to working with CSS. Today, we will have a look at 5 advanced CSS techniques that will help to increase your skill set.
Tutorial Details
- Program/Language: CSS
- Language Version: 2.1
- Difficulty: Beginner/Intermediate
- Estimated Completion Time: 30 minutes
Below you will find a list of the different advanced CSS techniques we will shortly discuss in this article.
- Scaling the background image to browsers' window size (e.g.Twitter).
- Text & image indentation.
- Z-index in object elements.
- CSS shadows.
- CSS user interface enhancements
Scaling the image background to browsers' window size (e.g.Twitter)
If you take a look at the way Twitter handles user backgrounds, you will notice that there is a sort of scaling effect going on. This helps ensure that the page displays in an aesthetically pleasing way. A few months ago, I had to scale an image to the size of the browser. I tried many solutions, both with and without JavaScript, but they never fit the screen properly. I desired for the background to stay fixed and stretch across the windows size just like Twitter. Finally, I came up with a solution, and I'm going to share that solution with you today.
Let’s begin with the XHTML markup below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>scaling the background image to browsers window size</title>
</head>
<body>
<img src="images/picture.jpg" id="background" />
</body>
</html>
The above code should be pretty self-explanatory. It is an XHTML document with an inline image in the body, this will serve as the background image for the page.
Now, for the content and markup, let's create some DIV elements/sections as seen in the code below:
<div id="scroller"> <div id="container"> <div id="text-content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ligula sapien, imperdiet non egestas quis, tristique commodo augue. Nunc vehicula, lacus ac sagittis auctor, sem mauris laoreet neque, sit amet imperdiet enim felis ut enim. Proin vitae ipsum sapien. Donec placerat consequat est, eu dapibus diam vulputate non. Nam ultricies augue in urna aliquam vel posuere nulla tincidunt. Curabitur lectus augue, congue eget sodales vel, elementum eget lectus. Sed eget lobortis elit. Cras vitae rutrum quam. Curabitur eget turpis sit amet ante dignissim auctor ut posuere leo. Vivamus vitae gravida ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non purus urna. Nunc sit amet sem non est lobortis euismod sodales in ante. Phasellus et nunc nisl. </p><p> Nulla porta velit et libero venenatis ornare. Nam adipiscing interdum libero ac commodo. Proin lacinia elementum ornare. Sed sapien lectus, euismod vitae porta in, iaculis non dolor. Morbi vulputate tincidunt sollicitudin. Morbi sit amet fringilla felis. Nulla vitae tortor et massa convallis dictum quis at ipsum. Vivamus a mi vitae justo aliquam volutpat. Nulla sit amet enim libero. Praesent suscipit, erat in consectetur pretium, ipsum urna hendrerit lorem, sit amet placerat nisi lacus pharetra sem. Proin nec felis vitae lectus hendrerit vestibulum. Sed ullamcorper nunc nec turpis molestie ac semper urna accumsan. Pellentesque eget massa arcu. Vivamus vitae quam ut felis vehicula bibendum et vel sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis, sem vitae vulputate pharetra, elit felis aliquet diam, in sagittis enim dui eu justo. Nullam bibendum tincidunt dui eget sollicitudin. Praesent purus orci, suscipit eget sollicitudin in, scelerisque sed sem. Pellentesque et magna neque. Donec vestibulum venenatis arcu, quis pellentesque ipsum laoreet quis. </p><p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed malesuada nisi a tellus gravida blandit. Integer id quam ante. Cras non facilisis dui. Phasellus porttitor rhoncus consectetur. Duis nec orci nisi, pulvinar interdum libero. Nulla vel mi volutpat nisi aliquam dapibus sed id velit. Sed commodo pellentesque vulputate. Ut hendrerit orci sit amet mi pellentesque vitae rutrum sapien feugiat. Integer imperdiet quam a massa hendrerit sit amet egestas massa fermentum. Curabitur at massa risus. Mauris aliquet elit id nunc auctor interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam lorem magna, dapibus id volutpat id, pretium id tortor. Morbi pharetra elit lectus, quis semper ipsum. Mauris pulvinar consectetur elementum. Nam ullamcorper nisl et est consequat euismod. </p><p> Maecenas lacus massa, malesuada a pulvinar quis, convallis vel lacus. Sed velit lacus, sodales a accumsan nec, convallis nec justo. Donec vitae orci eu ligula semper tincidunt. Pellentesque facilisis urna et nisl tempus porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ut interdum erat. Pellentesque rutrum justo eu lectus molestie dictum. Pellentesque scelerisque pulvinar metus sit amet sollicitudin. Nullam nisi elit, hendrerit ut tempor id, volutpat et mauris. In hac habitasse platea dictumst. Phasellus elementum pharetra interdum. Phasellus vel velit vel felis vestibulum interdum a ut turpis. Cras facilisis nisl vel elit rutrum in blandit magna pharetra. Integer nec justo in risus fringilla ornare. Praesent ut erat quis orci fermentum placerat sit amet id purus. Proin nec nulla ligula. Ut nibh elit, pulvinar a porttitor sed, pulvinar id justo. Quisque est dui, facilisis non commodo sed, molestie volutpat justo. Nunc ligula purus, tincidunt et varius sit amet, vehicula vel tortor. </p><p> Duis ut ligula ut augue iaculis porta sed id metus. Duis ultricies tempor orci dapibus convallis. In hac habitasse platea dictumst. Aenean at velit magna, ac hendrerit lorem. Nam facilisis leo in nulla ullamcorper tempus. Duis odio orci, fringilla sed suscipit vel, luctus nec lorem. Maecenas convallis sagittis ultricies. Cras consectetur tristique metus nec tristique. Integer ultricies sem velit, et pulvinar odio. Maecenas quis sollicitudin eros. Ut eget justo non velit tincidunt rhoncus ac eget nunc. Proin quis urna turpis. Pellentesque id mauris diam, id aliquam metus. Curabitur vitae semper mauris. Morbi fringilla pharetra lectus. Ut diam nisl, egestas ac lacinia sed, sodales quis felis. Integer ante enim, interdum eu dictum vitae, sagittis vel tortor. Maecenas dignissim, nisl sed scelerisque molestie, tellus justo fermentum ligula, sit amet venenatis quam turpis quis diam. </p> </div> </div> </div>
There are three separate id containers: scroller, container, and text-content. The 'scroller' is used to move everything inside of it. In this case, the divs and content inside it.
See the preview of your code in your favorite browser.
Scroll down and you will see that the text is below your image, as demonstrated below:
We will now add the necessary CSS that will stretch the image to fit the screen. The image will be stationary and the text will move around if needed.
<style type="text/css">
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
}
#background {
position:absolute;
z-index:1;
width:99%;
height:100%;
}
#scroller {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
overflow:auto;
z-index:2;
}
#container {
margin-left:25%;
}
#text-content {
background-color:#CCC;
width:600px;
padding:10px;
margin-top:60px;
}
</style>
Let’s go through the above CSS code step by step.
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
}
The margin and padding is set to 0 to overwrite the default browser CSS settings. We set the width and height of the image to 100% and set overflow to hidden. After applying this above CSS, your page should look like the following:
You will notice that there are no scrollbars at right side and all of the text is hidden; This is because of the use of the overflow:hidden property.
#background{
position:absolute;
z-index:1;
width:100%;
height:100%;
}
Now, we set both the width and height of the image to 100% for the background to fully stretch to the size of the screen. We will get to why we are using z-index shortly. Using the above snippet, our page now looks like:
Now our background image is fixed to the screen.
#scroller{
position:absolute;
width:100%;
height:100%;
top:0
left:0;
overflow:auto;
z-index:2;
}
Styling the scrolling div is pretty simple, z-index is used to place the scroller on top of the background image - the overflow:auto property makes it scrollable when the contents of the scroller take up more room than provided. In other words, the content will be moving while the background is fixed. Let's take a look at the page now:
#container{
margin-left:25%;
}
#text-content
{
background-color:#CCC;
width:600px;
padding:10px;
margin-top:60px;
}
In the CSS code above, I've applied some basic styling to the content. The page will now look like:
You are free to use any of this code according to your needs. It is a nice example to demonstrate how you can stretch an image to the browser's size.
View Scaled Background Demo
Images and text-indent
As web developers, we are very used to using multiple images on our websites to achieve certain effects or outcomes.. If you want a professional CSS style, and improved SEO with images, you should write CSS in a separate file instead of via inline-css. Our HTML file will be smaller and search engines will crawl it faster and recognize them better. Let's see an example of using images with CSS in a better way.
Basic HTML markup:
<div id="map">This is the map of Pakistan, indicating my city Sialkot. </div>
Preview of above markup:
First, we shall apply some CSS to the above DIV:
#map{
position:relative;
background-image:url(images/map.jpg);
background-repeat:no-repeat;
width:382px;
height:296px;
}
After applying the CSS style, this is what the page looks like:
There is some text on top of the image, which will be crawled by search engines. We need to hide this from the user, though. You may be thinking about using the display:none; property, but, our purpose is to show the text when search engines crawl our webpage. Here is the updated code:
#map{
position:relative;
background-image:url(map.jpg);
background-repeat:no-repeat;
width:382px;
height:296px;
text-indent:-9999px;
}
text-indent:-9999px; is the property used to move the text away from the screen, rather than removing it completely. Click here to see more details on text-indent.
Your page will now look something like this:
Try the web developer Firefox plug-in to disable the CSS style and then see your website preview
You may know about CSS sprites, that they improve load times and decreases the number of HTTP requests that are made. But using the text-indent property with sprites makes the navigation even more fascinating for SEO as well. If you don't know about CSS sprites then take a look at some of the links below
http://net.tutsplus.com/videos/screencasts/exactly-how-to-use-css-sprites/
http://css-tricks.com/css-sprites/
In your CSS, you can set the background images and text-indent accordingly.
View Text Indent Demo
Z-index in an object tag.
What is z-index?
Elements have 3 positioning dimensions - X (horizontal), Y(vertical) and Z(depth). z-index is how deep down an element is - an element with a higher z-index is placed above an element with a lower z-index. Z-index must be an integer and can only work on elements that have explicitly been given a position property (absolute or relative).
One of my previous issues was fixing the z-index position in an object tag. The solution was very interesting, so let's it now!
Z-Index doesn't work with the object tag. So, after some research and several attempts, I reached a solution which I'll show you here:
<object width="425" height="355">
<param name="movie" value="http://www.youtube.com/v/u1zgFlCw8Aw&rel=1&color1=0x2b405b&
color2=0x6b8ab6&border=1&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<embed wmode="transparent" src="http://www.youtube.com/v/u1zgFlCw8Aw&rel=1&color1=0x2b405b&color2=0x6b8ab6&border=1&fs=1"
type="application/x-shockwave-flash"
width="425" height="355"
allowfullscreen="true"></embed>
</object>
In the embed tag, you will notice that I used the wmode="transparent" property. This sets the video into transparent mode. For flash files, see the below snippet:
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="660" height="95">
<param name="movie" value="Flash-banner.swf">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="8.0.35.0">
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf">
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="Flash-banner.swf" width="660" height="95">
<!--<![endif]-->
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="8.0.35.0">
<param name="expressinstall" value="Scripts/expressInstall.swf">
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
This part of the code is quite interesting, so I would suggest that you try viewing the page with and without these tags.
<param name="wmode" value="opaque">
View Z-Index Object Demo
CSS Shadows
If your job is to convert PSD to XHTML/CSS you must be dealing with shadows of images in the PSD that you are going to work on. You must be looking some solution to apply the shadows in CSS instead of taking the images from PSD. Applying shadows to images/text via CSS is a good way to reduce your file size.
There are two CSS3 properties to give shadows in web pages:
1. Text-shadow
2. Box-shadow
Text-shadow:
If you want to give shadow to your Text in webpage then use the text-shadow css3 property.Let's move step by step to achieve this goal.
1. Wrap the text with a DIV, as seen below:
<h2>Text Shadow</h2>
<div class="txt_shadow">
Envato - Nettuts+
</div>
2. Here is the css style that is used to give shadows to above text:
h2{
color:#FF0000;
text-decoration:underline;}
.txt_shadow{
font-size:38px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-shadow:2px 12px #999; /*x-axis y-axis color*/
}
Above css style is pretty simple to follow, text-shadow property is used for styling the text shadows. It takes 2 arguments. 1st is x-axis that scales the shadow to right side. 2nd is the y-axis that scales the shadow to down. If we set the negative value to x-axis it will scale the shadow to left and if we set the y-axis to negative it will scale the shadow to up.After applying the above html/css your text shadow will look alike below:
3. Let's make this more attracting by adding the blur to shadow.
<h2>Text Shadow with blur</h2> <div class="txt_blur_shadow"> Envato - Nettuts+ </div>
.txt_blur_shadow{
font-size:38px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-shadow:2px 2px 5px #999; /*x-axis y-axis blur color*/
}
See the text-shadow property clearly. We added 4 arguments now. 3rd one is new that is used to blur the shadow. After applying the above styling the resulting text will be
Looks pretty clean with blur 
Isn’t it ?
4. You can add even multiple shadows to your text. Its CSS style will be
.txt_multiple_shadow{
font-size:38px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-shadow:2px 12px #999,5px -5px #999; /* 1st style[x-axis y-axis color], 2nd style[x-axis y-axis color] */
}
See the text-shadow property; we used multiple styles of shadows separated by commas. You can even use blur with it too. After adding the above style it will look alike this
Click here to view the demo
Box-shadow:
The great way to give a shadow to an image in your webpage is use box-shadow property. Let’s see how to style the image shadows.
1. Take a picture of which you want to apply drop shadow. I selected a picture of my son
2. Wrap the image with a DIV, as seen below:
<h2>Image Shadow</h2> <div class="img_blur_shadow"> <img src="http://dev-tips.com/post_img/adnan/11.jpg" alt="" width="540" height="380" /> </div>
3. CSS style to apply shadow to above markup
.img_blur_shadow{
width:540px;
height:380px;
border:1px solid #000000;
padding:2px;
box-shadow:1px 1px 10px #999; /*[x-axis y-axis blur color]*/
-moz-box-shadow:1px 1px 10px #999;
-webkit-box-shadow:1px 1px 10px #999;
}
Box-shadow property cannot be recognized by every browser. So, we used –moz-box-shadow for Firefox and –webkit-box-shadow property for chrome/web kit engines. Arguments for box-shadow are same like text-shadow. Output of above html/css markup will be
4. Even, you can drop multiple shadows, like we have seen previously for text, for images also.HTML/CSS will be
<h2>Multiple Image Shadows</h2> <div class="img_multiple_shadow"> <img src="images/174955.jpg" alt="" width="540" height="380" /> </div>
.img_multiple_shadow{
width:540px;
height:380px;
border:1px solid #000000;
padding:2px;
box-shadow:1px 1px 10px #999,1px 1px 10px red; /*[x-axis y-axis blur color]*/
-moz-box-shadow:1px 1px 10px #999,1px 1px 10px red;
-webkit-box-shadow:1px 1px 10px #999,1px 1px 10px red;
}
The above code is pretty easy to understand if you have followed how to multiple shadows with text. It has same number of arguments and you can use number of multiple shadows separated by commas.
View CSS Shadows Demo
CSS UI Enhancements
While working on my latest project, I had a few strange issues I was running into. First of all, when I try to select the text in Firefox it didn't turn blue like in IE Browsers. Secondly, when the user clicks on a link, an dotted outline appears around the link. This was especially annoying because I was using text-indent with the links.
Text Selection Highlight Color
To create a highlight color when text is selected, I use the following code:
/*Mozilla browser selection*/
::-moz-selection{
background: #69f;
color:#fff;
}
/*Other browsers selection except IE */
::selection {
background:#69F;
color:#fff;
}
Remove Border Outline around links
I went over some popular websites and was shocked when I saw they had the same problem - an outline appears around the link. A few of the popular websites are listed below with their screen shots.
Even the BBC website is facing this issue.
So the solution for removing this outline is:
a:link, a:hover, a:visited{
outline:none;
}
Attribute-Specific Icons
Do you want to have file icons next to your links? Add PDF icons next to your .PDF links, MS WORD icons next to your .doc links, so on and so forth. This is a great way to make links describe what they're pointing to.
The code for specifying the attribute icons is:
a[href$='.pdf']{
padding:0 20px 0 0;
background-image:url(images/Print.ico);
background-position:right;
background-repeat:no-repeat;
}
a[href$='.doc']{
padding:0 20px 0 0;
background-image:url(images/docs.ico);
background-position:right;
background-repeat:no-repeat;
}
View UI Demo
Conclusion
In this tutorial, we have learned the advanced techniques of CSS that can solve some tricky issues. Luckily, most if not all of these techniques are easy to understand and implement. If you know of any other techniques to solve these problems, please share them with the world and post them in the comments area.
Tags: CSSIf you enjoyed this article, you might consider subscribing to our rss feed to stay updated with all the latest tips and articles!
Article Sponsored by:
Covering everything from getting started to expanding your business, How to Be a Rockstar Freelancer is the official FreelanceSwitch book. Written by Collis and Cyan Ta'eed - the founders of the site.
ABOUT THIS AUTHOR
6 Comments
subscribe comments feedTrackbacks/Pingbacks
Leave a Reply
Popular Series
Related Posts
Great tutorial. A lot of the popular css resets remove the link outlines as well but I think it’s important to leave the a:focus outline in place for usability purposes and to assist those using screen readers and keyboard navigation.
Yes, it is good for usability but i came across this when my Client asked for this.(Please remove this outline)
awesome work, nice flow, really appreciate the post .
Will the Text shadow and Image shadow works with Internet Explore?, i used to use Images else Cufon, sifler to make shadow and to use customs fonts
No, text and image shadows will not work in IE unless you use the drop shadow Jquery Plugin ..
Hmm. Positioning everything absolutely doesn’t sound like the way to go. Why not just have that image with 100% width and height and that placed behind everything with z-index: -1? All the background colors and such can be then included to the image (or its wrapper or such).