CSS3

voorbeelden

Joost van Meeteren


Voorbeeld 1 met ronde hoeken - Border-radius

In het voorbeeld hieronder ziet u een alinea met een grijze achtergrond met daaromheen een zwarte omlijning die in de hoeken afgerond zijn.

In dit voorbeeld ziet u een alinea met een grijze achtergrond met ...


In <p style="background-color: #cccccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000000; padding: 10px;">voorbeeld</p> zijn de volgende opmaak-eigenschappen te vinden: -moz-border-radius en -webkit-border-radius die gebruikt zijn het voorbeeld hierboven.
Deze eigenschappen worden respectievelijk ondersteund door Firefox en Safari. Google Chrome herkent ze beide. Internet Explorer en Opera ondersteunen deze opmaak-eigenschap(pen) (nog) niet.


Voorbeeld 2 met schaduw en met ronde rand - Box-shadow

In voorbeeld 2a is sprake van schaduwwerking rechts onderaan het tekstblok, in voorbeeld 2b bevindt zich een afgeronde rand links en boven het tekstblok met ronde hoeken.

Voorbeeld 2a.

Dit zijn de opmaak-eigenschappen van voorbeeld 2.a: style="background-color: #cccccc; -moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888; padding: 5px 5px 5px 15px" .


Voorbeeld 2b.

Dit zijn de opmaak-eigenschappen van voorbeeld 2.b: style="background-color: #cccccc; -moz-box-shadow: -5px -5px 0px #000000; -webkit-box-shadow: -5px -5px 0px #000; -moz-border-radius: 5px; padding: 5px 5px 5px 15px; -webkit-border-radius: 5px; padding: 5px 5px 5px 15px" .


Voorbeeld 3 - Border-color

Voorbeeld 3.


Dit zijn de opmaak-eigenschappen van voorbeeld 3: style="border: 8px solid #000000; -moz-border-bottom-colors: #555555 #666666 #777777 #888888 #999999 #aaaaaa #bbbbbb #cccccc; -moz-border-top-colors: #555555 #666666 #777777 #888888 #999999 #aaaaaa #bbbbbb #cccccc; -moz-border-left-colors: #555555 #666666 #777777 #888888 #999999 #aaaaaa #bbbbbb #cccccc; -moz-border-right-colors: #555555 #666666 #777777 #888888 #999999 #aaaaaa #bbbbbb #cccccc; padding: 5px 5px 5px 15px" .

Opmerking. Deze optie werkt in Firefox, maar niet in Safari en Google Chrome.


Voorbeeld 4 - Text-shadow

Voorbeeld 4.


Dit zijn de opmaak-eigenschappen van voorbeeld 4: style="text-shadow: 2px 2px 2px #000000" .

Opmerking. Deze optie werkt in Firefox, Chrome, Opera en Safari.


Voorbeeld 5 - Background-size

Voorbeeld 5.


Dit zijn de opmaak-eigenschappen van voorbeeld 5: style="background: url(../afbeeldingen/zomerpanorama_van_het_montafon.jpg); -webkit-background-size: 176px 100px; -khtml-background-size: 176px 100px; -o-background-size: 176px 100px; background-repeat: no-repeat; background-color: #cccccc; padding: 100px 5px 5px 5px; border: 1px solid #000900; color: #000000" .

Opmerking. Deze optie werkt in Chrome, Opera en Safari, maar niet in Firefox en IE.


Voorbeeld 6 - Outline ...

Voorbeeld 6 met een zwarte binnenrand en een blauwe buitenrand.


Dit zijn de opmaak-eigenschappen van voorbeeld 6: style="margin-left: 15px; padding: 15px; width: 500px; border: 1px solid #000000; outline: 1px solid #0000ff; outline-offset: 5px" .

Opmerking. Deze optie werkt in Firefox, Chrome, Opera en Safari, maar niet in Internet Explorer.


Voorbeeld 7a - word-wrap ingeschakeld

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa


Voorbeeld 7b - word-wrap uitgeschakeld

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa


Dit zijn de opmaak-eigenschappen van voorbeeld 7a: style="margin-left: 15px; padding: 15px; width: 500px; word-wrap: break-word; border: 1px solid; font-size: 14px; border: 2px solid #897048" .

