Hello readers,
Below is some useful example of css rule set and css shorthand. By using css shorthand you can save your time.
CSS rule set-
Rule set for font declaration:-
body {font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;}
body {font: font-style font-variant font-weight font-size/line-height font-family;}
Rule set for pseudo :-
.container p:first-child::first-letter{ color: Green; }
.Selector:Pseudo-Class::Pseudo-Element { Declaration; }
Rule set for animation :-
.div{ animation: myfirst 5s linear 2s infinite alternate running;}
selector{ animation-name| animation-duration| animation-timing-function| animation-delay | animation-iteration-count|animation-direction|animation-play-state; }
Rule set for keyframes :-
@keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
@keyframes animation-name {
form{ First change point}
to{ Last change point}
}
Rule set for box-shadow :-
div{ box-shadow:inset 10px 10px 5px 2px #888888;}
div{ box-shadow: right -left offset, top - bottom offset, blur radius, shadow size, color}
Note: inset use for inner shadow.
CSS ShortHand-
Shorthand for animation :-
div {
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
div {animation: myfirst 5s linear 2s infinite alternate running;}
Shorthand for Background :-
div {
background-color: #CCCCCC;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top left;
}
div{ background:url(images/bg.gif) #ccc no-repeat top left scroll;}
Shorthand for margin or padding :-
div{
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 2px;
}
div{margin:1px 2px 3px 4px}
Note: If margin:1px 2px 3px 4px (Its for top right bottom left)
margin:1px 2px 3px (Its for top right-left bottom )
margin:1px 2px (Its for top-bottom right-left)
Shorthand for font declaration :-
body {
font-style: italic;
font-variant: small-caps;
font-weight: normal;
font-size: 13px;
line-height: 150%;
font-family:Arial, Helvetica, sans-serif;
}
body {font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;}
0 Comment(s)