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.
CSS can be used to create an image gallery.
The following image gallery is created with CSS : Continue reading CSS – Image Gallery
Create a hoverable dropdown with CSS.
Create a dropdown box that appears when the user moves the mouse over an element.
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
Having easy-to-use navigation is important for any web site.
With CSS you can transform boring HTML menus into good-looking 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:
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
The opacity property specifies the opacity/transparency of an element.
The opacity property can take a value from 0.0 – 1.0. The lower the value, the more transparent.
img {
opacity: 0.5;
}
A CSS pseudo-element is used to style specific parts of an element.
For example, it can be used to:
The syntax of pseudo-elements:
selector::pseudo-element {
property: value;
}
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
The syntax of pseudo-classes:
selector:pseudo-class {
property: value;
}
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
There are four different combinators in CSS:
The descendant combinator matches all elements that are descendants of a specified element.
The following example selects all <p> elements inside <div> elements:
div p {
background-color: yellow;
}
To horizontally center a block element (like <div>), use margin: auto;
Setting the width of the element will prevent it from stretching out to the edges of its container.
The element will then take up the specified width, and the remaining space will be split equally between the two margins. Continue reading CSS Layout – Align
Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
Also, with
display: inline-blockdisplay: inline they are not.
Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
The following example shows the different behavior of display: inline, display: inline-block and display: block:
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}