HTML | Web Guy

The Coding Brain

Web Guy — Sun, 13 Jan 2013 04:03:55 +0000

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 post The Coding Brain first appeared on Web Guy.

How to Create a Twitter Retweet Button

Web Guy — Sat, 29 Dec 2012 03:31:01 +0000

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

The post How to Create a Twitter Retweet Button first appeared on Web Guy.

How to Create Gradients in CSS

Web Guy — Fri, 19 Oct 2012 22:56:47 +0000

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

The post How to Create Gradients in CSS first appeared on Web Guy.

Beautifully Simple Feedback Widget

Web Guy — Thu, 26 Jan 2012 12:55:03 +0000

Works 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.

The Problem with Beautiful WordPress Themes

Web Guy — Wed, 28 Dec 2011 10:18:53 +0000

Every 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.

W3C Obsession and the Return of target=”_blank”

Web Guy — Sat, 05 Nov 2011 14:28:33 +0000

It was a very dark time in web design history, it was the time of XHTML Strict code and the obsession with W3C validation, which had made us slaves to the almighty goal of standards-compliance. My name is Web Guy, and I was a W3C junkie. I had to see that green. If I didn’t ... W3C Obsession and the Return of target=”_blank”

The post W3C Obsession and the Return of target=”_blank” first appeared on Web Guy.

Beautiful Apple Style Dropdown Menu

Web Guy — Sat, 05 Nov 2011 08:41:48 +0000

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

The post Beautiful Apple Style Dropdown Menu first appeared on Web Guy.

My Coding Code of Ethics

Web Guy — Thu, 03 Nov 2011 03:28:58 +0000

Quick 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.

Pixel Perfect, Code Perfect, Graphic Perfect

Web Guy — Thu, 22 Sep 2011 07:49:20 +0000

A 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.

Quick Code Snippets

Web Guy — Mon, 19 Sep 2011 05:46:00 +0000

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

The post Quick Code Snippets first appeared on Web Guy.

Google +1 Button Script

Web Guy — Sat, 09 Jul 2011 23:45:20 +0000

If 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.

Super Basic HTML Guide

Web Guy — Fri, 17 Jun 2011 06:33:15 +0000

I tend to forget the beginners with my writing. So I’m going to take it way back momentarily to the basics. How to Create a Text Link Code <a href="http://website.com/">Check This Site Out</a> Demo Check This Site Out How to Display an Image Code <img src="http://website.com/images/kittens.jpg" alt="Kittens" /> Demo How to Create an Image Link ... Super Basic HTML Guide

The post Super Basic HTML Guide first appeared on Web Guy.

How to Create Circles with CSS

Web Guy — Wed, 26 May 2010 03:18:44 +0000

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

The post How to Create Circles with CSS first appeared on Web Guy.

Pure CSS Minimalist Image Hover Rollover

Web Guy — Mon, 26 Apr 2010 00:16:39 +0000

Demo: (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.