JMiur [E]

Usando técnicas simples y las posibilidades que da utilizar el formato de color RGBA() y algunas otras del CSS3, The ZURBlog muestra una forma de generar botones con relieve.

Sólo necesitamos una imagen que tiene una cierta tranasparencia y que usaremos de fondo llamada overlay.png y una serie de definiciones globales:
.button, .button:visited { /* botones genéricos */
background: #222 url(URL_overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #FFF;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor:pointer
}
.button:hover { /* el efecto hover */
background-color: #111
color: #FFF;
}
.button:active{  /* el efecto click */
top: 1px;
}

/* botones pequeños */
.small.button, .small.button:visited {
font-size: 11px ;
}

/* botones medianos */
.button, .button:visited,.medium.button, .medium.button:visited {
font-size: 13px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}

/* botones grandes */
.large.button, .large.button:visited {
font-size:14px;
padding: 8px 14px 9px;
}

/* botones extra grandes */
.super.button, .super.button:visited {
font-size: 34px;
padding: 8px 14px 9px;
}
Por útimo, definimos los colores, aquí algunos ejemplos:
.pink.button { background-color: #E22092; }
.pink.button:hover{ background-color: #C81E82; }

.green.button, .green.button:visited { background-color: #91BD09; }
.green.button:hover{ background-color: #749A02; }

.red.button, .red.button:visited { background-color: #E62727; }
.red.button:hover{ background-color: #CF2525; }

.orange.button, .orange.button:visited { background-color: #FF5C00; }
.orange.button:hover{ background-color: #D45500; }

.blue.button, .blue.button:visited { background-color: #2981E4; }
.blue.button:hover{ background-color: #2575CF; }

.yellow.button, .yellow.button:visited { background-color: #FFB515; }
.yellow.button:hover{ background-color: #FC9200; }
¿Cómo usarlos, agregando las clases a cualquier enlace:
<a href="#" class="small button orange"> botón naranja pequeño </a>
<a href="#" class="medium button blue"> botón azul mediano </a>
<a href="#" class="large button red"> botón rojo grande </a>
<a href="#" class="super button pink"> botón rosa exra grande </a>


26 comentarios:

Shuatas  

Muy buenos. Me gustó eso de que no usan imágenes.

Responder
Graciela  

Una maravilla de CSS, he quedado :O
Besos!

Responder
José GDF  

Bueno, quién dice botones sueltos, también dice menús completos... :)

Responder
José GDF  

Por cierto, ¿qué hace exactamente esa imagen, que aparentemente no tiene nada? ¿O no lo veo por mi navegador (Firefox 3.0.18)?

Responder
Dña. Urraca  

No se pero me parece mas facil generar un boton en cualquier servicio de los que hay y cargarlo como imagen, esta vez no veo la ventaja de hacerlo asi. ¿La hay y no la veo? :(

Responder
Maite  

Qué pasadaaaaaa!!!!! pero si me he hecho el menú con ésto!!! :D:D:D me ha encantado!!!! único inconveniente, que en IE queda soso, ni bordes redondeados ni sombras... siempre IE dando problemas.
He alucinado jajaja había cerrado ya la plantilla y no iba a hacer más cambios, justo venía a decirte que ya está preparada para subirla dentro de unos días, y me has incitado a hacer los botones jajaja cómo resistirme! Lo dicho, plantilla cerrada, mil gracias por todo.

Gra, que se te salen los ojos mimosita :D:D:D

Responder
Graciela  

Estoy a la espera Minimimo I de la plantilla :)

Los ojos, alucino sabiendo con CSS puedes lograr maravillas como estas, sin tener que recurrir al Photoshop que vos manejas bien, o a las herramientas online...no había pensado en un menú, mira que buena idea :) :D :P

Besos preciosa paso a buscarte mañana para la sesión de cine y pochoclos!

Responder
JMiur  

Botones, menús, cualquier enlace o cualquier cosa, en realidad :D Para jugar un rato.

José:
La imagen le da cierto "realce" es un PNG semitransparente con un degradado, casi invisible

Doña Urraca:
En realidad, esp es subjetivo y depende de cada usuario. Puedo decir que las técnicas CSS son más flexibles a la hora de editarlas, por ejemplo. Usando imágenes, deberían ser editadas y habría que hacerlas otra vez en caso de cambiar el texto, su tamaño o su color, por ejemplo. algo similar podría decirse si hablamos de tiempos de carga; el CSS es instantáneo pero, como dije al principio, todo es subjetivo.

Maite:
Es veradad, en IE las cosas se están tornando un poco primitivas :D Pero, bueno, es cuestión de buscar alguna forma que quede aceptable. No lea más hasta inaugurar la plantilla :D

Responder
Ikanus  

Hola Jmiur, mi consulta va por otro lado: Cuando hago una consulta en Google con el comando "site:" aparecen todas mis entradas incluso las últimas, pero en los resultados de búsqueda ya no aparecen ninguna. ¿Google me ha penalizado? ¿Que acciones podría tomar para solucionarlo? He leído que hay que chequear el sitio para ver que cumpla con las "directrices" que impone Google, pero no creo incumplir ninguna.

Responder
Anna Jorba Ricart  

Sr Miur....hace dias le expuse un problema en mi blog,pues no podia arrastrar y soltar gadgets en la pagina de diseño....comuniqué a Blogger y no me dieron respuesta,aunque en los foros habia gente con el mismo problema.......observé que era al actualizar el navegador de Mozilla Firefox...y tuve que volver a la versión anterior.
Pues bien...en esta última actualización del navegador Mozilla(3.5.8)...me vuelve a funcionar todo correctamente.
Quedé en decirle algo y por eso le escribo este comentario.Gracias por todo.
Un saludo.

Responder
JMiur  

Ikanus:
No, lo dudo mucho. Esas penalizaciones sólo suelen reflejarse en el PageRank de la página y no en los resultados del buscador. Si hubiera una falta grave, simplemente te cerrarían el blog. Por quñe ocurre eso es dificil de responder, puede ser que no haya palabras claves que se encuentren o tenga pocos enlaces, etc.

Anna:
Gracias por la información. Efectivamente, pasa en FF3.6 aunque también me han comentado que ocurre lo mismo en otros navegadores aunque de manera un poco aleatoria.

Responder
Deybi  

¡Sabroso! Me encanta esto. Una forma fácil y que de una vez puede cambiar totalmente nuestro diseño.

1000 x 1000.

Responder
Uve  

Hola!!

Tengo hecho algo similar en el blog de un amigo http://www.extrenos.org/, sin embargo he comprobado que los enlaces no funcionan... cuando lo empecé a implementar, probé con el primero y enlazaba perfectamente.

¿Puede ser por algún tipo de error en la plantilla o en ese espacio de la sidebar (sidebar-categorías) ?

saludos!

Responder
Maite  

... intenté no volver pero cuando no tengo sueño me vuelvo una desobediente... jajaja voy a ver si encuentro a Gra, que me debe un cine ;)

Responder
JMiur  

Uve:
No funciona de ese modo ya que ahí, los enlaces estan vacios, no tienen ni ancho ni alto ni texto ni imagen y por lo tanto no puede accederse a ellos. En lugar de colocar un DIV con las clases, la clase debe aplicarse al enlace mismo con el agregado de la propiedad display:block para que tengan ancho y alto.

Responder
NickJP!^xD  

Gracias Pana Quedo de Maravilla Para mi Web :D Muchas Gracias

Responder
Josep-Pepe  

No me funciona bien... Coje los colores predeterminados de la plantilla del blog. Alguna solucion?
El blog: todaymotor.blogspot.com

JMiur  

El único color que no vo correcto s el del texto ya que tienes definido un color genérico para los enlaces:

a:link {
color: #E06666;
text-decoration: none;
}

Así que deberás agregarle la palabra !important a la nueva regla:

.button, .button:visited {
.......
color: #FFFFFF !important;
}

Josep-Pepe  

En IE no funciona

JMiur  

Has escrito:
color: #FFF; !important;
y te dije que escribieras:
color: #FFF !important;

Responder
Josep-Pepe  

Donde se pueden instalar estas plantillas?
http://www.csstemplatesfree.org/

JMiur  

Son modelos de páginas web, no son plantillas para blogs.

Josep-Pepe  

Entonces si quisiera utilizar una tendría que contratar un hosting o un servicio web? Hay algún servicio web gratis que pueda subir este tipo de plantillas?

JMiur  

Hay muchos, no puedo recomentarte ninguno en especial. Incluso, podría subirlo a DropBox y también funcionaría porque son páginas estáticas.

Responder
Unknown  

Aun no hay solución para que funcionen correctamente en IE?

JMiur  

No existen problemas en IE, simplemnte, als cersiones inferiores a la 9 no tienen esas propeidades.

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