Try Tuts+ Premium, Get Cash Back!
Quick Tip: Don’t Always Jump Back to Photoshop
basixvideos

Quick Tip: Don’t Always Jump Back to Photoshop

on Jan 7th 2011 with 42 comments
Tutorial Details
Download Source Files
Demo View It Online

In today’s video quick tip, we’ll use the lesser known inset parameter when creating CSS3 box shadows to properly style the hover and active states of a button.

Remember: don’t always be so quick to jump back to Photoshop when you need a few small changes. It’s better for you (and the web) if you first ask yourself, “Can we accomplish this with simple CSS?”


Subscribe to our YouTube page to watch all of the video tutorials!

Final Source

body {
	margin: 200px auto;
}

a {
	background: url(button.png) no-repeat;
	width: 130px; height: 130px;
	margin: auto;
        outline: none; 
	display: block;
	text-indent: -10000px;
	
	-webkit-box-shadow: 0 0 8px 1px rgba(0,0,0,.2);
	-webkit-border-radius: 90px;
	
	-moz-box-shadow: 0 0 8px 1px rgba(0,0,0,.2);
	-moz-border-radius: 90px;
	
	box-shadow: 0 0 8px 1px rgba(0,0,0,.2);
	border-radius: 90px;	
}

a:hover {
	-webkit-box-shadow: 
		0 0 8px 1px rgba(0,0,0,.2),
		inset 0 0 20px 6px rgba(0,0,0,.1);
		
	-moz-box-shadow: 
		0 0 8px 1px rgba(0,0,0,.2),
		inset 0 0 20px 6px rgba(0,0,0,.1);
	
	box-shadow: 
		0 0 8px 1px rgba(0,0,0,.2),
		inset 0 0 20px 6px rgba(0,0,0,.1);		
}

