Programmazione Web » Css » Realizzare un banner accessibile
Realizzare un banner accessibile
Difficoltà:
Scritto da Alberto Giuliani
Sito Web: http://www.agwebsolutions.it 
Questo tutorial è stato letto 1112 volte
In questo tutorial vedremo come realizzare un banner accessibile con solo codice CSS.
Per capire ciò che vogliamo realizzare, date uno sguardo a questo link.
Il banner in questione potrebbe benissimo contenere delle immagini al posto del testo. Esso è ciò che si suole chiamare un BANNER ACCESSIBILE.
Una volta inserito in una pagina web, è sicuramente visibile, data la grandezza del font e, se personalizzato, può essere reso molto accattivante.
Vediamo il codice della pagina:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pagina con banner</title>
<style type="text/css">
#banner a{
border-color:#0000CC;
border-width:4px;
border-style:inset;
background-color:#FFCC00;
font-family:"Trebuchet MS";
font-size:36px;
display:block;
color:#000;
text-align:center;
text-decoration:none;
width:auto;
}
#banner a:hover {
background-color:#990000;
color:#FFFFFF;
text-decoration:none;
}
</style>
</head>
<body>
<div id="banner">
<a href="#">Tutorials, scripts, guide per webmasters!</a>
</div>
</body>
</html>
Da notare di questo codice come si assegni ai links del div "banner" un bordo, uno sfondo, una visualizzazione block che fa si che compaiano uno sotto l'altro e una grandezza del font maggiore.
Nel caso volessimo utilizzare delle immagini di sfondo? Basterà modificare i CSS in questo modo:
#banner a {
background-image:url(immagine.jpg);
...
}
#banner a:hover {
background-image:url(immagine2.jpg);
}
Aggiungi questo tutorial ai preferiti
