Name : My Tree
Version : 1.0
Firefox Theme – The Witcher
Firefox Theme – My Girl
CSS Image Sprites
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.
CSS – Image Gallery
CSS can be used to create an image gallery.
Image Gallery
The following image gallery is created with CSS : Continue reading CSS – Image Gallery
CSS Dropdowns
Create a hoverable dropdown with CSS.
Basic Dropdown
Create a dropdown box that appears when the user moves the mouse over an element.
Example
<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>
CSS Navigation Bar
Navigation Bars
Having easy-to-use navigation is important for any web site.
With CSS you can transform boring HTML menus into good-looking navigation bars.
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:
Example
<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>
CSS Opacity and Transparency
The opacity property specifies the opacity/transparency of an element.
Transparent Image
The opacity property can take a value from 0.0 – 1.0. The lower the value, the more transparent.
Example
img {
opacity: 0.5;
}
CSS Pseudo-elements
What are Pseudo-Elements?
A CSS pseudo-element is used to style specific parts of an element.
For example, it can be used to:
- Style the first letter or line, of an element
- Insert content before or after an element
- Style the markers of list items
- Style the viewbox behind a dialog box
Syntax
The syntax of pseudo-elements:
selector::pseudo-element {
property: value;
}
CSS Pseudo-classes
What are Pseudo-classes?
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
- Style an element when a user moves the mouse over it
- Style visited and unvisited links differently
- Style an element when it gets focus
- Style valid/invalid/required/optional form elements
Syntax
The syntax of pseudo-classes:
selector:pseudo-class {
property: value;
}