Jaime Quiroz

Front End Developer

Flexible Layout Color with CSS3 Gradients

Sometimes designers will get imaginative and create what I call an “infinite sidebar”. This is when you have a column of content on a webpage with a background color that extends to the edge of your screen (while still maintaining a fixed width for the wrapping element of the pages content – for centering purposes).

This sort of thing may initially seem like it wouldn’t really work but thankfully implementing this on a web layout is simple thanks to CSS gradients.

CSS gradients can be a headache to keep up with – the syntax is not the same across the board for browsers. We at matrix use Compass to make our lives easier. The relevant SASS that generates the gradient in this example:

.wrap {
	@include background(linear-gradient(left, #FFF 50%, #2980b9 50%));
}

The basic idea is you have two columns, one white and one blue. To create the illusion of an “infinite sidebar” a CSS gradient (left half white – right half blue) is applied to a “wrap” element, which the layout elements are contained within.

The color stop of the CSS gradient is hidden by an “inner” element (the container with a fixed or max-width). The “inner” element has a white background color, is centered on the page and is positioned on top of the wrap element.

Flexible Layout Color - demo image 1

If you then apply the same color from the gradient to the second column within the “inner” element you’ll have the “infinite sidebar” effect:

Flexible Layout Color - demo image 2

Of course the best way to understand what’s going on is to inspect the demo I’ve set up and then try it for your self!

This also gracefully degrades in browsers that don’t support CSS gradients (check it out on IE9 or less – it looks like a standard sidebar with a background color)

View the demo here.

What’s your favorite CSS design trick?

Adrian Turner

Front End Developer

Nifty Tools: HTML for Beginners

Screencap of w3schools

Everyone starts somewhere.  For people who don’t know how to code yet, or newbies who need some practice, W3Schools’ HTML Tutorial is a great place to start: http://www.w3schools.com/html/default.asp

It offers tutorials in basic HTML, HTML in media and news uses, and HTML5, as well as simple examples of each.  What’s cool is that there’s an online HTML editor so you can try the code out on the site and immediately see the results.

What other nifty tools do you recommend to people who are new to coding?

Jaime Quiroz

Front End Developer

Gradient Buttons in IE9

Not a lot of people are totally aware of using CSS box-shadows to create gradient-like effects for browsers like IE9. While box-shadows are NOT a replacement for gradients, they do offer us an alternative to produce some nice effects with standards compliant code.

Small UI elements like buttons and navigation items are a great place to use this technique. Just be mindful that abusing chained box-shadows or using box-shadows on large elements can slow your page down.

No vendor prefixes are needed for IE9 although Android and older versions of mobile iOS require -webkit- to render box-shadows. We are using Sass so Compass will take care of the prefixes for us.

Beyond just being a cool trick this technique will also help keep our CSS light in comparison with the CSS needed when using actual gradients.

HTML

<button>Look mom no gradient filter in ie9!</button>

Sass w/ Compass

//import compass css3 mixins
@import compass/css3

//color scheme
$linkColor: #00aae8

button
	border: none
	padding: 10px
	background: $linkColor
	color: #FFF
	font-weight: bold
	cursor: pointer
	border: 1px solid darken($linkColor, 15%)
	border-radius: 10px

	+box-shadow(inset 0 -20px 30px -10px darken($linkColor,20%))

	&:hover
		+box-shadow(inset 0 -20px 30px -10px darken($linkColor,15%))

	&:active
		+box-shadow(inset 0 20px 30px -10px darken($linkColor,5%))

Click here for the demo.

Roger Vandawalker

Front End Developer

Quick Tool Rec: Sticky Positioning Lands in Webkit

Not yet widely supported, but still cool and maybe one day useful.  “Sticky” navigation is quite popular and getting even more prevalent (via JavaScript tweaks).

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

Are you trying new ways to position elements? How are you getting it done?

Jaime Quiroz

Front End Developer

Simple box-sizing: border-box; fallback for IE7

Box-sizing: border-box; is awesome. If you are unfamiliar with this CSS property, check out this great article at CSS-Tricks that covers it in more detail.

In this example we implement box-sizing: border-box; to any element with a .boxSized class and all child elements of that class (to disable box-sizing: border-box; on any element use box-sizing: content-box;):

.boxSized, .boxSized * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

Like many other ‘new’ CSS3 layout features, it can often times be missed or ignored by developers looking to produce cross-browser friendly code.

Yet unlike most other exciting CSS3 layout properties, box-sizing comes with GREAT browser support. ( http://caniuse.com/#search=box-sizing ) Works like a charm in just about every browser out there but IE7.

However, since we still support many IE7 users, we need a fallback.

Continue reading