Ahora que generar gradientes y sombras usando CSS3 está al alcance de la mano, lo que nos ocurre es que suele ser complicado escribir las propiedades. Estas son algunas herrameintas online que pueden ayudar a hacer algo concreto o bien jugar y divertirse un rato.
En CSS3 Gradient Generator podemos ir seleccionamdo colores, mezclarlos y ver los resultados en un simple demo en tiempo real así como el código requerido para reproducir el efecto. Cuando nos guste, podemos copiarlo y usarlo en nuestros proyectos:
En CSS3 Gradient Generator podemos ir seleccionamdo colores, mezclarlos y ver los resultados en un simple demo en tiempo real así como el código requerido para reproducir el efecto. Cuando nos guste, podemos copiarlo y usarlo en nuestros proyectos:
-webkit-gradient(linear, right top, left top, color-stop(0.36, rgb(105,102,186)), color-stop(0.53, rgb(76,73,161)), color-stop(0.76, rgb(47,63,128)))
-moz-linear-gradient(right center, rgb(105,102,186) 36%, rgb(76,73,161) 53%, rgb(47,63,128) 76%)
Un Ejemplo
westciv.com/ tiene algo similar, una serie de herramientas que permiten generar los códigos CSS3 de diferentes propiedades:
- Gradientes aunque nos da el código por separado, seleccionamos Webkit o Firefox
- Sombras en textos que es una de las propiedades más difundidas
- Tranforms también nos da los códigos por separado
CSS3 Generator es muy simple de usar y también nos muestra los cambios en modo real y el código correspondiente que podemos copiar y pegar. Contiene herramientas para las propiedades border radius, box y text shadow, colores RGBA, @Font Face, box resize y box sizing, outline, etc.
CSS3 Please genera reglas y muestra los resultados de los cambios de manera dinámica; está bien desarrollado aunque la pagina es bastante oscura:
23 comentarios:
maravilha estas dicas!
Son muy buenas, Ariane, ayudan muchisimo porque algunas de estas propeidades son confusas.
Que buenooooo!!!!!!!!, muchas gracias :)
Genial!!!!!
Jmiur una pregunta descolgada del tema, suponte que deseo colocar una imagen en lugar de '¿quieres dejar un comentario? hay varios...'
Me he fijado en lo de Gem@, pero con tantos cambios en mi plantilla, no encuentro lo que ella facilita, no es para hoy, no es para mañana, solo para cuando tengas ese tiempo :P
:D Que ótimo!!! Utilíssimas!
Una maravilla, me los llevo a mi nube :)
Lamentablemente, no funciona en IE... eso es lo malo... Firefox no hay problema... Crhome qcreo que igual. Cuando los navegadores se podran de acuerdo para que estos estilos encagen en todos....
Son muy interesantes de verdad. Para guardar en los marcadores y tenerlos a mano.
Graciela:¿En que blog? No veo ese texto en Palomas.
jajaja copié el tuyo para darte idea de lo que deseo saber, bien espero hacerme entender: cuando entras a configuración, comentarios, puedes poner 'me escribes a, si el formulario incustrado no funciona...' esa partecita sobre la cajita de comentar, puede ser cambiada por una imagen, o en su defecto aplicarle html, css? :D
recien estoy entrando a la creacion de un blog x el momento estoy leyendo de todo ya estare x aqui con mis preguntas mil gracias x todo
Graciela:
Sí, eso es posible pero, ¿ por qué mejor no la colocas directamente en la plantilla así como está colocado el resto que dice "Me escribes: xxx@xxx.com ... Si deseas arriesgarte con el Formulario Incrustado" ?
No he probado si puede colocarse en esa parte de configuración, creo que sí, que es posible usar etiquetas HTML simples y luego, llegado el caso, se puede usar CSS porque eso que se agrega desde allí es lo que ves acá:
<h3 id="comment-post-message"></h3>
donde, aparentemente, ahora no hay nada.
Me suena que mi explciación ha sido hiper-confusa :$
Me haces reír jajaja, lo he entendido jajaja, o sea debo buscar el id que dejas, allí se puede cambiar el tipo de letra, el color?
No toco el formulario incrustado, ya quedó bello todo por ahí con tus consejos :D
Claro. Ahora, no veo ningún texto allí dentro pero, si lo hubiera, luego controlás eso con CSS:
#comment-post-message { .......... }
Bien, colocaré ahí el mensaje, luego te hablo :)
ring ring hola Jmiur buenas tardes-noche :)
Dentro de comment-post-message no me hace caso la plantilla, puede ser o estoy haciendo todo mal :S
Qué texto has puesto? es que no veo ninguno.
Al amrgen, si lo que querés es poner una imagen allí, en esa parte ¿por qué no ponerla junto con el resto del texto que ya tienes agregado a la plantilla?
En la plantilla 'Si eres de los que arriesgan comenta en el Formulario Incrustado...'
Ya me perdí un poco :$
Empecemos otra vez. En la parte de Configuración | Comentarios, en la parte de Mensaje del formulario de comentarios, sólo pueden agregarse algunas pocas etiquetas A B I no sé si alguna más.
En la plantilla, deberías ver esto:
<h3 id='comment-post-message'><data:postCommentMsg/></h3>
<p><data:blogCommentMessage/></p>
Eso de H3 es el titulo que probablemente, no tengas, normalmente, dice "Publicar un comentario en la entrada" lo otro, lo que está entre las etiquetas P, es el mensaje que colocas en la Configuración;
<data:blogCommentMessage/> se reemplaza es ese texto personal.
No es obligatorio, puedes quitar eso y ponerlo directamente en la plantilla:
<p> ....... aqui colocas lo que quieras ....... </p>
o, si quieres agregar una imagen y dejar el texto de la Configuración:
<p>
<img src='URL_imagen' />
<data:blogCommentMessage/>
</p>
Si se quiere, tabién se le puede agregar un ID a ese párrafo y de esa manera, controlar la forma en que se verá el contenido:
<p id='miMensaje'><data:blogCommentMessage/></p>
luego colcoas el CSS:
#miMensaje { ....... }
Okey trataré de hacer como me dices, tantas gracias! :P
Adelante y vemos que pasa :D
Muchas gracias, intentaré en los ratos libres :)
Buen sábado y besos!
Excelente, magnífica, preciosa la explicación TANTI GRACI!
Ahora a dar rienda suelta a mi imginación jajaja
Bien. Juegue un rato :D
¿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 ...