How to Create Circles with CSS

Last Updated: April 6th, 2018 Making circles with CSS is very simple. Just make the radius half of the width and height of the element to make a perfect circle, or simply use: border-radius:50% Responsive Circle With or Without Text Inside Narrow your browser window horizontally to test the circle’s responsiveness. Hello CSS .circle{width:50%;height:0;font-size:20px;color:#fff;text-align:center;line-height:0;padding:25% 0;border-radius:50%;background:#09f} … How to Create Circles with CSS

How to Link to the W3C CSS3 Validation Page

Automatic Method: You should now simply use: https://jigsaw.w3.org/css-validator/check/referer?profile=css3. Manual Method: Typically, if we want to link dynamically to the W3C Valid CSS page, we use this link: https://jigsaw.w3.org/css-validator/check/referer That’s perfect if you’re using all CSS2.1, as that’s the default checker, but if you implement even one CSS3 style, you’ll fail validation. So, we can no … How to Link to the W3C CSS3 Validation Page

Pure CSS Minimalist Image Hover Rollover

Demo: (only use one of the CSS methods below) CSS Sprites (New Method) .hov{display:block;width:245px;height:195px;background:url(images/hover.png)} .hov:hover{background-position:0 -195px} For this to work, simply stack the normal state image on top of your hover image making one image. They should be exactly the same size and stacked perfectly on top of each other. So, in this example the … Pure CSS Minimalist Image Hover Rollover

A-Z of Web Business Mistakes

This is in no way intended to be a definitive, be-all-to-end-all list, but hopefully some may find it helpful. I’ve certainly made some of these mistakes in the past. We’re always learning and the best instance of learning is when you learn something you may be doing wrong, admit it, and come out more knowledgeable … A-Z of Web Business Mistakes