Dit zijn de opmaak-eigenschappen van voorbeeld 7b: style="margin-left: 15px; padding: 15px; width: 500px; word-wrap: normal; border: 1px solid; font-size: 14px; border: 2px solid #897048" .

Opmerking. Deze optie werkt in Firefox, Chrome, Internet Explorer en Safari, maar niet in Opera.


Voorbeeld 8 - Multiple columns

tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst, tekst.


Dit zijn de opmaak-eigenschappen van voorbeeld 8: style="width: 525px; -moz-column-width: 130px; -webkit-column-width: 130px; -moz-column-gap: 20px; -webkit-column-gap: 20px; -moz-column-rule: 1px solid #ddccb5; -webkit-column-rule: 1px solid #ddccb5" .

Opmerking. Deze optie werkt in Firefox, Chrome en Safari, maar niet in Internet Explorer en Opera.


Voorbeeld 9 - @font-face

Font-face Blokletters Font

Blokletters Potlood Potlood.

Blokletters Balpen Balpen.

Blokletters Viltstift Viltstift.

Op FontSquirrel.com - @font-face Font Kits kunt u een hele reeks andere @font-face-voorbeelden vinden.


De opmaak-eigenschappen van voorbeeld 9 worden via een stylesheet en .eot-, .svg-, .ttf- en .woff-bestanden geactiveerd. EOT staat voor 'Embedded OpenType', TTF voor 'TrueType Font' en WOFF staat voor 'Web Open Font Format'.

Opmerking. Deze optie werkt in Firefox, Chrome, Internet Explorer, Opera en Safari.


Voorbeeld 10 - Resizing

test


Dit zijn de opmaak-eigenschappen van bovenstaand voorbeeld 10: style="margin-left: 15px; padding: 15px; width: 500px; border: 1px solid #0000cc; resize: both; overflow: auto" .

Opmerking. Deze optie werkt in Chrome en Safari, maar niet in Internet Explorer, Firefox en Opera.


Voorbeeld 11 - Box Sizing

De linker box.
De rechter box.


Dit zijn de opmaak-eigenschappen van voorbeeld 11: style="box-sizing: border-box; -o-box-sizing: border-box; -icab-box-sizing: border-box; -khtml-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; width: 50%; text-align: center; border: 10px silver ridge; padding: 2px; float: left" .

Opmerking. Deze optie werkt in Firefox, Chrome, Internet Explorer, Opera en Safari.


Voorbeeld 12a - Opacity


Voorbeeld 12b - Opacity in Internet Explorer



Dit zijn de opmaak-eigenschappen van voorbeeld 12a: style="height: 20px; background-color: #0000cc; opacity: 0.1", style="height: 20px; background-color: #0000cc; opacity: 0.2", style="height: 20px; background-color: #0000cc; opacity: 0.3" t/m style="height: 20px; background-color: #0000cc; opacity: 1" .

Dit zijn de opmaak-eigenschappen van voorbeeld 12b: style="height: 20px; background-color: #0000cc; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10); filter: alpha(opacity=10)", style="height: 20px; background-color: #0000cc; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10); filter: alpha(opacity=20)", style="height: 20px; background-color: #0000cc; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10); filter: alpha(opacity=30)", t/m style="height: 20px; background-color: #0000cc; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10); filter: alpha(opacity=100)" .

Opmerking. Optie 12a werkt in Firefox, Chrome, Opera en Safari, optie 12b werkt alleen in Internet Explorer (zie hiervoor Css3 opacity: transparency of an element in css).


Voorbeeld 12c - Opacity


afbeelding 1

afbeelding 2


Dit zijn de opmaak-eigenschappen van voorbeeld 12c | afbeelding 1: style="height: 140px; width: 208px; border: 0px; opacity: .50; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); filter: alpha(opacity=50)" .

Dit zijn de opmaak-eigenschappen van voorbeeld 12c | afbeelding 2: style="height: 140px; width: 208px; border: 0px; opacity: .80; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter: alpha(opacity=80)" .

Opmerking. Deze optie werkt in Firefox, Chrome, Internet Explorer, Opera en Safari.


