WDES106 CSS Advanced Part 1

454 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
454
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

WDES106 CSS Advanced Part 1

  1. 1. WDES106CSS Advanced -- Part 1 about.me/babon
  2. 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. 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. 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. 5. CSS Navigation Barfloating methodli { float: left;}a{ display: block; width: 60px;} about.me/babon
  6. 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. 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. 8. CSS Image GalleryUse jQuery instead to handle image galleries.See jQuery jAM Tutorials about.me/babon
  9. 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. 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. 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

×