Month: November 2010

Creating a Web 2.0 Button with CSS3 and Minimal Markup

The beauty of CSS3 is not just in the fancy effects, but also in the numerous ways it provides for styling your semantic, up to the point and concise markup. The solution below demonstrates how to create a imageless navigation bar with CSS3 gradients and shadows, and even apply icons by using generated content via the :before pseudo element. Here‘s the final and crossbroser (with fallbacks for older browsers) result:

… Produced by the following markup:

<li><a href=”#” title=”RSS”>RSS</a></li>
<li><a href=”#” title=”Blogger”>Blogger</a></li>
<li><a href=”#” title=”MSN”>MSN</a></li>

… And the CSS explained in brief (on the demo page you can view the complete stylesheet or download the example):

1. The normal state of the buttons: a
 -moz-border-radius: 9px;
 -webkit-border-radius: 9px;
 border-radius: 9px;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#65a5ed", endColorstr="#aeeaff"); /* Internet Explorer */
 background: #65a5ed; /* Opera and really old browsers */
 background: -moz-linear-gradient(
        center bottom,
        rgb(150,238,255) 11%,
        rgb(131,178,229) 41%,
        rgb(85,155,229) 54%,
        rgb(194,204,234) 94%
    ); /* FireFox 3.x */
 background: -webkit-gradient(
        left bottom,
        left top,
        color-stop(0.11, rgb(150,238,255)),
        color-stop(0.41, rgb(131,178,229)),
        color-stop(0.54, rgb(85,155,229)),
        color-stop(0.94, rgb(194,204,234))
    ); /* Chrome and Safari */
 background: linear-gradient(top, #65a5ed, #aeeaff); /* Support for W3C CSS gradients */
 -moz-box-shadow: 0 0 4px #000; /* FireFox */
 -webkit-box-shadow: 0 0 4px #000; /* Chrome and Safari */
 box-shadow: 0 0 4px #000; /* FireFox, Chrome, Safari, Opera, IE9 */

Since no browser supports the official W3C background gradient properties yet, we define them separately for each browser, making sure that we put a fallback alternative for browsers that do not support gradients before all other gradient properties. Our solution will support gradients for IE5.5-9, Mozilla FireFox 3x, Apple Safari and Google Chrome. Opera will display a solid color background, as it still does not support CSS3 gradients.

2. For the :hover state we just change the properties we need to look different: a:hover
border-color: #000062;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=”#dbdbdb”, endColorstr=”#ffffff”);
background: #dcdcdc;
background: –moz-linear-gradient(
center bottom,
rgb(255,255,255) 0%,
rgb(214,214,214) 50%,
rgb(235,235,235) 71%,
rgb(248,248,248) 85%
background: -webkit-gradient(
left bottom,
left top,
color-stop(0, rgb(255,255,255)),
color-stop(0.5, rgb(214,214,214)),
color-stop(0.71, rgb(235,235,235)),
color-stop(0.85, rgb(248,248,248))
background: linear-gradient(top, #dbdbdb, #fff);
-moz-box-shadow: 0 0 6px #000;
-webkit-box-shadow: 0 0 6px #000;
box-shadow: 0 0 6px #000;

3. The :active state is even skinnier: a:active
-moz-box-shadow: 0 0 2px #000;
-webkit-box-shadow: 0 0 2px #000;
box-shadow: 0 0 2px #000;

And now the most interesting part. CSS3 supports multiple backgrounds on a single element, but still no browser provides means to inherit certain common properties from a parent element, so in order to apply icons we should use the :before pseudo element instead of definining multiple backgrounds (the gradient plus the icon) separately for each button:

1. Create a common :before rule that will be the same for all buttons in the menu: a:before
 content: "";
 margin: 4px;
 display: inline-block;
 height: 24px;
 width: 24px;
 background-repeat: no-repeat;
 background-position: center;
 float: left;

The above instructs the browser to render a pseudo element before the actual content of the element with the properties we define. Now we have a square 24 x 24 pixels inline-block element, which can accept a background image (the icon). To have a different icon for each button we apply classes to out <a>…</a> tags and then use this simple rule for each button: a.rss:before
 background-image: url("pages/creating-a-web-2-0-button-with-css3-and-minimal-markup/images/rss.png");
} a.blogger:before
 background-image: url("pages/creating-a-web-2-0-button-with-css3-and-minimal-markup/images/blogger.png");
} a.msn:before
 background-image: url("pages/creating-a-web-2-0-button-with-css3-and-minimal-markup/images/msn.png");

To optimize even more out menu we can use a single sprite for all icons in the menu or embed the images directly in the stylesheet as bas64 encoded data.

On this page you can see a working demo of the example and you can download it in case you need it. The example works with FireFox, Chrome, Safari, Internet Explorer and Opera. Internet Explorer 5.5 6 and 7 will not display the icons, because these browsers do not support generated CSS content, but still the gradients will work. Internet Explorer will not render the shadows and the rounded corners, but IE9 will.

Find more experiments here.


New Version of Dialogs.JS Released Today

I am happy to announce that version 7.0 of Dialogs.JS is already available for download with lots of improvements and a new set of skins.

Say goodbye to the boring default browser dialog boxes you are using on your website or online applications, here is Dialogs.JS!

The component comes with custom alert, confirm and prompt boxes, a couple of handy JavaScript methods that emulate the behavior of the “real” browser dialogs, really small footprint and 12 skins that will fit virtually any design. You get lightbox-style modal overlay, cool buttons, keyboard navigation (Enter, Spacebar and ESC keys), rounded corners input for the prompt… Everything so Web 2.0!

What’s New:

  • Improved performance and smaller footprint.
  • Built on top of jQuery.
  • Completely new set of (almost) imageless CSS3 skins.
  • Cool animations.
  • More customization options.
  • Option for setting the dialogs draggable.

Take a look at the demo or download the component right away! Dialogs.JS 7.0 is also included in the latest version of Acid.JS Web 2.0 Component Library.

Creating a Speech Bubble With CSS3 and without Additional Markup

Here’s a quick and easy way to create speech bubbles (or tooltips) with HTML and CSS3 without using additional markup or images. The solution is elegant and simple and utilizes the pseudo-element :after (or :before, if you prefer) and the fact that the borders in CSS are met in an angle. It works with all major browsers except with Internet Explorer 6 and 7 due to their lack of support for :before and :after.

All you need is a <div />:

<div class="speech-bubble">This speech bubble is created entirely with CSS, without any images or additional markup.</div>

… And the following CSS:

   width: 200px;
   padding: 10px;
   background: #404040;
   color: #fff;
   font: normal 12px "Segoe UI", Arial, Sans-serif;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   content: "";
   border: solid 10px transparent; /* set all borders to 10 pixels width */
   border-top-color: #404040; /* the callout */
   border-bottom: 0; /* we do not need the bottom border in this case */
   width: 0;
   height: 0;
   overflow: hidden;
   display: block;
   position: relative;
   bottom: -20px; /* border-width of the :after element + padding of the root element */
   margin: auto;

The CSS is pretty self-explanatory, so lets not go into details. In a few words – we use the :after pseudo element to generate a new block element inside the <div>…</div>, and leave the rest to the magic of the borders of the HTML elements. Probably the most important thing for this solution is the bottom position, which equals the border-width of the :after element plus the padding of the root element. Obviously, with some more tweaking you can position the callout anywhere we need relative to the root element according to the design requirements. The only caveat I’ve noticed is that you cannot adequately apply box-shadow to the generated element, because the shadow wraps around the transparent borders and the result it pretty ugly.

This is just a simple illustration of what can be done with the polygonal oddities of CSS, and in fact there are numerous similar solutions around.

Here is the demo, and here is the download file in case you need it. Find more experiments here.

Using RGBA to Prevent the CSS Opacity Inheritance from Parent to Child Elements

This article is a follow up of another article of mine dealing with the same problem which was written two years earlier. Now, in the light of the increased support for CSS3 the solution I will offer is already fully supported by all major browsers. The new solution deals with RGBA CSS3 backgrounds for Mozilla FireFox, Google Chrome, Opera and Apple Safari and the Microsoft-proprietary DXImage gradient filters for Internet Explorer and may give you some new design ideas. Make sure you check the test page which I have created for this article.

1. Create an empty <div class=”outer”>…</div>, and assign the following CSS to it:

   position: absolute;
   top: 24px;
   left: 24px;
   border: solid 1px #000;
   padding: 24px;
   background: rgba(64, 64, 64, 0.5); /* R, G, B, A */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040); /* AA, RR, GG, BB */

The RGBA background property requires the setting of four values for red (0-255), green (0-255), blue (0-255) and alpha transparency (0-1). Currently it is fully supported by FireFox, Opera, Chrome and Safari. Internet Explorer 9 is planned to support it. As a fallback for older versions of these browsers you may specify:

background: rgb(64, 64, 64);

… Before the rgba property, but keep in mind that Internet Explorer actually supports the RGB module and you will need to remove the background for that browser before or after the filter roperty by targetting all of its versions with the \9 hack:

background: none\9;

Now, let’s add support for RGBA for Internet Explorer 5.5-9. We are going to use the vendor-specific CSS extension gradient filter:

filter: progid:DXImageTransform.Microsoft.gradient();

It’s startColorstr and endColorstr properties allow the setting of both alpha channel and RGB color in hex format:

startColorstr=#AARRGGBB, endColorstr=#AARRGGBB

… Where the permitted values range from 00 to ff. In order to create a solid background we will use identical values for both the start- and end color strings:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040);

