Hojas de estilo css2/css3 en deviantart.com

DeviantArt.com es una de las mejores páginas que he visto dedicadas al arte.
Empezando por lo primero gozan de una web bastante atractiva y completa, siendo a la vez de util y potente, una obra de arte en sí misma, con un diseño muy bueno.

Me he fijado que en mozilla/firefox el menú principal, al mover el raton sobre una opción aparece un recuadro de otro color con los bordes redondeados, pero no en explorer. Es debido a la propiedad -moz-border-radius que solo implementa mozilla y que parece que es una característica del futuro estandard css3.

También es util apreciar que el recuado recubre el conjunto de imagen y texto y como separador se usa el | (pipe) pero no se ve ( display:none ) imagino que será muy util para lograr cumplir standardares de accesibilidad.

Todo un proyecto que no debemos dejar de visitar.

He aqui fragmento del codigo que realiza esto :

.toolbar a {
display:block;
border:1px solid transparent;
padding:4px 8px;
line-height:18px;
vertical-align:middle;
white-space:nowrap;
}

.text-toolbar a img {
float:left;
margin:0 3px 0 0;
}

.toolbar a:hover, .toolbar a:focus, .toolbar a:active {
border-color:#546359;
background-color:#D2D6D2;
border-width:1px;
padding:4px 8px;
}

.toolbar span.hsep {
display:none
}

/* Moz stuff */
.toolbar a {
-moz-border-radius:.4em
}

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.