Imagery is important to a well designed site because it directly influences behavior and emotion. In this article, 20 sites using robots as imagery are listed. Why use robots you ask? Because they’re fun, can look any way you want them to, they can do anything you want, and everyone likes robots! Sharing of other robot enhanced sites is welcome!

20 Stellar Websites with Robots

Artificial Studio

Blue Flavor

Derek Allard

Read more…

Correctly slicing a PSD into XHTML & CSS is an art that takes time to master. If development and coding is not your thing, there are companies that will take your web design file and bring it to life. There are several factors to consider when choosing a PSD slicing company, and one of them is the design of their own site. If their design appears to be low quality, what is their code going to be like? In this article, I’ve listed 40 PSD slicing companies with beautifully designed sites.

40 Beautiful PSD Slicing Websites

Nifty XHTML

PSD to HTML

MediaGirl

Markup4U

Read more…

There are many ways to create a block of content with an image border around it. The easiest way is to make a background image and set it to the specific width and height you need, but this way the dimensions are set. To allow it to expand with the the text vertically, specifying the width of a background image and having 2 elements sharing the image for the top and bottom would also be a viable solution. The problem I came across was when I need to make multiple boxes with the same image border but with each having a different width and height. I needed the boxes to be scalable, have the least amount of images as possible, and for the code to be valid. The solution is explained below.

• View Demo
• Download Files

Step 1

Firstly, the markup. To make the box scalable in all directions, I’d have to use a div for each side of the box. These divs would be nested in a wrapper which determined the width. After the markup, we’re going to use CSS to add a background and position to each div in order to create a seamless border.

<div class="border-box">
	<div class="top-left">
		<div class="top-right">
			<h1>Lorem ipsum</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div>
	</div>
	<div class="bottom-left">
		<div class="bottom-right"></div>
	</div>
</div>

Read more…