Computer

Programming

Quarter 1
Self Learning Module 18
Opacity, Navigation and
Tooltip!
Writer: John Michael A. Bautista, Dan Reinnier C. Amigo
Editor: Lerma Cantanero
Reviewer: Rowena O. Dimagiba
 EXPECTATION

The students should be able to:

A. define opacity.
B. differentiate horizontal and vertical navigation bar.
C. write the syntax used to make a tooltip.

PRE–TEST

Word Pool: Choose from the words in the box to identify which is being asked in
each statement. Write your answer on the space provided before each number.

Opacity display: block; list-style-type: none;

Navigation Bar Floating Inline

______________ 1. This property sets the transparency level for an element.

______________ 2. This is a user interface element within a webpage that contains

links to other sections of the website.

______________ 3. This syntax is used to remove the bullets in a list.

______________ 4. A list item way to create horizontal navigation bar without the line
before and after each list item.

______________ 5. A way to create list item that gets block elements to slide next to
each other.

RECAP
Images can improve the design and the appearance of a web page. A
background image can be specified for almost any HTML element; and, we use the
style attribute and background-image property in CSS to create a background image
in HTML.
 In the following syntaxes describe what are the function of each attribute and
property used.

1. <img src="/images/apple.jpg" alt="Apple" title="Apple" />

2. <style>
body { background-color: linen; }
h1 { background-color: lightblue; }
</style>

LESSON

CSS Opacity
Opacity is now a part of the CSS3 specifications, but it was present for a long
time. However, older browsers have different ways of controlling the opacity or
transparency. The opacity property in CSS specifies how transparent an element is.

The opacity property sets the opacity level for an element. The opacity-level
describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-
through, and 0 is completely transparent.

Figure 1

Syntax: img { opacity: 0.5; }

Opacity has a default initial value of 1 (100% opaque). When an element has
a value of 0 the element is completely invisible; a value of 1 is completely opaque
(solid).

The opacity property is often used together with the :hover selector to change
the opacity on mouse-over. Example is as follows:
 img {
opacity: 0.5;
}

img:hover {
opacity: 1;
}

Figure 2

In this example we have added what should happen when a user hovers over
one of the images. In this case we want the image to NOT be transparent when the
user hovers over it. The CSS for this is opacity:1;. When the mouse pointer moves
away from the image, the image will be transparent again.

CSS Navigation Bar

A navigation bar is a user interface element within a webpage that contains

links to other sections of the website. Having easy-to-use navigation is important for
any web site. With CSS you can transform boring HTML menus into good-looking
navigation bars.

Figure 3

Navigation Bar = List of Links

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.
Output:

Adding these codes: ul { list-style-type: none; margin: 0; padding: 0; } will

remove the bullets in the list.

• list-style-type: none; - Removes the bullets. A navigation bar does not need
list markers
• margin: 0; and padding: 0; - removes browser default settings

Vertical Navigation Bar

Different classes, elements and properties can be used to make the navigation
bar look a lot better than just a list with links.

• 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 (and
padding, margin, height, etc. if you want)
• width: 60px; - Block elements take up the full width available by default. We
want to specify a 60 pixels width

You can also set the width of <ul>, and remove the width of <a>, as they will take
up the full width available when displayed as block elements. Study the sample below
and how the codes are used to make this output.

Figure 4
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div style="margin-left:25%;padding:1px 16px;height:1000px;">
<h2>Fixed Full-height Side Nav</h2>
<h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
<p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25%
width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
<p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too
long (for example if it has over 50 links inside of it).</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
</div>
</body>
</html>
Horizontal Navigation Bar

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

• Inline List Item - By default, <li> elements are block elements. Here
display: inline; removes the line breaks before and after each list item, to display
them on one line
• Floating List item –
o float: left; - use float to get block elements to slide next to each other.
o display: block; - Displaying the links as block elements makes the
whole link area clickable (not just the text), and it allows us to specify
padding (and height, width, margins, etc. if you want).

Like the vertical navigation bar, you can also use different classes and
elements to make a better web page navigation bar. See example below:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
 CSS Tooltips

CSS Tooltips are a great way to display extra information about something
when the user moves the mouse cursor over an element. By using tooltips, you can
display the position of the tooltip information in four ways:

1. Top of the element

2. Left side of the element
3. Right side of the element
3. Bottom of the element

Study the following syntaxes:

/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;

