Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

December 24 2013


Brushlovers – Free Photoshop Brushes, Styles and Patterns En Masse


Brushlovers is one of these sites to waste one’s day away, without ever feeling bored. If you are an avid user of Adobe Photoshop, Brushlovers should sit at the top of your bookmarks list. What Brushlovers enables you to do is far more astounding than what the average filter overkill does for you. Every other site these days jumps the brushes bandwagon, yet only very few are really notable. Brushlovers is one of these few. We have curated some of the best free Photoshop brushes and some of their other resources in the following article. Enjoy…

November 11 2010


Quick Tip: Mimic Equal Columns with CSS3 Gradients

What happens when your main content area needs two specific background colors: one for the primary content, and another for the sidebar? If you’ve ever tried applying the background to each container itself, you’ll no doubt have realized that your layout quickly becomes fragmented as soon as, say, the primary content section exceeds the height of the sidebar.

Generally, the solution is to set a background image on the parent element, and set it to repeat vertically. However, if we get clever with CSS3 gradients, we can achieve the same effect with zero images. The irony in this is that we’re using CSS3 gradients to create an effect that doesn’t contain a gradient! Read on to learn more.

Prefer a Video Tutorial?

Step 1. Construction

Let’s begin by building a ridiculously simple layout. That way, we can demonstrate a common layout issue that we’ve all experienced at one point or another.

Create a new HTML document, and add the following to your body tag:


      <h1> My Header </h1>

   <div id="main">
      <div id="primary">Primary content.</div>


Don’t forget that you can use the body element as a wrapper for your layout. Simply set a width directly to the body.

What we have here is fairly common. A header element contains a heading tag; and, then we have a main div, which houses the primary content, as well as the sidebar.

Step 2. Create the Columns

Next, let’s style this layout a bit. As we’re using the body element as our wrapper, of sorts, let’s set a width and background color.