… Where 7f represents 127, i.e. 50% opacity, and 404040 is the background color of the element (whose RGB representation is 64, 64, 64 as in background: rgba(64, 64, 64, 0.5)).

2. In the <div class=”outer”>…</div> nest a new <div class=”inner”>Lorem ipsum dolor sit amet.</div> and associate it with the following CSS, for example:

   padding: 12px;
   width: 120px;
   background: #fff;
   border: solid 1px #404040;

Hit F5 to reload the page and you will see that the opacity from div.outer is not inherited by div.inner. Cool, isn’t it? Here’s a link to the online demo. Keep in mind that the absolute position I have set on the demo page is for display purpose only – to prove the semi-transparency of the div.outer.

Find more experiments here.

Related Posts

Window.JS – Fully Customizable and SEO-friendly Web 2.0 Window Component

Have you ever wanted to create your own portal website, design page wizards or put your forms into order? Ever needed a cool and lightweight component that is created entirely with JavaScript that mimics the behavior of the real windows but circumvents pop-up blockers?

Window.JS has it all. And even more – it comes with rich and easy to use client API, set of 12 cool skins and may be up and running on your project in a few easy steps in the course of several minutes.

Key Features

  • Mimics the behavior of the real windows – move, drag, resize, minimize, maximize, restore, close, etc.
  • Features cool animations.
  • Support for minimize zones.
  • 3 types of content loading – from an on-page template, via ajax and in an iframe.
  • SEO-friendly if on-page templates are used.
  • Extremely fast with a very small footprint.
  • Platform-independent – can work with any server platform.
  • Skinnable – the full version includes the full set of 12 skins that will virtually fit any design.
  • Crossbrowser – All major browsers are supported.
  • Comprehensible and easy to use client API.
  • Multiple instances with different skins on a single page are supported.
  • Circumvents pop-up blockers.

