TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

Tutorial de cuadro de texto CSS

117

Los cuadros de texto se utilizan para mostrar diferentes tipos de contenido como mensajes de información, menús, widgets sociales, comillas en bloque, etc. Hasta donde marcamos, ningún tema por defecto ofrece cuadros de texto personalizables y debe crear los suyos propios para satisfacer sus necesidades. En este artículo crearemos diferentes tipos de cuadros de texto para diferentes propósitos y puede copiar y pegar el código en su sitio para agregar el widget.

Cuadro de texto en línea

Cuando desee crear solo uno o dos cuadros de texto, la forma recomendada es usar CSS en línea a nivel de elemento en lugar de agregar CSS a nivel de sitio. A continuación se muestra un código de ejemplo para convertir un párrafo en un cuadro con fondo.

<p align=justify style="background-color:#02f3e5; border-radius:4px; font-size:16px; padding:15px; margin:5px;"><b> This is a Sample Textbox</b> </p>

Simplemente puede agregar y pegar el código en cualquier parte del cuerpo de su página y se verá a continuación en el sitio publicado:

Este es un cuadro de texto de muestra con color de fondo agregado usando CSS en línea. Esta es la forma más sencilla de agregar cuadros de texto a su sitio.

Puede personalizar el color de fondo y los atributos de fuente para alinear el cuadro en su sitio.

Cuadros de texto como mensajes de información

Los mensajes de información son útiles para mostrar diferentes estilos de mensajes a su audiencia, como advertencia, alerta, anuncio, peligro, etc. Usamos íconos de fuentes increíbles para agregar íconos delante del texto y el CSS para el cuadro de mensaje de información se muestra a continuación:

<link rel="stylesheet" href="https://www.webnots.com/resources/font-awesome/css/font-awesome.min.css"> .webnots-notification-box { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: #ffffff; font-family: verdana, 'open sans', sans-serif; margin-bottom: 25px; padding: 10px 14px 10px 44px; position: relative; box-shadow: 0px 1px 5px #999; } .webnots-notification-box:before { font-family: FontAwesome; font-size: 21px; left: 14px; position: absolute; } .webnots-information { background-color: #3498db; } .webnots-information:before { content: "f129"; margin-left: 4px; } .webnots-question { background-color: #f1c40f; } .webnots-question:before { content: "f128"; margin-left: 2px; } .webnots-tip { background-color: #16a085; } .webnots-tip:before { content: "f0eb"; margin-left: 2px; }

El código HTML para el cuadro de mensaje de información es el siguiente:

<div class="webnots-information webnots-notification-box"> This is the info box - You can input as much or as little information! </div> <div class="webnots-question webnots-notification-box"> This is the help box - You can input as much or as little information! </div> <div class="webnots-tip webnots-notification-box"> This is the tip box - You can input as much or as little information! </div>

Puede agregar diferentes tipos de mensajes agregando el ícono requerido y a continuación se muestran algunos de los ejemplos de cuadros de mensajes de información:

Este es el cuadro de información: ¡puede ingresar tanta o poca información!

Este es el cuadro de ayuda: ¡puede ingresar tanta o poca información!

Este es el cuadro de sugerencias: ¡puede ingresar tanta o poca información!

Este es el cuadro de aviso: ¡puede ingresar tanta o poca información!

Este es el cuadro de éxito: ¡puede ingresar tanta o poca información!

Este es el cuadro de peligro: ¡puede ingresar tanta o poca información!

Este es el cuadro de advertencia: ¡puede ingresar tanta o poca información!

Obtenga más información sobre cómo crear cuadros de mensajes de notificación.

Cotizaciones en bloque con cuadro de texto

Las citas en bloque de su sitio se pueden decorar con cuadros de texto para que se vea atractivo y hermoso en el sitio. A continuación se muestra un ejemplo de cómo personalizar las citas en bloque con CSS:

blockquote { font-style:italic; line-height:32px; font-size:20px; color:#fff; background: #3F51B5; margin:10px; padding: 15px 20px 15px 20px; border-radius: 5px; } blockquote:before, blockquote:after { position: relative; vertical-align: middle; font-family: 'Playfair Display', serif; font-size: 56px; font-weight: 700; line-height: 0; color: #FBC02D; } blockquote:before { left: -5px; content: '201C'; } blockquote:after { content: '201D'; }

El HTML debería ser como el siguiente:

<blockquote> This is block quote element customized with CSS text box properties. You can customize more as you need... </blockquote>

Al ajustar el color de fondo y las comillas, puede obtener resultados como los siguientes:

Este es un elemento de cotización en bloque personalizado con propiedades de cuadro de texto CSS. Puede personalizar más según lo necesite …

Este es un elemento de cotización en bloque personalizado con propiedades de cuadro de texto CSS. Puede personalizar más según lo necesite …

Este es un elemento de cotización en bloque personalizado con propiedades de cuadro de texto CSS. Puede personalizar más según lo necesite …

Obtenga más información sobre cómo crear cotizaciones de bloque de estilo bootstrap personalizadas para su sitio.

Cajas de menú

Los cuadros de texto se pueden usar para mostrar menús o un contenido listado para ahorrar mucho espacio en su sitio. Aquí mostramos dos cuadros de este tipo como básicos, de hecho, puede hacer mucho más.

CSS para el cuadro de menú 1:

.container-box { width: 300px; padding: 20px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); } .block { display: block; width: 100%; padding-right: 0; padding-left: 0; background-color: #5cb85c; } .item-list { display: inline-block; padding: 6px 12px; margin-bottom: 5px; font-size: 20px; font-weight: 600; line-height: 28px; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 4px; color: lightyellow; }

HTML para el cuadro de menú 1:

<div class="container-box"> <button class="item-list block"> Help </button> <button class="item-list block"> Help </button> <button class="item-list block"> Help </button> <button class="item-list block"> Help </button> <button class="item-list block"> Help </button> <button class="item-list block"> Help </button> </div>

El cuadro de menú 1 será como el siguiente en el sitio publicado:

CSS para el cuadro de menú 2:

.box-column { width: 350px; border: 1px groove; padding: 5px; } .color-box { padding: 0; margin: 0; list-style: none; } .color-box li { color: #fff; padding: 10px 10px 10px 15px; background-color: brown; margin-bottom: 3px; font-size: 26px; }

HTML para el cuadro de menú 2:

<div class="box-column"> <h3>Opening Hours</h3> <ul class="color-box"> <li>Breakfast: 8AM - 11AM</li> <li>Grill Menu: 12AM - 12PM</li> <li>Live Music: 8AM - 11AM</li> </ul> </div>

El cuadro de menú 2 se verá a continuación:

Horario de apertura

  • Desayuno: 8AM – 11AM
  • Menú Grill: 12 a. M. – 12 p. M.
  • Música en vivo: 8AM – 11AM

Conclusión:

Existen numerosas posibilidades de crear cuadros de texto con CSS simple. Los anteriores son solo algunos ejemplos y puede personalizar el fondo, los bordes, los colores y el texto según lo necesite. Puede jugar con estos ejemplos básicos y crear más cuadros de texto personalizados para sus necesidades.

Fuente de grabación: www.webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More