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:

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.

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!

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.