Quantcast
Viewing all articles
Browse latest Browse all 91

Dive into CSS3

Everyone who was ever interested in CSS3 has already tried it. Now we can generate rounded corners and drop shadows without any superfluous efforts.

But it’s just a superficial level. I had to look into the new possibilities of browsers in more detail, to answer the arising questions like: to what extent gradients with a great number of colour transitions have the cross browser compatibility, where and how is it possible to apply at once a few shadows to the block, for what browsers prefixes of properties are used specifically etc.

In addition, I was interested in support of CSS3 on mobile platforms, unstudied possibilities of CSS3, and also generators that create a cross browser code. I tried to fill in some blanks and collect useful information for those, who only prepares to go deeper.

Browsers, supporting properties enumerated as CSS comments. Generators and instruments mostly can execute a few functions at once, therefore in such cases I specified them only wherein they, on my opinion, are managing the best of all.

Linear-gradient

Actually there are a few types of CSS3 gradients. It is the simplest gradient.

div {

  background-color: #444444;

  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Safari 4-5, Chrome 1-10, iOS 3.2-4.3, Android 2.1-3.0 */

  background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */

  background-image: -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6+ */

  background-image: -ms-linear-gradient(top, #444444, #999999); /* IE 10+ */

  background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */

  background-image: linear-gradient(to bottom, #444444, #999999);

}

Image may be NSFW.
Clik here to view.
Simple gradient in Dive into CSS3

Except pointing initial and eventual colors, gradients allow to change the slope angle, starting position and completion of colour transition, amount of colors and direction of gradient.

Safari (up to the version 5) and Chrome (up to the version 10) had their own syntax, and IE 10 with Opera add their prefixes, increasing the amount of code.
All possibilities of gradients are supported by those browsers that can represent CSS3 gradients, even if some generators offer us only a transition between two colors.

Repeating-linear-gradient

Allows repeating the gradient, gives an opportunity to create base-line patterns.

div {

  background-color: #444444;

  background-image: -webkit-repeating-linear-gradient(top, #444444 18%, #999999 25%); /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */

  background-image: -moz-repeating-linear-gradient(top, #444444 18%, #999999 25%); /* Firefox 3.6+ */

  background-image: -ms-repeating-linear-gradient(top, #444444 18%, #999999 25%); /* IE 10+ */

  background-image: -o-repeating-linear-gradient(top, #444444 18%, #999999 25%); /* Opera 11.10+ */

  background-image: repeating-linear-gradient(top, #444444 18%, #999999 25%);

}

Image may be NSFW.
Clik here to view.
Repeating linear gradient in Dive into CSS3

Radial-gradient

Circular gradient. It is similarly possible to have a few colour transitions and to determine the point of beginning of gradient (not necessarily from the center of circle).

div {

  background: #444444;

  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#444444), color-stop(100%,#999999)); /*  Chrome 1-10, Safari 4+, iOS 3.2-4.3, Android 2.1-3.0 */

  background: -webkit-radial-gradient(center, ellipse cover, #444444 0%,#999999 100%); /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */

  background: -moz-radial-gradient(center, ellipse cover, #444444 0%, #999999 100%); /* Firefox 3.6+ */

  background: -o-radial-gradient(center, ellipse cover, #444444 0%,#999999 100%); /* Opera 11.6+ */

  background: -ms-radial-gradient(center, ellipse cover, #444444 0%,#999999 100%); /* IE 10+ */

  background: radial-gradient(center, ellipse cover, #444444 0%,#999999 100%);

}

Image may be NSFW.
Clik here to view.
Radial gradient in Dive into CSS3

Opera did not support a circular gradient to the version 11.6. In others a situation is the same, as with a linear gradient.

Tools:

gradients.glrzad.com gives a cross browser code; it is possible to create the great number of colour transitions
colorzilla.com/gradient-editor/ the coolest generator. It is possible to create linear and circular gradients, there is also an ability of saving the most used colors in custom palettes, great number of readymade gradients.
lea.verou.me/css3patterns/ CSS3 patterns gallery. It is possible to take a look at the code of every pattern.

Multiple backgrounds

It is an ability to appoint few background display patterns to one element at once.

div {

  background: url(fallback.png) no-repeat 0 0;

  background: url(foreground.png) no-repeat 0 0, url(middle-ground.png) no-repeat 0 0, url(background.png) no-repeat 0 0; /* Firefox 3.6+, Safari 1.3+, Chrome 2+, IE 9+, Opera 10.5+, iOS 3.2+, Android 2.1+ */

}

You shouldn’t forget about the browsers not supporting plural backgrounds.

The order of backgrounds is the following: from the upper to the lower, it is meant that a lowermost background needs to be appointed in the end. Instead of base-line pictures it is possible to appoint CSS3 gradients.

Border-radius

Rounded corners of a block. All is simple, if the identical radius of rounding is needed.

div {

  -webkit-border-radius: 12px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */

  -moz-border-radius: 12px; /* Firefox 1-3.6 */

  border-radius: 12px; /* Opera 10.5+, IE 9+, Safari 5, Chrome, Firefox 4+, iOS 4+, Android 2.1+ */

}

Image may be NSFW.
Clik here to view.
Border-radius in Dive into CSS3

All manufacturers have already given up the vendor prefixes in the last versions of browsers.

But if different corners must be of a different radius, then it is needed to enumerate radiuses for every corner.

In Firefox there is a feature, related to enumeration of corners that takes place by means of syntax different from a standard. But the use of brief syntax, which is identical in browsers, can become a decision.

div {

  -moz-border-radius: 15px 30px 45px 60px;

  -webkit-border-radius: 15px 30px 45px 60px;

  border-radius: 15px 30px 45px 60px;

}

Image may be NSFW.
Clik here to view.
Border-radius2.png in Dive into CSS3

Interesting possibility is a transmission of pairs of radiuses’ values for every corner. It is so possible to obtain more difficult forms, than a simple rounding:

div {

  border-top-left-radius: 5px 30px;

  border-top-right-radius: 30px 60px;

  border-bottom-left-radius: 80px 40px;

  border-bottom-right-radius: 40px 100px;

}

Image may be NSFW.
Clik here to view.
Border-radius3 in Dive into CSS3

If they all are the same:

div {

  border-radius: 8px / 13px;

}

Image may be NSFW.
Clik here to view.
Border-radius4 in Dive into CSS3

Tools:

css3please.com generates a lot of useful things.
border-radius.com a specialized generator for rounded corners.
css3generator.com generates a lot of things. For corners gives an opportunity of choice between an identical radius and different.
layerstyles.org/builder.html imitates Photoshop’s interface. It’s easy to generate not only corners.

Box-shadow

Drop shadows for blocks.

div {

  -webkit-box-shadow: 0px 0px 4px #000000; /* Safari 3-4, iOS 4.0.2-4.2, Android 2.3+ */

  -moz-box-shadow: 0px 0px 4px #000000; /* Firefox 3.5-3.6 */

  box-shadow: 0px 0px 4px #000000; /* Opera 10.5+, IE 9+, Firefox 4+, Chrome 6+, iOS 5+ */

}

Image may be NSFW.
Clik here to view.
Box-shadow in Dive into CSS3

Shadows can be directed inside the element.

div {

  -webkit-box-shadow: inset 6px 6px 12px #000000;

  -moz-box-shadow: inset 6px 6px 12px #000000;

  box-shadow: inset 6px 6px 12px #000000;

}

Image may be NSFW.
Clik here to view.
Box-shadow2 in Dive into CSS3

It is possible to apply few shadows to one element at once.

div {

  -webkit-box-shadow: inset 6px 6px 12px #000000, 4px 6px 3px #dddddd;

  -moz-box-shadow: inset 6px 6px 12px #000000, 4px 6px 3px #dddddd;

  box-shadow: inset 6px 6px 12px #000000, 4px 6px 3px #dddddd;

}

Image may be NSFW.
Clik here to view.
Box-shadow3 in Dive into CSS3

Another least used value is spread – radius, and to change it you simply need to add it right after the value of blur shadow. A positive value increases the shadow, a negative value will do the sizes of shadow less than the block’s size from which the shadow falls.

div {

  -webkit-box-shadow: 0 5px 5px -6px #000000;

  -moz-box-shadow: 0 5px 5px -6px #000000;

  box-shadow: inset 0 5px 5px -6px #000000;

}

Image may be NSFW.
Clik here to view.
Box-shadow4 in Dive into CSS3

It is possible to apply inner shadows, plural shadows and spread – radius in all browsers that support simple CSS3 shadows.
Almost all manufacturers have already given up the vendor prefixes in the last versions of browsers.

css3maker.com multifunctional generator. It is possible to do internal shadows, change colors.
css3.me all settings can be used when necessary
css3generator.com it is possible to adjust the color of shade in RGBA at once

RGBA

It is the ability to use alpha-transparency for colors. Unlike property of opacity it can be applied to the font, borders and to the block’s background without changing the transparency of the block’s content.

div {

  background: rgb(200, 54, 54);

  background: rgba(200, 54, 54, 0.5); /* Firefox 3+, Chrome, Safari 3+, Opera 10.10+, IE 9+, iOS 3.2+, Android 2.1+ */

}

For cross browser compatibility it is needed to specify a color without alpha-transparency, or way to transparent PHG.

The existent HSLA format can be used in the same versions of browsers that support RGBA.

Tools:

hex2rgba.devoth.com converts HEX in RGBA

Pseudoelements

Generating of content in CSS through :before/:after. Used both for adding of symbols and complete words to the document and for creation of new blocks, which can be used for registration.

div:before,

div:after { /* Firefox 3.5+, Chrome, Safari 1.3+, Opera 6+, IE 8+, iOS 3.2+, Android 2.1+ */

  content:"";

  display:block;

}

Support is already very good, even on mobile platforms it works without problems.

It’s interesting that CSS3 requires application of syntax with two colons (::before / ::after) but IE8 requires the use of pseudoelements with one colon.

Conclusion

I succeeded in finding out the state of things with support of CSS3 by different browsers. Found a great number of instruments. Did not find a generator for rounding with the pairs of values for a corner, generator, that can create a few shadows of a block at once, and also generator, that would unite all necessary functions, but would be simple and have a good interface.

Certainly, there is also a great number of properties, for example border – image or transition, but they are not used so widely, or require a deeper study, therefore did not enter this review. But you can make an effort in finding instruments or information practically for any case.

Information sources about support of properties by different browsers:

caniuse.com
css3files.com
css3please.com


Viewing all articles
Browse latest Browse all 91

Trending Articles