Web Systems and Technologies

Advanced CSS
Techniques for
Interactive and
Visual Web Design
Prepared by:
John Ivan C. Maurat, MIT

1
Intended Learning Outcomes:
By the end of this module, students will be able to:

● Apply CSS opacity and transparency properties to create visually engaging effects.

● Utilize hover effects to enhance user interactivity on web elements.

● Design and implement vertical and horizontal navigation bars using advanced CSS styling.

● Create functional dropdown menus with interactive behaviors.

● Build responsive and visually appealing image galleries.

● Optimize website performance using CSS image sprites to reduce server requests and improve
loading time.

2
1.0 CSS Opacity /
Transparency

3
Transparent Image
• The opacity property can take a value from 0.0 - 1.0. The lower
the value, the more transparent:

4
Transparent Image

5
Transparent Hover Effect
• The opacity property is often used together with the :hover
selector to change the opacity on mouse-over:

6
Transparent Hover Effect

7
Reversed Transparent Hover Effect
• When the mouse pointer moves away from the image, the image will
be transparent again.

An example of reversed hover effect:

8
Reversed Transparent Hover Effect

9
2.0 CSS Navigation Bar

10
Navigation Bars
A navigation bar needs standard HTML as a base.

In our examples we will build the navigation bar from a standard HTML list.

A navigation bar is basically a list of links, so using the <ul> and <li>
elements makes perfect sense:

11
Vertical Navigation Bars

12
Vertical Navigation Bars with Color

13
Vertical Navigation Bars with Hover

14
Active/Current Navigation Link
Add an "active" class to the current link to let the user know which page
he/she is on:

15
Active/Current Navigation Link

16
Center Links & Add Borders
Add text-align:center to <li> or <a> to center the links.

Add the border property to <ul> to add a border around the navbar. If you
also want borders inside the navbar, add a border-bottom to all <li>
elements, except for the last one:

17
Center Links & Add Borders

18
Full-height Fixed Vertical Navbar
Create a full-height, "sticky" side navigation:

19
Full-height Fixed Vertical Navbar

20
Horizontal Navigation Bars
There are two ways to create a horizontal navigation bar. Using inline or
floating list items.

Inline List Items

21
Inline List Items

Note:

● display: inline; - By default, <li> elements are block elements. Here, we remove the line breaks before
and after each list item, to display them on one line

22
 Floating List Items
Another way of creating a horizontal navigation bar is to float the <li> elements, and specify a layout for the
navigation links:

23
Floating List Items

Note:
● float: left; - Use float to get block elements to float next to each other
● display: block; - Allows us to specify padding (and height, width, margins, etc. if you want)
● padding: 8px; - Specify some padding between each <a> element, to make them look good
● background-color: #dddddd; - Add a gray background-color to each <a> element
● Add the background-color to <ul> instead of each <a> element if you want a full-width background color:

24
Floating List Items

25
Active/Current Navigation Link
Add an "active" class to the current link to let the user know which page he/she is on:

26
Active/Current Navigation Link

27
Right-Align Links
Right-align links by floating the list items to the right (float:right;):

28
Right-Align Links

29
Border Dividers
Add the border-right property to <li> to create link dividers:

30
Border Dividers

31
Fixed Navigation Bar
Make the navigation bar stay at the top or the bottom of the page, even
when the user scrolls the page:

32
Fixed Navigation Bar

33
Gray Horizontal Navbar

34
3.0 Dropdown Menu

35
Dropdown Menu

36
Dropdown Image

37
4.0 Image Gallery

38
Image Gallery

39
5.0 Image Sprites

40
Image Sprites
An image sprite is a collection of images put into a single image.

A web page with many images can take a long time to load and generates multiple server requests.

Using image sprites will reduce the number of server requests and save bandwidth.

41
Image Sprites

42
 Image Sprites
Note:
● #navlist {position:relative;} - position is set to relative to allow absolute positioning inside it
● #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin and padding are set to 0,
list-style is removed, and all list items are absolute positioned
● #navlist li, #navlist a {height:44px;display:block;} - the height of all the images is 44px

Now start to position and style for each specific part:

● #home {left:0px;width:46px;} - Positioned all the way to the left, and the width of the image is 46px
● #home {background:url(img_navsprites.gif) 0 0;} - Defines the background image and its position (left 0px, top 0px)
● #prev {left:63px;width:43px;} - Positioned 63px to the right (#home width 46px + some extra space between items), and the
width is 43px
● #prev {background:url('img_navsprites.gif') -47px 0;} - Defines the background image 47px to the right (#home width
46px + 1px line divider)
● #next {left:129px;width:43px;} - Positioned 129px to the right (start of #prev is 63px + #prev width 43px + extra space), and
the width is 43px
● #next {background:url('img_navsprites.gif') -91px 0;} - Defines the background image 91px to the right (#home width
46px + 1px line divider + #prev width 43px + 1px line divider)

43
Image Sprites with Hover

44
END

45