Create Image Circles using CSS

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

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 :

Read More

Css Basics

Learn how to create your own website with these simple css templates. These templates are very simple to understand and a great starting point for css beginners.

css basic [download ↓]

Read More

CSS3 Button kit

CSS3 Button kit

15 Fancy CSS3 buttons in different colors. Easy to use.

css3 button kit

Read More

CSS Hierarchy: Adapting your CSS for Multiple Pages

Understanding and implementing cascading style sheets (CSS) is one of the best ways to give your web pages a professional, appealing design. Although you can write style sheets for each page you code, it is best to import an external style sheet and customize specific parts of each page with styles in the header and elements tags. This gives your site a cleaner look, eliminates hassle, and allows you more control over your design. In this tutorial, you will learn how to integrate CSS into several pages, and get hands-on experience with a sample HTML page.

Read More