CSS: Formularios y galerías de imágenes

Name: CSS: Formularios y galerías de imágenes
Author: Cliff Brozo

En este curso, aprenderá a crear formularios y aplicarles estilo para generar interés en los usuarios y facilitar su uso. También examinará diferentes barras…

Preview the first lesson free — get full access to all 4 lessons.

Solicitar una demo Iniciar sesión

Curso: bajo demanda

(música optimista) Bienvenido de nuevo al curso de KnowledgeCity en hojas de estilo en cascada. Soy Cliff Brozo, soy tu profesor. Hoy veremos formularios y cómo aplicar estilos CSS para muchas cosas que encuentras en tu forma promedio. Primero, veremos la entrada de texto estándar. Ahora bien, podría ser una caja normal o podría estilizarse con algunos efectos 3D. Examinaremos los cuadros de lista desplegable, donde una vez más, podría ser una lista directa de elementos o podría estilizarse. Veremos cómo poner un calendario en nuestra pantalla, y cómo podemos estilizar los calendarios para que se vean mucho mejor. Haremos algo diferente con su casilla de verificación promedio, tal vez convertirlo en estrellas en lugar de cajas. Examinaremos lo que sucede cuando pasa el mouse sobre un elemento, cómo puede cambiar de color, y nos ocuparemos del factor de opacidad. Veremos algunas características de la interfaz de usuario, donde si coloco el cursor sobre un elemento, podría agrandarse. Puede cambiar de color. Podría darme alguna información o incluso puede que no me deje escribir nada. Finalmente, veremos algunos diseños receptivos, donde examinamos qué dispositivo está mirando nuestra página y actuar en consecuencia. Puedo hacerlo con varias hojas de estilo o puedo hacerlo con una consulta de pantalla multimedia, y cambia lo que ves según el ancho de tu dispositivo. Echemos un vistazo a estos formularios. Como lo hicimos en el pasado, Atom es nuestro software de diseño preferido, y lo que ves es una forma estilizada con algunas de las cosas que acabamos de ver. El HTML tiene un enlace a mi página de formularios CSS. Solo tengo uno, un pequeño logo, y obviamente recuerdas de tus conocimientos de HTML que las formas necesitan algún tipo de acción para hacer que algo suceda con los datos una vez que se ingresan. Creé una tabla para alinear todos mis artículos y hacerlos lucir más ordenados, y para cada uno de los datos de la tabla, He aplicado una clase llamada más grande. Y lo que hace es cuando pasas el cursor sobre un elemento, Tengo ese artículo creciendo un poco y he aplicado esa clase llamada más grande en cada celda de la tabla. Bajemos nuestro HTML. Para ingresar a los Estados, tenemos un cuadro de lista desplegable, que tiene todos los estados disponibles. Cuando hago clic en el elemento, todos los estados se enumeran junto con una barra de desplazamiento. Estos están fácilmente disponibles en la web, para que no tenga que escribir tanto. Especialmente es útil si está ingresando códigos de país. Bajando nuestra lista de elementos de formulario, Tengo una función de fecha, donde puedo seleccionar una fecha. Cuando llamo al calendario, aparecen los elementos, pero notarás que hay un círculo rojo en la pantalla, y eso me dice que no estoy permitido para escribir en eso. Tengo el mismo artículo para el estado. No quiero que la gente escriba en esa área y veremos cómo podemos controlar eso en nuestro código CSS. El calendario real está integrado directamente en HTML. Tengo casillas de verificación normales para un tipo de animal. que prefieras y un botón de envío que aumentaría cuando pasas el cursor sobre él. Bajando la página Tengo un área donde puedes escribir algunos comentarios, y sus comentarios se almacenan en esta área de texto, junto con barras de desplazamiento que le permiten para moverse hacia la izquierda y hacia la derecha, así como hacia arriba y hacia abajo. Una forma diferente de pedir a la gente su opinión es elegir estrellas. Amo esta clase. Sí, está bien, me gusta y espero que elijas It's awesome. Y todo lo que hice fue en CSS He cambiado las estrellas que van apareciendo. Uno de los problemas que utilizo es la opacidad, donde cuando coloco el cursor sobre un botón, y he hecho este botón realmente grande, el color cambia a un verde más oscuro. Finalmente, alrededor de un botón, y podría haber puesto esto alrededor de cualquiera de los objetos, Tengo algunas sombras, que hemos hecho en el pasado.

Intermedio Proveedor : Cliff Brozo 4 lecciones · 25m en Árabe, Alemán, Inglés, Español, Francés, Portugués, Chinese

Descripción del curso

En este curso, aprenderá a crear formularios y aplicarles estilo para generar interés en los usuarios y facilitar su uso. También examinará diferentes barras de progreso y cómo los controles deslizantes pueden mostrar a los usuarios dónde se encuentran en una página. También aprenderá a crear una galería de imágenes para mostrar fotografías en un formato visualmente atractivo para los usuarios, ya sea que estén en una computadora de escritorio, tableta o teléfono. Por último, verá cómo realizar ajustes en CSS sin realizar cambios en su sitio web.

Lo que aprenderás

Crear y estilizar formularios CSS para interés del usuario y facilidad de uso
Diseñar formularios con atención a la accesibilidad del usuario
Construir galerías de imágenes que muestren fotografías en escritorio, tableta y teléfono
Utilizar sliders y barras de progreso para mostrar a los usuarios dónde están en una página
Entender los componentes visuales de CSS
Hacer ajustes en CSS sin cambiar tu sitio web

Puntos clave

CSS puede usarse para crear y estilizar formularios que generen interés del usuario y facilidad de uso.
Diferentes barras de progreso y sliders pueden mostrar a los usuarios dónde están en una página.
Las galerías de imágenes pueden mostrar fotografías en un formato visualmente atractivo en escritorio, tableta y teléfono.
CSS te permite hacer ajustes sin hacer cambios a tu sitio web.

Preguntas frecuentes

¿Qué aprenderé en este curso?

Aprenderás a crear y estilizar formularios para interés del usuario y facilidad de uso, examinar barras de progreso y sliders que muestran a los usuarios dónde están en una página, crear galerías de imágenes para mostrar fotografías en escritorio, tableta o teléfono y hacer ajustes en CSS sin cambiar tu sitio web.

¿Qué temas cubre este curso?

El curso cubre formularios en dos lecciones (Forms Part 1 y Forms Part 2) y galerías de imágenes en dos lecciones (Image Galleries Part 1 e Image Galleries Part 2).

¿Qué habilidades ayuda a desarrollar este curso?

Este curso desarrolla habilidades en Códigos CSS, Marcos CSS, Formato Web de Diseño, Diseño de Formulario, CSS Orientado a Objetos y Diseño de Interfaz Web.

¿Funcionarán las galerías de imágenes en diferentes dispositivos?

Sí. Aprenderás a crear una galería de imágenes que muestre fotografías en un formato visualmente atractivo ya sea que los usuarios estén en un escritorio, tableta o teléfono.