14 css formatting elements
-
Upload
rap-payne -
Category
Technology
-
view
106 -
download
0
description
Transcript of 14 css formatting elements
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