Pure CSS3 Only Graphic Button

This button contains gradient and shadow effects without the use of actual graphics or JavaScript whatsoever. I’m using just about every CSS style that could be used on the button for your reference. Although, some may find that it looks better by pulling a few styles back. You could always add more effects too. Also, Pure CSS3 Only Graphic Button

Pure CSS Only Dropdown Menu

UPDATE — Find the better, updated script here which I recommend over this one. It’s a little more stylized, but the code is cleaner, better. Just strip the styles off and replace with your own. This is my first attempt at writing my own CSS dropdown menu from scratch. As always, my main goal is Pure CSS Only Dropdown Menu

Adding Social Scrape Images

UPDATE — For Facebook, use: <meta property="og:image" content="http://website.com/images/icon.png" /> From the title of this article it may not be immediately understandable what it’s about, but plenty of people are looking for this solution. Many have asked how do I set the image for sharing links? They are referring to social sites like Facebook, Twitter, etc. Adding Social Scrape Images

Dynamic SEO-Friendly .htaccess File

The Code Copy the following to a plain text editor and save as .htaccess. Then, via FTP, upload to the root folder of your website (usually called public_html). It will be suitable for most hosting environments, but not all. You can find the website template I’ve also written which contains this .htaccess example here. <files Dynamic SEO-Friendly .htaccess File

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