Hacker of the Web
Tus ideas en código!...y mas

Mensajes en cajas redondeadas

Este es un truco en CSS bastante bueno pues ya que se pueden hacer este tipo de efectos con imagenes y es bastante dificil subir imagenes, encontrar el color adecuado, para cambiar el color, etc..

Pero gracias a este código lo podemoas hacer sion imagenes, si tienen blogger podrás ya antes haber visto esto y si no es algo como esto

Tus cambios se han guardado correctamente

para obetner este efecto solo tienes que añadir al final de la plantilla CSS de blogger que esta antes de ]]></b:skin> el siguiente código:

.cajaredonda {
display:inline;
border:1px solid #ff0000;
background-color:#ffffff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
color:#cecece;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 4px;
}


una vez hecho esto, solo pones esto otro en donde quieras ver la caja de mensaje redonda:
<span class="cajaredonda">Tus cambios se han guardado correctamente</span>

Nota: Si quieres ver un mensaje de una linea, es decir un renglón o como lo llames, añades el código de arriba pero si el mensaje es mayor a una linea solo añades:

style="display:block;width:220px;" en :
<span class="cajaredonda">Tus cambios se han guardado correctamente</span>
Y quedará asi:
<span class="cajaredonda" style="display:block;width:220px;" >Tus cambios se han guardado correctamente</span>

si no haces esto y el texto es mayor a una linea se verá asi:
.cajaredonda {
display:inline;
border:1px solid #ff0000;
background-color:#ffffff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
color:#cecece;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 4px;
}
#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

3 comentarios !

Anónimo dijo...

Hola:

Excelente aporte pero el problema es que usas codigo propietario de mozilla esto quiere decir que no funcionara en otros exploradores como IE6 por ejemplo que no soporta todos los estandares seria mejor si pudieras publicar una mejor opcion un poco mas generica,

Unknown dijo...

Hola!! anónimo, estube trabajando acerca de lo que dijiste de las esquinas redondeadas para mas navegadores y lo he conseguido:

Redondear bordes sin imágenes II

gracias por tus comentarios.

SmileForYou dijo...

Hola, he visto en algunos blogs que las letras de la cajita van pasando, he echo lo que dijiste, y se me a quedado un recuadro rojo, y quiero que las letras se muevan! jajajaja


Página Principal
Arriba