WDES106 CSS Advanced Part 1
Upcoming SlideShare
Loading in...5

WDES106 CSS Advanced Part 1






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



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.

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

WDES106 CSS Advanced Part 1 WDES106 CSS Advanced Part 1 Presentation Transcript

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