WEBINFOCENTRAL.COM
|
WEB ESSENTIALS IN ONE PLACE
Check Browser
Check IP
Login
Home
>
HTML5
>
HTML5: CSS3 Image Decoration
WEB TV
CALCULATORS
HTML5
RESOURCES
EDUCATION
MOBILE
Company
FREE MUSIC VIDEOS
Classic Channel
YouTube Top100
Valentine's Day Music
Silverlight Video Player
YouTube Video Player Demo
3 Fraction Calculator
Linear Equations
Quadratic Equations
System Equations
Statistics Calculator
Factoring and Primes
Combinatorics
Engineering Calculator VOLTA
Scientific Calculator ZENO
HTML5: CSS3 Image Decoration
HTML5: Auto Slide Show
HTML5: CSS3 Slide Show
HTML5: CSS3 Modal Dialog
Withholdind Tax Calculator
Inflation Calculator
Engineering Calculator VOLTA
Geocoder
Semantic Analyzer
Motosport
Weather
iPad 2 Slide Show
GAMES
Tests
Tutorials
Virtual Classrooms
Fractions
Factoring
Sys-Eq
Q-Eq
About
Terms of Use
DATE/TIME
|⌂|
HTML5 BEST PRACTICES
CSS3 GRAPHIC ENHANCEMENT
The notable part of emerging HTML5 specs is a plethora of graphic enhancement features achievable via pure CSS3 without any use of auxiliary "decorative" image files.
Examples to the right demonstrate web images decoration technique (i.e., framing) implemented via latest CSS3 features, like rounded corners, color gradients and shadows, dramatically increasing the aesthetic appeal of web design/layout.
Following is the image of Scientific Calculator ZENO-5000, which utilizes various graphic enhancement techniques mentioned above (i.e. rounded border, gradients and shadows) via CSS3: you can click on the image to open the "live" calculator.
HTML5: CSS3 Image Decoration
HTML5: Auto Slide Show
HTML5: CSS3 Slide Show
HTML5: CSS3 Modal Dialog
HTML5 IMAGE DECORATION TECHNIQUE: BORDERS, SHADOWS, GRADIENTS
DOUBLE BORDERS: GRAY
DOUBLE BORDERS: GREEN
DOUBLE BORDERS: SAMPLE CSS
img.imgDoubleBorderLightGray { border: 5px solid #dadada; padding:5px;}
img.imgDoubleBorderGreen { border: 5px solid DarkGreen; padding:5px; }
INSET SHADOW GRAY
INSET SHADOW RED
INSET SHADOW: SAMPLE CSS
img.imgInsetShadowGray { padding:10px; -moz-box-shadow:inset 0 0 10px #000000; -webkit-box-shadow:inset 0 0 10px #000000; box-shadow:inset 0 0 10px #000000; }
SINGLE ROUNDED BORDERS
GRADIENT COLOR-STOP
ROUNDED SAMPLE CSS
img.imgRounded {padding:10px; background-color: DarkRed; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
BEST ROCK/POP ON AMAZON
Amazon.com Widgets
AUS EUROPA: BEST EUROPEAN ROCK/POP
Amazon.com Widgets