Take a look at the demo or download the component right away! Window.JS 1.0 is also included in the latest version of Acid.JS Web 2.0 Component Library.

The New Killer Version of Forms.JS Form Element Skinning Component is Out

Forms.JS is a powerful component that will give you total control over the form elements on your page without any additional markup or sophisticated JavaScript. All you have to do is to add a single line of JavaScript in the head section of your webpage, define which elements will be styled, specify skinning region, set a skin, reload the page and leave the rest to Forms.JS. The component will seamlessly add cool Web 2.0 looks to input boxes, buttons, file inputs, checkboxes, radiobuttons and dropdowns.

What’s New in the Latest Version

  • Automatic styling of dynamically added form elements in the specified region.
  • Just one image sprite per skin and extensive use of CSS3.
  • Faster and seamless initialization.
  • Optional CSS3 support for IE7 and IE8 via CSS3Pie.
  • Internet Explorer 9 ready.
  • Selectboxes animations.
  • Built on top of jQuery.
  • New set of skins.
  • Improved client API.
  • Support for for the size property of selectboxes (expanded dropdowns).
  • Platform-independable – PHP, .NET, JAVA, etc.
  • Multiple skins on a single page.
  • Additional markup not required – just your form elements.

Check out the demo? And maybe download? Forms.JS 4.0 is also available in the latest version of Acid.JS Web 2.0 Component Library.

30% Off on Single Licenses in November

Just a quick reminder – all of the components included in the Acid.JS Web 2.0 Component Library are 30% off during November 2010. As usual, every purchase comes with a free bonus component. You will save even more money if you compile and order you very own Creative Web 2.0 Bundle with your favorite controls.