Esto no es para quienes les gusta mantener el código minimizado. Son decenas de líneas pero nuestra las posibilidades del CSS3.
BonBon Sweet CSS3 Buttons está pensado para poder crear botones sofisticados pero no sé muy bien en qué navegador han pensado. En Internet Explroer no se ve nada (claro), en Firefox se muestran bien pero sin animaciones y en Chrome, aunque se supone que fue esta optimizado para ese navegador, se ven fondos grises indeseables. De todas maneras, es un buen intento y puede servir para aprender un poco.
No es difícil de usar, basta copiar y pegar el estilo del archivo buttons.css que se encuentra dentro del ZIP que podemos descargar en la página del autor y allí, cambiar la URL de una imagen que se utiliza como fondo transparente, llamada noise.png que también está junto al resto del demo.
Para aplicarlo, basta usar una clase CSS a cualquier enlace; por ejemplo:
BonBon Sweet CSS3 Buttons está pensado para poder crear botones sofisticados pero no sé muy bien en qué navegador han pensado. En Internet Explroer no se ve nada (claro), en Firefox se muestran bien pero sin animaciones y en Chrome, aunque se supone que fue esta optimizado para ese navegador, se ven fondos grises indeseables. De todas maneras, es un buen intento y puede servir para aprender un poco.
No es difícil de usar, basta copiar y pegar el estilo del archivo buttons.css que se encuentra dentro del ZIP que podemos descargar en la página del autor y allí, cambiar la URL de una imagen que se utiliza como fondo transparente, llamada noise.png que también está junto al resto del demo.
Para aplicarlo, basta usar una clase CSS a cualquier enlace; por ejemplo:
<a href="la_URL" class="button"> el texto </a>Eso crearía el botón más simple al que podemos agregarle más clases con diferentes opciones; por ejemplo, el color se define con cinco clases: orange, pink, blue, green, transparent así que si puesiéramos esto, veríamos un botón de color azul:
<a href="la_URL" class="button blue"> el texto </a>Lo mismo podemos hacer con el tipo de fondo, podemos seleecionar glossy o glass. Simplemente las agregamos, separándolas con un espacio y en cualquier orden:
<a href="la_URL" class="button blue glossy"> el texto </a>El tamaño dependerá del texto pero podemos forzar dos tamaños extras usando xs si queremos que sea más pequeño o xl si queremos que sea más grande:
<a href="la_URL" class="button blue xl glossy"> el texto </a>La última clase posible define la forma: round, skew, brackets, oval, shield, back, knife, drop, morph y una más llamada icon mostrará el botón pero sin texto:
<a href="la_URL" class="button blue xl skew glossy"> el texto </a>Lo interesante es que es posible agregarle íconos por medio de un atributo especial llamado data-icon donde podríamos colocar cualquier carácter Unicode:
<a href="la_URL" class="button blue xl round" data-icon="►"> el texto </a>Un lindo juguete para pasar el rato.
15 comentarios:
Oh! lindos botones, hace mucho que no comento, como estas JMiur? Gracias por los botones, si me hacen falta, vengo y tomo alguno :D
Muy buenos botones, pero me gusta más el "Orange morph xl glossy", toma una forma diferente al pasar el mouse por ese botón.
Saludos!
Que bonitos botones JM!! Yo si los veo con animaciones en FireFox, se unden, cambian de formato y color... que es lo que decís que no se ve? Será por Linux que los veo animados? O soy yo que me estoy durmiendo y veo visiones :O
Un poquito engorroso el hacerlos me parece, pero están bien lindos :D
pd: no sale el enlace para suscribirse al comentario... me vine al viejisimo editor... :o Los chicos de Blogger jugando otra vez? :S
Me gusta mucho. El truco del data-icon está espectacular :D
Te cuento que estuve largo rato toda la madrugada dándole vuelta al asunto de los fondos grises esos en Chrome porque me llamó mucho la atención.
Como mi conocimiento es muy limitado, después juguetear y cambiar montones de cosas me di cuenta que destripar semejante código sería una locura :$ Pero supuse que que tenía que ver con los -webkit y esas cosas.
En Safari (para Windows, que también usa WebKit) se ve perfecto. Sólo se ve así con los fondos grises en las versiones para Windows y Linux de Chrome.
Y justo ahora acabo de averiguar el por qué: En Chromium/Chrome se debe a un "bug" en el cual al usar inset en -webkit-box-shadow cuando está presente border-radius, el box-shadow se renderiza afuera del borde en vez de adentro como se supone debería.
Dicen es algo que tiene que ver con la librería encargada de renderizar los gráficos 2D en Chrome para Windows y Linux (llamado Skia), en Mac usan otra (CoreGraphics).
Por ejemplo, un div usando esto:
.loquesea {
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
background-color: #000;
width: 250px;
height: 120px;
-webkit-box-shadow: inset 0px 0px 30px #00FF00;
-moz-box-shadow: inset 0px 0px 30px #00FF00; }
en Firefox 3.6 y en Chromium/Chrome 9 se ve así :o
Y bueno, yo creo que la respuesta a "en qué navegador han pensado" sería: Safari o Chrome pero para Mac :(
Pero eso sí, como juguete está buenísimo, muchas cosas se pueden sacar de él :P
Decirte que están bellísimos, aunque je ne compri pas.
Muy chulos los botones, si utilizo alguno te lo haré saber. Gracias por compartir.
Estuve viendo el "morphing button" de la página y veo que trabaja con las animaciones directas del CSS. La que le da el efecto es "-transition" donde elejimos si va de adentro hacia afuera, de arriba hacia abajo, etc... mi pregunta es, no conoces de la propiedad "-animation", porque justo estoy trabajando sobre ella, y a pesar de que he buscado conosco lo básico (realmente lo básico), gracias y disculpa las molestias ;)
Gran entretenimiento y el resultado espectacular :)
k_nelita:
Si tienes la posibilidad de usar Chorme, allí se verá que la animación es aún más sofisticada. Si, sin duda es engorroso :D
Odomera:
Eso de data-icon es lo mejor. Creo que podría usarse para otras cosas.
Yo tampoco comprendía por qué pasaba eso en Chrome así que eso que has averiguado me deja más tranquilo porque llegué a pensar que el error estaba en mi navegador.
Carlitox en la web:
Las propiedades para animar sólo funcionarán en Safari y Chrome así que por ahora no habrá nada al respecto.
Muy bueno tu blog....enhorabuena
www.vivirsencillamente.com
JMiur
ola buena ayuda que das..
ahh...disculpa que me desvie siempre del tema
que contiene el post ja ja ..
pero un dia estaba viendo algunos post que tienes
del 2007 --y encontre este
http://vagabundia.blogspot.com/2007/07/reproductores-mp3-1.html
el segundo reproductor del que hablas en ese post...pss lo puse en 4 post de mi blog..
http://bboystuart.blogspot.com/
y pss el dia que los puse se escuchavan de maravilla los 4 ..pero al otro dia ya no terminaba de cargar ninguno ..
que crees que sea..?
ahh y en una pagina ..encontre algo que decia que para poner mas de un reproductor se tenia que cambiar audioplayer1 ...y pss yo le puse audioplayer4 ..por que son 4 los que tenia pero aun no funciona ..
espero me puedas ayudar ..graciasssss
huy estan muy interezantes estos botones el que mas me llama la atencion es el Orenge morph xl glossy su efecto desde firefux se ve muy bien aun no se si aplique alguno por que luego se carga mucho la plantilla y eso no es lo logico :D
stuart:
Revisa los MP3s porque el reproductor bien, sin embarlo, los archivos MP3s son erróneos ya que apuntan a una página:
http://barbados.plunder.com/$-RIec0MqC8CxFe6sXCuk8f64gthkijTT/399f337b27/?/file.mp3
en lugar de a un archivo:
http://barbados.plunder.com/x/$__Icf1tke60tEYYfRdK0QMCia1SdZwAm/399f337b27/?/Lil%20Wayne%20Feat%20T-Pain%20-%20Talk%20That.mp3
Tambien quita ese script donde cargas un SWF es un error y no sirve para nada:
<script language='JavaScript' src='http://img364.imageshack.us/img364/8927/wpaudioplayer.swf'></script>
JMiur
gracias por tu ayuda..
bueno como lo sospechava que eso de
andar robando codigos es malo ja ja..
ahhh donde podria subir los archivo
script language='JavaScript'
y donde los MP3s
.......
Geniales recursos, leo tu blog hace meses, pero nunca había comentado, es genial todo lo que podemos hacer con CSS3, ahora es mucho más con HTML5. Gracias, buena suerte.
¿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 ...