13.05.2012 | by | Webdesign | 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

from v. 8
from v. 3.6
from v. 4
from v. 3
from v. 10

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

ab V. 9
ab V. 4
ab V. 5
ab V. 5
ab V. 10.5

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

Arrows

Example 2

    .rounded-corners-two {
      background: #EBEAE8;
      border-top-left-radius: 50px;
    }
   

x-axis: 50px
y-axis: 50px

Arrows

Example 3

    .rounded-corners-three {
      background: #EBEAE8;
      border-top-left-radius: 90px 40px;
    }
   

x-axis: 90px
y-axis: 40px

Arrows

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

ab V. 9
ab V. 4
ab V. 10
ab V. 10.5

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

ab V. 3
ab V. 4
ab V. 4
ab V. 10

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

ab V. 9
ab V. 4
ab V. 4
ab V. 5
ab V. 10.5

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

ab V. 9
ab V. 4
ab V. 4
ab V. 5
ab V. 10.5

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:

Background-Origin

Background-Origin

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

-moz-
-webkit-
-webkit-

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

-moz-
-webkit-
-webkit-
-o-

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

-ms-
-moz-
-webkit-
-webkit-
-o-

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

  1. w3schools.com
  2. the-art-of-web.com
  3. css3.info
  4. ich-lerne-css.de
  5. webfonts.info
  6. fontsquirrel.com

Related to "CSS3 innovations":

Related entries

Simply go to Responsiv…

Because this issue has occupied me for the last time, I would now like to shar … weiter

Education in digital m…

After a few weeks I can give you a small sign of life at last. As some may hav … weiter

The thing about the WW…

Since I've determined recently that the 'www' of a domain is important … weiter

Tags

Webdesign

Flügel

13. Mai 2012, 21:08 Uhr

Sehr schöner Artikel (auch wenn ich mich irgendwie gewundert habe, dass DU über solche Themen schreibst). Schön im Sinne von Informativ und vor allem übersichtlich. Da war bestimmt sehr viel Arbeit dahinter.

Ich bin ein großer Fan von CSS3. Vor allem "Transistions", da sie großes Potential haben und hoffentlich Javascript (welches ich nicht so mag) verdrängen *g*
Schade, dass noch nicht alle Browser die neuen Techniken unterstützen.

namimosa

14. Mai 2012, 11:15 Uhr

mit diesem ganzen codierungs-zeug hab ich mich schon ewig nicht mehr auseinander gesetzt. irgendwie habe ich da ganz schön den überblick verloren, befürchte ich. ich sollte mich doch mal wieder damit auseinander setzten.

na ja, zumindest haben wir uns über das geschenk köstlich amüsiert. :) aber mal ehrlich: von einem telefonanbieter gäbe es doch eine vielzahl an besseren treuegeschenken. ein paar freiminuten oder so wären doch 10 mal sinnvoller gewesen. darüber hätten wir uns ehrlich gesagt schon mehr gefreut.
vor allem weil die form aus total labbrigen plastik ist und ich bezweifle, dass man damit wirklich gut irgendwas ausstechen kann. auf grund mangelnden kochkenntnissen und lust dazu, werde ich das aber eher nicht in der praxis testen. ;)
na ja, und um ehrlich zu sein... also derjenige den ich recht gern hab, der hat sich auch kaputt gelacht über diese idee. ich glaube der fände herzförmiges essen jetzt auch nur so semi-romantisch und eher zum lachen... ich glaube das lasse ich lieber auch in zukunft bleiben! ^^

dankeschön für dein großes lob zu meinen fotos! es freut mich natürlich total zu lesen, dass die fotos profesionell aussehn. ein schönes kompliment.
ja, meine freundin ist wirklich sehr hübsch. hat aber kein interesse am model (außer für mich).

Dani

14. Mai 2012, 12:36 Uhr

Halli hallo!

Diesen Beitrag finde ich richtig toll - CSS3 scheint richtig interessant zu sein! Ich habe auch schon einen "Tipp" von dir ausprobiert - vielleicht stelle ich es einmal online oder so! :)

Find ich wirklich gelungen! Hoffentlich kommen noch mehr solcher Tipps von dir? Ich würde mich darüber wirklich sehr freuen! :)

Wie gehts dir eigentlich so? Hattest du ein schönes Wochenende?

Liebe Grüße
Dani

Andy

15. Mai 2012, 12:55 Uhr

Heyho :)
Ich schäme mich.. Ich nehme mir jetzt schon seid dem 30.04. vor dir endlich wieder zu schreiben, aber irgendwie bin ich nicht so ganz in Fahrt gekommen... Aber heute ist es soweit! Zu war ein freier Tag doch alles gut ist, besonders wenn die Server von nem Spiel "down" sind... :D

Jedes Mal frage ich mich wieder, wie man so super Einträge schreiben kann. Gefällt mir echt wahnsinnig gut, besonders wie der Eintrag augebaut ist. Es ist informativ, übersichtlich und klar strukturiert und das ist einfach schön zu lesen dann!

Andy

15. Mai 2012, 12:57 Uhr

Teil 2 (irgendwie habe ich einen Teil rausgelöscht ausversehen)

Wirklich ein sehr schöner Eintrag! Vielleicht kommen ja noch mehr solche Einträge zum Thema CSS oder der Gleichen - egal, hauptsache man liest etwas hier! :D (Nein, ich möchte jetzt nicht eine Schleimspur hier ziehen)

