Blogs | Srijan

New CSS learning

Written by Team Srijan | Mar 12, 2013 7:00:00 AM

Last month W3Conf was held in San Francisco. I saw the video of Lea Verou, presented in conf,  who is well known CSS-Goddess form Greece. She talked about "More CSS Secrets: Another 10 things you may not know about CSS". It was awesome.


After watching that i started playing with css. I learnt new things, which i never knew before about css, are :-
 
1.  :checked can be used for condition, if checkbox is selected.
example :-
.label:after{ content:"Start"; }
#start:checked + .label:after { content:"Stop"; }
2.  :not(:checked) If checkbox is not selected.
example:-
#throw:not(:checked) ~div {
  transform: rotate(0deg);
  transition: 0s 0s transform;
}
3.  difference between ">", "+", "~". 
a. ">" is used for child elements.
html  :- 
<div id="outer-div"></div>
<div id="inner-div">
<div id="some-ohter-div"></div>
<div class="some-class"></div>
</div>
css:-
#outer-div > div { background: red; }
this will effect all div inside outer-div.
 
b. "+" is used for next element.
html:-
<input type="checkbox" id="start" class="cbox" value="start" />
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
css:-
div { background: blue; }
#start:checked + div { background: red; }
this will effect only first div#hour.
 
c. "~" is used for sibling elements.
html:-  same as above example.
css:- 
div { background: blue; }
#start:checked ~ div { background: red; }
this will make all div's background red;
 
4.  We can use multiple shadows one after another in box-shadow or text-shadow.
example:-
box-shadow: 0 0 5px black, 0 0 10px red, 0 0 15px blueviolet;
5.  I used animation effect first time. In animation effect we use "bundle" of some properties in keyframes and then call it on selector.
 
6.  Background Images patterns with gradients (pure css). A nice pattern list is   here.
 
7.  box-sizing is used to fit element in width/height in a certain way. "content-box" is default value, in which padding and border will laid out of defined width/height. "border-box" defines that padding and border will come in defined width/height. content's actual width/height will be calculated by subtracting padding and border form defined width/height.
 
I got a new interest now  and I am exploring more about css.   This is my lab   where i am experimenting. (Try in chrome or may be in FF only, because i don't use windows).