Esta clase CSS genérica que mos muestra naioo.com, nos permite crear botones de diferente tamaño de manera dinámica, modificando sólo la fuente del texto.
Sólo necesitamos una imagen
semitransparente, y agregar la clase, por ejemplo, antes de <:/b:skin>:
Sólo necesitamos una imagen
semitransparente, y agregar la clase, por ejemplo, antes de <:/b:skin>:.btn {
display: inline-block;
background: transparent url(URL_imagen.png) repeat-x 0 0;
border: 1px solid rgba(0,0,0,0.4);
padding: 5px 10px 6px 10px;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
-moz-border-radius: 15px;
-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
}Eso es lo genérico, ahora, podemos crear efectos con diferentes colores, por ejemplo:
.blue { background-color: #CCC; color: #141414; }
.blue:hover { background-color: #00C0DD; color: #FFF; }
.red { background-color: #CCC; color: #141414; }
.red:hover { background-color: #FF004E; color: #FFF; }Los usamos así:
<div class="btn blue"> texto </div>
<div class="btn red"> texto </div>
O cambiamos los tamaños con font-size:
<div class="btn blue" style="font-size: 20px;"> texto </div>
<div class="btn blue" style="font-size: 36px;"> texto </div>
Anterior
Inicio
Siguiente
Anterior
Inicio
Siguiente
Anterior
Inicio
Siguiente
Anterior
Inicio
Siguiente
Anterior
Inicio
Siguiente
31 comentarios:
Sencillamente...grandioso :D
Gracias JMiur
Si, a mi también me gustaron :D
Geniales Jmiur, que significa una imagen semitranspartente, es una pavada pero no lo sé :P
Simplemente genial!!
Me gusta el cambio del buscador y los botones a redes sociales, veré si puedo copiarte los estilos del buscador (quien avisa no es traidor) :D
Graciela:
Todas las imágenes son rectángulos; en una transparente, cierta parte deja ver el fondo por completo como el caso de los emoticones.
Una semitransparente es traslúcida, se ve el fondo pero con cierta opacidad.
Gem@:
Todo suyo. Me alegro que le guste :D
Muy bien joven una imagen opaca, ya me dedico a jugar están 'pipí cucú' :P
Hace un tiempo le envie una consulta por mail, la cual fue evacuada sorpresivamente rapidísimo. Dicha consulta no fue agradecida en su momento por lo que aprovecho la ocación para hacerlo. Le comento que no pude hacer lo que quería...
Igualmente, la verdad que de esto no sabia nada de nada... Y debo decir que entre vagabundia (especialmente), oloblogger y un chiquito de la bloqueria; aprendí lo necesario como para diseñar modestamente un blog, creo... Sepa que a mediados de febrero del corriente año le pregunte a google ¿como hacer un blog? y ahí empezo el viaje.. Gracias, gracias!
GRaciela: Juegue, nomás :D
Gracias por el comentario, CGL
Bonito
Bien, luego del fracaso rotundo de los acordeones de no sé que entrada anterior, probaré ahora con estos bonitos botones (todo es música)
Eso sí, lo de la imagen semitransparente ya me falló en la entrada del 19 de febrero (button) tan semitransparente fue que nunca la encontré… y es el día de hoy que la sigo buscando… … de seguir así jamás tendré esa url
nas noches :D
Bien, salir me salió, pero ni parecido a lo que dice aquí… inventaré algo urgente para poder dormir esta noche. Funcionar funciona, pero no sé para qué.
Supongo que los grandes inventos han sido, en síntesis, una suma inconmensurable de pequeños e insoportables errores.
Va a tener que tomarlo con más calma, Garabato :D
Es verdad eso de que lo único que funciona es la prueba y el error.
Botones funcionando en blog de prueba y en mi blog principal:
blog de prueba
Avibert
Saludos JMiur, :)
Ahora tengo 2 problemas:
Uno, que así como está en el blog de prueba de Manfenix, me salió a mí y no quedé muy conforme y dos, que en ese mismo blog de prueba vi el mismo Carrousell de Imágenes que nunca me salió y encima, entré a Before my Eyes y ya estoy pensando seriamente en acabar con mi vida cibernauta.
Son muchas cosas que no me salen JMiur, como para tomarlo con calma... me entró como una especie de “materialismo informático” que me descerebra ¿otro virus?
Hola Garabato.
Te cuento que el Carrousel de imágenes, solo lo puedo correr en el blog de prueba. Sigo intentando aplicarlo a mi blog principal.
No sin esfuerzo y muuuuuucha paciencia pude hacerlo funcionar en el blog de pruebas.
Hazle caso a JMiur, cuando dice que el mundo del bloggero es un mundo plagado de pruebas y errores, más que de aciertos.... :D
Saludos
Absolutamente cierto, Manfenix, más errores que acierto, de eso no cabe duda ... seguramente, es alguna clase de castigo por cosas que habremos hecho mal en otras vidas :D
Pues vaya una gracia ¿no? y que suerte tiene entonces los que van a disfrutar las siguientes vidas!!
Dios, no haberlo sabido antes!! Llevo más de 5 horas entrando y saliendo de uno y otro blog. He venido aquí tantas veces que me estoy dando vergüenza. Before my Eyes me ha deprimido más que JMiur, por lo tanto ni siquiera lo intentaré. Así que cierro ese blog de pruebas que me ha vuelto más loca todavía y yá. Gracias Manfenix, me contuve las ganas de escribirle porque cuando me obsesiono con algo, las palabras desaparecen de mi memoria.
Gracias JMiur, también he recorrido los blogs de Gema, Rosa y no se cuántos más… ya los estoy cerrando a todos… y dejo de parecerme a ese otro acordeón que no me sale.
En fin, eso de que el saber no ocupa lugar son todas mentiras
Les presento a mi nuevo amigo SKELETON
Gracias otra vez!
Es nuestro destino, Gem@, nuestro karma :D
El karma de unos cuantos...(que no somos pocos)... :P
Yo ya lo he puesto , esta muy chulo , le he modificado para que aceptase el azul oscuro (Sin Luz) y el amarillo (Ya con Luz)
Ahora entenderas porque digo lo de la luz aqui :
http://idrid-youtube.blogspot.com/p/videos.html (elige cualquira)
Por cierto ¿me podrias decir como creo un motor de busqueda como el que tienes tu ?
El buscador que uso es el que se puede agrregar en Diseño | Elementos de la página.
Lo siento no me explicado bien,en tu blog debajo de Agregar a Favoritos tienes el Plugin de Busqueda, queria saber como crear uno .
Gracias :D!
Ah bien :D
Eso, puedes verlo en esta entrada.
Uhm ahi mismo puedo agregar un enlace ?
Sí. en lugar de un texto colocas un enlace o eventualmente, en lugar de un DIV usas un enlace.
Excelente! Gracias
Hola mipregunta es la siguiente, solo se sabe como hacer que cuando el raton pase sobre los botones alumbren, pero es mucho mejor si se pudiera hacer el efecto de que cuando a el boton se le hace click se pudiera ver como si se undiera, igual muchas gracias por la info.
Para eso, el lugar de usar :hover debes usar :active
muy bueno, gracias
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...