How to Create a Circle in CSS

At first, you need to write the appropriate HTML markup. Refer to the examples below:

INPUT HTML <div id="content"> <h1>CSS circles using border radius</h1> <div class="circle blue">Blue</div> <div class="circle green">Green</div> <div class="circle red">Red</div> <p class="feedback">Feedback welcome<a href="#">@htmlwhiz</a></p> </div>

Now, you need to write the CSS script to assign properties. Refer to the examples below: CSS body { font-family: "open sans", sans-serif; background: #f1f1f1; } #content { margin: 40px auto; text-align: center; width: 600px; } #content h1 { text-transform: uppercase; font-weight: 700; margin: 0 0 40px 0; font-size: 25px; line-height: 30px; } .circle { width: 200px; height: 200px; line-height: 200px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; text-align: center; color: white; font-size: 16px; text-transform: uppercase; font-weight: 700; margin: 0 auto 40px; } .blue { background-color: #3498db; } .green { background-color: #16a085; } .red { background-color: #e74c3c; } .feedback { font-size: 14px; color: #b1b1b1; }

OUTPUT

[blockquote align="none" author="devrant.com"]

Developers saying programming is pure logic have never done CSS in their life.[/blockquote]

Comments

How to Create Chat Bubbles in CSS

At first, you need to write the appropriate HTML markup. Refer to the examples below: INPUT HTML <div class="talk-bubble"> <div class="talktext"> <p>CSS Talk Bubble configured by classes. Defaults to square shape, no triangle. Height is auto-adjusting to the height of the text.</p> </div> </div> <div class="talk-bubble tri-right left-top"> <div class="talktext"> <p>This one adds a right triangle on the left, flush at the top by using .tri-right and .left-top to specify the location.</p> </div> </div> <div class="talk-bubble tri-right left-in"> <div class="talktext"> <p>This talk-bubble uses .left-in class to show a triangle on the left slightly indented. Still a blocky square.</p> </div> </div> <div class="talk-bubble tri-right round btm-left"> <div class="talktext"> <p>And now...

What You Need to Know About CSS !

Style sheet is a progressive breakthrough for the advancement of web. Today, more and more browsers are implementing style sheets, opening authors’ eyes to unique features that allow influence over presentation while preserving platform independence. The advantages of style sheets have become apparent — and the disadvantage of continually creating more HTML tags — galore — for presentation effects with the gradual development of CSS. Let’s understand CSS in the right perspective. Style sheets in retrospect As the HTML language grew, however, it came to encompass a wider variety of stylistic capabilities to meet the demands of web developers. Style sheets have been around in one form or another since the beginnings of HTML in the early 1990s . As the HTML language grew, however, it came to encompass a wider variety of stylistic capabilities to meet the demands of web developers. With such capabilities, style sheets became less important, and an external language for the purposes of ...

HTML Whiz

Search This Blog