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).