wdes106 css advanced part 1
DESCRIPTION
TRANSCRIPT
CSS Advanced Topics
CSS 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
CSS Navigation Bar
There are two ways to create a horizontal navigation bar. Using inline or floating list items.
Both methods work fine, but if you want the links to be the same size, you have to use the floating method.
about.me/babon
CSS Navigation Bar
inline method
li {display: inline;
}
By default, <li> elements are block elements. Here, remove the line breaks before and after each list item, to display them on one line
about.me/babon
CSS Navigation Bar
floating method
li {float: left;
}a {
display: block;width: 60px;
} about.me/babon
CSS Navigation Bar
float: left;● use float to get block elements to slide next
to each other
display: 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
CSS Navigation Bar
width: 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
CSS Image Gallery
Use jQuery instead to handle image galleries.
See jQuery jAM Tutorials
about.me/babon
CSS Image Opacity
IE9, Firefox, Chrome, Opera, and Safari use the property opacity for transparency.● takes a value from 0.0 - 1.0. A lower value
makes the element more transparent.
about.me/babon
CSS Image Opacity
IE8 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
CSS Image Sprite
Use one single image to capture all navigation states.● no loading delay when a user hovers over
the image.
image | sprites.html
Apple Style CSS Sprite Menu
about.me/babon