a:active {
	-webkit-box-shadow: 
		0 0 8px 1px rgba(0,0,0,.2),
		inset 0 0 20px 6px rgba(0,0,0,.2);
		
	-moz-box-shadow: 
		0 0 8px 1px rgba(0,0,0,.2),
		inset 0 0 20px 6px rgba(0,0,0,.2);
		
	box-shadow: 
		0 0 8px 1px rgba(0,0,0,.2),
		inset 0 0 20px 6px rgba(0,0,0,.2);
}

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://pehbehbeh.de/ pehbehbeh

    Great Quick Tip! Thanks!

  • http://daniel-rauber.de Daniel

    Very nice result! But that’s not new for me.
    Thank you anyway, I like your Quick Tips!

    I’d like to have some more about jQuery.

  • http://www.damnsemicolon.com Skye

    Nice tip. Good final product.

  • http://www.johnejohnson.org John Johnson

    Very cool. Thanks a lot.

  • http://www.monsterwpthemes.com/ JD

    It’s a shame CSS3 isn’t fully compatible with the most popular browsers. It’s capable of doing some amazing things.

    • http://www.portal-media.net schiwe

      By saying “most popular” You mean IE6/7/8?…

  • Damion

    Hey Jeff,

    Nice tutorial, I have a question though.

    You know on windows version of chrome, It has a problem processing “-webkit-border-radius:” with “-webkit-box-shadow:inset”

    Do you know how we would fix this, Or would we just have to wait for chrome to fix the bug?

    Thank you,
    Damion.

    • http://www.dazydude.net Rik de Vos

      This is a known bug. We’ll have to wait until Google fixes it.

      Cheers,
      Rik

      • SalmanAbbas007

        aaaaaaaaaaaaah they are fucking to lazy to fix it :@

      • SalmanAbbas007

        Woopdidoo its fixed in the latest Canary Build :|

      • Damion

        o.0 that sucks :S

        Can’t wait for chrome 9 :)

  • bhavin

    nice

  • http://www.salmanfolio.com salmanlp

    Nice tutorial!
    I didn’t know about the “inset”
    nice tip i always love your tutorials :)

  • http://www.keyboard-computer.com/ Stefan

    Wow, Jeff you are getting better and better :) Vert dynamic and clear. Thank you

  • navy92f

    hi Jeffrey,
    I live inside the f**king GFW(aka “firewall”) of china,you may know it somehow. sadly the firewall blocked some site you use to release your great videos(youtube,blip). but if you can supply the address of the video (even it is blocked in china),we in china can download it more easily(using ssh,vpn,proxy).I appreciated your have attached some links below the videos.

  • Ciwan

    This was Awesome.

    Thank You.

  • jeremy

    Great Quick Tip! I like your Quick Tips!

  • http://www.vanderwijk.com Johan

    This is brilliant! I really love the effect. Too bad that most of my clients use IE7 and expect their sites to look *exactly* as the photoshop design. I guess this is because they are from the print age…

    Last week I spent half a day building a very slick CSS-only login form that did not show the inset shadows and rounded corners in IE, but still degraded quite nicely. But because the client did not accept this difference I ended up using a big background image, very frustrating!

  • http://jazdesign.co.uk Jaz

    Thanks for this, didn’t realise you could use multiple shadows. Excellent usage too.

  • Brad

    Excellent tip. CSS is so full of things we never think about using yet produce such excellent effects

  • http://www.gamer36 Gamer36

    Sorry I’m a newbie, but what program does this tutorial use? Dreamweaver?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Espresso

  • toxiN

    Nice tut, but i have an off topic question, why’s in the video about 79k subcribers and on the site just 75k :) because I really want to see the WordPress coding in the tutorial…

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Numbers jump all over the place from day to day. FeedBurner is notorious for that.

  • Mark

    Jeffrey just wanted to say thank you. I so enjoy and learn from all your tutorials.

    thanks again,

    Mark

  • http://GoTweed.com.au markaid

    thanks Jeffrey, awesome tips!

  • Thall

    Hi,
    I noticed that when you visited net.tutsplus.com it show you 79,232 RSS Subscribers, but when i visiting nettuts today (2011-01-11) i only sees 77,624 RSS Subscribers. Thats not making any sense.. are you trying to “delay” the WordPress implementation of the Warmfull HTML CSS Design?

    • MEBS

      Yes, they are.. two days ago they had 79100 and today almost 73000. They are either delaying the tut, which we are so anxiously awaiting, or they have lost in just two days 6000 RSS subscribers.
      If you can’t publish the HTML/CSS3 to WordPress theme just yet, for reasons of your own, let us know Jeffrey, we’ll understand; this tutorial is obviously time consuming.

  • Elliott

    It’s a really nice achievement and I’d love to use it but there’s still the problem of backwards compatibility which most programmers still have to deal with. My suggestion is a combination of the two. Use this button for newer browsers and have a jQ hover effect for the older browsers. Not really useful and you work twice for it but if you have a couple of buttons on your page it’ll help with load time and you don’t have to wait for rollover images with newer browsers.

  • kankuro

    how I wish it will work in IE6+, how i wish also CSSPie3 will support inset property :D nice tuts Mr. Way…

  • http://www.nouveller.com/ Benjamin Reid

    I actually liked the way you did that, apply CSS to an image, rather than creating the entire button from scratch. Nice work.

  • arnold

    nice css3 experiment , Im looking forward for the future of css3, now we need a button generator where we use css3 & some jquery, good stuff anyway :)

  • http://www.sitebase.be Sitebase

    Great tip Jeffrey!

  • Pawel

    Hi!
    I cannot write anything, but I would like to learn some HTML5 and CSS. I’m reeading this website for several days, and I found nice tutorial about CSS: “noob to ninja”. I would like to known if there is any similar tutorial for HTML? As I say, I’m completly noob, I can’t write anything, but I would love to try. I also very like this video tutorials, so I prefer this tyle of learning. Can anyone help me?
    And sorry for my English, it isn’t my native one, as you can probobly see ;-)

  • http://www.buzzednow.com Harvz

    Before we had to use photoshop to achieve drop shadows which was a pain in the neck but now with a few lines of css its achievable. very good tip but not a new one.

  • http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-dont-always-jump-back-to-photoshop/ papa

    how to change the color of the shadow

  • http://www.templatebase.info/ templatebase

    Great Quick Tip Jeffrey! , good css3 experiment ! Thanks for sharing!

    It’s useless until it works with IE8. Can be archived with jQuery for IE users ?. If not we are back to photomanipulation.

  • http://www.webinthehub.com WITH

    amazing tut… great resource…

  • Waseem

    What is the theme you are you using in Espresso ?

  • http://www.fraserbathrooms.co.uk Wetrooms Edinburgh

    thants great tutorial – but its hard to remember.
    for me its much quicker to do changes in photoshop

  • http://vivekipedia.tumblr.com Vivek Shrinivasan

    Jeffery Way, Where do you learn these tricks from ?? I ‘d be glad to know if there’s a book full of tips-tricks or you learn as you just play around?

  • gareth

    doesnt work in ie8