CSS3 | Web Guyhttps://webguy.io/blogWeb and TechnologySat, 24 May 2025 18:32:44 +0000en-US hourly 1 https://wordpress.org/?v=6.9.4How to Make AddThis Responsivehttps://webguy.io/blog/how-to-make-addthis-responsive/Mon, 18 Mar 2013 01:26:32 +0000https://bryanhadaway.com/?p=3153The 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 post How to Make AddThis Responsive first appeared on Web Guy.]]>
The Coding Brainhttps://webguy.io/blog/the-coding-brain/Sun, 13 Jan 2013 04:03:55 +0000https://bryanhadaway.com/?p=2989Learning 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 post The Coding Brain first appeared on Web Guy.]]>
How to Create a Twitter Retweet Buttonhttps://webguy.io/blog/how-to-create-a-twitter-retweet-button/Sat, 29 Dec 2012 03:31:01 +0000https://bryanhadaway.com/?p=2959The 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

The post How to Create a Twitter Retweet Button first appeared on Web Guy.]]>
How to Create Gradients in CSShttps://webguy.io/blog/how-to-create-gradients-in-css/Fri, 19 Oct 2012 22:56:47 +0000https://bryanhadaway.com/?p=2866Finally, 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

The post How to Create Gradients in CSS first appeared on Web Guy.]]>
Beautiful Apple Style Dropdown Menuhttps://webguy.io/blog/beautiful-apple-style-dropdown-menu/Sat, 05 Nov 2011 08:41:48 +0000https://bryanhadaway.com/?p=2002UPDATE — 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

The post Beautiful Apple Style Dropdown Menu first appeared on Web Guy.]]>
Quick Code Snippetshttps://webguy.io/blog/code/Mon, 19 Sep 2011 05:46:00 +0000https://bryanhadaway.com/?p=1767I’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

The post Quick Code Snippets first appeared on Web Guy.]]>
How to Get Rid of Rounded Corners with CSS3https://webguy.io/blog/how-to-get-rid-of-rounded-corners-with-css3/Fri, 16 Sep 2011 14:03:55 +0000https://bryanhadaway.com/?p=1763I 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

The post How to Get Rid of Rounded Corners with CSS3 first appeared on Web Guy.]]>
How to Create Inset Text with CSS3https://webguy.io/blog/how-to-create-inset-text-with-css3/Thu, 19 May 2011 07:47:54 +0000https://bryanhadaway.com/?p=1320This 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

The post How to Create Inset Text with CSS3 first appeared on Web Guy.]]>
How to Create Circles with CSShttps://webguy.io/blog/how-to-create-circles-with-css/Wed, 26 May 2010 03:18:44 +0000http://www.bryanhadaway.com/?p=533Last 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

The post How to Create Circles with CSS first appeared on Web Guy.]]>
How to Link to the W3C CSS3 Validation Pagehttps://webguy.io/blog/how-to-link-to-the-w3c-css3-validation-page/Wed, 26 May 2010 00:06:08 +0000http://www.bryanhadaway.com/?p=496Automatic 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

The post How to Link to the W3C CSS3 Validation Page first appeared on Web Guy.]]>