Meer over CSS3, de mogelijkheden, functies en uitbreidingen.

Posted by Manieu on jan 19, 2011 in CSS Tips | 5 comments

Momenteel wordt CSS3 helaas nog niet globaal ondersteund door alle browsers. Firefox, opera en safari kunnen er uiteraard beter mee omgaan dan internet explorer. In Google Chrome ziet het er helaas niet altijd even goed uit. Van internet explorer 9 zouden alle gestandaardiseerde toevoegingen ook moeten werken in deze browser. Momenteel wordt er voor verschillende nieuwe functies in CSS een prefix gebruikt voor verschillende browser. Zo gebruikt firefox de prefix -moz- en is er ook de prefix -webkit- benodigd voor sommige functies.

CSS3 biedt een aantal mooie en handige nieuwe functies, één daarvan heeft u al kunnen bekijken in het artikel “Elementen Roteren met CSS3“. CSS3 zal ervoor zorgen dat er in sommige gevallen geen afbeeldingen meer nodig zijn, zoals bij tekst met een schaduw. De vraag is natuurlijk wel, hoe lang het gaat duren voordat dit er net zo strak uit kan zien als tekst gestyled met Photoshop.

Hier een overzicht van de nieuwe mogelijkheden in CSS3 die op den duur op deze weblog besproken zullen worden.

Borders / Randen / Kaders in CSS3:
- Afronden van hoeken met border-radius.
- Afbeeldingen gebruiken voor borders
- Elke kant van de border een eigen stijl meegeven.
- Box-shadow, een element een slagschaduw geven.

Achtergronden / Backgrounds in CSS3
- Meer mogelijkheden met positionering van een achtergrond.
- Background size , de grootte van een achtergrond instellen.
- Meerdere achtergronden in 1 element.

Kleuren
- RGBA, HSL en HSLA kleuren.
- opacity, de dekking van een element instellen. Dit wordt al veel gebruikt, maar nog niet goed ondersteund.

Tekst effecten
- Tekst schaduwen ( text-shadow ): Schaduwen toevoegen aan teksten.
- Tekst overflow ( text-overflow ): Meerdere mogelijkheden om tekst binnen een element weer te geven (of juist daarbuiten)
- Tekst word-wrap: De mogelijkheid om lange woorden af te breken zodat dit beter in een website past.

Overige effecten
- box-sizing: de manier instellen waarop browsers de formaten van elementen berekenen en weergeven.
- resize: de mogelijkheid om elementen te resizen ( dit werkt nu min of meer met de toevoeging, display: table; , maar eigenlijk is dat niet de juiste manier ).
- outline: het geven van een 2de border.

Veel succes met CSS3!

Tags: -moz-, -webkit-, CSS2.1 en CSS3, css3, CSS3 functies, CSS3 mogelijkheden, CSS3 toevoegingen, functies in CSS3