14 css formatting elements
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

14 css formatting elements

on

  • 862 views

 

Statistics

Views

Total Views
862
Views on SlideShare
862
Embed Views
0

Actions

Likes
0
Downloads
13
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

14 css formatting elements Presentation Transcript

  • 1. CSS Formatting ElementsSetting values with CSS
  • 2. We can make tons of adjustments tolook and feel with CSS alone We can take this: And make it look like this:
  • 3. Backgrounds—  Can customize the color—  Or insert an image as the background
  • 4. "   Color gradientsbackground-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);!
  • 5. 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
  • 6. Hands-on color gradients
  • 7. Text effects" text-shadow" text-overflow" word-wrap" word-break
  • 8. Border effects" dropshadow" rounded corners" border image
  • 9. Hands-on CSS formatting
  • 10. 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
  • 11. 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