2 Create a Website Blog

Four CSS3 Tricks to Pimp Your Site in Minutes!

Filed Under: Design 75 Comments

CSS 3If you’re one of those people who shuts down or goes cross-eyed when you read anything about CSS, stay with me.

You guys know how I roll. I will make this as painless and easy for you to implement as possible — at least that’s my goal anyway. The code is provided below so all you need to do is copy and paste.

I’ve been taking some time to learn more about CSS3, which allows you to do more styling on your site with minimal code and images.

Cleaner code and fewer images ultimately means faster loading pages and it’s better for SEO (less code for the engines to wade through.)

I’ve been slowly implementing a few CSS3 tricks here and there so I developed this mini tutorial on how to take advantage of the border, box and shadow properties. Because not all browsers support CSS3, I haven’t gone too crazy with implementation just yet.

The CSS Border/Box Properties

In this post I’m going to focus on adding rounded corners, image borders and shadows.  Before CSS3, creating rounded corners and shadows was a royal pain.  You had to use an image and position them using coordinates.  But with CSS3, it’s a breeze!

1) Creating Rounded Corners

The border-radius attribute creates rounded corners around an element. This code works in IE, Firefox, Chrome, Opera and Safari.

The first thing you need to do is paste the following CSS code into your style.css file. Feel free to adjust the color, width, padding, etc.

div.rounded
{
padding:10px 35px;
background:#eed9a8;
border:2px solid #000000;
border-radius:20px;
-moz-border-radius:20px; /* For Firefox 3.6 and earlier */
width:250px;
}

Now in your post you simply use…

<div class=”rounded”>This text will be surrounded by an object with rounded corners</div>

And this is the result…

This text will be surrounded by an object with rounded corners

2) Creating a Border With an Image

CSS3 allows you to use an image as a border. This does not work in IE — shocking, I know. 😉

So let’s say you want to turn the following image into a border…

This is a simple image I created in seconds using Photoshop’s Custom Shape Tool. To turn this into a tiled border, add the following code to your style.css file…

div.border
{
border-width:15px;
width:225px;
padding:15px 20px;
}


#tiled
{
-moz-border-image:url(redBox.gif) 25 25 round; /* Firefox */
-webkit-border-image:url(redBox.gif) 25 25 round; /* Safari and Chrome */
-o-border-image:url(redBox.gif) 25 25 round; /* Opera */
border-image:url(redBox.gif) 25 25 round;
}

Don’t forget to upload your own image and change the name and path of the image named redBox.gif or this won’t work.

Now, in your page, add the following code…

<div class=”border” id=”tiled”>This image is tiled/repeated around the text</div>

And this is the result…

The image is tiled (repeated) around the text

You can also stretch the image border with the following CSS code…

div.border
{
border-width:15px;
width:225px;
padding:15px 20px;
}


#stretched
{
-moz-border-image:url(redBox.gif) 25 25 stretch; /* Firefox */
-webkit-border-image:url(redBox.gif) 25 25 stretch; /* Safari and Chrome */
-o-border-image:url(redBox.gif) 25 25 stretch; /* Opera */
border-image:url(redBox.gif) 25 25 stretch;
}

Now paste the following code into your actual page…

<div class=”border” id=”stretched”>This image has been stretched so it takes on a slightly different shape</div>

And the result is this…

This image has been stretched so it takes on a slightly different shape

3) Creating a Box Shadow Effect

This is a great trick to use if you want to create a shadow box effect around your text, image, etc. You can also use this to add a shadow behind your site’s container. This works in all later versions of IE, Firefox, Safari, Chrome and Opera.

Here’s the CSS code…

div.shadow
{
width:400px;
height:25px;
background-color:#ddd;
-moz-box-shadow: 8px 8px 5px #999; /* Firefox 3.6 and earlier */
-webkit-box-shadow: 8px 8px 5px #999; /* Safari */
box-shadow: 8px 8px 5px #999;
}

