Young Innovations Pvt. Ltd.

CSS3 is coming and most of us must have already noticed the power (transitions, animation, transformation, gradient, etc.) of CSS3.

Early this morning I was experimenting with some of its properties and ended up creating following figures. I have used the border-radius, transform and text-shadow properties specific to CSS3.

Here's the demo:

Smiley

Box

Below are two illustrations (followed by their XHTML/CSS) of what can be achieved using CSS 3 only.

Smileys:

CSS:

1. #content
2. {
3.   width: 700px;
4.   margin: 0 auto;
5. }
6.  
7. .block
8. {
9.   display: block;
10. }
11.  
12. .relative
13. {
14.   position: relative;
15. }
16.  
17. .absolute
18. {
19.   position: absolute;
20. }
21.  
22. .head
23. {
24.   background: yellow;
25.   display: block;
26.   border: 1px solid #000;
27.   border-radius: 150px;
28.   -moz-border-radius: 150px; /* for firefox */
29.   -webkit-border-radius: 150px; /* for webkit browsers: safari, chrome */
30.   height: 300px;
31.   margin: 0 auto;
32.   width: 300px;
33.   float: left;
34. }
35.  
36. .head-two
37. {
38.   margin-left: 10px;
39. }
40.  
41. .eye
42. {
43.   border: 2px solid #000;
44.   background: #fff;
45.   border-radius: 40px;
46.   -moz-border-radius: 40px;
47.   -webkit-border-radius: 40px;
48.   height: 80px;
49.   top: 83px;
50.   width: 80px;
51. }
52.  
53. .left
54. {
55.   left: 50px;
56. }
57.  
58. .right
59. {
60.   right: 50px;
61. }
62.  
63. .pupil
64. {
65.   background: #000;
66.   border-radius: 13px;
67.   -moz-border-radius: 13px;
68.   -webkit-border-radius: 13px;
69.   height: 26px;
70.   top: 114px;
71.   width: 26px;
72. }
73.  
74. .pupil-left
75. {
76.   left: 80px;
77. }
78.  
79. .pupil-right
80. {
81.   right: 80px;
82. }
83.  
84.  
85. .mouth
86. {
87.   background: #000;
88.   height: 8px;
89.   top: 203px;
90.   left: 66px;
91.   width: 171px;
92.   transform: rotate(-15deg);
93.   -moz-transform: rotate(-15deg);
94.   -webkit-transform: rotate(-15deg);
95. }
96.  
97. .head-two .mouth
98. {
99.   transform: none;
100.   -moz-transform: none;
101.   -webkit-transform: none;
102. }
103.  
104. .tongue
105. {
106.   background: red;
107.   border-radius: 0 0 22px 22px;
108.   -moz-border-radius: 0 0 22px 22px;
109.   -webkit-border-radius: 0 0 22px 22px;
110.   height: 45px;
111.   top: 203px;
112.   left: 186px;
113.   width: 45px;
114. }
115.  

XHTML

1. <div id="content">
2.     <div class="head head-one block relative">
3.       <div class="eye left block absolute"></div>
4.       <div class="eye right block absolute"></div>
5.       <div class="pupil pupil-left block absolute"></div>
6.       <div class="pupil pupil-right block absolute"></div>
7.       <div class="mouth block absolute"></div>
8.     </div>
9.     
10.     <div class="head head-two block relative">
11.       <div class="eye left block absolute"></div>
12.       <div class="eye right block absolute"></div>
13.       <div class="pupil pupil-left block absolute"></div>
14.       <div class="pupil pupil-right block absolute"></div>
15.       <div class="mouth block absolute"></div>
16.       <div class="tongue block absolute"></div>
17.       
18.     </div>
19.     
20.   </div>

Box

CSS

1. body
2. {
3.   font-family: "Helvetica Nueue", Helvetica, Arial, sans-serif;
4. }
5.  
6. #container
7. {
8.   margin: 0 auto;
9.   width: 600px;
10. }
11.  
12. .relative
13. {
14.   position: relative;
15. }
16.  
17. .absolute
18. {
19.   position: absolute;
20. }
21.  
22. .block
23. {
24.   display: block;
25. }
26.  
27. .box
28. {
29.   margin-top: 100px;
30. }
31.  
32. .top
33. {
34.   background: #751616;
35.   height: 100px;
36.   width: 200px;
37.   transform: skew(45deg, 0deg);
38.   -moz-transform: skew(45deg,0deg);
39.   -webkit-transform: skew(45deg, 0deg);
40.   left: 51px;
41.   top: -51px;
42. }
43.  
44. .front
45. {
46.   background: #a32727;
47.   color: #8f1a1a;
48.   display: block;
49.   font-size: 46px;
50.   font-weight: bold;
51.   height: 200px;
52.   left: 101px;
53.   top: 50px;
54.   width: 200px;
55. }
56.  
57. .front p
58. {
59.   margin-top: 100px;
60.   margin-left: 50px;
61.   text-shadow: -1px -1px 1px #000;
62. }
63.  
64. .left
65. {
66.   background: #a32727;
67.   height: 200px;
68.   width: 100px;
69.   transform: skew(0deg, 45deg);
70.   -moz-transform: skew(0deg,45deg);
71.   -webkit-transform: skew(0deg, 45deg);
72. }

XHTML

1. <div id="container">
2.     <div class="box relative">
3.       <div class="top absolute block"></div>
4.       <div class="front absolute block"><p>YIPL</p></div>
5.       <div class="left absolute block"></div>
6.     </div>
7.   </div>

These are just simple examples. You can explore following websites, if you want to see more of css3

Our Solar System

HTML5 Watch

47 Amazing CSS3 Animation Demos

http://www.the-art-of-web.com/css/css-animation/?nohilite

Using CSS3 Transitions, Transforms and Animation

Have a Field Day with HTML5 Forms

HTML5 Form Demo