JMiur [E]

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>:
.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:

Manfenix  

Sencillamente...grandioso :D
Gracias JMiur

Responder
JMiur  

Si, a mi también me gustaron :D

Responder
Graciela  

Geniales Jmiur, que significa una imagen semitranspartente, es una pavada pero no lo sé :P

Responder
Gem@  

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

Responder
JMiur  

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

Responder
Graciela  

Muy bien joven una imagen opaca, ya me dedico a jugar están 'pipí cucú' :P

Responder
CGL  

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!

Responder
JMiur  

GRaciela: Juegue, nomás :D

Gracias por el comentario, CGL

Responder
Bonzu Pipinpadaloxicopolis III  

Bonito

Responder
GARABATO  

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

Responder
Garabato  

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.

Responder
JMiur  

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.

Responder
Manfenix  

Botones funcionando en blog de prueba y en mi blog principal:

blog de prueba

Avibert

Saludos JMiur, :)

Responder
GARABATO  

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?

Responder
Manfenix  

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

Responder
JMiur  

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

Responder
Gem@  

Pues vaya una gracia ¿no? y que suerte tiene entonces los que van a disfrutar las siguientes vidas!!

Responder
Garabato  

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!

Responder
JMiur  

Es nuestro destino, Gem@, nuestro karma :D

Responder
Manfenix  

El karma de unos cuantos...(que no somos pocos)... :P

Responder
Miguel  

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)

Responder
Miguel  

Por cierto ¿me podrias decir como creo un motor de busqueda como el que tienes tu ?

Responder
JMiur  

El buscador que uso es el que se puede agrregar en Diseño | Elementos de la página.

Responder
Miguel  

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!

Responder
JMiur  

Ah bien :D

Eso, puedes verlo en esta entrada.

Responder
LJK  

Uhm ahi mismo puedo agregar un enlace ?

Responder
JMiur  

Sí. en lugar de un texto colocas un enlace o eventualmente, en lugar de un DIV usas un enlace.

Responder
Adriana Zapata  

Excelente! Gracias

Responder
sebastian  

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.

Responder
JMiur  

Para eso, el lugar de usar :hover debes usar :active

Responder
Diego  

muy bueno, gracias

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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 ...

 
CERRAR