https://webguy.io/blogWeb and TechnologySat, 24 May 2025 18:32:44 +0000en-US hourly 1 https://wordpress.org/?v=6.9.1https://webguy.io/blog/the-new-twitter-api-v1-1-nightmares-solved/Thu, 20 Jun 2013 01:27:32 +0000https://bryanhadaway.com/?p=3350Skip the reading, and get to (hopefully) the solution you’ve been looking for after scouring the internet in a headache-inducing rage seeing no help in sight for the past several hours… Two things are 100% true, progress is inevitable and people hate change. I should state upfront that I’m a web designer, not a programmer ... The New Twitter API v1.1 Nightmares Solved!

The post The New Twitter API v1.1 Nightmares Solved! first appeared on Web Guy.]]>https://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.]]>https://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.]]>https://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.]]>https://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.]]>https://webguy.io/blog/beautifully-simple-feedback-widget/Thu, 26 Jan 2012 12:55:03 +0000https://bryanhadaway.com/?p=2451Works perfectly in the latest versions of Firefox, Chrome, Safari, and IE and uses only CSS. Demo View Demo CSS #feedback{display:block;position:fixed;top:65%;right:0;font-family:georgia,serif;font-size:20px;color:#fff;padding:15px;border-left:4px #7fccff solid;background:#09f} #feedback a{display:block;font-size:0;color:#b4e0fd;transition:all 0.5s ease} #feedback:hover a{font-size:inherit} HTML <div id="feedback">feedback<a href="mailto:feedback@website.com">feedback@website.com</a></div> As with all my scripts, I write them as simply and cleanly as possible to get the job done. This script can ... Beautifully Simple Feedback Widget

The post Beautifully Simple Feedback Widget first appeared on Web Guy.]]>https://webguy.io/blog/the-problem-with-beautiful-wordpress-themes/Wed, 28 Dec 2011 10:18:53 +0000https://bryanhadaway.com/?p=2247Every once in a while, I get this itch to design an over-the-top, beautiful WordPress theme. I want to add a ton of wonderful graphics and subtle effects of gradients and texture and utilize special fonts and CSS3 and then I remember, that’s a horrible idea! Because people, sure, might like it, but it isn’t ... The Problem with Beautiful WordPress Themes

The post The Problem with Beautiful WordPress Themes first appeared on Web Guy.]]>https://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.]]>https://webguy.io/blog/my-coding-code-of-ethics/Thu, 03 Nov 2011 03:28:58 +0000https://bryanhadaway.com/?p=1981Quick and Dirty I loathe licensing. All the code I write and share on my blog (unless otherwise noted) is public domain (wiki). In short, that means there is no license whatsoever, no limitations, and you do not need to ask permission. My writings, ideas, theories, opinions, observations, creations, projects, experiments, etc., however, are of ... My Coding Code of Ethics

The post My Coding Code of Ethics first appeared on Web Guy.]]>https://webguy.io/blog/background-image-pattern-css-generator/Sun, 16 Oct 2011 23:40:31 +0000https://bryanhadaway.com/?p=1898Launch Generator

The post Background Image Pattern CSS Generator first appeared on Web Guy.]]>https://webguy.io/blog/pixel-perfect-code-perfect-graphic-perfect/Thu, 22 Sep 2011 07:49:20 +0000https://bryanhadaway.com/?p=1810A good web designer obsesses over every pixel. Symmetry is everything in design, any kind of design. The way an interior decorator places furniture in a room whilst keeping a clean buffer zone for walking, shelves, and other practical housing functions and decor is very similar to the design of a page on a website. ... Pixel Perfect, Code Perfect, Graphic Perfect

The post Pixel Perfect, Code Perfect, Graphic Perfect first appeared on Web Guy.]]>https://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.]]>https://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.]]>https://webguy.io/blog/google-1-button-script/Sat, 09 Jul 2011 23:45:20 +0000https://bryanhadaway.com/?p=1604If this is the first you’ve heard of this new Google +1 (Plus One) Button, checkout the official page. First, add this in between your <head> tags: <script src="https://apis.google.com/js/platform.js" async defer></script> Second, add this just below the <body> tag: <div style="position:fixed;bottom:0;left:50px;z-index:1"><g:plusone size="tall"></g:plusone></div> This will fix the Google +1 Button bottom-left on your pages. It will ... Google +1 Button Script

The post Google +1 Button Script first appeared on Web Guy.]]>https://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.]]>https://webguy.io/blog/something-every-css-stylesheet-should-have/Fri, 22 Apr 2011 19:21:56 +0000http://www.bryanhadaway.com/?p=1252Perhaps someone a lot smarter than myself can explain it to me, but I’ve never understood why browsers, by default, do not show form input submit buttons as clickable by changing your mouse cursor to a pointer (hand pointing finger) when hovering over them? I think the cursor should change to a pointer whenever an ... Something Every CSS Stylesheet Should Have

The post Something Every CSS Stylesheet Should Have first appeared on Web Guy.]]>https://webguy.io/blog/pure-css3-only-graphic-button/Sat, 09 Apr 2011 16:26:24 +0000http://www.bryanhadaway.com/?p=1142This 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

The post Pure CSS3 Only Graphic Button first appeared on Web Guy.]]>https://webguy.io/blog/getting-started-with-your-very-first-website/Sat, 20 Nov 2010 13:03:48 +0000http://www.bryanhadaway.com/?p=796Many people these days need a website for business or just want one for personal use. Whether you have no idea how or where to start or you have some vague idea about where to start, this article is for you. Possibly, you’ve heard from word-of-mouth about how GoDaddy is the way to go, this ... Getting Started with Your Very First Website

The post Getting Started with Your Very First Website first appeared on Web Guy.]]>https://webguy.io/blog/pure-css-only-dropdown-menu/Mon, 04 Oct 2010 22:00:41 +0000http://www.bryanhadaway.com/?p=706UPDATE — 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

The post Pure CSS Only Dropdown Menu first appeared on Web Guy.]]>https://webguy.io/blog/adding-social-scrape-images/Tue, 10 Aug 2010 02:33:17 +0000http://www.bryanhadaway.com/?p=685UPDATE — 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

The post Adding Social Scrape Images first appeared on Web Guy.]]>https://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.]]>https://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.]]>https://webguy.io/blog/pure-css-minimalist-image-hover-rollover/Mon, 26 Apr 2010 00:16:39 +0000http://www.bryanhadaway.com/?p=409Demo: (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

The post Pure CSS Minimalist Image Hover Rollover first appeared on Web Guy.]]>https://webguy.io/blog/a-z-of-web-business-mistakes/Fri, 19 Mar 2010 13:02:44 +0000http://www.bryanhadaway.com/?p=278This 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

The post A-Z of Web Business Mistakes first appeared on Web Guy.]]>