JMiur [E]

css3.me es otro de esos sitios que nos ayudan a crear reglas de estilo, fundamentalmente, aquellas que suelen ser complejas de entender tales como sombras o gradientes.

Lo interesante de este es que incluye las necesarias para que funcione en versiones de Internet Explorer anteriores a la 9 siempre y cuando puedan ser "traducidas" a filtros.


Podemos jugar un rato e ir previsualizando los resultados hasta que nos decidamos por alguno y luego, basta hacer click en Get the code para que podamos copiarlo. Ver/Ocultar [+]

background-color:#ffffff;
border-width:2px;
border-color:transparent;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
/*IE DOES NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow:inset 0px 0px 20px #000000;
-webkit-box-shadow:inset 0px 0px 20px #000000;
box-shadow:inset 0px 0px 20px #000000;
/*Inner elements should not cover inner shadows*/
/*Chrome renders inset shadows incorrectly with border-radius*/
/*IE DOES NOT SUPPORT INSET SHADOWS*/
background: -moz-linear-gradient(left, #000000, #85a1ff);
background: -webkit-gradient(linear, left top, right top, from(#000000), to(#85a1ff));
background: -o-linear-gradient(left, #000000, #85a1ff);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#000000', endColorstr='#85a1ff');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#000000', endColorstr='#85a1ff')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background: linear-gradient(left, #000000, #85a1ff);
/*--IE9 DOES NOT SUPPORT GRADIENT BACKGROUNDS--*/
/*All filters must be placed together*/

Luego, podemos usarlo en cualquier tipo de regla, por ejemplo, en una clase:
.miejemplo {
....... y aquí pegamos el código .......
}
Obviamente, podemos editarlo u optimizarlo; por ejemplo, en este caso podríamos eliminar el borde, eliminar los prefijos de algunas propiedades que ya son innecesarios tales como -moz-border-radius, -webkit-border-radius, -moz-box-shadow o -webkit-box-shadow ya que los neuvos navegadoree aceptan las propiedades border-radius y box-shadow; etc.

Faltaría recordar que para que ciertas propiedades tengan efecto, las etiquetas donde son agregadas deben ser dimensionadas mediante width y height.

7 comentarios:

Gem@  

¡¡Que falta me hacía esto el otro día!!
Oye, las etiquetas relacionadas no furulan en tu postfooter :S

Responder
F!X  

CONSULTA:
Quisiera armar un blog con entradas que tengan "Leer Mas" con efecto deslizante, como el tuyo o el de CiudadBlogger, pero en el buscador no lo he encontrado. Como lo puedo hacer?
Como siempre, GRACIAS!!!

Responder
JMiur  

Gem@:
Es últil aunque hay que mirar bien cada cosa.
Lo de las etiquetas relacionadas ya está solucionado. Claro, si uno no pone etiqueta en la entrada: no funciona :-$

F!X:
El efecto se logra utilizando alguna librería o script que permita hacerlos y agregarlos con sencillez. Hay muchas que lo hacen, jQuery y Prototype por ejemplo. El que uso acá es ese último.

Las entradas resumidas son las explciadas en estos posts: 1 | 2 | 3

Responder
Jorge  

Hola JMiur te felicito por tu buen blog he aprendido mucho de ti ,tengo una preguntica y quiciera que me ayudaras por favor disculpa que no sea relacionada con este post pero necesito que me ayudes ,yo quiero optener un color picker asi como esta en esta pagina http://www.colorpicker.com/ o otra como quieras lo que pasa es que no se que codigo poner en otos lugares me da la opcion de descargar pero despues nose que es lo que debo hacer si por favor me pudieras ayudar con esto y si supieras el codigo completo cosa que sea ponerlo y ya me salga ,e intentado de muchas maneras pero nada ,gracias de antemano jorge

Responder
JMiur  

Jorge
El código de color es el que se muestra arriab de esa página donde dice # y luego un número; por ejemplo: #2DAD63 sería un color verde.

Responder
Jorge  

Hola JMiur disculpa que te prgunte otra ves lo de esos codigos yo lo se, en realidad lo que yo quiero es la tabla completa para ponerla en mi web cosa que cuando una persona entre en la web y necesita el codigo html de un color pues lo optenga alli mismo, si me explico? espero y me puedas ayudar muchas gracias por todo y disculpa por tantas molestias.jorge

Responder
JMiur  

Entiendo. Para eso, ecesitas algún script que los cree. Acá hay una lista de algunos:

1 | 2 | 3 | 4 | 5 | 6

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