Voorbeeld 13a - HSL Colors

hsl 0, 100%, 50%: rood
hsl 0, 100%, 40%: rood
hsl 0, 100%, 30%: rood
hsl 120, 100%, 50%: groen
hsl 120, 100%, 30%: groen
hsl 120, 100%, 20%: groen
hsl 240, 100%, 50%: blauw
hsl 240, 100%, 20%: blauw
hsl 240, 100%, 10%: blauw


Dit zijn de opmaak-eigenschappen van voorbeeld 13a: style="background-color: hsl(0, 100%, 50%); text-align: center; padding: 3px; color: #ffffff", style="background-color: hsl(120, 100%, 50%); text-align: center; padding: 3px; color: #ffffff", style="background-color: hsl(240, 100%, 50%); text-align: center; padding: 3px; color: #ffffff">hsl 240, 100%, 50%: groen .

Opmerking. Deze optie werkt in Firefox, Chrome, Opera en Safari, maar niet in Internet Explorer.


Voorbeeld 13b - HSLA Colors

hsla(0,100%,50%,0.2)
hsla(0,100%,50%,0.4)
hsla(0,100%,50%,0.6)
hsla(0,100%,50%,0.8)
hsla(0,100%,50%,1)


Dit zijn de opmaak-eigenschappen van voorbeeld 13b: style="background-color: hsla(0,100%,50%,0.2); text-align: center; padding: 3px; color: #ffffff", style="background-color: hsla(0,100%,50%,0.4); text-align: center; padding: 3px; color: #ffffff", style="background-color: hsla(0,100%,50%,0.6); text-align: center; padding: 3px; color: #ffffff", style="background-color: hsla(0,100%,50%,0.8); text-align: center; padding: 3px; color: #ffffff" en style="background-color: hsla(0,100%,50%,1); text-align: center; padding: 3px; color: #ffffff" .

Opmerking. Deze optie werkt in Firefox, Chrome, Opera en Safari, maar niet in Internet Explorer.


Voorbeeld 13c - RGBA colors

rgba(255, 0, 0, 0.2)
rgba(255, 0, 0, 0.4)
rgba(255, 0, 0, 0.6)
rgba(255, 0, 0, 0.8)
rgba(255, 0, 0, 1)


Dit zijn de opmaak-eigenschappen van voorbeeld 13c: style="background: rgba(255, 0, 0, 0.2); text-align: center; padding: 3px; color: #ffffff", style="background: rgba(255, 0, 0, 0.4); text-align: center; padding: 3px; color: #ffffff", style="background: rgba(255, 0, 0, 0.6); text-align: center; padding: 3px; color: #ffffff", style="background: rgba(255, 0, 0, 0.8); text-align: center; padding: 3px; color: #ffffff" en style="background: rgba(255, 0, 0, 1); text-align: center; padding: 3px; color: #ffffff" .

Opmerking. Deze optie werkt in Firefox, Chrome, Opera en Safari, maar niet in Internet Explorer.


Opmerkingen

Opmerking 1. Bij de voorbeelden op deze pagina wordt geen gebruik gemaakt van andere dan CSS3-stylesheet-opmaakregels.
Zo krijgt de bezoeker een reële indruk van de (on)mogelijkheden van zijn of haar gebruikte browser ten aanzien van CSS3.
Via de volgende hyperlink vindt u de op deze pagina getoonde CSS3-voorbeelden terug: CSS3 Previews.
Via de volgende link kunt ook CSS3-voorbeelden vinden: Design Shack - CSS3 Examples Page.


Opmerking 2. Er is javascript voorhanden om bijvoorbeeld rondingen van hoekranden via een ondersteuning te bewerkstelligen in browsers zoals IE en Opera die (nog) geen CSS3 ondersteunen. Hiervan wordt dus geen gebruik gemaakt op deze pagina.


Opmerking 3. Chrome, Firefox, Opera en Safari ondersteunen CSS3 volledig. De nieuwste versies van Internet Explorer ondersteunen CSS3-opmaak in grote lijnen.


Joost van Meeteren Websites & Fotografie
2002-2021 © Joost van Meeteren, Bennekom NL
Laatste update: vrijdag 15 oktober 2021 om 08:18