Cascading Style Sheets


I have always been a fan of the Cascading Style Sheets or more commonly known as CSS. It’s that fine tuning that you can do to your web page to make it look even better. There is no limit to what you can do using CSS techniques.

Let me prove it by showing an example, The CSS3 image below is a standard way of showing images. If you try moving your mouse over it, nothing will happen. Go on try it!

See, nothing happened. On a mobile device try tapping it. Nothing will happen. However, try the same on the image below.

Woah! Did you see that? As you move your mouse over the image it appears to shift down. Cool! Right?

This creates a visual effect that the Button goes down by the weight of the mouse. Now we can add click events to it as well. But for this demo let’s not get into that just yet.

Come let’s see how easy it is. All you need is just 3 lines of code to add this magic to your images and Buttons.

img.wp-image-1:hover {
	position: relative;
	top: 10px;
}

What this code does is that Upon Hover, i.e., when the mouse comes on the image it pushes the image down by 10 pixels.

Using such tricks and more can enhance your site’s User Experience. People remember nice effects and specifically ask for it. I remember being bugged for a particular one – Adding a Mouse Trail of snow flakes on the web site. This became very famous in early 2000. Anyways I Digress.

The CSS trick I just showed, it is so simple and easy that anyone do it. The possibilities are endless. You can enhance your website by just some simple CSS code.

Need to make customizations to your site? Let us help you out! In case you want to see something specific in action do not hesitate. Let us know and we shall oblige!

So long!


Follow us on our Official Social Media Platforms.

One thought on “Cascading Style Sheets

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s