IE Background Images

Posted on Tue, July 30, 2013 in Web Design by Kevin Carpenter

Introduction

A very handy CSS property is the “background-size” property. For background images, and images we need to cover an entire div we can simply apply “background-size: cover;” or “background-size: 100% 100%;”. Doing so stretches the background image to the entire width and height of it’s containing div. But that’s not it. I wish that was the case, according to W3c the background-size property is only supported in the following browsers: IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.  Although our hate for IE as developers grows with every project we complete, it’s...

Read More

Vertical Accordion Menu

Posted on Wed, June 05, 2013 in Greatest Hits, User Interface, Web Design by Kevin Carpenter

Vertical menu’s have recently become the newest rave in the Web industry. They are responsive, save space, and look great on any device.

Let’s get things started by putting in place our HTML and add the underlying structure to the menu:

Vertical Navigation Menu: CSS3 Coded

<div id="wrapper"> <ul class="menu"> <li class="item1"><a href="#">Friends <span>340</span></a></li>
<
li class="item2"><a href="#">Videos <span>147</span></a></li>
<
li class="item3"><a href="#">Galleries <span>340</span></a></li>
<
li class="item4"><a href="#">Podcasts <span>222</span></a></li>
<
li class="item5"><...

Read More

Hover Animations

Posted on Fri, May 31, 2013 in Web Design by Kevin Carpenter

With the addition of CSS3 transitions and keyframe animations it can be easy to overdo animations on your website. However, adding certain effects to main content areas can greatly enhance the experience your visitors receive.

A popular trend on the web these days are “content boxes”. These were first found on a lot of sports and news sites mainly, but have since made their way to every category of web pages. Plain, generic content boxes are effective in dividing areas of content, but can be boring if there is nothing present to visually please the user.

So lets spice those generic...

Read More

Getting Value with Google AdWords with a tight Budget

Posted on Fri, May 31, 2013 in Internet Marketing by Alum

You may think you need a huge marketing budget to start benefitting from paid advertising online. There are a lot of factors  at play when assessing that, and most of the time there is a very real benefit to starting even if you start small.

Do you have a niche business?

If so, it may take only $200 a month or less to see your ads show up for low competition keywords that are specific to your niche business. Usually you will have the ability to try this for a month and see how it goes. Also, Google is pretty good about giving you $50 to start out so that you can see how valuable running...

Read More

Getting started with Google Products for Shopify

Posted on Wed, May 15, 2013 in eCommerce Tips, Web Design by Alum

Getting your product feeds accepted on any platform can be a nightmare. Some recent work we’ve done on a Shopify website inspired us to share a bit of that process to be a help to those doing the same kind of work. The fact is there are quite a few hoops to jump through and a lot of information to have just right.  Here are some quick helps to get you on your way with Google Products.

Get your Shopify site setup in a Google Friendly way

For starters, make sure you setup your Shopify account well. Once you import all of your products, make sure that the titles and product descriptions...

Read More

Email Inputs

Posted on Fri, May 10, 2013 in User Interface, Web Design by Kevin Carpenter

When we apply a type of “email” to form inputs, we can instruct the browser to only allow strings that conform to a valid email address structure. This makes us that much closer to built-in form validation and we don't have to write JavaScript validators. We can’t 100% rely on this just yet, for browser support reasons. In older browsers that do not comply with the “email” type, they’ll simply fall back to a regular textbox. Please note that all current browsers are a bit picky when it comes to which elements and attributes they do and do not support. For example, Opera supports...

Read More

Using The < nav > Element in HTML5

Posted on Wed, May 08, 2013 in User Interface, Web Design by Kevin Carpenter

With the addition of the nav element in HTML5 there is much confusion as to when to use it. The HTML5 specification definition is the following:

"The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav...

Read More

Quick Tip: HTML 5 Cheat Sheet

Posted on Tue, December 11, 2012 in by Kevin Carpenter

There is a very handy HTML 5 cheat sheet available for download. It's a printable HTML 5 Cheat Sheet that lists all currently supported tags, their descriptions, their attributes and their support in HTML 4. Definitely worth a download and a print! Please notice that the specification is an ongoing work, and is expected to remain so for many years, although parts of HTML 5 are going to be finished and implemented in browsers before the whole specification reaches final recommendation status. Link: HTML 5 Cheat Sheet

Read More

Quick Tip: CSS3 Cheat Sheet

Posted on Wed, November 28, 2012 in User Interface, Web Design by Kevin Carpenter

If you don’t have it already, do yourself a favor and print this CSS3 cheat sheet. It has a complete listing of all the properties, selectors types and allowed values in the current CSS3 specification from the W3C. Each property is provided in a section matching it with the section (module) that it is most actively associated within the W3C specification. Next to each property is a listing of the values that that property takes (normal text shows named values it accepts and italics shows value types it will accept).  A very handy tool to have around — download link is below.
Link: CSS3...

Read More

Using the :nth child selector in CSS3

Posted on Wed, November 28, 2012 in Web Design by Kevin Carpenter

There is a CSS selector called nth-child. If you put simply a number in the parentheses, it will match only that number element. For example, here is how to select only the 3rd element: The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent.

ul li:nth-child(3
color
#ccc;

This selects the 3rd element in a list of related elements and changes its color. nth-child also accepts two keywords in the parentheses spot: even and odd. Those should be pretty obvious. "Even" selects even numbered elements, like the 2nd, 4th, 6th, etc. "Odd"...

Read More

Topics

Authors

Tell Us About Your Project

Invalid phone number