Month: December 2010

Creating Gaussian Blur Effect With CSS3

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

There is a new and improved version of the solution on this page.

Unfortunately, CSS3 does not provide means for creating blur effects out of the box, however we can easily emulate Gaussian Blur by using text-shadow and setting the color of the element to transparent:

The following markup:

<p>Lorem ipsum dolor sit amet...</p>

…And this CSS:

p
{
    text-shadow: 0 0 8px #000;
    color: transparent;
    /* other properties */

}

… Will produce this:

… And we can use it to add cool a lá Vista and Windows 7 blur effects to our Web 2.0 dialog boxes as you shown below:

A few notes:

You can control the smoothing of the blur via the spread value of the text-shadow property (in our example it is set to 8 pixels).

Internet Explorer 5.5-8 does not have native support for RGBA colors, but you can use the properietary gradient filter to emulate RGBA:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)";

On the other hand, in IE you do not have to emulate Gaussian blur, because it supports it since version 5.5 – again via the proprietary blur filter:

filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(pixelRadius=2)";

The demo does not work properly with Opera, because that browser does not seem to support RGBA colors applied to elements that have a position different than static, however with a different setup it can be put to work. IE6 and IE7 fail to execute the blur filter, because it is applied to a relatively positioned element (yes, that’s the weird CSS hack for stopping the propagation of transparency from parent to child elements), but again – this can be solved with a different setup, markup and CSS.

The entire example is available on this page, or you can find more experiments here.

Merry Christmas and a Happy New Year everyone!

Related Posts

Advertisements

New Web 2.0 Tooltip Component

If you are tired and bored of browsers’ default tooltips and look for an easy way to display important information in a stylish manner Tooltip.JS is a component that you will love.

It is skinnable, fully customizable and can display not only the text found in the title attribute in the elements of your markup, but also rich HTML enhanced with JavaScript and CSS or load its contents from external sources via AJAX.

Key Features:

  • Extremely fast with a small footprint.
  • Imageless CSS3 skins.
  • Support for minimize zones.
  • Tooltips operate on the title attribute of the elements or can be loaded via AJAX.
  • You can specify regions on the page that will be tooltipified or just tootipify the entire page.
  • Skinnable – the full version includes the full set of 12 skins that will virtually fit any design.
  • Platform-independent – can work with any server platform.
  • Can be initialized either on page load or on demand.
  • Crossbrowser – All major browsers are supported.
  • Comprehensible and easy to use client API.
  • Tooltipifying of newly added elements on the age after AJAX or user interaction.
  • Tooltips can contain HTML and JavaScript, not just simple text.
  • Smart flipping when the tooltip is beyond the viewport.

You can visit the demo page or download the component straight away from this link. It is also included in the latest version of Acid.JS Web 2.0 Component Library.

Captcha.AJAX – Fully Customizable AJAX Captcha Component

Protect the forms on your website against automated submissions with this fully customizable, fast and AJAX driven captcha component. It will fit the design of your forms or will apply its own styles depending on your choice. The easy and comrehenisble API allows to customize almost anything – colors, dimensions, to enable manual reload of the image and more.

The deployment of Captcha.AJAX on your website is a matter of minutes and it can be easily integrated to your existing forms regardless of how are they rendered – on the server or via JavaScript / AJAX.

Key Features

  • Extremely fast with a very small footprint.
  • Does not require any PHP knowledge, as the setup logic is the in the front-end.
  • Built on top of jQuery.
  • Fully customizable.
  • Inherits the styles of the form it is integrated to or applies its own styles.
  • Easy to integrate into existing forms.
  • Two initialization modes – on page load and on demand.

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

Emulating Differently Colored Double Borders With CSS3

CSS Level 3 provides a number of new approaches for border styling such as border-image and border-radius. There is also an addition to the classic border property, that allows the setting of as many borders to each side of the element as you need, and each one with a different color. Unfortunately, as of December 2010 only Mozilla FireFox supports this via proprietary implementation: -moz-border-top-colors, -moz-border-right-colors, -moz-border-bottom-colors and -moz-border-left-colors.

The solution demonstrated on this page utilizes border and box-shadow with shadow blur turned off in order to create a double border with two different colors and can save us from adding an extra element in order to fulfill some design. It works with Mozilla FireFox, Google Chrome, Opera and Internet Explorer 9. Older versions of Internet Explorer will display just the normal border:

The HTML:

<div class="double-border">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>

… And the CSS:

.double-border
{
 padding: 8px;
 border: solid 6px #ff8000;
 -moz-box-shadow: 0 0 0 6px #0f0;
 -webkit-box-shadow: 0 0 0 6px #0f0;
 box-shadow: 0 0 0 6px #0f0;
 width: 200px;
 float: left;
 margin: 8px;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 border-radius: 6px;
}

What we actually do is to set shadow’s x-offset, y-offset and the shadow blur to zero and set color for the shadow and in this manner to emulate a solid color border to the element:

-moz-box-shadow: 0 0 0 6px #0f0;

This will render a solid color 6-pixel wide shadow that can be used as an outer border of the element. The inner border is set via the classic:

border: solid 6px #ff8000;

What is important in this solution is that we also need to set margin to the element that is equal or bigger than the shadow spread, otherwise the adjacent elements will be overlapped by the border we have emulated from a box-shadow.

If you like the example you can download it too. Find more experiments here.