Advertisement
HTML & CSS

Quick Tip: Don't Always Jump Back to Photoshop

by

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?"


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);
}
Related Posts
  • Code
    Web Development
    Alternatives to PrefixrCss3 wide retina preview
    With Prefixr no longer being developed, let's look at a few alternatives for managing CSS vendor prefixes.Read More…
  • Web Design
    HTML/CSS
    Finishing Off the Merry Christmas Web App InterfaceXmas build 1 retina
    In this tutorial we will finish off our web app front-end so it all looks perfect and functions nicely on all screen sizes. Last time, we rounded off by styling the message boxes, leaving just the content left to do. Shall we dive right in? Ok!Read More…
  • Code
    Creative Coding
    Customizing the WordPress Admin - Adding StylingCustomize wordpress admin rachel 400
    In the first five parts of this series, I showed you how to customize the WordPress admin in a variety of ways, including customizing the login screen, dashboard and post editing screen. In this tutorial you'll learn how to add some styling and branding to your admin screens. Specifically you'll learn how to: customize the admin screen footer and style it style admin menus style links and buttons Read More…
  • Code
    Theme Development
    Using CSS Preprocessors With WordPress - LESS + CodeKitUsing preprocessors with wordpress what are they
    In the first part of this series I gave a quick overview of the popular CSS preprocessors LESS and SASS. I also shared a few of the frameworks in which they are used. I plan on taking a deeper dive into LESS and talking about the parts of the language I use most often. I also plan on showing you how to get started using it with CodeKit. Let's dig in!Read More…
  • Web Design
    HTML/CSS
    Stir up Your Own Delicious Sass MixinsMix preview
    Sass is designed to help write CSS faster; mixins are of the features that make it possible. Several heavyweight libraries exist with complex formulas for every situation, but today I’m going to show how to stir up your own mixins that complement existing workflows.Read More…
  • Web Design
    HTML/CSS
    Quickly Build a Swish Teaser Page With CSS3Preview
    In this tutorial, you'll learn how to build a teaser page using just CSS, no images or even a Photoshop design. Many websites and upcoming apps gain great publicity from teaser pages, so this is a useful concept to add to your toolkit. Use it for any app or website that's getting ready to launch.Read More…