CSS3 Tricks and Techniques for Better Presentations

The web development world has gone gaga with HTML5 development but when it comes to presentation of a website, CSS (cascading style sheet) plays a huge role. CSS3 has given developers a shot in the arm to design websites which are much more visually appealing. To start with CSS might seem to be a bit confusing but as you get along you will unearth the potent of this tool in designing websites and making quick updates. In this article we shall take a look at some of the tricks which help you improve the presentation of your website.

Achieve Rounded Corners

Rounded corners are something which has become very popular off late and in the pre CSS3 era developers often needed to make use of images to achieve it. We shall now see a simple CSS3 trick which allows you to achieve rounded corners in your website. Let’s start with simple HTML code and it would appear something like

<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners</title>
</head>
<body>
<div id="box1">
<p>Let’s achieve rounded corners.</p>
</div>
<div id ="box 2">
<p> Let’s achieve rounded corners.</p>
</div>
</body>
</html>

Now this page would appear plain and simple as we haven’t added any style to it. To add rounded corners you need to create a box around the text. We will also adjust the font, font size and background color of the divisions. To do so add the following code before closing head tag (</head>)

<style>
#box1, #box2
{
border: 1px solid black;
font-family: Arial, Verdana, sans-serif;
font-size: .85em;
background-color: rgb(215,215,215);
}
</style>

With this we have achieved the boxes and now we will add the rounded corners. To do so add the following code below the background color entry.

div {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

You can also round a specific corner in your box. In the example below we shall see how we round off the top left corner

div {
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}

Cross Browser Opacity

This is another popular presentation technique which you can use in your webpage and gives a professional look to your website. However making things transparent with CSS can be frustrating as CSS3 opacity property isn’t supported by all the browsers. But you can use some browser extensions along with the opacity property and make things transparent in nearly every browser. You can do this by using the following code.

transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

Achieving this for Internet Explorer needs some extra effort. To make this feature available for the IE users you need to make use of the following codes

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)

Create Columns with CSS3

Do you want to achieve a newspaper like columns in your webpage? Now this was something which was painstakingly tough in the past and very few developers achieved this with perfection. But CSS3 has made this extremely easy and with the following codes inserted between the opening and closing style tags you can achieve a multi-column website. Here in this example we have kept it to a three column display.

-moz-column-count: 3;
-Webkit-column-count: 3;
-moz-column-gap: 1em;
-Webkit-column-gap: 1em;

Make Use of Gradients

Gradients are very eye-catchy and in the pre-CSS3 era developers created them as images in applications like Photoshop and place the text over it. Now you can achieve this with the use of a few lines of codes. To apply gradient to a page you need to make use of the following codes before closing the head tag (</head>).

#box{
background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);
background-image:   -moz-linear-gradient(top, #2F2727, #1a82f7);
background-image:    -ms-linear-gradient(top, #2F2727, #1a82f7);
background-image:     -o-linear-gradient(top, #2F2727, #1a82f7);
}

Note that this code has been optimized for individual browsers to ensure uniform appearance.

Rotate Texts

With this you can easily rotate texts within your webpage. Again while coding you need to specify the rotation for different browsers. In the example below we are rotating the text 90 degrees counter clockwise.

rotate-style {
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

In case of Internet Explorer the rotation property is a little different and you need to specify values instead of degree of rotation as is the case with other browsers. The value for IE can be 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively.

Get A ‘Click’ Effect

Motion always catches the human eye and achieving a click like effect on all the links of your website would make it visually pleasing to the eye. This can be achieved by inserting the following code between the style tags. You can also spice this thing up with the use of images.

a.button {
padding: 5px 20px;
background: #CCCCCC;
border: 1px solid;
border-color: #AAAAAA #000000 #000000 #AAAAAA;
text-decoration: none;
font-weight: bold;
color: #000000;
}
a:active {
position: relative;
top: 1px;
}
a.button:active {
position: relative;
top: 1px;
left: 1px;
border-color: #000000 #AAAAAA #AAAAAA #000000;
}

Center Your Page

In today’s world there isn’t any standard screen resolution and thus you need to design a website which positions itself in the center of the browser no matter what the screen size is. This is one of the most important things that you shouldn’t be overlooking as a developer. To align your webpage in the center you should make use of the following code.

<body>
<div id="page-wrap">
<!-- all websites HTML here -->
</div>
</body>
#page-wrap {
width: 800px;
margin: 0 auto;
}

These tips can go a long way in making your webpage visually attractive and adding to the brand value of your website. These CSS3 tricks also help in reducing your dependence on the use of images to make websites visually attractive.

Enjoyed the post? Then you’ll surely love getting our regular blog updates, too. Subscribe now! Or talk to our HTML Developers for your requirements!

 

About 

Justin Spencer is an Individual with great interest in latest technologies, applications and gadgets. He is the Key contributor to MarkupBox Blog. During his leisure he loves to hangout at Google +

Leave a reply

Categories

Archives