CSS: Formularios y galerías de imágenes

(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.