Archive for the ‘web’ Category

Tiled and tilted CSS3 linear gradients

Wednesday, December 29th, 2010

I tinkered around with my site some tonight, and ditched the 2010 web trend of simple Photoshop noise in the background with something a little more complex using the beauty of CSS3. It will probably look best with a Webkit browser as I haven’t finished Mozilla/Opera browser properties yet.

I thought I’d give you a short tutorial. I went into this pretty much blind with only some sample code from Webkit.org’s website.

I decided to tilt the gradient, which (linear, 0 0, 100% 100% achieves. You can play with those numbers to tilt as you please.

The trickiest part was figuring out the correct placement of the color-stop property. I first had just six stripes, but decided 10 would be better. All you have to do is divide 100 (for 100% width of the page) by the number of stripes you want, and place the color-stop at the appropriate spot.

In my case, I placed a color-stop of white at 2% opacity as every other stripe, then left background-color:#ddd8d1 alone for the next stripe.

For Webkit browsers:


body {
	background-color:#ddd8d1;
	background-image: -webkit-gradient(linear, 0 0, 100% 100%,
   	color-stop(.10,rgba(255,255,255,.2)),
   	color-stop(.10,transparent),
   	color-stop(.20,transparent),
	color-stop(.20,rgba(255,255,255,.2)),
	color-stop(.30,rgba(255,255,255,.2)),
	color-stop(.30,transparent),
	color-stop(.40,transparent),
   	color-stop(.40,rgba(255,255,255,.2)),
   	color-stop(.50,rgba(255,255,255,.2)),
   	color-stop(.50,transparent),
   	color-stop(.60,transparent),
   	color-stop(.60,rgba(255,255,255,.2)),
   	color-stop(.70,rgba(255,255,255,.2)),
   	color-stop(.70,transparent),
   	color-stop(.80,transparent),
   	color-stop(.80,rgba(255,255,255,.2)),
   	color-stop(.90,rgba(255,255,255,.2)),
   	color-stop(.90,transparent),
   	color-stop(1.0,transparent),
	color-stop(1.0,rgba(255,255,255,.2)),
	color-stop(1.0,transparent),to(transparent))}

The pattern of opaque and transparent stripes should be self-explanitory. The trickiest part was the last stripe, and getting the last transparent stripe to appear. Before I figured it out, the last stripe wasn’t rendered right.

The main issue (if you call it one) is that the width of the stripes is highly variable, as they depend on the height of your page. The longer the page, the wider the stripes. I don’t mind it, as it gives each page a little personality.

Google Reader’s Crappy User Interface

Friday, October 30th, 2009

I use Google Reader for my RSS feeds. (Yes, I know Twitter killed RSS, and I’m just dragging its corpse around.) In fact, I love it. Between the web interface and Byline for iPhone, I still depend on gReader for a lot of my information consumption.

That aside, Google sucks at designing intelligent and accessible user interfaces. I ran into one such example of suckage tonight.

(more…)

Monticello Live re-alignment

Tuesday, September 15th, 2009

Over Labor Day weekend, word was sent out regarding older versions of the WordPress blogging platform. A nasty worm was circulating around older WP installations by searching for them through Google. When an old (that is, anything older than 2.7.1, I believe) installation was found, this worm would create and then hide an admin account. From there, it could potentially corrupt MySQL databases and, filling blog posts with spam content. So, needless to say, it was a nasty problem that could be easily avoided.

I took over the technology side of Monticello Live a few months ago, and have been keeping things in order. The problem arose over the holiday weekend when this worm was announced—Monticello Live was running on a much older WordPress installation (try 2.4, if I remember right).

I backed everything up after checking for any worm problems, and updated to the latest WordPress build. I’ve been working on a new theme for ML for several weeks now, and figured this was as good a time as any to implement the changes. Over the past two weeks, I’ve been tinkering and making changes and building the site back to near-completion.

I hope the local community finds this refresh of the layout a welcome change, since the site has remained virtually unchanged since Jeff Nobles created it back in 2006.

I plan on adding a lot more to the site as far as web standards go, but for now, it’s running well and should be completely operational.

Mock-up of Marquee Lanes

Thursday, July 30th, 2009

I decided I couldn’t let July pass me by with only one blog post, so I decided to show a mock-up of a site I am currently working on for Marquee Lanes in Monticello, Ark. Marquee Lanes, formerly the Timberlodge, is under new management and they are making a lot of changes to the business. One of these changes incudes a web presence.

I was hired for the job, and this is the result of brainstorming with Reggie Riley, co-operator of Marquee Lanes. In the coming weeks, I will be transitioning this Photoshop mock-up into valid HTML/CSS, and it will be live at Marquee Lanes.com in the coming weeks.

Marquee Lanes

HTML5 & the quasi-death of XHTML

Monday, July 6th, 2009

In the past several weeks there’s been a bit of a stirring in the web design world. This stirring culminated in the announcement that the World Wide Web Consortium (W3C) would not re-new the XHTML Working Group’s charter at the end of 2009. The W3C will pool its efforts and focus on the HTML5 specification.

This appears to be good news. No longer will the schism that separated HTML4 and XHTML1 (that formed in 2000) divide web designers and, more importantly, web browsers. The Internet will depend on one specification to markup websites.

I speak from a utopia though. There are still many issues at hand. The biggest drawback is HTML’s past tendency to be sloppy. With certain tags like < img >, XHTML used the wonderful / > closing bracket to signify the end. Every element had to be closed, from your < p > < /p >s to your < br /> and the afore-mentioned < img/>. Another bit of sloppiness is that fact that some web developers type their tags in all caps ( < IMG > or < a HREF > and the like. I grew up learning HTML when the web was making the transition to 3.2, then 4.0. In 2002 I took a web design and development course, teaching the 2001-drafted XHTML 1.0 specification.

XHTML was supposed to be the beginning of the transformation of the Internet, giving us XML parsed documents, more semantic code, and tighter and better developed web sites. Well, that hasn’t exactly happened. Many major websites still don’t adhere to web standards—take a look at Best Buy’s website; it’s nothing but table nested in table nested in table. We’ve still got years to go, and years before HTML5 is finalized and put into popular use on the Internet.

I’ve begun adding elements new in HTML5 to my website. Semantic markup like < div id="header" > has been replaced with the new tag < header >. This semantic markup lets humans and machines know exactly which section is supposed to be and how to interact with it. < footer> is also a new one I’ve updated. The rest will be done over time. If you’re into validating websites, the little CSS and HTML icons in the right sidebar will point you to several errors on my site—all blamed on my looking ahead to CSS3 and HTML5, plus a few third-party code snippets (like PayPal and Facebook Connect) that are really beyond my control in editing.

If you enjoy making websites like myself, I recommend reading up on the changes to come via HTML5. It’s an exciting time. If you can’t see the changes, most notably the usage of @font-face, a CSS rule to use any font the designer wishes, download Firefox 3.5, Safari 4, or Opera 10.