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...

How to Use Email Marketing wisely & Stand out from Junk Mail

Follow Follow my blog with Bloglovin Why email marketing Email Marketing is the most cheapest and efficient way to promote products. However, under tons of junk mail, your marketing mail always be neglected and put into the wastebasket. To stand out from the junk mails, follow the suggestions below to increase the power of your email marketing. 1. No “image only” email, use text mail instead First, email with image will put extra loading on the email server, which will make the processing time longer. Second, some email servers will mark those “image only” emails as junk mails or spam mails. This, of course, will lower the chance to deliver the mail to your customer. 2. No attachments Similar to the above case, emails with attachments will put extra loading on the email server. Under the threat of virus, some email servers will filter out the email attachment. The customer may not get what you want to provide. Also, nowadays, most users are very sensitive to those unknown email ...

Create And Send Html Email Newsletters Easily

An Introduction To Email Newsletters Email newsletters are being recognized as a great way to enhance sales. Just what are newsletters? They are regular snippets of information that are delivered to you via email. These snippets of information can be on any topic on the planet. As long as someone wants the information, there is potential for an Email newsletter. Newsletter data has revealed many positive aspects of email newsletters. If you want to create and send an HTML email newsletter, you should know of this information. Research shows that if you use newsletters properly, 10% of subscribers can be turned into customers. Now that is information that I would gladly digest. HTML Email Newsletters There are two types of email newsletters. One type is based on text and the other type on HTML (Hyper text markup language). Both these types of newsletters have their own positives and negatives. Ultimately which newsletter you decide to create depends on the ultimate product and the pr...

HTML Whiz

Search This Blog