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
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
The purpose of placing a Retweet button on your site is to help promote a specific Tweet, often for the purpose of a contest or giveaway. The information is readily available here, but a little more hands-on than say going through the form of creating a Follow button. Here, we have to create our own … How to Create a Twitter Retweet Button
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
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
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 WordPress.com (completely free). If you’d rather have … Quick Code Snippets
I don’t know about you, but I feel the rounded corner fad in web design is dying out. Rounded corners will always have a place, but it’s with the introduction of border-radius in CSS3, that it got out of hand. I think the problem lies in the fact that what can make any design poor, … How to Get Rid of Rounded Corners 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
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
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