The History of Web Browsers

The History of Web Browsers

The History of Web Browsers

Facebook Cover image Size

Facebook Cover image size is

850 X 315

Example
Download it for demo

Super Awesome Buttons with CSS3 and RGBA

One of our favorite things about CSS3 is the addition of RGBA, a color mode that adds alpha-blending to your favorite CSS properties. We've kicked the tires on it a bit with our own projects and have found that it helps streamline our CSS and makes scaling things like buttons very easy. To show you how, we've cooked up an example with some super awesome, scalable buttons.

The Button

Here's what we're looking at:

Our original button we'll use to show how RGBA colors rock your world. See how the hex drop shadow works on white, but not dark? We'll fix that.

It's a simple button made possible by a transparent PNG overlay (for the gradient), border, border-radius, box-shadow, and text-shadow. Here's the CSS that we've got so far to make this super awesome button:

1. .awesome{
2. background: #222 url(/images/alert-overlay.png) repeat-x;
3. display: inline-block;
4. padding: 5px 10px 6px;
5. color: #fff;
6. text-decoration: none;
7. font-weight: bold;
8. line-height: 1;
9. -moz-border-radius: 5px;
10. -webkit-border-radius: 5px;
11. -moz-box-shadow: 0 1px 3px #999;
12. -webkit-box-shadow: 0 1px 3px #999;
13. text-shadow: 0 -1px 1px #222;
14. border-bottom: 1px solid #222;
15. position: relative;
16. cursor: pointer;
17. }

Not too shabby considering it's nearly all done with CSS. We could use CSS3 to do the gradient as well, but currently only Safari supports that. For a little backward compatibility, we'll keep it as a transparent PNG. Besides, the transparent PNG is easier to work with than setting the gradient in CSS since Safari only does CSS gradients at this point.

Making it Scale with RGBA

Sweet, so we've got our button styled up and looking great, but since we're using "static" colors (Hex value), this button doesn't scale very well. What if we need it to be shown on dark and white backgrounds? What about other colors? Here's where RGBA comes in.

Small Details. Notice the shadow on the button on the dark background? We fixed the buttons' shadow blending by using the RGBA colors.

With a little RGBA love, we'll scale this single button to add five more colors, two more sizes, and make it work on any background color. Check this out—all we have to do is modify three lines of CSS.

1. .awesome {
2. ...
3. -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
4. -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
5. text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
6. border-bottom: 1px solid rgba(0,0,0,0.25);
7. ...
8. }

There, now we have our super awesome button with some alpha blending added in. Still looks the same right? That's because we have a 25% black border, 50% box-shadow, and 25% text-shadow in place of regular hex values. This gives us what we need to make our original button scale to various backgrounds, colors, and sizes. With the RGBA values, we have layers of color instead of separate colors, much like what you get when doing transparent drop shadows in Photoshop.

Adding the Colors and Sizes

Now that we've got our default button to where we need it, let's add some colors and sizes. Here's the CSS to do it:

1. /* Sizes ---------- */
2. .small.awesome {
3. font-size: 11px;
4. }
5. .medium.awesome {
6. font-size: 13px;
7. }
8. .large.awesome {
9. font-size: 14px;
10. padding: 8px 14px 9px;
11. }
12.  
13. /* Colors ---------- */
14. .blue.awesome {
15. background-color: #2daebf;
16. }
17. .red.awesome {
18. background-color: #e33100;
19. }
20. .magenta.awesome {
21. background-color: #a9014b;
22. }
23. .orange.awesome {
24. background-color: #ff5c00;
25. }
26. .yellow.awesome {
27. background-color: #ffb515;
28. }

Done Deal

And now we have six buttons, each with three different sizes. You can see the final coded example here to take a closer look at the code.

And there we have it: scalable buttons with minimal CSS that work everywhere.

Although this example may be overkill—who really needs this many button colors?—the point is that RGBA is actually much more powerful than typical Hex values. Consider this: if we were using hex values, we'd have three times the CSS per color—one color for background, one for border, and one for text-shadow.

With a little CSS3 magic, we've created a scalable set of buttons with nearly half the CSS it would have taken with hex colors. Give it a go in your next project and see how it can help add that extra polish you want without huge impact on your code.

Browser Support prefix

Firefox requires the prefix -moz- for border-image.
Chrome and Safari requires the prefix -webkit- for border-image.
Opera requires the prefix -o- for border-image.

Linear Gradient (Left → Right)

#linearBg1 {
 /* fallback */
 background-color: #1a82f7;
 background-image: url(images/linear_bg_1.png);
 background-repeat: repeat-y;
 /* Safari 4-5, Chrome 1-9 */
 background: -webkit-gradient(linear, left top, right top, from(#1a82f7), to(#2F2727));
 /* Safari 5.1, Chrome 10+ */
 background: -webkit-linear-gradient(left, #2F2727, #1a82f7);
 /* Firefox 3.6+ */
 background: -moz-linear-gradient(left, #2F2727, #1a82f7);
 /* IE 10 */
 background: -ms-linear-gradient(left, #2F2727, #1a82f7);
 /* Opera 11.10+ */
 background: -o-linear-gradient(left, #2F2727, #1a82f7); }

CSS3 Gradient Backgrounds

#linearBg2 {
 /* fallback */ background-color: #1a82f7;
 background: url(images/linear_bg_2.png);
 background-repeat: repeat-x;
 /* Safari 4-5, Chrome 1-9 */
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
 /* Safari 5.1, Chrome 10+ */
 background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
 /* Firefox 3.6+ */
 background: -moz-linear-gradient(top, #2F2727, #1a82f7);
 /* IE 10 */
 background: -ms-linear-gradient(top, #2F2727, #1a82f7);
 /* Opera 11.10+ */
 background: -o-linear-gradient(top, #2F2727, #1a82f7); }

Removed Elements from html5

The following HTML 4.01 elements are removed from HTML5:

• <acronym>
• <applet>
• <basefont>
• <big>
• <center>
• <dir>
• <font>
• <frame>
• <frameset>
• <noframes>
• <strike>
• <tt>

HTML5 offers new elements

Tag	Description
<article>	Defines an article
<aside>	Defines content aside from the page content
<bdi>	Isolates a part of text that might be formatted in a different direction from other text outside it
<command>	Defines a command button that a user can invoke
<details>	Defines additional details that the user can view or hide
<summary>	Defines a visible heading for a <details> element
<figure>	Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figcaption>	Defines a caption for a <figure> element
<footer>	Defines a footer for a document or section
<header>	Defines a header for a document or section
<hgroup>	Groups a set of <h1> to <h6> elements when a heading has multiple levels
<mark>	Defines marked/highlighted text
<meter>	Defines a scalar measurement within a known range (a gauge)
<nav>	Defines navigation links
<progress>	Represents the progress of a task
<ruby>	Defines a ruby annotation (for East Asian typography)
<rt>	Defines an explanation/pronunciation of characters (for East Asian typography)
<rp>	Defines what to show in browsers that do not support ruby annotations
<section>	Defines a section in a document
<time>	Defines a date/time
<wbr>	Defines a possible line-break

<audio>	Defines sound content
<video>	Defines a video or movie
<source>	Defines multiple media resources for <video> and <audio>
<embed>	Defines a container for an external application or interactive content (a plug-in)
<track>	Defines text tracks for <video> and <audio>

<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)

<datalist> Specifies a list of pre-defined options for input controls <keygen>   Defines a key-pair generator field (for forms) <output> Defines the result of a calculation