CSS Tricks

Hover Effects & CSS Transition

Hover Effects allow you to change CSS properties when you hover Selected elements and CSS transition is the way to control animation speed when changing CSS properties. Like color background  with css animation

Without Animation CSS.

        .a{

          color: #eee;

        }

        .a:hover{

          color: #000;

        }

With Animation CSS you can write to Transition effect in css like this .

        .a{

           -webkit-transition: color 1s ease-in; /*safari and chrome */

           -moz-transition: color 1s ease-in; /* firefox */

          -o-transition: color 1s ease-in; /* opera */

          color: #eee;

        }

        .a:hover{

          color: #000;

        }

Fluid Images

Responsive design is a must for every designer today. For text, automatically Fluid .But Images are not fluid automatically.  Its showing blurry not pixel perfect multiplatform to user like mobile tablets and other if you want images fluid you can you use css images max-width properties to your images make it fluid . use to css properties like this.

        img{

          max-width: 100%;

          height: auto;

        }

Cross-Browser Transparency

All browsers do not support transparency opacity css properties. But you can use this technique to work on all browsers support transparency opacity css.

        .transparent-content {

          filter:alpha(opacity=50);

          -moz-opacity:0.5;

          -khtml-opacity: 0.5;

          opacity: 0.5;

        }

Gradient Text

this is a simple CSS trick to show you how to create gradient text effect your web page headings without using images but its work on only webkit browser like chrome safari.

        h1 {

          font-size: 72px;

          background: -webkit-linear-gradient(#eee, #333);

           -webkit-background-clip: text;

          -webkit-text-fill-color: transparent;

        }

Attribute Selectors

CSS3 makes it easy to apply different styles to an element using to different data attribute.

Html Code Here

<div data-attr="">
</div>

<div data-attr="value">
</div>

CSS Here Above Data Attribute Selectors.

div {

  border: 1px solid #ccc;

  height: 100px;

  margin: 10px;

  width: 100px;

}

/* Empty attribute selector */

div[data-attr=''] {

  background: #ff0000;

}

/* Not empty attribute selector */

div:not([data-attr='']) {

  background: #4f4f4f;

}