Learn and share. The simplest harmony.

 

Photoshop Effect vs CSS3 Properties

Posted on April 30, 2010 and got 23 shouts so far

In previous tutorial I was explained how to stylize input element with photoshop effect (color gradient, smooth border, box shadow, drop shadow) using CSS3 only. In this post We will play in depth with them, since they have advantages on their own field I’m not going to compare both of them nevertheless.

Common Photoshop Techniques
When I need a shiny buttons with color gradient inside them, smooth bevel like Mac-style, I usually create them in Photoshop, but recently I realized that CSS3 properties can do some of Photoshop’s task like Color Gradient, Stroke, Drop Shadow, Smooth Bevel and even Layer Masking. Take a look at following images :

button


What I have done are adding color gradient inside the buttons, masking half of buttons with white layer in 50% opacity, smooth bevel, smooth drop shadow and white shadow on each text inside the buttons. I guarantee CSS3 can do exactly the same techniques as I did before with Photoshop.

CSS3 Techniques
This will be refresh your memory about replacing Photoshop techniques using only CSS3 properties. Some techniques we’ve discussed in previous post, the other techniques are smooth bevel and layer masking :

  • Color Gradient using -webkit-gradient or -moz-linear-gradient property.
  • Stroke using border property.
  • Drop Shadow using -webkit-box-shadow, -moz-box-shadow or box-shadow property.
  • Rounded Corner using -webkit-boder-radius, -moz-border-radius or boder-radius property.
  • Smooth Bevel using border property on one side or more with 1pixel thickness, white color.
  • Layer Masking using stacked layer where the top layer’s height is an half of bottom layer’s, fill with any matched color and of course set its opacity.


buttoncss


Test Case #1 : Buttons
Now we will create buttons with Photoshop effect using CSS3 properties above. First we create the HTML element :


	
		Preview
	

The anchor element will be a whole button’s body, while span element will be a smooth bevel placeholder. Now fill the anchor with color gradient, set span’s top border with 1pixel thickness, fill with white and set opacity into 60%.

.button-red {
	font-family: Arial, Helvetica;
	display: inline-block;
	width: 200px;
	height: 50px;
	background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255,71,71)), color-stop(1, rgb(200,17,17)));
	background : -moz-linear-gradient(center top, rgb(255,71,71) 25%, rgb(200,17,17) 100%);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 1px;
	cursor: pointer;
	text-align: center;
}

If the user is hovering the buttons we set the lighter color for the buttons and revert it when it’s active.

.button-red:hover {
	background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255,105,105)), color-stop(1, rgb(213,13,13)));
	background : -moz-linear-gradient(center top, rgb(255,105,105) 25%, rgb(213,13,13) 100%);
}

.button-red:active {
	background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255,71,71)), color-stop(1, rgb(200,17,17)));
	background : -moz-linear-gradient(center top, rgb(255,71,71) 25%, rgb(200,17,17) 100%);
}

Expected Result :

Picture 3

And that’s it we’ve created a smooth and shiny buttons with only CSS3.


Test Case #2 : Squares
Another techniques we’ll use to create a button are drop shadow and layer masking. Create the HTML element :


	
	
		OK
	

There are no different with previous test case except the span with class name “square-shade”, the “square-shade” will be a layer masking. Fill the anchor with color gradient, set span’s top and bottom border with 1pixel thickness, fill with white and set opacity into 70% for the top border and 30% for the bottom border. Don’t forget to set box shadow property with black and its opacity into 50%.

.square-blue {
	font-family: Arial, Helvetica;
	display: inline-block;
	width: 60px;
	height: 60px;
	background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(71, 181, 255)), color-stop(1, rgb(0,133,222)));
	background : -moz-linear-gradient(center top, rgb(71, 181, 255) 25%, rgb(0,133,222) 100%);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 1px;
	cursor: pointer;
	position: relative;
	text-align: center;
	-webkit-box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
	-moz-box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
	box-shadow:  0px 1px 2px rgba(0,0,0, 0.5);
}

	.square-blue:hover {
		background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(108, 196, 255)), color-stop(1, rgb(0,133,222)));
		background : -moz-linear-gradient(center top, rgb(108, 196, 255) 25%, rgb(0,133,222) 100%);
	}

	.square-blue:active {
		background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(71, 181, 255)), color-stop(1, rgb(0,133,222)));
		background : -moz-linear-gradient(center top, rgb(71, 181, 255) 25%, rgb(0,133,222) 100%);
	}

Set the “square-shade” position into absolute so it will be pile up with the “square-inner”, set its width as anchor’s width and set its height into an half from anchor’s height. Set its top border radius into 5 pixels and botton border radius into 0 pixel. Fill with white color and set its opacity into 20%.

