13.05.2012 | by Dracovina | | Comments (14)
CSS3 innovations
On some blogs I've discovered that CSS3 is already in use. Yes, even I used CSS3 on Traumfinsternis, but only partially, because some functions are not yet fully supported by the most popular browsers.
First, a few general facts:
What is CSS3?
The Cascading Style Sheets in version 3 are in development as the successor of CSS2 since 2000. CSS3 standards is in contrast to CSS 1.0, 2.0 and 2.1 constructed modularly, that means, partitions will be developed independently of others with their own version of steps.
When is CSS3 officially released?
It is generally known that even the "old" CSS standards partly still not interpreted correctly by some browsers or are not fully supported. After the first appointments were scheduled and canceled again, there is currently no exact date, when CSS3 should be the official W3C recommendation. The World Wide Web Consortium (W3C) is by the way the committee for the standardization of the techniques in World Wide Web. This includes, inter alia, HTML, XHTML, XML, CSS and SVG.
Here is the overview of some new features in CSS3:
Click on an image to scroll to the content.
CSS3 Fonts
I can still remember a time where website owners have inserted images as a heading, because their wanted font was not a standard font, and then there was no other way to display it properly on any PC. Finally the visitors had to install the font, too.
With CSS3 you can now easily embed the font, it is displayed regardless of the font installation on the PC and you need no pictures any more, what will save you a lot of work. Only you should be careful regarding the browser support. Old browsers can not interpret the command. The correct font formats for the browser must be involved, because they sometimes require different formats to view this font. Are formats missing, then the font is not displayed in some browsers.
Browser support
All examples in this article are only visible with a supportive browsers.
Format support
The following font formats are supported by the browsers:
- Internet Explorer:
- Embedded OpenType (.eot)
- WOFF (.woff) (since IE9)
- Mozilla Firefox:
- TrueType/OpenType TT (.ttf)
- OpenType PS (.otf)
- WOFF (.woff) (since Firefox 3.6)
- Opera:
- TrueType/OpenType TT (.ttf)
- OpenType PS (.otf)
- SVG (.svg)
- Google Chrome:
- TrueType/OpenType TT (.ttf)
- OpenType PS (.otf)
- WOFF (.woff) (since version 6)
- Safari/Webkit:
- TrueType/OpenType TT (.ttf)
- OpenType PS (.otf)
- SafariMobile (iPhone/iPad):
- only SVG Fonts (.svg) until iOS 4.1
- TrueType/OpenType (.ttf) since iOS 4.2
If you are downloading a font, then there are certainly not all formats available. On fontsquirrel.com/fontface/generator there is a useful font generator in which you can upload your font, eg "Miama.ttf", which converts subsequently this font in other formats, e.g. .eot, .woff and .svg. If you upload for example an .otf font, then it also generate the format .ttf.
Select the function "EXPERT... (You decide how best to optimize your fonts.)" at the generator, so you can activate all formats in the check box. Then check the "agreement" and then download your font package. Then just unzip, upload and embed it into CSS.
The syntax
@font-face { font-family: 'NameOfTheFont'; src: url('FontFilePath.format'); } @font-face { font-family: 'NameOfTheFont'; src: url('FontBoldFilePath.format'); font-weight: bold; }
You have to insert every typeface separately and specify to what it is (e.g. bold). At font-family the name of the font must be specified and at src the source. In the url you can specify the relative path of your font file.
Example with the Font Squirrel Generator
@font-face { font-family: 'MiamaRegular'; src: url('fonts/miama-webfont.eot'); src: url('fonts/miama-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/miama-webfont.woff') format('woff'), url('fonts/miama-webfont.ttf') format('truetype'), url('fonts/miama-webfont.svgz#MiamaRegular') format('svg'), url('fonts/miama-webfont.svg#MiamaRegular') format('svg'); font-weight: normal; font-style: normal; } .text { font-family: Miama; font-size: 32px; }
This text is displayed in the font Miama.
CSS3 Rounded Corners
"Round Corners" as they are called in normal usage. On my blog you can see almost exclusively rounded corners with CSS3.
For a time, you had in addition to the normal "border-radius" the command with the -moz prefix for the Firefox browser and the -webkit prefix for the browser Chrome and Safari. Otherwise, they did not interpret the roundings. But now they support the features without any problems!
.box { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
Browser support
All examples in this article are only visible with a supportive browsers.
The syntax
border-*-*-radius: NumberOneWithUnit NumberTwoWithUnit;
Where the asterisks are, there is specified which "corner" should be rounded, e.g. top right or bottom left. First, the vertical position is specified, up or down (top or bottom) and next follows the statement in the horizontal, left or right. If you write only "border-radius", then you define all four corners at the same time. The "NumberOneWithUnit" indicates the degree of curvature in the x-axis and the "NumberOneWithUnit" the degree of curvature in the y-axis. Do you write only one number with unit, then the corner is rounded off the same in both axes.
Example 1
.rounded-corners-one { background: #EBEAE8; border-top-left-radius: 20px 50px; }
x-axis: 20px
y-axis: 50px

Example 2
.rounded-corners-two { background: #EBEAE8; border-top-left-radius: 50px; }
x-axis: 50px
y-axis: 50px

Example 3
.rounded-corners-three { background: #EBEAE8; border-top-left-radius: 90px 40px; }
x-axis: 90px
y-axis: 40px

Example 4
.rounded-corners-four { background: #EBEAE8; border-top-left-radius: 10px; border-top-right-radius: 50px; border-bottom-right-radius: 10px; border-bottom-left-radius: 50px; }
Diese Box hat abgerundete Ecken.
Example 4: shortened form
By typing the amount of curve consecutively, you can respond in a row all four corners simultaneously.
This order must be followed:
top left, top right, bottom right, bottom left
.rounded-corners-four-short { background: #EBEAE8; border-radius: 10px 50px 10px 50px; }
Diese Box hat abgerundete Ecken.
Alternative shorthand notation
If you want to specify all the corners and the amount of curve in the x-and y-axis in one line, then the following notation is suggested. All numbers before the slash (/) are the information in the x-axis in the known order (see above). The numbers after the slash applies to the y-axis in the known order (see above).
.rounded-corners-four-short-alt { background: #EBEAE8; border-radius: 50px 20px 10px 100px / 10px 80px 60px 40px; }
Diese Box hat abgerundete Ecken.
CSS3 Box Shadow
Also shadow of box elements I added to my blog via CSS.
Browser support
All examples in this article are only visible with a supportive browsers.
The syntax
box-shadow: xPosition yPosition SoftnessR SpreadR Color;
The x- and yPosition indicate where the shadow in the x-and y-axis should be, here negative values are also allowed. The optional SoftnessR(adius) specifies how blurred, how soft the shadow should be. The optional SpreadR(adius) determines the spread of the shadow, the default value is 0, so the shadow is the same size as the SoftnessRadius.
Example 1
.shadow-one { box-shadow: -5px -5px #666; }
Example 2
.shadow-two { box-shadow: 3px 6px 10px #999; }
Example 3
.shadow-three { box-shadow: 3px 6px 10px 3px #999; }
Example 4
.shadow-four { box-shadow: 0px 3px 1px #999; }
Inner shadow
.inner-shadow { box-shadow: inset 3px 6px 10px #999; }
Inner shadow, alternative
.inner-shadow-alt { box-shadow: inset 0px 0px 8px #999; }
CSS3 Text Shadow
With a text-shadow can be achieved many different effects.
Browser support
All examples in this article are only visible with a supportive browsers.
The syntax
text-shadow: xPosition yPosition SoftnessR Color;
The x- and yPosition specify where the text-shadow in the x-and y-axis should be, here negative values are also allowed. The SoftnessR(adius) specifies how blurred, how soft the shadow should be.
Example 1: Soft shadow
.textshadow-one { text-shadow: 5px 5px 5px #aaa; }
This is text with shadow.
Example 1: Hard shadow
.textshadow-one { text-shadow: 1px 2px 0 #ccc; }
This is text with shadow.
Example 2: Several shadows
.textshadow-two { text-shadow: 5px 5px 4px #ccc, -5px -10px 8px #ff0, 15px 7px 3px #f0f; }
This is text with shadow.
Example 3: contour
.textshadow-three { text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000; }
This is text with shadow.
Example 4: glow
.textshadow-four { text-shadow: 0 0 4px #fff, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20; }
This is text with shadow.
CSS3 Background Size
By CSS in version 3 you can now specify the background image size. Until then, you could only affect the images in size that have been placed by img tag. The background images you could only insert or omit.
Browser support
All examples in this article are only visible with a supportive browsers.
The syntax
background-size: xWidthWithUnit yHeightWithUnit;
The syntax is very simple. In the xWidthWithUnit you enter the width of the background image with the corresponding unit. In yHeightWithUnit the height.
For the Firefox 3.6 is still needed the prefix -moz- to make it work.
Example 1
.mybackground { width: 250px; height: 80px; background: url(../images/kasten-bg.jpg); }
Original-Bild.
.mybackground-size { background: url(../images/kasten-bg.jpg); background-size: 90% 10%; }
90% larger in width (90% filled window width) and 10% in height.
Example 2
.mybackground-size2 { width: 200px; height: 100px; background: url(../images/kasten-bg.jpg); background-size: 200px 100px; }
The image is now 200px width and 100px height.
CSS3 Background Origin
Also, the background start position can be set. Previously it was only possible for example to give a div a background image, which then fills the entire Div. Now may also be determined whether the background image should note an edge (border) or padding (padding).
Browser support
All examples in this article are only visible with a supportive browsers.
The syntax
background-origin: content-box OR padding-box OR border-box;
For example, after a div was styled, background image, border and padding has been set, then comes Background-Origin. There are the settings content-box, padding-box or border-box. Depending on where the background image should "start", so where basically the zero point is, you use one of these three settings. In the following graphs should be explained what is meant with these settings:
Example 1
.background-start-one { width: 200px; height: 30px; border: 10px solid #999; padding: 15px; background: url(../images/trademark.png); background-repeat: no-repeat; background-origin: padding-box; }
padding-box
Example 2
.background-start-two { width: 200px; height: 30px; border: 10px solid #999; padding: 15px; background: url(../images/trademark.png); background-repeat: no-repeat; background-origin: content-box; }
content-box
Example 3
.background-start-three { width: 200px; height: 30px; border: 10px solid #999; padding: 15px; background: url(../images/trademark.png); background-repeat: no-repeat; background-origin: border-box; }
border-box
CSS3 Multiple Columns
Creating multi-column content is now with CSS3 also quite simple. If a text contains too many characters in a line, then it can quickly become tiring to read it. Before you had to split the text with cumbersome manually set divs and let the text containers flow side by side with the command "float". Now you can simply put the entire text around one div that says that this container has to contain, for example, two columns. Then the text is automatically split in the right place and it continue again right next to it.
Browser support
All examples in this article are only visible with a supportive browsers.
The syntax
column-count: 3; -moz-column-count: 3; /* with prefix for Firefox */ -webkit-column-count: 3; /* with prefix for Chrome and Safari */
The command "column-count" specifies how many columns to should give. Thus it is also displayed in Firefox, Chrome and Safari, the corresponding prefix must be prepended here:
-moz-column-count only for only Mozilla Firefox and
-webkit-column-count for only Google Chrome and Sarafi. The remaining browsers that interpret the command, will be addressed with column-count.
The column gap
column-gap: 40px; -moz-column-gap: 40px; /* Firefox */ -webkit-column-gap: 40px; /* Chrome and Safari */
The spacing between the columns can be defined with "column-gap". The spacing is normally measured in pixels. Again here are the same rules for Firefox, Chrome and Safari as described above.
The column gap-styling
column-rule: 1px dotted #999; -moz-column-rule: 1px dotted #999; /* Firefox */ -webkit-column-rule: 1px dotted #999; /* Chrome and Safari */
"column-rule" is a shorthand notation for column-rule-width, column-rule-style and column-rule-color. Thus, the dividing line between columns is described. First, the size in pixels, then the style (e.g. solid, dotted, dashed, outset etc.), and finally the color. Again for Firefox, Chrome and Safari the same as described above.
Example 1
.cols_example-one { column-count: 3; -moz-column-count: 3; -webkit-column-count: 3; column-gap: 40px; -moz-column-gap: 40px; -webkit-column-gap: 40px; column-rule: 1px dotted #999; -moz-column-rule: 1px dotted #999; -webkit-column-rule: 1px dotted #999; }
This text is displayed in three columns. Filler: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Example 2
.cols_example-two { column-count: 4; -moz-column-count: 4; -webkit-column-count: 4; column-gap: 20px; -moz-column-gap: 20px; -webkit-column-gap: 20px; column-rule: 2px outset #eee; -moz-column-rule: 2px outset #eee; -webkit-column-rule: 2px outset #eee; }
This text is displayed in four columns. Filler: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
CSS3 Transitions
A picture should change slowly and softly in a different picture on mouseover. The background color of a link is slow and soft fade in a different color at Hover. A box should increase slowly dynamically when you go over it with the mouse. And much more. With CSS3 Transitions, it is now possible to add an effect without Flash animations or javascript, if you want to switch from one style to another. This means: for example it can slow gradually be changed from one effect to another during hover — without sharp transitions.
Browser support
All examples in this article are only visible with a supportive browsers.
The syntax
transition-property: CSSProperty; transition-duration: TimeInSeconds; transition-timing-function: VelocityCurve; transition-delay: StartInSeconds;
transition-property (CSSProperty) must be specified so that you can define which property to change gradually, e.g. "width" or "all" (for everything).
Subsequently, the time indication (transition-duration), the "TimeInSeconds", follows: in how many seconds will it all happen? This setting is made in seconds, so for example, "3s".
With transition-timing-function can be specified, in which velocity curve all things be done, for example, should the effect starts slow and finishs then quickly (more on this below).
And transition-delay specifies how many seconds to start the effect.
Shorthand
transition: Property Time VelocityCurve Start;
Values used:
transition: all 0.5s ease-in-out;
With the short notation it saves you a lot of lines. I think the example is self-explanatory.
transition-timing-function — possible values
- linear — constant speed
- ease — slow start, then faster and slower again at the end
- ease-in — slow start
- ease-out — slow end
- ease-in-out — slow start and slow end
- cubic-bezier(n,n,n,n) — define speed yourself, numbers from 0 to 1, Example: cubic-bezier(0.25,0.1,0.25,1)
Prefix for browser
To make this function works well in most browsers, you have to work with each prefix of the browser.
transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out;
Here the appropriate prefix must be preceded by:
-moz-transition for Mozilla Firefox only,
-webkit-transition for Google Chrome and Sarafi and
-o-transition only for Opera. The remaining browsers that interpret the command, will be addressed with transition.
Handling
transitions must be assigned to a regular class. In addition, for example, must a hover effect be defined where all the properties are indicated that you want to change at hover.
Example 1
.trans-one { background: #EBEAE8; color: #999; transition: all 3s ease-in-out; -moz-transition: all 3s ease-in-out; -webkit-transition: all 3s ease-in-out; -o-transition: all 3s ease-in-out; } .trans-one:hover { background: #333; color: #FFF; }
When you hover the background and font color will change smoothly.
Example 2
.trans-two { width: 250px; height: 80px; transition: all 0.5s linear; -moz-transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; } .trans-two:hover { width: 400px; height: 150px; }
When you hover the box will enlarge smoothly.
Example 3 - with CSS3 2D Transforms
.trans-three { width: 250px; height: 80px; transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -webkit-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; } .trans-three:hover { transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); }
When you hover the box will rotate smoothly.
CSS3 2D Transforms
With CSS3 you can now transform objects. Either you can position, scale, rotate, or twist them differently.
Browser support
All examples in this article are only visible with a supportive browsers.
The syntax
transform: Methode; -ms-transform: Methode; /* Internet Explorer 9 */ -moz-transform: Methode; /* Firefox */ -webkit-transform: Methode; /* Safari and Chrome */ -o-transform: Methode; /* Opera */
The syntax is actually quite simple. The various methods are included below. It should be noted that the corresponding prefix must be prepended to represent it in the major browsers:
-ms-transform for Internet Explorer 9 only
-moz-transform for to Mozilla Firefox only,
-webkit-transform for Google Chrome and Sarafi and
-o-transform for Opera only. The remaining browsers that interpret the command, will be addressed with transform.
The methods
translate()
transform: translate(50px,20px); -ms-transform: translate(50px,20px); -moz-transform: translate(50px,20px); -webkit-transform: translate(50px,20px); -o-transform: translate(50px,20px);
translate() positions, for example, the div to the appropriate place. The data apply to left (x-axis) and top (y-axis). In the example, the object is positioned 50px from the left and 20px from the top.
rotate()
transform: rotate(20deg); -ms-transform: rotate(20deg); -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); -o-transform: rotate(20deg);
rotate() can rotate the object, it is then displayed rotated. The number in the brackets is the number of degrees.
scale()
transform: scale(2,5); -ms-transform: scale(2,5); -moz-transform: scale(2,5); -webkit-transform: scale(2,5); -o-transform: scale(2,5);
scale() scales the object, so it enlarges. The first number in the brackets represents the width, the second for the height. The number represents the factor by which it is increased, the 2 is then for the 2-fold enlargement of the original height.
skew()
transform: skew(20deg,40deg); -ms-transform: skew(20deg,40deg); -moz-transform: skew(20deg,40deg); -webkit-transform: skew(20deg,40deg); -o-transform: skew(20deg,40deg);
skew() twists the object, it is then like watching from a different angle of view. The data in the brackets are also the degree numbers here, wherein the first indication of the rotation is in the x-axis and the other for rotation in the y-axis.
matrix()
transform:matrix(0.3,0.8,-0.5,0.9,0,0); -ms-transform:matrix(0.3,0.8,-0.5,0.9,0,0); -moz-transform:matrix(0.3,0.8,-0.5,0.9,0,0); -webkit-transform:matrix(0.3,0.8,-0.5,0.9,0,0); -o-transform:matrix(0.3,0.8,-0.5,0.9,0,0);
matrix() combines all 2D transformations in one. There are 6 parameters that include mathematical functions that allow you to rotate elements [rotate()] to scale [scale()] to position [translate()] and twist [skew()].
Example 1
.object-one { width: 250px; height: 80px; background: #EBEAE8; transform: translate(100px,20px); -ms-transform: translate(100px,20px); -moz-transform: translate(100px,20px); -webkit-transform: translate(100px,20px); -o-transform: translate(100px,20px); }
The box has been moved 100px to the right and 20px down.
Example 2
.object-two { width: 250px; height: 80px; background: #EBEAE8; transform: rotate(10deg); -ms-transform: rotate(10deg); -moz-transform: rotate(10deg); -webkit-transform: rotate(10deg); -o-transform: rotate(10deg); }
The box has been rotated 10°.
Example 3
.object-three { width: 250px; height: 80px; background: #EBEAE8; transform: scale(1.5,3); -ms-transform: scale(1.5,3); -moz-transform: scale(1.5,3); -webkit-transform: scale(1.5,3); -o-transform: scale(1.5,3); }
The box has been scaled in width by 1 1/2 times and in height by 3 times.
Example 4
.object-four { width: 250px; height: 80px; background: #EBEAE8; transform: skew(20deg,10deg); -ms-transform: skew(20deg,10deg); -moz-transform: skew(20deg,10deg); -webkit-transform: skew(20deg,10deg); -o-transform: skew(20deg,10deg); }
The box has been rotated in the x-axis by 20° and in the y-axis by 10°.
Example 5
.object-five { width: 250px; height: 80px; background: #EBEAE8; transform:matrix(1.4,-0.2,1.6,1,0,0); -ms-transform:matrix(1.4,-0.2,1.6,1,0,0); -moz-transform:matrix(1.4,-0.2,1.6,1,0,0); -webkit-transform:matrix(1.4,-0.2,1.6,1,0,0); -o-transform:matrix(1.4,-0.2,1.6,1,0,0); }
The box has been changed with rotate(), scale() and translate().
Conclusion
I hope I could give you a small and understandable overview of the most important new features in CSS3!
If mistakes should have crept in, you are welcome to inform me here via comment!
Next article: The technology for digital photography?
My dear readers,
because I've talked with some about semi-professional digital photography, and there were partially uncertainties in the technique, I've been thinking of writing a small technical article about photography.
The following keywords I will discuss: shutter speed, aperture, ISO, white balance, focal length of the lenses, camera sensor, crop factor (addition: EF and EF-S lenses by Canon), depth of field, image noise, etc.
My question to you: Is there a general interest in this article, or do you think that there are enough of these tips and instructions? In the first case I would then write this post after my final exam, so this could still take roundabout a month. Tell me your opinion!
Sources
Related to "CSS3 innovations":
Dracovina
19. Dezember 2012, 09:05 Uhr
Hallo Pat,
auch, wenn ich hier nicht mehr so oft aktiv bin, lese ich trotzdem alle Kommentare :)
Vielen lieben Dank für dein Lob. Es freut mich, dass die meine kleinen Erklärungen weiter helfen konnten! :)