Specifications change, they get revised and updated and sometimes, just sometimes they improve upon the existing set that they are designed to replace. I’ve been waiting a long time for cross-browser support of CSS3 and we are getting closer and closer every day, but who knows when exactly this will happen.
Here is a teaser at the top of the post instead of making you read all the way to the bottom to see what this can do. This works in every major browser except IE, so if you are using Internet Exploder I recommend you try Firefox, Google Chrome or Safari :-)
In case any of you have no idea what I am talking about, CSS2 is basically outdated and antiquated but its the “best we have” at the present moment so its what is used. In the upcoming CSS3 set of standards there are so many new abilities, features and options that will be available for designers to utilize, I just can’t help but get excited by it.
For this post i am going to put out a quick example showing just one possibility that is available using CSS3. Everyone loves a nice rounded, shiny, glossy web 2.0 button on a page right? Up until now that meant having some better than average photoshop skills and a bit of work, well that’s no fun now is it? I’m going to outline how you can accomplish this without using any images at all.
In CSS3 there are more options available for shadows, gradient backgrounds, highlighting and all the groovy things needed to make these awesome buttons. First we start off by making a div that will be our image-less button:
[php]
<div id="shiny-blue" class="css3-button">No Images!!<span></span></div>
[/php]
Then we start styling it, the css for this can be pretty in-depth so I will save that for another tutorial but the meat and potatoes of it all requires the following to implement the elements needed to make this button:
[css]
.css3-button {
position:relative;
display:inline-block;
width:8em;
padding:0.25em 0.5em 0.3em 0.5em;
text-align:center;
cursor:pointer;
border:2px solid #999;
background-color:#666;
background-color:rgba(128,128,128,0.75);
-moz-border-radius:16px;
-webkit-border-radius:16px;
-opera-border-radius:16px;
-khtml-border-radius:16px;
border-radius:16px;
font-size:1.5em;
color:#fff;
font-weight:bold;
text-shadow:1px 1px 3px rgba(0,0,0,0.5);
background-image:-webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(64,64,64,0.75)), to(rgba(192,192,192,0.9)));
background-image:-moz-linear-gradient(top,bottom,from(rgba(64,64,64,0.75)), to(rgba(192,192,192,0.9)));
-khtml-box-shadow:rgba(192,192,192,0.75) 0px 8px 24px;
-moz-box-shadow:rgba(192,192,192,0.75) 0px 8px 24px;
box-shadow:rgba(192,192,192,0.75) 0px 8px 24px;
}
.css3-button span {
position:absolute;
display:block;
width:94%;
left:3.5%;
top:0px;
height:50%;
-webkit-border-radius:8px;
-moz-border-radius:8px;
background-color:rgba(255,255,255,0.25);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.75)), to(rgba(255,255,255,0)));
background-image:-moz-linear-gradient(top,bottom,from(rgba(255,255,255,0.75)), to(rgba(255,255,255,0)));
}
#shiny-blue {
border-color:#6699cc;
background-color:rgba(64,128,192,0.75);
background-image:-webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(16,96,192,0.75)), to(rgba(96,192,255,0.9)));
background-image:-moz-linear-gradient(top,bottom,from(rgba(16,96,192,0.75)), to(rgba(96,192,255,0.9)));
-khtml-box-shadow:rgba(128,192,255,0.75) 0px 8px 24px;
-moz-box-shadow:rgba(128,192,255,0.75) 0px 8px 24px;
box-shadow:rgba(128,192,255,0.75) 0px 8px 24px;
}
#shiny-blue:hover {
border-color:#003575;
background-color:rgba(0,97,216,0.75);
background-image:-webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(0,97,216,0.75)), to(rgba(0,53,117,0.9)));
background-image:-moz-linear-gradient(top,bottom,from(rgba(0,97,216,0.75)), to(rgba(0,53,117,0.9)));
-khtml-box-shadow:rgba(128,192,255,0.75) 0px 8px 24px;
-moz-box-shadow:rgba(128,192,255,0.75) 0px 8px 24px;
box-shadow:rgba(128,192,255,0.75) 0px 8px 24px;
margin: 0 5px 0 5px;
}
[/css]
In conclusion, this is just the tip of the ice berg of what CSS3 is capable of, I can’t wait to be able to utilize it in my work (will save me a pile on graphics work) :-0)
You didn't add the class to the div in your example html. Other than that this is a great example of CSS 3 and I'll be very excited once it's support is widespread enough to use.
Hi Michael,
Thanks for stopping by and thanks for catching that omission, I somehow missed that lol.. I have corrected it now.
Scales quite nicely when I bump the font size up to 240%
I note that you use several -moz type styles, which suggests that this is not entirely pure CSS3, but uses some browser-specific features.
It's kind of a funny way to go about it, but it has more to do with the W3C. CSS3 standards are not finalized yet, so while things like border-radius are proposed CSS3 declarations they have not reached the “Candidate Recommendation” stage so they will maintain the browser prefix. In the final implementation that will not be required so you will see the -moz etc prefixes gone at that time.
This is one of the fantastic CSS buttons out there!
But how about making the shiny-blue as a class instead of id? That way one can reuse the class in many buttons they may have in one page.
Nevertheless, it’s a good work!
Thanks for stopping by, yes using a class would be a better implementation for more than one button per page.. there are probably many areas in this code that could be cleaned up or improved :)
Jesse,
I am such a rookie with CSS and know very little on this subject, but I really enjoyed this post. I’m teaching myself how to do CSS programming and starting to understand the benefit of having a working understanding. Templates are great for a guy like me, but when I want to truly do some customization, that’s when I hit the wall with my limited skills in CSS. Thanks for the free education!
Scot
Hey Scot,
Thanks for stopping by, glad you enjoyed it (and reminding me that this site is still here, I really should get back to posting lol.. CSS is one of those things that seems a bit confusing at first but once you get rolling it feels more natural as time goes on… There are some really handy editing tools around as well that can help with organization, syntax etc that are great, I have been using one called TopSyle for quite some time and love it.