Sam Flores, a self-taught illustrator based out of San Francisco has surely secured his place in art history. His signature style reflects his background in graffiti and is reminiscent of the 19th century art nouveau icon Alphonse Mucha. Flores characters, most often female, boast elaborate floral headwear, closed eyes and large hands elegantly folded. Combined with alluring landscapes and adorned animal masks, his paintings evoke a feeling of both sadness and beauty. See more work at www.samflores.com

Rather than creating a post with 40+ interfaces designs, I have chosen five that I feel have influenced me. Some of these are quite old… at least in terms of web design, but that just means they were ahead of their time. Others are not so old. All are worth a click through and since there are only five, hopefully you can manage. Let me know what you think.

www.jonathanyuen.com

www.dissizslix.com

www.thelinear.com

www.nawlz.com

www.rocketclowns.com

Zach Johnsen is an illustrator and designer based out of Portland, Oregon. I’ve always found his work to be inspiring. His style, “easy on the fingers, heavy on the eyes” really comes to life when viewing his illustrations. I first learned of Zach a few years ago when I purchased a Louis Logic CD. He was credited for the art direction and illustration. Now a new version of his site Zenvironments.com is about to drop and with it, an all-new Zachjohnsen.com so what better time to show him some love.

Western Confrence Installation

Family Portrait

Riding Industry

red no.3

coffe break

stilt rider

burdens

land of crooks

Here it is. A lot of love and hard work went into this, the third redesign of virtualmonk.com. Knowledge and inspiration are the underlying themes of this blog. Real philosophies from real people, sharing their passion and other beautiful things. Art, design, architecture, poetry and whatever else happens to grow here. Please get in touch. I want to hear your thoughts and idea’s. Otherwise grab my rss feed or check back often.

Have you ever wanted to display content on top of a flash? Here’s how. Click here to see an example and don’t forget to download the source files.

By default, browsers place embedded plug-in content, such as a Flash, on the top most layer. Using the WMODE parameter allows the layering of Flash content with DHTML layers. A WMODE value of ‘opaque’ or ‘transparent’ will prevent Flash from being displayed in the topmost layer and allows us to adjust the layering of the movie within other layers of the HTML document.

Take a look at the code below. Notice the highlighted lines.

<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0″ width=”830″ height=”160″>
        <param name=”wmode” value=”transparent”>
        <param name=”movie” value=”flash/bg.swf” />
        <param name=”quality” value=”high” />
<embed src=”flash/bg.swf” quality=”high” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”830″ height=”160″ wmode=”transparent” ></embed>
</object>

For this to work properly you must add the WMODE parameter in the object tag, as well as the embed tag. Looking at the example, I just used a negative margin to display my navigation above the flash movie. To learn about styling that navigation, check out my post Styling Navigation Using Lists – The Basics.

A short poem with accompanied animation.

Oh. I’m sorry ladies, this was supposed to be a love song…

Today we’re taking a look at How to Style Lists for use in horizontal navigation. The final product should look something like this demo.

Now navigation is what..? Well most often in web design, navigation is a series or a “List of links” and there for should be treated as such. Styling your navigation in list items gives you a lot more control and really allows you to do some pretty cool things.

If your new to the design and development world, I’d say this is a really good technique to get in the practice of using. You can download the source files.

To start were going to create an HTML file and type the following:

<div id="nav_container">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
</div>

What we’ve just created is a DIV with an id of “nav_container” which will contain our navigation. Inside of that DIV we have an unordered list with five list items. Notice the links… This is going to be our navigation. On an attached style sheet, lets set a dark background color with a light gray sans-serif font. To do that lets go to our style sheet and type:

body {
	background:#000;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#CCC;
}

Pretty simple. If you preview this in the browser you should see a bulleted list of unstyled links. The first thing we’re going to do is get rid of those bullets. Lets go back to the style sheet and type:

#nav_container ul {
	list-style:none;
}

Here we’re selecting the unordered list inside the “nav_container” DIV and setting its list-style property to none. In other words… no bullets. Next we want to display our links in a horizontal fashion and give them a bit of space, so we’ll drill down our selectors even further. Return to the style sheet and type:

#nav_container ul li {
	display:inline;
	margin:1px;
}

Lets preview this in the browser. You’ll see after giving our “display” property a value of “inline” our navigation is now displayed left to right. In some cases you may to use the float property instead. Now its time to style our links. We’re really going to drill down our selectors this time, all the way to the anchor tag. Lets go back to the style sheet and type:

#nav_container ul li a {
	background:#333;
	color:#CCC;
	text-decoration:none;
	padding:3px 7px;
}

Now preview this in the browser and lets talk about what we just did. We set the background color of our links to dark gray, set the font color to a light gray and set our “text-decoration” property to none, dropping the links default underline. Lastly we gave our links some “padding”. 3 pixels for the top and bottom, and 7 pixels for the right and left. The final step is to change the roll over, or hover state of our navigation. Lets make the background white and the font color black. Back in the style sheet type..

#nav_container ul li a:hover {
	background:#FFF;
	color:#000;
}

Preview in the browser and… Viola! You did it. Now you can take what you’ve learned here and try some things of your own… maybe swap a background image, maybe mess with the borders… who knows. BE CREATIVE The best way to learn is trial and error. Don’t forget to grab the source files here.