RSS
Facebook
G+

Buscador de IntercambioSOS:


Retroceder   Foro de Ayuda IntercambiosvirtualeS > Soporte Sobre: Educación & Entretenimiento > Zona Académica > Programación

Respuesta
 
Herramientas Desplegado
Antiguo 17-nov-2010     #1
Predeterminado CSS - Botones con brillo sin imágenes



Ventajas:

Código HTML:
    * Cargan rapidamente
    * No tenemos que preocuparnos del rollover, las esquinas, etc.
    * Son escalables
    * Son fácilmente personalizables
Inconvenientes:

Código HTML:
    * El código no es precísamente lo más limpio del mundo, ya que se utilizan cuatro elementos SPAN anidados dentro del enlace o elemento BUTTON
    * Necesitamos añadir una clase “hover” o similar mediante Javascript al primero de los SPAN anidados, ya que el :hover no funciona en Explorer 6


El código CSS usado:

Código PHP:

/* generales boton */
.botontext-decorationnoneborder0cursorpointer; }
button.botonoutlinenonebackgroundnonewhite-spacenowrapoverflowvisible;}
.
boton span.brillo spanfontbold 1.1em tahomaarialsans-serifcolor#fff; display: block; text-align: center; padding: 0 .9090em; min-width: 5.6363em; top: -.5454em; position: relative; }
html .boton span.brillo spanwidth5.6363emwhite-spacenowrap; }   /* emulacion de la propiedad min-width para Explorer 6 */
.boton span.borde-hdisplayblockfloatleft; }
.
boton span.borde-vcursorpointerpadding1px 0 0 1pxpositionrelativemargin-left: -1pxmargin-right: -1pxdisplayblockfloatleft;}
.
boton span.brillodisplayblock; } 
Para un botón de un determinado color, en este caso verde:

Código PHP:
/* verde */
.boton-a span.borde-hborder1px solid #718a0a; border-left: 0; border-right: 0; }
.boton-a span.borde-vbackground#defd0e; border: 1px solid #718a0a;  border-top: 0; border-bottom: 0; }
.boton-a span.brilloborder-top10px solid #b4ce0c; background: #95b60d; }
.boton-a:hover span.borde-h, .boton-a span.hoverborder-color#526407;}
.boton-a:hover span.borde-v, .boton-.hover span.borde-vbackground#c7e30d; border-color: #526407;}
.boton-a:hover span.brillo, .boton-.hover span.brilloborder-top-color#a4bc0b; background: #79940b;} 

"El hombre es esclavo de sus palabras y dueño de su silencio"

"No hay nada más bello que vivir"... R.I.P. Jaime Moreno Garcia

Última edición por sasuke.17; 17-nov-2010 a las 01:05
Responder Citando
Los siguientes 2 usuarios agradecen a sasuke.17 por este mensaje:
Felina05 (17-nov-2010), jchierro (17-nov-2010)
Antiguo 17-nov-2010     #2
Predeterminado


"Aprende a interrogar razonablemente, a escuchar con atención, a responder serenamente, y a callar cuando no tengas nada que decir"


Responder Citando
Respuesta


(0 miembros y 1 visitantes)
 
Herramientas
Desplegado

Normas de Publicación
No puedes crear nuevos temas
No puedes responder mensajes
No puedes subir archivos adjuntos
No puedes editar tus mensajes

Los Códigos BB están Activado
Las Caritas están Activado
[IMG] está Activado
El Código HTML está Desactivado

Ir al Foro

Temas Similares
Tema Autor Foro Respuestas Último mensaje
[Tutorial] ISO: Montar, Emular, Grabar y Crear una imagen ISO Eloy58 Tutoriales & Videos Tutoriales 99 02-feb-2016 20:40
3D - Documentacion VJEVans Otras 4 16-nov-2010 19:07
Herramientas Online para editar imágenes desde Internet luxure07 Imagen & Fotografía 14 14-abr-2010 15:54


Desarrollado por: vBulletin® Versión 3.8.1
Derechos de Autor ©2000 - 2017, Jelsoft Enterprises Ltd.
Ad Management by RedTyger