I recently started learning the basics of CSS3 features that you can use to create tiny animations.One of the simple css3 technique that many websites use on their comment section is to display the user’s photo in a circle.
To create an image cricle in CSS you have to change the border radius property
Take a sample image and create a class for it.
HTML
1 2 3 | <div class="avatar"> <img src="http://devlup.com/wp-content/uploads/2013/07/images.jpg"/> </div> |
CSS
1 2 3 4 5 | .avatar img{ height:200px; width:200px; border-radius:250px; } |
Result
Border-radius property is used to created rounded corners for objects.Increasing the rounded corners to higher values creates the circle.Try reducing the value then you can see the rounded rectangle.
Before setting the border-radius the image width and height has to be fixed.
Adding shadow to the Image
CSS
1 2 3 4 5 6 | .avatar img{ height:200px; width:200px; border-radius:250px; box-shadow: 0 0 8px rgba(0, 0, 0, 1); } |
Not just rounded corners you can some animation effect while hover event is triggered
1 2 3 4 5 6 7 8 9 10 11 12 | .avatar img { height:200px; width:200px; border-radius:250px; -webkit-border-radius: 250px; -moz-border-radius: 150px; box-shadow: 0 0 8px rgba(0, 0, 0, .8); } .avatar img:hover { border-radius:0px; -webkit-transition: all 0.3s ease-out; } |
For the hover effect CSS-transition effect is applied.
Though CSS3 can do amazing things for a web developer it is important to know the basic steps that can be used to create nice and cool effects.
Read More:
