Realizar notas con las etiquetas fieldset y legend

Publicado por: ★★★★★ Oliver ★★★★★ en: HTML -

Las etiquetas <fieldset> y <legend> son utiles para la creación de recuadros sencillos que suelen usarse para enmarcar una nota o un texto que querramos resaltar.

Por ejemplo con la etiqueta <fieldset> obtenemos:

Aquí el texto que quieres enmarcar

Ahora fusionando la etiqueta <fieldset> con <legend> obtenemos estos ejemplos:

TituloAquí el texto que quieres enmarcar

Código del primer ejemplo:

<!-- Recuadro en general -->
<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: left; width: 500px; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
Aquí el texto que quieres enmarcar 
</fieldset>

Código del segundo ejemplo:

<!-- Recuadro en general -->
<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: left; width: 500px; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
<!-- Titulo -->
<legend align='left' style='background-color: #EEE; color: #FF0000; font-weight: bold; text-align: center; width: 100px; border-radius: 10px; box-shadow: 2px 2px #AAA;'>Titulo</legend>
<!-- Fin del titulo -->
Aquí el texto que quieres enmarcar 
</fieldset>

Recuadro en general y titulo:

Alineación del titulo

Color de fondo

Color de texto

Texto en negrita

Alineación de texto

Ancho

Borde redondeado

Sombra

Son sencillos pero ojala y te sean útiles estos ejemplos:

Aquí el texto que quieres enmarcar

Códigos:

<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: left; width: 500px; border-right:2px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
Aquí el texto que quieres enmarcar 
</fieldset>

<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: center; width: 500px; border-left:2px solid #FF0000; border-right:2px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
Aquí el texto que quieres enmarcar 
</fieldset>

<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: right; width: 500px; border-left:2px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
Aquí el texto que quieres enmarcar 
</fieldset>

TituloAquí el texto que quieres enmarcar

Códigos:

<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: left; width: 500px; border-left:2px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
<legend align='right' style='background-color: #EEE; color: #FF0000; font-weight: bold; text-align: center; width: 100px; border-bottom:1px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>Titulo</legend>Aquí el texto que quieres enmarcar</fieldset>

<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: center; width: 500px; border-left:2px solid #FF0000; border-right:2px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
<legend align='center' style='background-color: #EEE; color: #FF0000; font-weight: bold; text-align: center; width: 100px; border-bottom:1px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>Titulo</legend>Aquí el texto que quieres enmarcar</fieldset>

<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: right; width: 500px; border-right:2px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
<legend align='left' style='background-color: #EEE; color: #FF0000; font-weight: bold; text-align: center; width: 100px; border-bottom:1px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>Titulo</legend>Aquí el texto que quieres enmarcar</fieldset>

Aquí el texto que quieres enmarcar

Códigos:

<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: left; width: 500px; border:2px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
Aquí el texto que quieres enmarcar 
</fieldset>

<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: center; width: 500px; border:2px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
Aquí el texto que quieres enmarcar 
</fieldset>

<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: right; width: 500px; border:2px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
Aquí el texto que quieres enmarcar 
</fieldset>

TituloAquí el texto que quieres enmarcar

Códigos:

<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: left; width: 500px; border:2px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
<legend align='left' style='background-color: #EEE; color: #FF0000; font-weight: bold; text-align: center; width: 100px; border:1px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>Titulo</legend>Aquí el texto que quieres enmarcar</fieldset>

<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: center; width: 500px; border:2px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
<legend align='center' style='background-color: #EEE; color: #FF0000; font-weight: bold; text-align: center; width: 100px; border:1px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>Titulo</legend>Aquí el texto que quieres enmarcar</fieldset>

<fieldset style='background-color: #EEE; color: #FFCC00; font-weight: bold; text-align: right; width: 500px; border:2px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>
<legend align='right' style='background-color: #EEE; color: #FF0000; font-weight: bold; text-align: center; width: 100px; border:1px solid #FF0000; border-radius: 10px; box-shadow: 2px 2px #AAA;'>Titulo</legend>Aquí el texto que quieres enmarcar</fieldset>

Nos vemos en la próxima entrada.