EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            Formatos de las fuentes
            Formatos de las fuentes en CSS y utilización de repositorios
            12/10/2019
            Prácticas CSS páginas web completas
            Herramientas útiles, tests de verificación CSS y referencias
            12/10/2019

            Estilos en formularios CSS, propiedades necesarias

            estilos en formularios

            Estilos CSS en formularios

            Tabla de contenidos

            • 16. Estilos CSS en formularios
            • 1. Formulario básico en CSS
            • 2. Propiedad box-sizing
            • 3. Propiedad resize

            En el tema anterior vimos las etiquetas HTML para la creación de formularios. Vamos a ver ahora cómo podemos dar estilo a esas etiquetas mediante CSS.

            16. Estilos CSS en formularios

            Gracias a los estilos podemos romper el diseño gris con líneas negras de los formularios y convertirlos en una parte más que se integra perfectamente en nuestro diseño web.

            Como sabemos, a la hora de crear nuestros formularios, seguiremos buenas prácticas CSS, no crearemos clases extra innecesarias y utilizaremos, en la medida de lo posible, selectores descendientes y etiquetas predefinidas.

            A las etiquetas de los formularios se les puede dar estilo CSS al igual que al resto de elementos de nuestro documento. Sin embargo, debemos conocer una serie de propiedades que nos ayuden a elaborar nuestros diseños de la forma más óptima posible.

            1. Formulario básico en CSS

            En el siguiente ejemplo puedes ver un formulario básico en CSS que permite ser visualizado en cualquier dispositivo:

            0

            En este ejemplo se han utilizado muchas de las propiedades que hemos visto a lo largo del curso. Por ejemplo, se han quitado los bordes con la propiedad «border:none», se le ha dado un padding a los inputs y textarea, y se han utilizado las propiedades «margin: 0 auto» para centrar el contenido y «width: 100%» para conseguir un diseño web responsive.

            Vamos a ver ahora ciertas propiedades que son de mucha utilidad en la creación de nuestros formularios.

            2. Propiedad box-sizing

            Por defecto en el modelo de cajas de CSS, el ancho y alto asignado a un elemento es aplicado solo al contenido de la caja del elemento. Si el elemento tiene algún borde (border) o relleno (padding), este es entonces añadido al ancho y alto del tamaño de la caja o contenedor. Esto significa que cuando se define el ancho y alto, se tiene que ajustar el valor para permitir cualquier borde o relleno que se pueda añadir.

            La propiedad box-sizing puede ser usada para ajustar el siguiente comportamiento:

            • content-box es el comportamiento CSS por defecto para el tamaño de la caja (box-sizing). Si se define el ancho de un elemento en 100 pixeles, la caja del contenido del elemento tendrá 100 pixeles de ancho, y el ancho de cualquier borde o relleno será añadido al ancho final desplegado.
            • border-box toma en cuenta cualquier valor que se especifique de borde o de relleno para el ancho o alto de un elemento. Es decir, si se define un elemento con un ancho de 100 pixeles. Esos 100 pixeles incluirán cualquier borde o relleno que se añada, y la caja de contenido se encogerá para absorber ese ancho extra. Esta propiedad es especialmente útil para redimensionar cualquier elemento.

            Vamos a ver un ejemplo: en el caso de los inputs, normalmente les añadimos un padding para darle algo de aire. Sin embargo, si después centramos el contenido y le dotamos de un «width:100%», este ancho no tendrá en cuenta el padding añadido al input y el elemento no se encontrará perfectamente redimensionado. Realiza la prueba quitando y añadiendo la propiedad «box-sizing: border-box» en el código del formulario básico creado en el punto 1.

            Como puedes ver en el código, se han añadido los prefijos para navegadores necesarios para esta nueva propiedad.

            -webkit-box-sizing: border-box;
            box-sizing: border-box; 

            3. Propiedad resize

            Por defecto, los elementos <textarea> permiten cambiar el tamaño por el usuario. Podemos anular este comportamiento utilizando la propiedad «resize:none».

            Valores: none | both | horizontal | vertical

            ValoresDescripción
            nonePermite cambiar el tamaño del elemento
            horizontalPermite cambiar el tamaño del elemento horizontalmente
            verticalPermite cambiar el tamaño del elemento verticalmente
            bothPermite cambiar el tamaño del elemento en horizontal y vertical

            Compartir

            UD3. CSS básico

            • 1. ¿Qué es CSS?
            • 2. ¿Cómo aplicar estilos CSS?
            • 3. Selectores
            • 4. Unidades de medida
            • 5. Colores y fondo
            • 6. Propiedades de texto
            • 7. Propiedades de las fuentes
            • 8. Propiedades de las listas
            • 9. Propiedades de las tablas
            • 10. Pseudo-clases y pseudo-elementos en CSS
            • 11. Prefijos CSS de los navegadores
            • 12. Buenas prácticas CSS
            • 13. Modelo de cajas: márgenes, relleno y bordes
            • 14. Posición y comportamiento de contenedores en CSS
            • 15. Formatos de las fuentes en CSS y utilización de repositorios
            • 16. Estilos en formularios CSS
            • 17. Herramientas útiles, test de verificación y referencias
            • 18. Resumen CSS
            • 19. Prácticas CSS
            • 20. Test de conocimientos CSS
            • 21. Propiedades Personalizadas CSS

            Diseño de Interfaces Web

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results