Enhance Your Web Design Using Simple CSS

Enhance Your Web Design Using these simple CSS tricks

Sometimes while browsing through some website we find something really interesting trick used to create a really nice effect. It may be done using the some CSS3 lines or just simple CSS. Many times we wonder how they done it? But it’s not like that, it’s just a matter of simple CSS tricks which gives you a really beautiful effects. So enhance your web design using simple CSS tricks.

They are not actually essential for the design but why not put a cherry on the cake, why not give some simple touch which will enhance the beauty of your design and give a pleasant surprise to your user. So, following are some simple tricks which will stand out your design.

Text Selection Color

When you select a text on your website, it is highlighted by default blue color. So let’s change this default blue text selection color to as it will suit your website color scheme. Following is the simple piece of CSS code which will do this for you

 ::-moz-selection {
  background-color: #ef6343;
 color: #fff;
 }
::selection {
 background-color: #ef6343;
 color: #fff;
 }
 

Responsive Image

We can make all images on within the website responsive. To do so let’s add this code in your main stylesheet

 img{
 max-width:100%;
 height:auto;
 }
 

But when you use this CSS property, don’t define the height and width of the image in html img tag.

Box Shadow

As you can see on Dzyngiri, we have used the box shadow effect on hover of every image. Actually it has a small amount of box shadow, but on hover, we increased it so it gives a simple effect. It may not be essential, but certainly it gives some response to the user when he hovers to the post box. You can achieve this by,

 .shadow {
 -moz-box-shadow:    3px 3px 5px 6px #ccc;
 -webkit-box-shadow: 3px 3px 5px 6px #ccc;
 box-shadow:         3px 3px 5px 6px #ccc;
 }
 

 

 box-shadow: h-shadow v-shadow blur spread color inset;

Following are the values defined,

• h-shadow: It defines the position of the horizontal shadow which is a compulsory value. Negative values are allowed.
• v-shadow: It defines the position of the vertical shadow which is a compulsory value. Negative values are allowed. 
• blur: It defines the blur distance and this is optional 
• spread: It defines the size of the shadow and this is optional 
• color: It defines the color of the box shadow. You can use RGB and hex color code at this place. 
• inset: If you want to give the inside shadow instead of outer (outset) shadow then we can use this optional property

Smooth Hover Effect

We use different hover color for the anchor links on our websites and sometimes give a background color on hover effect. By default it changes quickly, but if we use a simple CSS3 transition effect then it definitely gives a pleasant effect to all the links on the website. To do so, add following code to the global anchor declaration tag in your CSS file

a{
 /*Your other properties goes here*/
 -webkit-transition: all 0.4s linear;
 -moz-transition: all 0.4s linear;
 -o-transition: all 0.4s linear;
  transition: all 0.4s linear;
 }
 

You can have a demo of this effect in our SIMPLEX : Free Responsive Website Template. Just hover to the read more links or to the main navigation and you will see a simple color transition.

[blockquote]We have used all these small CSS snippets on our website. So you can have live demo on Dzyngiri itself.[/blockquote]

These are some really simple tricks which will definitely add details to your website design. There may be some more than this, if so, then please let us know by commenting below.