Now paste the following into your page…

<div class=”shadow” id=”stretched”>This box will have a shadow behind it</div>

And it will look like this…

This box will have a shadow behind it

You’ve just created an image-free shadow box! Again, feel free to adjust colors, shadow sizes, etc. by editing the CSS code.

4) Creating a Text Shadow

I’m not a huge fan of this CSS3 trick because I think text drop-down shadows can make your site look it’s straight out of 1996.

The key is to make it very subtle by using a shadow color that’s very close to the text color and minimize the shadow spacing.

Text shadows do not work in IE. Again, very shocking. *sarcasm* 😉

Paste the following code into your style.css file…

h1.shadow
{
text-shadow: 3px 3px 3px #cc7777;
color: #d22929;
}

To call up the shadow, simply paste…

<h1 class=”shadow”>This text will have a shadow</h1>

And it will give you this…

This text will have a shadow

Notice the shadow is a lighter pink color. Of course, you can change the color of the text and shadow by updating the CSS.

Now you can successfully pimp out your site with CSS3! Don’t you feel current and hip? 🙂

Comments

  3. Hi, Lisa,
    Maybe you can help me fix my mess. I somehow “lost” my main url for this site and instead have a post with a permalink rather than domainname.com/

    I don’t know how to get the main url back again. It’s a paid for WP Adsense site that auto-populates Adsense ads in strategic places on the pages. The ads were not showing up on the home page, and my “stroke of genius” told me that I was supposed to make my home page a sticky post instead of a page. The ads show up everywhere else but on the home page.

    Any ideas?
    Thanks,
    Christine

    Reply

  4. Thanks Lisa, I have been building websites in old skool HTML for ages using tables and cells and images for rounded borders etc… My graphic / web designer mate only uses CSS to build his sites now and has been on at me for ages to learn it. Your simple examples of how easy and cool it can be has just inspired me to get my act together and learn this now…. nice1

    Reply

  11. Oh Lisa, you really is such a dear. I have a very great confusion on this that I mostly go tend to my brother for it to get it done. I never had a knack reading such complicated tricks but here you have shared and even made available the interfaces which we will encounter and have given the solution on what to do.
    I am very grateful for this tip. And also thanks to my brother, he is such a lousy tutor 🙂 but I still thank him.
    Happy Day Miss Lisa 🙂
    genie

    Reply

  13. Hi Ms.Lisa, ..I ever wonder how you get on top google search. I really love your videos on youtube , I really love how you present a tutorial and I think I’m in love with you.(^_^) ,

    It’s another great post/tutorial from a techiepreneur Lisa,..

    Reply

  14. This is the most helpful post I have ever read, know that cs4 and cs5 is the latest but they still don’t got the kick of cs3.

    Thanks your a big help hit me up when you got another tricks cause some cs tuts cant really help

    Reply

  18. So, are we suppose to put the codes in the style.css or custom.css? I’m being prompted to use the latter. Will it work either way? I’ve tried both (cutting and pasting the code to my site) and haven’t been successful. I’m sure I’m missing something simple. But what?

    Reply

  21. That looks really interesting. Would definitely add visual interest to my posts. As well as break up the content so readers can easily find the good stuff. Nice to have another trick in my arsenal besides bold and italicized words (LOL)!

    Reply

  25. Excellent list of tips. It’s worth mentioning 2 additional things in order to simplify CSS and improve browser rendering speed:
    1. Avoid using the very common * star attribute for margin and padding resetting (*{padding:0}) and use specific tags instead (h1, h2{padding:0})
    2. Try to classify elements in a way that you don’t use more than 2 selectors in a definition (for example, instead of #sidebar ul li a{color:red}), add an id to that ul and type (#ulId a{color:red})
    Thanks

    Reply

  26. HTML5 is fantastic for sure. It wont push flash back to oblivion as many said, but it does the job much better than its precursor. Anyway, what i wanted to say in first, i very much appreciate multiple backgrounds option that came with css3. Not that round corners using style sheet are not absolutely great.
    Thanks for sharing this with us.

    Reply

  27. That’s awesome Lisa, especially the stretchable image border. Knowing little bit of codding always adds power to your creativity. I’m adding a few codes to my CSS file as well.

    Thank you for the codes with examples.

    Reply

  28. I have created my website through google sites and I am finding that some things are limited in terms of what you can do on individual pages such as edit each pages header. I have many images on my site, if you look at it on a mobile also it is all jumbo mumbo. I am not to great on all this and have self taught myself all that I do know, which after much hard work has got me in a decent position for certain keyword phrases on google. But…As far as images go, I just put them onto the site via uploading from my computer, do not really know about the code side of things, guess it may be harming my seo?

    Reply

  29. Very Nice Artice. But actually I have come to your blog through google search while search for “commentluv”. I have watched that most of the blogs are using commentluv these days and thats really awesome. Anyway, I have go through your whole article and thats really nice. Thanks for such an interesting article sharing.

    Reply

  32. Hi Lisa,

    Great tips!! I love to add those little borders just to spice up the site a little. I think it goes a long way with really very little effort.

    It is a bummer that IE doesn’t acknowledge the code, but that’s also a very nice subtle reminder that you must check each browser when making changes. I know IE is the easy target (as it should be), but all the browsers have little tweaks about them that just boggles the mind.

    Reply

  33. Good ones, Lisa!

    I’m another one of those “It woulda worked so well if not for that blasted Scooby Doo, er, Internet Explorer!” type of people.

    Man this could all be so easy. For me, I really don’t cater to IE at all, but then you get that client who only uses IE and you have to scrap the cool code and use an image or something. Grrrrr…!

    Thanks for the tips!

    Reply

  34. CSS is always fun to play around with. But it is kind of sad that IE is just behind with the times and refuse to enable these kind of features…

    Well it is laziness or just don’t want to go that way. Beats me.

    Reply

  35. Hey lisa, good job done by you though not from a computer science background. This small small things matter a lot in the blogs and websites. hey can u tell how come you developed interest in this field?;)

    Reply

  37. I love CSS3, in theory; the problem is that so many browsers aren’t really ready to take advantage of it. I hate spending time working up some super-cool effects that only people using Opera can actually see!

    Reply

    • Agree, but if you check W3 Schools, most browsers support these tricks (except IE). And the good news is, more and more people are leaving IE for Chrome, Firefox, Safari and Opera. In a year or two we won’t have to worry about browser support as much as we have.

      Reply

  39. Thanks for the simple code tricks.

    I just may use them someday.

    I especially like that rounded corners around text trick. Looks good. I feel a new niche site coming on… 🙂

    Reply

  40. I have bookmarked this page to come back. I’ve been wanting to make rounded corners and thought I would need an image for that.
    I like the shadow effect on text too.
    Thanks Lisa for these great tips on CSS 3. Will definitely try them out.

    Reply

  44. I just got my site fixed up with your easy starter templates. I’m not sure if I’m ready to go CSS3 crazy just yet. I’ll keep this in mind though when I want to give something extra emphasis.

    Reply

  46. It’s good that lisa turned over to teaching css3. Hope we will see much more advanced tricks of css3. I am familiar with the most of tricks lisa wrought here but the second trick “Creating a Border With an Image” is very cool.

    Reply

  48. Most of the CSS stuff I learned was from your videos and codes you posted on the website. And sometimes, I just study what you do with Firebug (which I know about because of…yes, you guessed it – YOU again).

    I actually use the shadow stuff, I learned about it a few months ago, and now I am using it for some of the H code.

    I love the effect you can achieve with it.

    I love the first part of the code, that is something I can use a lot, the borders, different colors for different purposes, etc.

    Reply

  49. I’ve been following your blog for a quite sometime now, and I must say you’ve made my life starting out to blog less painful. Can’t wait to try these. Many thanks!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *