Using advanced CSS to Spice Up Your Blog


CSS is the de facto layout language for the web. New and exciting standards are constantly being introduced through the W3C (World Wide Web Consortium) that authors the emerging language. Some CSS can be used to add visual interest to your website. In this article, we’ll look at a few of the advanced 3D CSS tricks that can pack a punch on your blog.

Bear in mind that your ability to access the stylesheet (containing the layout information in CSS) for your blog will be dependent on your website provider. Most offer some way to access the CSS source code (sometimes through ‘injections’ that place code into existing files dynamically): with SquareSpace this function is activated with the ‘Edit CSS’ button in the Styling menu; with WordPress it may be located with Theme Options on the WordPress dashboard. If you’re really struggling, try Googling for ‘change [x] CSS’, where [x] is the name of your blog provider.

Before we kick off, it’s worth mentioning that advanced 3D transforms are only supported by some browsers (if you’re on the latest edition of Internet Explorer, Google Chrome, Mozilla Firefox or Opera then you should be fine), and can only be performed on powerful tablets and laptops. This is because some 3D transforms can be quite complex and browsers are not necessarily optimized for 3D image manipulation. That said, let’s dive in!

3D headings using CSS

3D titles and headings make for much more interesting pages. They also offer a way to add depth to your page without going overboard with box-shadows, matrix-transforms and absolutely-positioned <span> tags. Here’s the HTML:

<h1 id=”3dheading”>Check me out!</h1>

And the CSS:

#3dheading {

text-shadow:0px 0px 0 rgb(231,231,231),1px 1px 0 rgb(216,216,216),2px 2px 0 rgb(202,202,202),3px 3px 0 rgb(187,187,187),4px 4px 0 rgb(173,173,173),5px 5px 0 rgb(158,158,158), 6px 6px 0 rgb(144,144,144),7px 7px 6px rgba(0,0,0,0.6),7px 7px 1px rgba(0,0,0,0.5),0px 0px 6px rgba(0,0,0,.2);

}


And this is what we get:

 

So what’s actually going on here? The magic’s done by the text-shadow CSS attribute. By layering shadows, we can create 3D-esque text. This is good news for older browsers, since we’re not actually doing much ‘3D’ stuff here, but we are producing something that gives the visual impression of 3D. The text-shadows gradually spread out as they get darker, and then gradually fade, giving the impression of a third dimension. You might even be able to find a generator for this (Google for ‘3D CSS text’) that might help to cut down on development time.

 3D transforms using Advanced CSS

For our example transform, we’re going to nab some code from CodePen. Here’s the HTML:

<div class=”page-wrap”>

<div class=”box”>

<div class=”front”>

<button class=”show-me”>Flip</button>

</div>

<div class=”back”>

<button class=”show-me”>Flip Back</button>

</div>

</div>

</div>

 So, we have two divs for the menu. One is facing ‘forward’, ‘out’ of the browser window:

and the other is hidden on the ‘backface’ of the “front” div, constituting the “back” face of the div:


 

How are they arranged thus? Like so:

 

 

.front {

z-index: 900;

-webkit-transform: rotateX(0deg);

}

.back {

z-index: 800;

-webkit-transform: rotateX(-180deg);

}

So, the “front” div is stacked on top of the “back” div, thanks to a high z-index value. The “back” div is rotated about the x-axis by 180 degrees: kind of like holding a plate up so you can see a circle, and then flipping it 180 degrees with your fingers.

So how do we move between them? Using CSS (and JavaScript to switch CSS classes, which CSS currently has no support for on its own):

.flip {

.front {

-webkit-transform: rotateX(180deg);

z-index: 900;

}

.back {

-webkit-transform: rotateX(0deg);

z-index: 1000;

}

}

Using JavaScript to toggle classes, we can add and subtract the “flip” class to either div, forcing them to rotate. The rotation happens over a period of time, thanks to:

.front, .back {

    -webkit-transition: all .5s ease-in-out;

}

If you are having difficulties hiding the backwards-facing div, you can use the following attribute:

.front, .back {

-webkit-backface-visibility: hidden;

}

If you’re getting surprising results in Chrome or Safari, you can use:

.front, .back {

webkit-transform-style: preserve-3d;

}

So, why not use some 3D CSS transforms in your next project? If you do, link us to the page in the comments section.





Suggested Similar Articles

11 Brilliant Comments - Join Discussion Now!

  1. Steve says:

    This is some good information. I know just enough css and html to get by, but this is definitely helpful. Thanks.

    • rakesh says:

      Thanks Steve for your positive feedback , Hope these tricks will help your to design some eye catching themes.

  2. Matt says:

    Hey Rakesh !
    Interesting information. so, today after reading this post i have learned a fantastic technique which will make my web page interesting one and attractive as well.
    Thanks a lot.
    Matt

    • rakesh says:

      I am really happy to know that these tricks will help your comversion rate. Thanks Matt for your valuable feedback on these CSS tricks.

  3. harish says:

    Css is very hepful to make your html documents the best things i like in css areit Add new looks to your old HTML
    Completely restyle a web site with only a few changes to your CSS code
    Use the “style” you create on any webpage you wish!

    • rakesh says:

      Yes , they can really revamp your whole website experience. Thanks Harish for your valuable feedback.

  4. Ashutosh says:

    Thanks for post very interesting line and i acquire little more knowledge about css and i agree with you it must be improve blog quality

  5. Aayna says:

    CSS is indeed an enticing tool to add the charm to the HTML document. Thanks for spreading the valuable chunk of information, through this post.

  6. harish says:

    CSS’s most common application is to style web pages written in HTML and XHTML.and from this post i learn many thing and useful information about css.

  7. i think i need to use this too thanx fam fro thix ..

  8. Good and very useful article for designing and managing a web application in a stylish ways. This information can help the designer and developers to perform any tricks without any alternative thinking.
    Also for building a short type of panel this can also help to rebuild the construction of a page.
    Thanks a lot.


    Regards,
    Sourav Basak [Blogger, Entrepreneur, Thinker]

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>