Ich persönlich würde mich über den Artikel "Die Technik zur digitalen Fotografie?" sehr freuen, weil es vor allem sehr spannend ist und man lernt vor allem auch nie aus. Da ich sowieso deine Artikel sehr mag, darfst du dir auch so viel Zeit lassen, wie du möchtest und das vor allem auch, wenn es um die Abschlussprüfung geht! Da ist es völlig Verständlich, dass es auch mal ein wenig dauert! Viel Glück für die Prüfung!

Ich wünsche dir jetzt noch einen schönen Dienstag!

Viele liebe Grüße!

Fyn

15. Mai 2012, 23:15 Uhr

Tolle Zusammenfassung und schöne Darstellung!

neri

20. Mai 2012, 23:23 Uhr

hey isabel, lang nix mehr gehört wie geht es dir denn?

bitte ändere doch einmal meine url, wäre ganz lieb ;)

http://www.ladybird.bplaced.net

ps: ich meld mich künftig öfter, war kaum on in letzter zeit

neri

Melina

22. Mai 2012, 05:07 Uhr

Danke :) Die Hauptnavi beim Stuff ist nur für die Stuffunterseiten aufrufbar. Einfach nur eine kleine Spielerei, nur für den Stuff. Ja, mit den Buttons zum Scrollen hab ich mir schon gedacht gehabt, dass viele das erst mal nicht sehen oder verstehen werden. Aber wie du schon sagtest, ist nicht alltäglich und ich wollte einfach mal wieder was "neues" ^^
Mit dem Thema von deinem Eintrag hatte ich mich vor kurzem auch schon befasst. Das hast du gut erklärt und sehr schön dargestellt :)

nickaey

25. Mai 2012, 17:56 Uhr

schöner artikel. :) ich selbst nutz auch schon seit längerem verschiedene css3 effekte und hachja, ich liebe es. schade dass der internet explorer da nicht mithalten kann, selbst in version 9 noch nicht.

ich weiß garnicht, wie ichs sagen soll, ohne dass es dumm rüberkommt, aber es gab probleme mit meiner domain weshalb ich nun wieder meinen taess server nutzen MUSS. ._. könntest du mich vielleicht doch wieder umlinken? wär super. die domain wurd gelöscht.

liebe grüße ♥

Jenny

03. Juni 2012, 19:15 Uhr

Wow, du hast dir echt viel Zeit dafür genommen. Der Aufbau des Artikels ist dir super gelungen. Finde ich toll, dass sich die einzelnen Kurztutorials in einem kleinen Fenster öffnen (ich habe gerade den Namen dafür vergessen). Total übersichtlich und wunderbar beschrieben!

Zu deiner Frage: Schreib, schreib, schreib! Wirklich, du machst das echt toll. Man merkt, dass du Ahnung hast: Somit liest man deine Tipps sehr gerne. Ich würde mich wirklich total darüber freuen, wenn du etwas über Fotografie schreiben würdest. Da würden sich auch für mich einige Fragen in Luft auflösen.

Viel Glück für deine Abschlussprüfung. Wirst du zwar nicht brauchen, aber man wünscht es ja doch schon mal ganz gerne.

Ich habe heute übrigens das erste Mal deine "private" Homepage mit deinen Kenntnissen etc. gesehen und bin hin und weg. So eine Person wie dich wünscht man sich als große Schwester und jeder Mann als Frau. Ab heute bist du mein neues Vorbild, was die Kenntnisse, Ansichten etc. angeht. Motiviert mich total! Mach weiter so!

PS: Bin ich froh, dass es auch Frauen gibt, die in dieser Branche arbeiten und auch wirklich Ahnung davon haben.

PSS: Wie bist du zu dieser Ausbildung gekommen? Welche Schulen hast du besucht? Was hast du in Zukunft vor zu machen? (Irgendwie klingt das hier wie ein Bewerbungsgespräch...)

Ganz liebe Grüße,
Jenny

Dani

06. Juni 2012, 16:53 Uhr

Oh ja, ich kann dich ja so gut verstehen ... Ich bin in der Matura (Abitur) ... Die schriftliche hab ich schon hinter mir und am Montag hab ich die mündliche ... Ich hab schon sehr sehr sehr viel Angst, ich hoffe, dass ich das schaff ...

Danke für die Bewertuntg ... Tenzi wird sich sicher darüber sehr freuen :D ich mag den Blog auch sehr gerne und schaue da nun auch öfters rein ... :)
Freue mich schon auf neue Beiträge von dir!

Liebe Grüße und viel Erfolg bei deinen Prüfungen!

Dani

nickaey

06. Juni 2012, 18:38 Uhr

ach ist doch halb so wild. :)

ja, es gibt was neues. war eine spontanaktion vor.. etwas über ner woche oderso. die gründe, die an behindyourmask hingen warn mir einfach zu negativ. brauchte einfach was neues. sorry, falls es umstände macht. :)

viel glück bei der prüfung übrigens! schaffst du schon. ♥
liebe grüße.

Pat

16. Dezember 2012, 19:36 Uhr

Hey,

wollt mich nur bedanken deine Seite hat mir extrem viel für CSS 3 gebracht. Muss eine Präsi über CSS 3 und seine Neuerungen machen und deine Erklärungen und Beispiele sind top. weiß nich ob du das liest aber auf jeden Fall danke.

LG Pat

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! :)

Allowed tags: <b><i><br>
No <3 or other symbols with < or >, but the allowed tags!



* required

About the author

Now it is time that I present you myself a little bit more as the author of Traumfinsternis. … read more

Music:

759
^ Top