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
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
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
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
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
2002-2024 © Joost van Meeteren, Bennekom NL
Laatste update website: vrijdag 19 april 2024
Deze website past cookies toe voor optimaal gebruik van dit platform | bron |