Expert CSS Coding Ideas for Better Websites

Before I delve deep into CSS coding, let’s have a glance at what you should already know. Cascading style sheets or CSS was first developed in the year 1997 to help developers define the look and feel of the web pages. It was intended to allow them to separate content from design.

It was not popular until 2000 when web browsers started to use more than the basic color and font aspects. CSS is a style language that defines the layout of HTML documents and covers a wide range of aspects that include colors, fonts, margins, height, width, images, advanced position, background and many other things.

Every website page has at least one style sheet, if the designer doesn’t apply any styles. The default style is used by the web browser to display the page if specific instructions are not provided. But if the designer states any instructions then the browser needs to know the precedence of the instructions.

There are numerous advantages of CSS and so it has become the preferred web design method for creators.

• Maintain greater consistency in designs
• More precise control of layout
• Easy to maintain and update
• Fast download times
• Apply different layouts to different viewers
• Lightweight coding
• Greater accessibility
• SEO benefits
• Usage of advanced and sophisticated techniques

CSS is one of the most powerful tools that a web designer needs to learn as it can change the entire tone and mood of the site. A well written style sheet can be easily updated without making any changes to the underlying XHTML. Since CSS can combine and cascade and the browsers can interpret the directives differently, it is more difficult than HTML. With years of experience in designing, I can only suggest that once you start with it, you can see the various options of it that allows you to do more various things on your website.

In this piece of writing I will share with you some interesting CSS codes that will make functionalities easy for you to add to your site. Now there is no need to write JQuery for them. Here are some examples.

If you want to flip an image on mouse over and show some content on the back side of image, do as below:

Small border for heading and paragraphs with multiple colors

Have you ever found an image and wanted to display it flipped the other way? Earlier you had to use your favorite image editor or JavaScript to flip the image, but now it is possible by using the Transform property of CSS and that is supported by all modern browsers. It is easy and less time consuming.

Using the following code will flip your image

<divclass=”f1_container”> <divclass=”f1_card shadow”> <divclass=”front face”> <imgsrc=”images/team2.png”/>

<divclass=”back face center”>

 

This is nice for exposing more information about an image.
Any content can go here.

.f1_container {

position: relative;

margin: 10px auto;

width: 100%;

height: 233px;

z-index: 1;

perspective: 1000;

-webkit-transform-perspective: 1000;

-moz-transform-perspective: 1000;

-ms-transform-perspective: 1000;

-o-transform-perspective: 1000;

}

.f1_card {

width: 100%;

height: 100%;

transform-style: preserve-3d;

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

-ms-transform-style: preserve-3d;

-o-transform-style: preserve-3d;

transition: all 1.0s linear;

}

.f1_container:hover .f1_card {

transform: rotateY(180deg);

-webkit-transform:rotateY(180deg);

-moz-transform:rotateY(180deg);

-ms-transform:rotateY(180deg);

-o-transform:rotateY(180deg);

box-shadow: -5px 5px5px #aaa;

}

.face {

position: absolute;

width: 100%;

height: 100%;

backface-visibility: hidden;

-webkit-backface-visibility:hidden;

-moz-backface-visibility:hidden;

-ms-backface-visibility:hidden;

-o-backface-visibility:hidden;

}

.face.back {

display: block;

transform: rotateY(180deg);

-webkit-transform:rotateY(180deg);

-moz-transform:rotateY(180deg);

-ms-transform:rotateY(180deg);

-o-transform:rotateY(180deg);

box-sizing: border-box;

padding: 10px;

color: white;

text-align: center;

background-color: #aaa;

font-size:2em;

}

If you want to zoom an image on mouse over, do as below:

Small border for heading and paragraphs with multiple colors

There are numerous ways by which you can add a little spice to your website and one of them is the Zoom effect on the images when users usually hover over them. Many designers use a lot of coding lines to create the “hover to enlarge effect”. Here I will share with you the codes by which you can achieve the same effect, but with just few lines using the scaling transformation.

<imgsrc=”images/team1.png”alt=””class=”team”id=”t1″ /> CSS

.team {
opacity:0.99;
transform:scaleY(1);
-webkit-transform:scaleY(1);
-moz-transform:scaleY(1);
-ms-transform:scaleY(1);
-o-transform:scaleY(1);
transition:all 0.4s ease-in-out 0s;
}

.team:hover {transform:scale(1.1);
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-ms-transform:scale(1.1);
-o-transform:scale(1.1);
transition:all 0.4s ease-in-out 0s;
/* -webkit-filter: invert(100%); */
}

If you want to reverse the color of image (i.e. make its negative) on mouse over, do as below

Small border for heading and paragraphs with multiple colors

I have always been very obsessed with finding new or lesser known properties of CSS and loved playing with them. Some of them are really useful and the CSS filters fall in the useful category. So how can you reverse the color of the image? CSS has a new filter attribute that works only in Webkit browsers. The invert option is percentage based and 100% inverts the color of the image fully while 0% displays its normal color. Here is the code below:

<imgsrc=”images/team1.png”alt=””class=”team”id=”t1″ /> CSS

.team {
opacity:0.99;
}
.team:hover
{
-webkit-filter: invert(100%);//Only for webkit browsers
}

If you want to rotate an image by a certain degree, do as below:

Small border for heading and paragraphs with multiple colors

Applying full background image on a site is becoming popular nowadays. It is also a good means to make the site attractive without having to sacrifice the content. But what about rotating these images? That would of course be even better. CSS transformation property allows you to rotate the image on a 360 degree axis.

The code below demonstrates how to rotate an image by any value ranging from 0 – 360 degrees. Here in this example I have used 15 degrees.

<imgsrc=”images/team1.png”alt=””class=”innovate”id=”t1″ /> CSS

.innovate{
transform:rotate(-15deg);
-ms-transform:rotate(-15deg); /* IE 9 */
-webkit-transform:rotate(-15deg); /* Safari and Chrome */
-o-transform:rotate(-15deg);
-moz-transform:rotate(-15deg);}

If you want to blink an image, do as below:

Small border for heading and paragraphs with multiple colors

Making the image blink on your website can make it more attractive and is an effective means to draw the attention of the visitors. So let me share with you how to create a simple but impressive blinking effect by using CSS. Take a look at the script and it is simple and easy to implement.

<imgsrc=”images/team1.png”alt=””class=”innovate”id=”t1″ /> CSS

@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}

@-webkit-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}

@-moz-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes blink {
0% {
opacity : 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}

.innovate{
animation: blink 1s;
animation-iteration-count:infinite;
-webkit-animation: blink 1s;
-webkit-animation-iteration-count: infinite;
-moz-animation: blink 1s;
-moz-animation-iteration-count: infinite;
-o-animation: blink 1s;
-o-animation-iteration-count: infinite;
}

I hope you have enjoyed viewing the scripts and it was useful information. Since the codes are great time savers, you can easily combine them and apply them on your website images to change the style and make it more attractive. Share your feedback and experiences with us .