Your SlideShare is downloading. ×
WDES106 CSS Advanced Part 1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

WDES106 CSS Advanced Part 1

283
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
283
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. WDES106CSS Advanced -- Part 1 about.me/babon
  • 2. CSS Advanced TopicsCSS Pseudo-class (Part 2)CSS Pseudo-element (Part 2)CSS Navigation Bar (Part 1)CSS Image Gallery (Part 1)CSS Image Opacity (Part 1)CSS Image Sprites (Part 1)CSS Media Types (Part 2)CSS Attribute Selectors (Part 2) about.me/babon
  • 3. CSS Navigation BarThere are two ways to create a horizontalnavigation bar. Using inline or floating list items.Both methods work fine, but if you want thelinks to be the same size, you have to use thefloating method. about.me/babon
  • 4. CSS Navigation Barinline methodli { display: inline;}By default, <li> elements are block elements.Here, remove the line breaks before and aftereach list item, to display them on one line about.me/babon
  • 5. CSS Navigation Barfloating methodli { float: left;}a{ display: block; width: 60px;} about.me/babon
  • 6. CSS Navigation Barfloat: left;● use float to get block elements to slide next to each otherdisplay: block;● displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width about.me/babon
  • 7. CSS Navigation Barwidth: 60px;● since block elements take up the full width available, they cannot float next to each other. We specify the width of the links to 60px. about.me/babon
  • 8. CSS Image GalleryUse jQuery instead to handle image galleries.See jQuery jAM Tutorials about.me/babon
  • 9. CSS Image OpacityIE9, Firefox, Chrome, Opera, and Safari usethe property opacity for transparency.● takes a value from 0.0 - 1.0. A lower value makes the element more transparent. about.me/babon
  • 10. CSS Image OpacityIE8 and earlier use filter:alpha(opacity=x).● the x can take a value from 0 - 100. A lower value makes the element more transparent.opacity.html about.me/babon
  • 11. CSS Image SpriteUse one single image to capture all navigationstates.● no loading delay when a user hovers over the image.image | sprites.htmlApple Style CSS Sprite Menu about.me/babon

×