Notas con fieldset. Tipos, listado, combinaciones. Post it

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 aviso

Colocar 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 aviso

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