I recently started learning the basics of CSS3 features that you can use to create animations.
One of the simple CSS3 technique that many websites use on their comment section and headder section is to display the user’s photo and images in a circle.
To create an image cricle in CSS you have to change the border radius property
To create an image cricle in CSS you have to change the border radius property
Take a sample image and create a CSS class for it. it's very simple...
- HTML
1: ------HTML-------------------------
2: <div class="circle">
3: <img src="viren.jpg"/>
4: </div>
5: -------CSS-----------------------
6: .circle img{
7: height:300px;
8: width:300px;
9: border-radius:250px;
10: }
Give border shadow to image circle..
1: ------HTML-------------------------
2: <div class="circle">
3: <img src="viren.jpg"/>
4: </div>
5: -------CSS-----------------------
6: .circle img{
7: height:300px;
8: width:300px;
9: border-radius:250px;
10: box-shadow: 0 0 18px blue;
11: }
Change Effect on mouse hover :
1: ------HTML-------------------------
2: <div class="circle">
3: <img src="viren.jpg"/>
4: </div>
5: -------CSS-----------------------
6: .circle img{
7: height:300px;
8: width:300px;
9: border-radius:250px;
10: box-shadow: 0 0 18px blue;
11: }
12: .circle img:hover {
13: border-radius:0px;
14: -webkit-transition: all 0.3s ease-out;
15: }
Result :
HTML5 Readiness
When Can I Use...
HTML5 Test
Chrome Implementation Status
Web specifications support in Opera Presto 2.10
HTML5: Comparison of Layout Engines
ECMAScript 5 table
Compatibility Tables
HTML5 Demos
HTML5-Demos
Field Guide to Web Applications