.square-shade {
	display: inline-block;
	position: absolute;
	width: 60px;
	height: 30px;
	margin-top: 2px;
	background: rgba(255, 255,255, .2);
	-webkit-border-radius: 5px;
	-webkit-border-bottom-right-radius: 0px;
	-webkit-border-bottom-left-radius: 0px;
	-moz-border-radius: 5px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	border-radius: 5px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
}

Expected Result :

Picture 4

Sweet isn’t it? Now we’ll create a badges. Badges usually used for displaying small information from a product or anything important. Take a look at following case :


Test Case #3 : Badges
The technique for creating badges is very simple, we just need a rectangular element, fill it with color gradient and text as we did on test case #1 and #2 then rotate them into 40 degree.

Wrap them together in the Div which contains an image and set its overflow property into hidden, this will make the badges looks like shielding the Div. The last step is adding drop shadow into the badges to make it looks more real.

Prepare an images which we will put badges, set the HTML element into following code :

New!

The “badges-webstuffshare” div will be a div wrapper that contains an image, “badges-inner-left” will become the badges and badges-text will contains any text we will show. Set “badges-banner” background with your prepared image, set its width and height based on image’s width and height. Set its position into relative and overflow into hidden.

.badges-webstuffshare {
	font-family: Arial, Helvetica;
	display: inline-block;
	width: 365px;
	height: 214px;
	background: url('images/webstuffshare.png');
	position: relative;
	overflow: hidden;
	text-align: center;
}

Set “badges-inner-left” position into absolute, fill with color gradient, rotate into 40 degree and add box shadow.

.badges-inner-left {
	position: absolute;
	left: -3.7em;
	background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255,71,71)), color-stop(1, rgb(200,17,17)));
	background : -moz-linear-gradient(center top, rgb(255,71,71) 25%, rgb(200,17,17) 100%);
	padding-top: 1px;
	height: 40px;
	width: 200px;
	font-size: 20px;
	color: #fff;
	text-shadow: 0px 1px 0px #6c0909;
	-webkit-transform: rotate(-40deg);
	-moz-transform: rotate(-40deg);
	-webkit-box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
	-moz-box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
	box-shadow:  0px 1px 2px rgba(0,0,0, 0.5);
	}

.badges-text {
	border-top: 1px solid rgba(255, 255, 255, 0.7);
	padding-top: 9px;
}

Expected Result :

Picture 5

If you want to modify badges position you can set “badges-inner-left” top and left property based on your need. Try increasing its height to get bigger badges.

Expected Result :

Picture 7



Next Post : Test Case #4 – CSS Music Player
For next post tutorial, I will continue explaining CSS3 test case, I choosed Music Player using only CSS3 like following image, so stay tune ;)

Picture 6

 

This Post Tags :

Bookmark Post :

Pin It
  • Nice trick.. and really simple.. can’t wait to try it..

  • great! ;)

  • Nice post.. CSS3 is really make web designer work easier.

  • Awesome. CSS3 will revolutionize the web :)

  • Love the examples! Be great to include some fallbacks for IE and older browsers.

  • Gracias por el Excelente Ejemplo, ahorrarás mucho más espacio del Hosting para utilizar en otros elementos multimedia,

    De nuevo Gracias!

  • wooo…css3 can be alternative for smooth performance from script….xixixixi (balelol ginih englishna si mamen euy :( )

  • Great post, it’s always good to see what CSS3 is capable of.
    Thanks!

  • For the css3 glare, don’t use a stacked div, use color-stop.

    -webkit-gradient(linear, left top, left bottom, from(#e5e5e5), color-stop(.10,#FFF));

    That will allow you to specify a bunch of colors in a gradient. I’d eye-dropper in photoshop each step and replicate in CSS. You shouldn’t need to stack stuff!

  • Oh, i see you mention the color-stop in the css examples, but your nice graphic still mentioned “stacked div” – my bad

  • Ok, great post – but PLEASE polish your english next time. Quite a bumpy read, so to say. Still, good content. Thanks.

  • @All : Thanks for your comments!

    @roeme : I’m not a native-speaker but still, I’ll try my best, thanks!

  • Thx for sharing your ideas! But there already excists some gradient-solutions for IE too, check out “Sliding Menu with CSS3″ (Step 3)!

  • Great work..useful tips..thanks

  • Simply a great presentation of your talent & working..! really helpful & useful post

  • thanks! CSS 3 rulit))

  • wow didn’t know how powerfull css3 can be

  • This is a very nice resource. Thanks for sharing this info and examples.

  • Thanks, whery thanks! The css 3 can be All!!!

  • Great work..useful tips for newbies like me..thanks

  • Just discovered your site. Great info!

    (Please ignore the comments about your English. It is good and understandable.)

    • Thanks Chris!

  • also you can make it faster with

    CSS3 Photoshop Plugin

    http://www.css3ps.com and it’s free