Archive for the ‘About CSS 3’ Category

« Older Entries

How to make Button Emboss using CSS 3

Saturday, July 31st, 2010

Usually, the web developer or web designer to make buttons embossed with ways to use background image.
But with technological advances in the field of web development, has born a new way to create embossed button without using the background image again.

CSS 3 is able to make it easier and not have to bother with useless waste of your time.

Demo

With the syntax below will get a beautiful embossed button:

.button{
margin: 0.1em;
text-align:center;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
width:140px;
padding:0.3em;
}

#b1 {
background:#ddd;
border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;}

#b1 a {
text-decoration:none;
color:#888;}

#b1 a:hover {
color:#555;}

Note: This Way is not support in IE
Example

Tags: , ,
Posted in About CSS 3 | No Comments »

How to make multi column layout in css 3

Saturday, July 31st, 2010

W3C offers a new way to arrange text “news-paper wise”, in columns. Multi-column layout is actually a module on its own. It allows a webdeveloper to let text be fitted into columns, in two ways: by defining a width for each column, or by defining a number of columns. The first would be done by column-width, the latter by column-count. To create a space between the columns, you need to specify a width for column-gap.

Multi-column layout is currently only supported in Mozilla based browsers and Safari 3, who have prefixed the properties with respectively -moz- and -webkit-. The example below is done with column-width, the CSS for it is as follows:

-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;

Which results in the following:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. Morbi nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam condimentum. Praesent euismod auctor dui. Nunc ut leo vel magna adipiscing tempor. Donec pretium, ligula et hendrerit faucibus, sem velit accumsan tortor, sodales tempor est ligula non velit. Nulla sagittis, odio quis porta nonummy, mauris arcu gravida odio, quis aliquam lacus elit non libero. Proin aliquam augue accumsan augue. Quisque ut eros at erat ultrices sodales. Nunc vitae ipsum. Mauris in elit in dolor imperdiet interdum. Vivamus egestas sagittis justo. Sed lorem. Sed vel neque in ipsum gravida nonummy. Nulla tempor blandit elit.

The next example is done with column-count, and has the following code:

-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule: 1px solid black;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black;

Which in turn results in the following:

Cras urna metus, aliquam sed, condimentum eget, pellentesque scelerisque, massa. Nullam et est id augue blandit tincidunt. Ut consectetuer, justo eleifend varius facilisis, tortor lorem pharetra nunc, ac sodales purus nunc semper tortor. Integer nec urna. Praesent scelerisque, ipsum nec aliquet volutpat, sem ante sagittis risus, sed condimentum magna libero luctus elit. Donec pede purus, hendrerit non, laoreet vel, porta ut, neque. Cras eu lacus. Pellentesque tempus mattis magna. Nullam id nisl. Quisque dolor lorem, commodo ac, pharetra sed, nonummy nec, nulla. Mauris purus. Suspendisse eget mauris nec justo eleifend vestibulum. Nunc ut eros sed pede pretium congue. Etiam in elit ut nisi ultrices hendrerit. Cras vulputate ultrices quam. Curabitur venenatis. Cras sed nisi.

A feature which isn’t implemented yet is column-space-distribution, this should describe how to distribute the space between the columns if there’s rest space left.

Jason Harrop has created a multicolumn extension for Firefox which allows you to apply these CSS properties to whatever page you like.

Posted in About CSS 3 | No Comments »

How to make multiple Background

Friday, July 30th, 2010

Multiple Background Using CSS 3

Using CSS 3, we can create multiple background image on an website in one div…

Here is a very simple example showing the use of multiple background images in one div.
Is this the end of nested elements with tons of CSS to create a layered effect? Hope so…

This is the syntax of CSS about multiple background  image:

#multipleBG {
border: 5px solid #cccccc;
background:url(img1) top left no-repeat, url(img2) bottom left no-repeat, url(img3) bottom right no-repeat;
padding: 15px 25px;
height: inherit;
width: 590px;
}

Browser Support:
FireFox 3.6 and later, Google Chrome 1.0, Opera 9.6, Safari 3.2.1

EXAMPLE

Tags: ,
Posted in About CSS 3 | No Comments »

Increased Support for CSS3 on firefox 4 beta

Saturday, July 17th, 2010

The first public beta of the forthcoming Firefox 4 browser has been released bringing increased support for CSS3 amongst various other improvements.

One of the most notable new additions in Firefox 4 is support for CSS3 Transitions (with the -moz- prefix). Webkit based browsers (such as Safari / Chrome) and Opera have supported CSS3 Transitions for some time, almost three years in Webkit’s case, and it is reassuring to see that Mozilla have finally made an effort to catch up with the competition in this area.

Firefox 4 Screenshot

According to the Mozilla Hacks blog;

This beta release contains a nearly complete implementation of CSS Transitions, privately namespaced with a -moz prefix. The only big things left here are the animation of transforms and gradients. (Gradients is still waiting on working group feedback, code for transitions is under review.)

You can read more on Mozilla’s implementation of CSS3 Transitions on the Mozilla Developer Center along with several examples.

What Else is New?

Firefox 4 also brings several other improvements/changes in terms of CSS3 support including:

* Resizable textarea Elements – Textarea elements are now resizable by default. You can use the -moz-resize property to change the default.

* New CSS3 calc() support – This beta includes support for the new CSS3 calc() value. This lets you specify sizes that include a combination of percentages and absolute values and is hugely popular with developers. More info here.

* Selecting a section of a background image – You can now use the new -moz-image-rect selector to select only a section of a background for display.

* Removed support for -moz-background-size – The -moz-background-size property has been renamed to its final background-size name. -moz-background-size is no longer supported.

* Privacy and the :visited selector – Implementation of changes, announced in March, with regard to what information can be obtained about the style of visited links using CSS selectors. This may affect some web applications. More information here.

In addition to the above, Mozilla have also added a new -moz-any selector. Although not part of the CSS3 specification, -moz-any is a powerful selector that lets you replace large and complicated selectors with much smaller ones. More details can be found on the Mozilla Hacks blog.

You can read more on The Mozilla Blog or Mozilla Hacks and, if you haven’t already, you can download the beta release here.

Mozilla have promised a new beta release every two to three weeks.

Tags: ,
Posted in About CSS 3 | No Comments »

« Older Entries