Skip to main content

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

Post a Comment

Popular posts from this blog

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...
Post a Comment
Read more

How to Install and Configure Drupal

Drupal is a feature rich Content Management System (CMS) which allows webmasters to run dynamic website without PHP knowledge. Publishers can add website content through admin interface. Thanks many modules it is possible to install a lot of additional features like spell check, displaying banners or AdSense ads, chat, mailing list, e-commerce modules etc. Drupal CMS was written in PHP and can be downloaded free of charge. In this article I will explain how to install this script and describe the configuration basics. Web hosting requirements for Drupal CMS Before you start the installation process, ensure that your web host offers PHP support, cron jobs and MySQL database. Drupal requires PHP version 4.3.3 or higher (Drupal 4.5 and earlier versions will not run on PHP 5), PHP XML extension and MySQL v3.23.17 or higher. If you are not sure which version of PHP and MySQL your web hosting provider currently uses, contact their help desk and ask them first. How to install Drupal CMS ...
Post a Comment
Read more

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 ...
Post a Comment
Read more