How to Make AddThis Responsive

The problem I often see is that someone will pick up an all-responsive website template or WordPress theme for example and they’ll add all sorts of widgets and plugins to it, and more times than not, third-party add-ons are not responsive. As most people are not web designers or programmers, they tend to not think How to Make AddThis Responsive

The Coding Brain

Learning a coding language, in my opinion, is very similar to learning a spoken language. You need to learn how to read and write it well (perhaps not fluently, but well) in order for yourself, as well as others, to understand what you’re communicating. The way a server or browser might not be able to The Coding Brain

How to Create Gradients in CSS

Finally, the standard is here for creating non-browser-specific CSS gradients across all the latest, standards-compliant browsers! CSS .grad{background:linear-gradient(#40b3ff, #09f)} HTML <a href="#" class="grad">Simple Gradient Hurray!</a> Demo Simple Gradient Hurray! (if you’re not seeing a gradient, your browser doesn’t support linear-gradient yet) So beautifully simple. Simple Fail-safe for Older Browsers .grad{background-color:#09f;background:linear-gradient(#40b3ff, #09f)} background-color:#09f — Use this How to Create Gradients in CSS

Beautiful Apple Style Dropdown Menu

UPDATE — While this article may still hold some value, it is pretty dated. To see the very last incarnation of this menu’s code, download the Startup theme. You can also find my very latest (2015 onward) menus in the GenericTools code samples. If you’re not an Apple fan or want a custom look, no Beautiful Apple Style Dropdown Menu

Quick Code Snippets

I’m really putting the feelers out there on this cheat sheet, so I definitely need some feedback, if I’m to keep adding code snippets. Request a snippet: Request a Code Snippet If you really want to dive headfirst into web designing, blogging, writing, etc., I recommend trying out (completely free). If you’d rather have Quick Code Snippets

How to Create Inset Text with CSS3

This often gets confused with “How to Create Indented Text with CSS3” which is completely different. Indent, to me at least, means an indented paragraph. If that’s what you’re here looking for, I won’t leave you hanging, it’s: p{text-indent:20px} What I’m referring to, is my new favorite CSS3 technique: Hello, how are you today? VS How to Create Inset Text with CSS3

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: Manual Method: Typically, if we want to link dynamically to the W3C Valid CSS page, we use this link: 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