JMiur [E]

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:

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

Ariane  

maravilha estas dicas!

Responder
JMiur  

Son muy buenas, Ariane, ayudan muchisimo porque algunas de estas propeidades son confusas.

Responder
La hormiguita  

Que buenooooo!!!!!!!!, muchas gracias :)
Genial!!!!!

Responder
Graciela  

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

Responder
MamaNunes  

:D Que ótimo!!! Utilíssimas!

Responder
Gem@  

Una maravilla, me los llevo a mi nube :)

Responder
JORGE  

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

Responder
JMiur  

Son muy interesantes de verdad. Para guardar en los marcadores y tenerlos a mano.

Graciela:¿En que blog? No veo ese texto en Palomas.

Responder
Graciela  

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

Responder
tano2674  

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

Responder
JMiur  

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

Responder
Graciela  

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

Responder
JMiur  

Claro. Ahora, no veo ningún texto allí dentro pero, si lo hubiera, luego controlás eso con CSS:

#comment-post-message { .......... }

Responder
Graciela  

Bien, colocaré ahí el mensaje, luego te hablo :)

Responder
Graciela  

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

Responder
JMiur  

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?

Responder
Graciela  

En la plantilla 'Si eres de los que arriesgan comenta en el Formulario Incrustado...'

Responder
JMiur  

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

Responder
Graciela  

Okey trataré de hacer como me dices, tantas gracias! :P

Responder
JMiur  

Adelante y vemos que pasa :D

Responder
Graciela  

Muchas gracias, intentaré en los ratos libres :)

Buen sábado y besos!

Responder
Graciela  

Excelente, magnífica, preciosa la explicación TANTI GRACI!
Ahora a dar rienda suelta a mi imginación jajaja

Responder
JMiur  

Bien. Juegue un rato :D

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