My job function needed full focus on products and it prevented me to have experiments and testing as I wanted to, so I always spent my own time to do. Now I can do whatever I want to while I am still on payroll. Yes! I am still paid my regular salary for a while, thanks for the new regulation
OK, enough blah about the stupid corporate stuff.
Anyway, I played around with WebKit CSS3 gradient and created a useless but fun stuff – an Aqua button with no images!
Back in the time when Mac OS X was first announced, there’re a plenty of web tutorials that describe how to create the sexy aqua button with Photoshop, and now I can show how to create one with CSS!
Here’s a screen capture of the rendered button. You can see the actual HTML page too.
OK, let’s take a look at the code:
Create a Button Base and Styling Label
.button{ width: 120px; height: 24px; padding: 5px 16px 3px; -webkit-border-radius: 16px; -moz-border-radius: 16px; border: 2px solid #ccc; position: relative; /* Label */ font-family: Lucida Sans, Helvetica, sans-serif; font-weight: 800; color: #fff; text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px; text-align: center; vertical-align: middle; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } The first part to render a rounded-corner rectangle. Set the position as relative to place “glare” inside of the button later.
The second part is for styling the label.
Give text-shodow with alpha-transparency. (Believe or not, Chrome and Android do not support text-shadow!)
Button Color and Shadow
.aqua{ background-color: rgba(60, 132, 198, 0.8); background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9))); border-top-color: #8ba2c1; border-right-color: #5890bf; border-bottom-color: #4f93ca; border-left-color: #768fa5; -webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px; -moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px; /* FF 3.5+ */ } Now, specify the appearance of the button and shadow at bottom.
Here. I use the -webkit-gradient to create a nice-looking aqua gradient.
Notice that I use -webkit-gradient as a background-image, although there’s no physical graphics are added there.
You can use gradients in background-image, border-image, list-style-image and content property.
On Firefox, this is ignored and you see only Background-color.
The syntax for linear gradient is as follows:-webkit-gradient(lenear, left top, right bottom, from(start color/alpha), to(end color/alpha))
In this example, starts with dark blue from straight top to bottom (no angle) at 95%, not all way down, to blended into lighter blue.
Then, I specified color on each border (so the css looks pretty messy).
Finally, give a nice shadow at bottom, with -webkit-box-shadow.
Firefox 3.5+ supports it too, so duplicate it with -moz-box-shadow.
Syntax is as:[color/alpha] [horizontal offset] [vertical offset] [blur radius]
Give it shine
.button .glare { position: absolute; top: 0; left: 5px; -webkit-border-radius: 8px; -moz-border-radius: 8px; height: 1px; width: 142px; padding: 8px 0; background-color: rgba(255, 255, 255, 0.25); background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0))); } The class glare renders the glossy look on the button.
First, give absolute position to the parent container, button to give shine in the right position.
<;li
Again, use -webkit-gradient to create the glossy look, by playing with alpha-transparency.
Start with the white (alpha 0.7) and end with complete transparent (alpha 0).
Honestly, I do not like to have this non-semantic empty div block to only get this visual effect.
I need to figure a better way to do.
Source:http://girliemac.com
No comments:
Post a Comment