body {
  width: 700px;
  margin: auto;
  background: #e3e3e3;

Now, we’ll float the primary content and the sidebar to the left and right, respectively. Also, as we’re not working with any real content, we’ll set a height to each container to present the illusion of content. This itself won’t be enough; we must also specify precisely how wide each should be. Otherwise, they’ll take up all of the available space, due to their block nature.

#primary {
 float: left;
 width: 75%;
 height: 500px;

 background: red;

aside {
 display: block; /* Because is HTML5 element */
 float: right;
 width: 25%;
 height: 500px;

 background: green;


Step 3. The Rub

So, all this looks just fine — for now. However, issues arise as soon as the height of the primary content exceeds the height of the sidebar. Further, this will typically be the case in most situations.

To simulate added content, let’s increase the height of the #primary div to be 700px.

Typically, the solution to these types of dilemmas is to apply a background image to the parent (#main) element. This will usually be a small slice of the background, which will then be vertically repeated.

#main {
background: url(small/slice/of/background.png) repeat-y;


Problem solved! Well, not exactly. True, this does work, however, as soon as you decide to change a background color, you’re then forced to return to Photoshop to create a new background image. What a drag!

Another common solution is to use JavaScript to dynamically detect the width of each container, and then make them the same height. Keep in mind that this then requires your layout to be dependent upon JS being enabled.

Step 4. The Solution

If we want to be forward thinkers, we can use CSS3 gradients to achieve this effect. What is that you say? “But Jeff, these are solid colors; not gradients!” True, but I’ll show you a little trick I learned. If you create two stops at the same location in a CSS3 gradient, you’ll end up with two solid colors. That’s a bit confusing; let me demonstrate.

Before we continue, if you’re working along, return to your project, and remove the background colors. They’re no longer needed. Now, we’ll add a background gradient to the parent, #main, container instead.

#main {
   background: -moz-linear-gradient(left, red, green);

So, that’s probably what you were expecting. But how will that help us? We need a distinct separation between the primary content and the sidebar.

This time, let’s specify that both the red and the green color-stops should be placed at the 75% marker.

#main {
   background: -moz-linear-gradient(left, red 75%, green 75%);

Isn’t that awesome? Not only are we using a gradient to create solid colors, ironically, but, also, the heights of each child container are now identical.

Keep in mind that this isn’t entirely accurate. They have the illusion of being the same height. In truth, though, we’re only applying a background to the parent element. The sidebar is still shorter; you just can’t tell.

Step 5. Webkit

The final step is to make Webkit browsers (Safari and Chrome) happy. Unfortunately, they don’t quite agree with Mozilla on the correct syntax for creating gradients. Their method isn’t quite as succinct as Mozilla’s.

#main {
   background: -moz-linear-gradient(left, red 75%, green 75%);
   background: -webkit-gradient(linear, left top, right top, from(red), color-stop(.75, red), color-stop(.75, green));

If you’re used to the from() and to() functions, keep in mind that they’re simply helper functions, which direct to color-stop().

color-stop accepts two parameters:

  • The position to stop
  • The desired color

To clarify, color-stop(.75, green) means, “at 75% of the width of the element, the color should now be green.” So yes, the syntax is different, but it only takes a few seconds to convert.


That’s all there is to it! Please remember that these are CSS3 techniques, meaning, IE is left out in the cold. Keep in mind, though: “not all websites must look identical in every browser.”

What do you think? Will you use this method, knowing that you’ll have to provide a fallback color for IE, or resort to using conditional statements to use a fallback image?

Sponsored post

May 12 2010


Build Kick-Ass Practical CSS3 Buttons

What once required background images and icons can now be created with plain-old CSS. Because modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons! I’ll show you how in today’s video tutorial.

Video Tutorial

Final Code

<!DOCTYPE html>

<html lang="en">
	<meta charset="utf-8">
	<title>CSS3 Buttons</title>

	@font-face {
		font-family: 'EfonRegular';
		src: url('font/EFON-webfont.eot');
		src: local('EfonRegular'), url('font/EFON-webfont.woff') format('woff'), url('font/EFON-webfont.ttf') format('truetype'), url('font/EFON-webfont.svg#webfont') format('svg');
		font-weight: normal;
		font-style: normal;

	body {
	 width: 400px;
	 margin: 200px auto;
	 background: #666;

	.button {
	 width: 400px;
	 height: 100px;
	 line-height: 100px;
	 color: white;
	 text-decoration: none;
	 font-size: 50px;
	 font-family: helvetica, arial;
	 font-weight: bold;
	 display: block;
	 text-align: center;
	 position: relative;

	 background: #014464;
	 background: -moz-linear-gradient(top, #0D658E, #0C577A 50%, #014D71 51%, #003E5C);
	 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C)); 

	 -moz-border-radius: 10px;
	 -webkit-border-radius: 10px;
	 border-radius: 10px;

	 border: 1px solid #368DBE;
	 border-top: 1px solid #c3d6df;


	 text-shadow: 1px 1px 1px black;

	 /* BOX SHADOW */
	 -moz-box-shadow: 0 1px 3px black;
	 -webkit-box-shadow: 0 1px 3px black;
	 box-shadow: 0 1px 3px black;

	.button:hover {
		background: #014464;
	 	background: -moz-linear-gradient(top, #0c5f85, #0b5273 50%, #024869 51%, #003853);
	 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0c5f85), color-stop(.5, #0b5273), color-stop(.51, #024869), to(#003853));

	.button:active {
		-moz-box-shadow: 0 2px 6px black;
		-webkit-box-shadow: 0 2px 6px black;
	.button:before {
		font-family: EfonRegular;
		content: 'v';
		color: #09232F;
		font-size: 90px;
		float: left;
		margin-left: 35px;
		margin-right: -10px;
		text-shadow: 0 1px 0 #4190AF;

     <a href="#" class="button"> Follow Me </a>



The truth is that it would probably be smarter to use a tiny image for the Twitter-bird icon. But, the goal was to achieve this effect with all CSS! What do you think?

May 06 2010


Gradients in web design

It comes as no great shock that gradients are heavily used in the designing of web sites. There is of course a great amount of variation in the quality of said usage though. Collected here are a bunch of great examples.

Tags: Gradients

April 05 2010


55 Inspiring Examples of Gradients in Web Design

Gradients are a great way to add interest, color, and even depth to a web design. You can use the same color in many shades, many shades of many colors or several other combinations you may think of. You can go linear or radial. The point is that gradients are beautiful and can give your website a very unique style. You can use a cool gradient for the whole website design, or only in the header, footer or just in a couple elements of it, but I’m pretty sure about one thing: combining the right colors and shades will make you a gradient lover! You will start using gradients all over, maybe even at your dinning room wall.

So here is our inspirational selection for this week: beautiful gradients in web design. And don’t forget to tell us if you have some samples of gradients to share.














Charlie Gentle





















Bluedots Design



Beehive App


Satisfaction Remote















Healthy Harvest


Lyrically Noted







Thunder Game Works




Harmony Republic







Elbow Park












About the Author

Gisele MullerGisele Muller is someone that recently discovered a new career online. A person that really likes technology, design, photography and creativity. An eternal geek wannabe, tech fan and a communication lover! Current location: Porto Alegre, RS – Brazil. Twitter: @gismullr

March 24 2010


Quick Tip: Understanding CSS3 Gradients

Creating an image only for the purpose of displaying a gradient is inflexible, and is quickly becoming a bad practice. Unfortunately, at the time of this writing, they very well might still be required, but hopefully not for much longer. Thanks to Firefox and Safari/Chrome, we can now create powerful gradients with minimal effort. In this video quick tip, we’ll examine some of the differences in syntax when working with the -moz and -webkit vendor prefixes.


While Mozilla and Webkit generally adopt the same syntax for CSS3 properties, they unfortunately don’t quite agree when it comes to gradients. Webkit was first to embrace gradients, and uses the following structure:

/* Syntax, taken from: */
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

/* In practice... */
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));

Don’t worry if your eyes gloss over at that syntax; mine did too! Just note that we require a comma-separated list of parameters.

  • What type of gradient? (linear)
  • X and Y axis coordinates of where to begin. (0 0 – or left-top corner)
  • X and Y axis coordinates of where to conclude (0 100% – or left-bottom corner)
  • What color to begin with? (from(red))
  • What color to conclude with? (to(blue))


Firefox, which implemented gradient support with version 3.6, prefers a slightly different syntax.

/* Syntax, taken from: */
 -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

/* In Practice */
background: -moz-linear-gradient(top, red, blue);
  • Note how we’ve placed the type of gradient, linear, within the vendor extension.
  • Where should the gradient begin? (top – we could also pass in degrees, as in -45deg)
  • What color to start with? (red)
  • What color to conclude with? (blue)


What if you don’t need a 100% gradient from one color to another? This is where color stops come into play. A common design technique is to apply a short and subtle gradient, like this:

Subtle Gradients
Note the subtle off-white to white gradient at the top.

In the past, the standard implementation was to create an image, set it as the background of an element, and set it to repeat horizontally. However, with CSS3, this is a cinch.

background: white; /* fallback for older/unsupporting browsers */
background: -moz-linear-gradient(top, #dedede, white 8%);
background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white));
border-top: 1px solid white;

This time, we set the gradient to conclude at 8%, rather than 100%, which is the default. Note that we’re also applying a border top to add contrast; this is very common.

If we wish to add a third (or Nth) color, we can do:

background: white; /* fallback for older/unsupporting browsers */
background: -moz-linear-gradient(top, #dedede, white 8%, red 20%);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red);
  • With the -moz version, we designate that, at 20% of the element height, we should now be at the color red.
  • For -webkit, we use color-stop, and pass in two parameters: where the stop should occur, and what the color should be.

Important Notes About CSS Gradients

  • Use them as much as you can. If it’s okay to let IE users see a solid color, I encourage you to use this method.
  • IE6/7/8, Opera, Safari 3, and Firefox 3 cannot render CSS3 gradients. Firefox and Safari users generally upgrade often, so that’s not as big of a deal.
  • Always apply a default, solid color, background for browsers that won’t understand the vendor prefixes.
  • Never use a red to blue gradient, as I did for the examples.
  • Webpages don’t need to look the same in every browser! :)

Thanks for reading/watching!

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...