/* Position the tooltip text */

position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;

/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
 /* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
Below is an example of a executable program showing the use of tooltip.
<!DOCTYPE html>
<html>
<head>
<title>CSS Tooltips</title>
</head>
<style type="text/css">
.tooltip_top{
position:relative;
display:inline-block;
border-bottom:1px dotted black;
margin:30px auto 20px;
}
.tooltip_top .tooltiptext {
visibility:hidden;
width:120px;
background-color:black;
color:#fff; t
ext-align:center;
border-radius:2px;
padding:5px 0;
position:absolute;
z-index:1;
bottom:100%;
left:50%;
margin-left:-60px;
}
.tooltip_top:hover .tooltiptext {visibility:visible;}
</style>
<body style="text-align:center;">
<div class="tooltip_top">TOP TOOLTIP
<span class="tooltiptext">Top Tooltip</span>
</div>
</body>
</html>

Output:
 ACTIVITIES

Syntax: Provide the syntax for what is asked in each statement.

1. Image opacity is transparent

2. Image opacity has 50% translucency
3. Image opacity is opaque
4. Image is opaque only when mouse hovers on it
5. Unordered list without bullets to turn it to a navigation bar, margin and
padding is set to 0
6. Display links as block element
7. Used to get block elements to slide next to each other
8. Removes the line breaks before and after each list item, to display them on
one line
9. Tooltip container where display is inline and there is no bottom border on the
text
10. Show the tooltip text when you hover the tooltip container, tooltip text opacity
is opaque

WRAP–UP

Give brief description about the following terms:

• CSS Opacity
• CSS Navigation Bar
• CSS Tooltip

VALUING

Instructions: Read the following questions or statements carefully. Write your

answer on the space provided.
 1. When do we need to use CSS Opacity?
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
2. When do we need to use CSS Navigation?
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
3. When do we need to use CSS Tooltip?
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
4. Choose among the three (Opacity, Navigation, Tooltip), and tell how can you
relate the usage of this to a real life scenario or experience.
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________

POST TEST

Instruction: Give what is asked in each statement.

_____________ 1. Default initial value of opacity.

_____________ 2. Opacity value of an element if it is invisible.

What are the two kinds of Navigation Bar?

3.
4.

What are the two ways to create a horizontal navigation bar?

5.
6.

What are the four ways you can display the position of the tooltip information?

7.
8.
9.
10.
https://www.w3schools.com/css/css_image_transparency.asp
“CSS Opacity/Transparency”. Accessed July 27, 2020 12:16:30pm. •
https://www.freetimelearning.com/css-tutorial/css-opacity-tooltips.php
“CSS Opacity”. Accessed July 27, 2020 12:15:59pm. •
tricks.com/almanac/properties/o/opacity/
“opacity”. Accessed July 27, 2020 12:15:20pm. https://css- •
REFERENCES
Pre test
1. Opacity
2. Navigation Bar
3. list-style-type: none;
4. Inline
5. Floating
Activity
1. img { opacity: 0; }
2. img { opacity: 0.5; }
3. img { opacity: 1; }
4. img:hover { opacity: 1; }
5. ul { list-style-type: none; margin: 0; padding: 0; }
6. display: block;
7. float:left;
8. display: inline;
9. .tooltip { position: relative; display: inline; }
10. .tooltip:hover .tooltiptext { visibility: visible; opacity:
1; }
Post Test
1. 1
2. 0
3-4
horizontal
vertical
5-6
inline
floating
7-10
Top of the element
Left side of the element
Right side of the element
Bottom of the element
KEY TO CORRECTION
• “CSS Navigation Bar”. Accessed July 27, 2020 2:24:35pm.
https://www.w3schools.com/css/css_navbar.asp
• “CSS Vertical Navigation Bar”. Accessed July 27, 2020 2:30:54pm.
https://www.w3schools.com/css/css_navbar_vertical.asp
• “CSS Horizontal Navigation Bar”. Accessed July 27, 2020 3:24:09pm.
https://www.w3schools.com/css/css_navbar_horizontal.asp
• “CSS Tooltips” Accessed July 27, 2020 6:01:34pm.
https://www.freetimelearning.com/css-tutorial/css-opacity-tooltips.php

Figure 1&2

• https://www.w3schools.com/css/css_image_transparency.asp

Figure 3&4

• https://www.w3schools.com/css/css_navbar.asp