Using the Display Property, we can set how an element is to be displayed, and the visibility property sets if an element should be “visible or hidden”.
E.g. display: inline|block|inline-block|none; → these are the most commonly used display properties although other exist but not all browsers supports them.
Making Cool Buttons Using the Display Property
<html>
<head>
<title>CSS Link Buttons</title>
<style type="text/css">
div {
width:300px;
}
a {
display:block;
background-color: #eaf1dd;
color:#060;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size:1.5em;
padding: 6px 4px;
margin: 4px;
border-right: 2px solid #999999;
border-bottom: 2px solid #999999;
border-top-width: 0px;
border-left-width: 0px;
}
a:hover
{
color:#030;
border: 1px solid #9999ff;
}
a:active
{
color:#aca;
border-left: 2px solid #030;
border-top: 2px solid #030;
border-right-width: 0px;
border-bottom-width: 0px;
}
</style>
</head>
<body>
<h1>Cool CSS buttons</h1>
<div>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.bing.com">Bing</a>
<a href="http://www.google.com">Google</a>
</div>
</body>
</html>
Click to see a stand alone example Cool CSS Buttons
Manipulating the Mouse Cursor
With CSS, you can manipulate what the mouse cursor displays, either by setting it to auto, which is the default settings or you can change it to anything you want it to show you once the cursor is on a text, image or just there on the web page background.
E.g. cursor: auto|crosshair|default|pointer|move|e-resize|ne-resize|nw-resize|n-resize|se-resize|sw-resize|s-resize|w-resize|text|wait| help;
<html>
<head>
<title>Cool CSS Link Buttons</title>
<style type="text/css">
<style type="text/css">
a.w {
cursor: move;
}
a.money {
cursor: wait;
}
a.special {
cursor: pointer;
}
</style>
</head>
<body>
<ol>
<li><a href="http://www.cnn.com">Normal Link</a></li>
<li><a href="http://www.google.com" class="w">Link to Google with a Move Icon</a></li>
<li><a href="http://www.money.com" class="money">Link to product that costs money</a></li>
<li><a href="http://www.cnn.com" class="special">Link with a Hand</a></li>
</ol>
</body>
</html>
Click to see a stand alone example Cool CSS Link Buttons
Zooming elements with Z-index
The z-index property is used to display element in proportion to how it can be viewed on the screen, in essence it positions the element closer to the screen and overlaps it between other elements depending on the set value.
p {
color: black;
border: 1px solid blue;
z-index: 4;
}
Click here to see a stand alone example Zooming Element
You can imagine new ideas on how to make your web pages display properly in CSS just practice harder and you’ll be on the verge of becoming a guru in web development.
| Back | Main: CSS Programming | Previous Lesson: Positioning of Elements | Next Lesson: CSS Advanced : Pseudo-Class |
