Son notas, cajitas, recuadros que suelen usarse en posts, sidebars, gadgets para enmarcar un texto que uno quiera resaltar.

Nota simple enmarcada:

<fieldset> Colocar el texto que se desee </fieldset>

Colocar el texto que se desee


Si queremos colocar una Nota, Aviso el código es:

<fieldset>

<legend> Título de la nota o aviso </legend> Colocar el texto que se desee

</fieldset>


Título de la nota o aviso Colocar el texto que se desee


Se puede realizar una anotación con el texto que se desplace de un lado a otro:


<fieldset>

<legend> Título de la nota o aviso </legend>

<marquee> Colocar el texto que se desee y vemos como se mueve </marquee>

</fieldset>



Título de la nota o aviso
Colocar el texto que se desee y vemos como se mueve


Si prefieres que el texto se mueva pero la letra sea mayor te propongo:


<fieldset>

<legend> Título de la nota o aviso </legend>

<marquee> <span style="font-size:140%;"> Colocar el texto que se desee y vemos como se mueve con letras más grandes </span></marquee>

</fieldset>




Título de la nota o aviso
Colocar el texto que se desee y vemos como se mueve con letras más grandes


* font-size nos marca el tamaño de la letra.
* marquee es el atributo que provoca el movimiento de las letras o imágenes.

Si quieres colocar el título de aviso en negrita:


<fieldset>

<legend><strong> Nota o aviso en negrita </strong></legend>

<marquee> <span style="font-size:150%;"> Colocar el texto que se desee y vemos como se mueve con letras más grandes</span></marquee>

</fieldset>





Nota o aviso en negrita
Colocar el texto que se desee y vemos como se mueve con letras más grandes


Se pueden dar muchos estilos a estas notas o post it si jugamos un poco con marcadores sencillos.

- Mediante el atriburo style podemos hacer cosas como:


<fieldset style="border: 5px solid rgb(180, 4, 95); width: 500px;">

<legend>Nota o aviso</legend>Colocar el texto que se desee y que consideres interesante.

</fieldset>



Nota o avisoColocar el texto que se desee y que consideres interesante.


* border es el borde de la nota. En este caso le he dado un valor de 5 pero puede variarse más o menos a elección del gusto de cada cual.

* #B4045F es un color expresado de forma hexadecimal. En esta entrada puedes elegir el que más te guste.

* width: 500px; es el ancho de la nota. En este caso es de 500, pero se puede colocar en la medida que se desee.

Además de lo que ya sabemos se puede colocar un fondo de color. Esto se hace añadiendo el atributo background:



Colocar el texto que se desee y que consideres interesante.



<fieldset style="border: 3px solid rgb(180, 4, 95); background: #FBFBEF; repeat; width: 500px;">

Colocar el texto que se desee y que consideres interesante.

</fieldset>



También se puede agregar un fondo en forma de imagen

(Aviso: las notas que lleven un fondo de imagen podrían verse mal con la última versión de Internet Explorer. Sólo ocurre en los modelos que llevan "legend"; en el resto su visualización es perfecta.)

<fieldset style="border: 3px solid #B4045F; background: url(URL DE TU IMAGEN) repeat; width: 500px;">

<legend>Nota o aviso</legend>Colocar el texto que se desee y que consideres interesante.

</fieldset>


Nota o avisoColocar el texto que se desee y que consideres interesante.


Combinación cambiando los estilos de los textos:


Nota o Aviso Colocar el texto que se desee y que consideres interesante.



<fieldset style="border: 3px solid rgb(180, 4, 95); background: url(URL DE LA IMAGEN) repeat;" >
<legend><span style="font-weight: bold; color:rgb(255, 0, 0); ">Nota o Aviso </span></legend><span style="color: rgb(0,0,0);" ><span style="font-weight: bold;">Colocar el texto que se desee y que consideres interesante.</span></span>
</fieldset>



Colocar el texto que se desee y que consideres interesante.



<fieldset style="border: 3px solid rgb(180, 4, 95); background: url(URL DE LA IMAGEN) repeat;">

<span style="color: rgb(0, 0, 0);font-size:130%;" ><span style="font-weight: bold;">Colocar el texto que se desee y que consideres interesante.</span></span>

</fieldset>


Lo imprescindible es:

- No olvidar colocar <fieldset> </fieldset>

- Colocar un número al borde que dará el ancho: border: 3px

- Decidir un tipo de borde: solid, dotted, double, dashed, groove, ridge, inset, outset.

- Background con imagen background: url(URL DE LA IMAGEN) o un color.

- El texto que va dentro de las notas lo puedes formar sin romperte la cabeza directamente en el editor que tiene Blogger:




8 comentarios:

joselop44

Es una información muy útil que desconocía por completo.
Un abrazo

LadyMarian

Qué útil! Son cosas que no parecen tan difíciles (al menos algunas de ellas) y que te cambian totalmente el aspecto. Muy interesante!
Besos

Lhyn

Que entrada más interesante!!

Anónimo

Hola, la información me ha sido útil porque me hacía un lío entre los estilos del texto, de los bordes...
pero tengo una problema que aún no he solucionado: el tema es que tengo un panel no visible dentro del fieldset y no hay forma de que el fieldset se agrande cuando se hace visible y se haga más pequeño cuando el panel no esté visible. Se que se puede hacer porque lo he visto pero no sé cómo.
¿alguien me puede ayudar?

Lujo

Hola Anónimo,
En este momento por lo que explicas sólo se me ocurre que lo que comentas es a lo que se refieren como "efecto expando en una imagen", uno de los sistemas de efecto deslizande de los gadget que hace que aparezcan o no de distintas formas....
Si buscas en Google con esas palabras claves puede que esté la respuesta....
A ciegas no sé decir nada más.
Saludos.

Anónimo

Totalmente excelente! me ayudo mucho hace dias que buscaba esta info!

Lujo

Saludos Anónimo(-^o^-)

LUZ MARY P

Excelente muchas gracias

Publicar un comentario

(-^o^-) (^_-) (#^_^#) (ÖoÖ) (*^o^*) (>_<) ( ̄へ ̄)(;_・) (ô_Ó) (O_O) (ˇ~ˇ) (ToT)(Q____Q) ಠ_ಠ (。◕‿◕) [(--)]ZZzzz

- Si el comentario es anónimo hay muchas posibilidades que no se publique.

 


UP