Pseudo Element

Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document. For example, the ::first-line pseudo-element targets only the first line of an element specified by the selector. [Source: Mozilla Developer Network]

But I have use ::before ::after pseudo class lot of area. Its helps me a lot for styling any element. It reduce my time.
You can see some example clicking the link belew at fiddle:
1. Using small border at header type content
2. Using animation in a button

[to be continued]

Power of CSS3

Tooltip by CSS3

Hello folk I tell you something few days ago I was doing some bootstrapping and the specific section was tooltip. I used angular ui for tooltip convention. Suddenly I thought that tooltip just like 'you hover something and a hidden div show'. So why not I use normal CSS3. You can see the output. Click the link

I am not a pioneer because after that I googling and saw people already use this type of code. But it is nice and easy technique using tooltip by CSS

Time for explore beauty of SASS

Mixin beauty of SASS

Hi forks!! Few months ago I explored some new things about SASS. It awesome and I love it to share with you. Just Come with me, journey begins.

If you are very new what is mixin, here couple of example for you.

mixin borderRadisu($radius){
border-radius:($radius);
-wibkit-border-radius:($radius);
-moz-border-radius:($radius);
-ms-border-radius:($radius);
}

.button{
@include borderRadisu(3px);
color:#EEEEEE;
}

Output will be:

.box{
border-radius:3px;
-wibkit-border-radius:3px;
-moz-border-radius:3px;
-ms-border-radius:3px;
color:#EEEEEE;
}

So idea is very simple. Now you can use all prefix css as a mixin and use it all over your css file. You can save tone of time.

another idea is use one css class with different values again again...

@mixin heading($font-size,$color,$font-family,$margin) {
  font-size: $font-size;
  color: $color;
  font-family: $font-family;
  margin:$margin;
}

.heading{
  @include heading(10px,#343434,arial,0 auto);
}

or

Output will be:

.heading {
  font-size: 10px;
  color: #343434;
  font-family: arial;
  margin: 0 auto; }

or

h1{
  @include heading(10px,#343434,arial,0 auto);
}

Output will be:

h1{
font-size: 10px;
color: #343434;
font-family: arial;
margin: 0 auto;
}

Another example for you,

@mixin linx ($link, $visit, $hover, $active) {
  a {
    color: $link;
    &:visited {
      color: $visit;
    }
    &:hover {
      color: $hover;   
    }
    &:active {
      color: $active;
    }
  }
}

@include linx(white, blue, green, red);

Output will be:

a:link { color: white; }
a:visited { color: blue; }
a:hover { color: green; }
a:active { color: red; }

Some useful link for mixin:

• Bourbon, It helps you how you can write mixin very effectively.
• Hongkiat, you see 11 readymate common mixins here. You just copy those and use your mixin file
• Cssowl, It is another open source mixin library.
• A list of mixin library, If you have enough time then go to this link here you can see some usefull mixin library that developer use lot.

What do you think... it is cool, right? Mixin is game changing idea. Now you can make coffee for your partner because mixin save your time.
Life is beautiful and ya, happy coding