Transcript
CSS Formatting Elements Setting values with CSS
We can make tons of adjustments to look and feel with CSS alone
We can take this: And make it look like this:
Backgrounds
� Can customize the color � Or insert an image as the background
" Color gradients background-image: -webkit-linear-gradient(top, #ff0000, #999999);!
background-image: -moz-linear-gradient(top, #ff0000, #999999);!
background-image: -ms-linear-gradient(top, #ff0000, #999999);!
background-image: -o-linear-gradient(top, #ff0000, #999999);!
background-image: linear-gradient(to bottom, #ff0000, #999999);!
Browser-specific CSS properties • -moz-* • Gecko engine • Mozilla Firefox
• -ms-* • Trident engine • Microsoft Internet Explorer
• -webkit-* • Webkit engine • Google Chrome • Apple Safari
• -o-* • Presto engine • Opera Opera
Hands-on color gradients
Text effects
" text-shadow " text-overflow " word-wrap " word-break
Border effects
" dropshadow " rounded corners " border image
Hands-on CSS formatting
Conclusion
� CSS styles give the site its look and feel by setting colors, fonts, sizes, layouts, spacing and so much more
� The new CSS3 features have expanded that by adding gradients, shadows, rounded corners and many other features
� Sometimes we have to specify the browser type with a prefix on the property being set
Further study
� List of engine-specific features and prefixes ◦ http://peter.sh/experiments/vendor-prefixed-css-
property-overview/
� Playground to learn CSS ◦ http://css3please.com/
� Color picker and gradient generator ◦ http://colorzilla.com
top related