Showing posts with label image circles in css. Show all posts
Showing posts with label image circles in css. Show all posts

Wednesday, July 12, 2017

Circles in CSS

I this article I would like to share with you a sample CSS codes that will create a circle. CSS or Cascading Style Sheet is very basic and fundamentals to learn if you want to learn web development. The CSS tags are very short and easy to understand I hope you will learn from this. Thank you.

My email address are the following jakerpomperada@gmail.com and jakerpomperada@yahoo.com.

My mobile number here in the Philippines is 09173084360.




Sample Web Page Output



Source Code Listing

<html>
 <head>
  <title>
     Circles Demo in CSS
  </title>
   <meta charset="utf-8">
  </head> 
  <style>
 .circle_orange {
  width: 47px;
  height: 47px;
  border-radius: 50%;
  background-color: #f58025;
  border: solid 0.5px #e0e0e0;
  
}
  
  .layer_circle1 {
  object-fit: contain;
  font-family: HiraKakuPro-W3;
  font-size: 12px;
  font-weight:bold;
  line-height: 3.67;
  text-align: center;
  color: #ffffff;
  
}
  
   .circle_gray {
  width: 47px;
  height: 47px;
  border-radius: 50%;
  background-color: lightgray;
  border: solid 0.5px #e0e0e0;
  
}
  
  .layer_circle2 {
  object-fit: contain;
  font-family: HiraKakuPro-W3;
  font-size: 12px;
  font-weight:bold;
  line-height: 3.67;
  text-align: center;
  color: gray;
  
}
  
 </style>
  
  <body>
    <div class="circle_orange layer_circle1"> 
      Demo
</div>
<br>
<div class="circle_gray layer_circle2"> 
  Test</div>
  </body>
</html>