Share
En este tutorial terminaremos nuestra aplicación web para que todo se vea perfecto y funcione bien en todos los tamaños de pantalla. La última vez, redondeamos el estilo de los cuadros de mensaje, dejando solo el contenido por hacer. ¿Nos sumergimos a la derecha? De acuerdo!
Es posible que deba ponerse al día con las partes anteriores de este tutorial, en cuyo caso:
.contenido del mensaje ancho: 100%; color: oscurecer ($ gris, 30%); Pantalla de @media y (min-width: $ break-two) width: 75%; flotar derecho; pantalla de @media y (min-width: $ break-three) width: 85%; pantalla de @media y (min-width: $ break-four) width: 75%;
Las declaraciones para contenido del mensaje asegúrese de que el ancho se comporte solo cuando el navegador cambie de tamaño. Necesitamos que sea 100% ancho para tamaños de pantalla pequeños, de modo que quede bien debajo de la imagen. Una vez que llegamos a nuestro $ break-two ancho entonces necesitamos flotar el contenido a la derecha y jalar el ancho ligeramente para compensar eso.
Los otros puntos de quiebre aquí solo se aseguran de que el ancho se amplíe muy bien en relación con el ancho del navegador, por lo que en una resolución al estilo de una tableta nuestra buzon de mensaje Todavía se apila verticalmente pero nuestra contenido del mensaje está flotando dentro, lo que significa que el 75% de ancho probablemente no sea lo suficientemente ancho. Regresamos al 75% de ancho una vez que llegamos a los tamaños de escritorio para tener en cuenta buzon de mensaje siendo flotado y más estrecho.
a color: $ verde; &: hover color: $ rojo; h3, p, div margen: 0; h3 font-family: $ title-font; tamaño de letra: 200%; peso de la fuente: 400; espacio entre letras: -0.02em; color: $ negro; p color: $ rojo; peso de la fuente: 600; div margin-top: $ margin; desbordamiento: oculto; -ms-texto-desbordamiento: puntos suspensivos; -o-texto-desbordamiento: puntos suspensivos; desbordamiento de texto: puntos suspensivos;
Los siguientes estilos aquí son muy simples. Solo estamos dando un enlace a $ verde color con un $ rojo coloque el estado y anule los márgenes establecidos en los elementos h3, p y div contenidos dentro de contenido del mensaje. Los estilos individuales para los elementos h3, p y div son un poco más sofisticados. los h3 está configurado para usar $ title-font y tiene algo espaciado de letras configurado para simplemente jalar el espaciado ligeramente para que coincida más estrechamente con el diseño. los div los estilos de etiquetas se tratan de mantener los contenidos contenidos, por lo que nos aseguramos de que rebosar es oculto y si hay algún desbordamiento mostramos una elipsis Para indicar que hay más texto. Este tipo de cosas se puede hacer con el código del lado del servidor (y probablemente lo sería), pero es bueno incluirlo aquí en el CSS para el propósito de este tutorial..
Guarda tu trabajo y dirígete al navegador ...
¡Eso se ve genial! Tenemos tres diseños ligeramente diferentes en marcha, todos los cuales están controlados por los estilos simples que aparecen arriba. Eso completa el CSS para el buzon de mensaje por lo tanto, todo lo que tenemos que hacer ahora es copiar el marcado cinco veces y cambiar el contenido según el diseño. Si esta aplicación funcionara de verdad, no tendríamos que hacer esto, ¡pero para este tutorial las necesidades deben hacerlo! Date cinco minutos para copiar, pegar y cambiar el código de cada caja.
Echemos otro vistazo rápido al navegador para comprobar que nuestros estilos funcionan perfectamente cuando tenemos más de uno. buzon de mensaje...
¡Hermoso! Nuestra aplicación web definitivamente está tomando forma ahora y nuestros cuadros de mensajes funcionan correctamente en todos los tamaños de navegador.
Hemos conquistado la mayor parte de nuestra aplicación web ahora, pero todavía queda una sección importante: la pie de página. Esta parte de nuestra aplicación es importante ya que alberga el lugar donde un usuario puede escribir / publicar su mensaje. Hay algunos aspectos bastante complicados para esto, así que comencemos!
Primero lo primero, escribamos el siguiente marcado en nuestro archivo index.html:
Hay algunas secciones de este pie de página. El área principal de enfoque es la forma en el medio que, aunque no necesariamente se necesita aquí, permitirá al usuario publicar su mensaje. los social-btns necesitará algunos estilos de cambio de diseño y todo el contenido del pie de página debe estar centrado en la pantalla. Empecemos por la parte superior y entremos directamente en el CSS ...
pie de página relleno: $ relleno * 4; text-align: center; fondo: $ blanco; h4 margin-top: 0px; familia de fuentes: $ title-font; tamaño de fuente: 26px; peso de la fuente: 400; color: $ darkgrey;
En primer lugar debemos establecer algunos relleno sobre el pie de página para empujar todo lo lejos de los bordes muy bien. Para que todo esté centrado en la pantalla simplemente configuramos texto alineado Propiedad al centro. Los estilos para el eslogan / encabezado aquí son bastante simples y son muy similares a lo que hemos hecho antes para un título. Vamos a ver esto en el navegador!
Es un buen comienzo, pero aún nos queda mucho camino por recorrer. Continuemos en nuestro archivo Sass..
.caja de conexiones ancho: 100%; margen: 0 auto; Pantalla de @media y (min-width: $ break-three) width: 525px; .connected-as, .connect-message background: lighten ($ gray, 4%);
Como muchos de nuestros elementos, el caja de conexión Debe ser 100% ancho para pantallas más pequeñas. A continuación, debe cambiar, en nuestra $ descanso tres punto, al ancho visto en el diseño que es 525px. A continuación, establecemos el color de fondo de la conectado como y mensaje de conexión a un color gris claro.
.conectado-como borde superior-izquierdo-radio: 5px; borde superior-derecho-radio: 5px; borde inferior: 1px sólido $ blanco; alineación de texto: izquierda; relleno: $ relleno / 2 $ relleno * 2; .connected-image ancho: 30px; altura: 30px; radio del borde: 50%; flotador izquierdo; margen derecho: $ margen / 2; span float: left; altura: 30px; línea de altura: 30px; color: $ darkgrey; .disconnect posición: absoluta; arriba: -10px; derecha: -10px; relleno: $ relleno / 2 $ relleno; margen superior: 3px; radio del borde: 20px; fondo: $ blanco; texto-decoración: ninguno; color: $ darkgrey; transformación de texto: mayúsculas; tamaño de letra: 80%; &: hover background: $ red; color: $ blanco; @media screen y (min-width: $ break-two) position: static; flotar derecho;
Esta parte justa de CSS es para la sección superior de nuestra caja de conexión. El primer paso es redondear la parte superior derecha e izquierda de conectado como. También queremos una ligera separación entre este cuadro y la sección a continuación, por lo que un simple 1px sólido $ blanco La frontera hará el truco muy bien. Por último, necesitamos algo de relleno, pero necesitamos más a la izquierda y a la derecha que a la parte superior e inferior para mantener las cosas limpias y ordenadas, simplemente usamos nuestro $ relleno variable y dividir por dos para la parte superior e inferior, y multiplicar por dos para la izquierda y la derecha. Este es un gran ejemplo de donde el cambio de nuestro valor variable mantendrá todo en buena proporción.
Las siguientes dos declaraciones controlan la imagen del perfil de Twitter de los usuarios conectados y su nombre de usuario. Para mantener las cosas como estándar, establecemos el ancho y el alto de la imagen en el CSS, por lo que sabemos que siempre será un cuadrado del tamaño correcto. Para hacer que aparezca como un círculo simplemente aplique un radio del borde del 50% a ello. Tanto la imagen de perfil como el nombre de usuario deben flotar a la izquierda y debemos darle un margen a @nombre de usuario para alejarlo de la imagen de perfil.
los desconectar botón tiene algunas cosas diferentes que suceden. En resoluciones de pantalla pequeña, necesitamos que este botón esté fuera del camino del otro texto dentro de este cuadro, por lo que decidí que una buena opción sería posicionarlo absolutamente por encima y más allá de su contenedor. Una posición de -10px para la parte superior y derecha está bien. Es posible que desee jugar con esto si cree que podría estar mejor ubicado. Los otros estilos aquí controlan el look con un simple flotar Estado añadiendo un bonito negrita $ rojo Color para enfatizar la acción de desconexión. La única capacidad de respuesta aquí hará que el botón vuelva al flujo de documentos y lo haga flotar a la derecha, de modo que quede enfrente de los detalles de Twitter. Esto sucederá para cualquier cosa en y por encima de nuestra $ break-two punto.
Guardar, guardar, guardar! Es hora de echar un vistazo de nuevo:
¡Luciendo bien! Estamos muy cerca de terminar esto ahora. El siguiente es el área de cuadro de mensaje.
.connect-message border-bottom-left-radius: 5px; borde inferior-derecho-radio: 5px; textarea border: none; fondo: transparente; ancho: 100%; altura: 130px; relleno: $ relleno * 2; -webkit-transition: box-shadow 0.4s easy; -moz-transición: caja-sombra 0.4s facilidad; -o-transición: caja-sombra 0.4s facilidad; -ms-transición: caja-sombra 0.4s facilidad; transición: caja-sombra 0.4s facilidad; &: foco esquema: ninguno; -webkit-box-shadow: recuadro 0px 0px 20px se oscurece ($ gris, 10%); box-shadow: recuadro 0px 0px 20px se oscurece ($ gris, 10%); -webkit-transition: box-shadow 0.4s easy; -moz-transición: caja-sombra 0.4s facilidad; -o-transición: caja-sombra 0.4s facilidad; -ms-transición: caja-sombra 0.4s facilidad; transición: caja-sombra 0.4s facilidad;
Este bloque debe colocarse después de la conectado como bloque, pero todavía dentro de la general pie de página declaraciones.
los mensaje de conexión La caja tiene esquinas redondeadas en la parte inferior izquierda y derecha para completar la apariencia de la contenedor general teniendo esquinas redondeadas. El área de texto en sí definitivamente necesita un poco de estilo ya que los valores predeterminados del navegador son bastante feos. Estos estilos son bastante simples, pero pueden ver que estamos agregando una Transición CSS para sombra de la caja. El diseño no mostró lo que un atención El estado debería verse así que decidí que una sombra sutil se desvaneciera en todo el interior de la caja. Luego se desvanece cuando se pierde el enfoque.
Vamos a verlo en acción.?
Creo que se ve bastante bien! La sombra de la caja puede no ser de tu agrado, así que juega con eso para obtener algo que consideres correcto.
.post-btn ancho: 100%; text-align: center; relleno: $ relleno * 2; margen superior: $ margen * 2; fondo: $ verde; color: $ blanco; peso de la fuente: 500; frontera: ninguna; radio del borde: 5px; -webkit-transición: toda la facilidad de 0.4s; -moz-transición: toda la facilidad de 0.4s; -o-transición: toda la facilidad de 0.4s; -ms-transición: toda la facilidad de 0.4s; transición: toda la facilidad de 0.4s; &: hover fondo: aclarar ($ verde, 10%); -webkit-transición: toda la facilidad de 0.4s; -moz-transición: toda la facilidad de 0.4s; -o-transición: toda la facilidad de 0.4s; -ms-transición: toda la facilidad de 0.4s; transición: toda la facilidad de 0.4s;
El todo importante Publicar 'Gracias' ¡botón! Estilos bastante simples aquí. El botón solo debe llenar el ancho del contenedor en todo momento. También debe alejarse un poco del área de mensajes, por lo que algunos margen superior nos ayuda aqui Tenemos otra declaración de transición, pero esta vez está configurada para todos con el fin de animar cada propiedad que tiene un cambio de valor para mantener todo sin problemas. Esto también significa que en el futuro podemos agregar otros estilos como un color Cambie al pasar el mouse y todo seguirá animado..
Guarde el archivo y eche otro vistazo:
Encantador. Esto es exactamente lo que queremos. Es hora de estilizar esos enlaces de redes sociales..
.botones sociales padding-left: 0px; margen superior: $ margen * 2; Pantalla @media y (ancho mínimo: $ break-three) padding: $ padding * 3 0 $ padding * 3 117px; margen superior: 0px; .social-btn padding: $ padding / 2 14px; ancho: 100%; bloqueo de pantalla; margen: $ margen / 2 0; radio del borde: 20px; text-align: center; color: $ blanco; texto-decoración: ninguno; transformación de texto: mayúsculas; tamaño de letra: 70%; @media screen y (min-width: $ break-three) float: left; margen: $ margen / 2; relleno: $ relleno / 2 $ relleno * 2; ancho: auto; .twitter background: # 00acee; &: hover background: lighten (# 00acee, 10%); .facebook background: # 3b5998; &: hover fondo: aclarar (# 3b5998, 10%);
Este código debe ir dentro del pie de página Bloque en nuestro archivo Sass. La idea con estos botones es que sean 100% anchos y apilados verticalmente en las resoluciones de dispositivos móviles / tabletas. Luego, a medida que avanza la escala al escritorio, deben coincidir con el diseño. La consulta de medios para el botones sociales involucró un poco de prueba y error para lograr un aspecto "centrado" en los tamaños de escritorio. El valor de 117px Para el relleno izquierdo fue el punto que encontré para dar el resultado deseado..
Cada social-btn Tiene algunos estilos simples para dar la apariencia de base. Luego especificamos los estilos para cada botón. En esta aplicación es solo un color de fondo diferencia. Tenga en cuenta que he usado el valor hexadecimal y no una variable Sass. No hay una razón real para esto, excepto que este es el único lugar donde se usan estos colores, por lo que cambiarlos no sería un gran problema. Si tuviéramos los enlaces sociales en otros lugares, definitivamente los habría configurado como variables. Ambos botones tienen una versión ligeramente más clara de sus fondos en flotar.
Antes de echar un vistazo, podemos poner nuestro último bloque de estilo en su lugar:
.derechos de autor font-size: 90%; color: $ darkgrey; Pantalla @media y (min-width: $ break-three) font-size: 100%
Como su nombre lo indica, este bloque controla nuestra pequeña etiqueta de Copyright en el pie de página. El tamaño de fuente responde a los cambios de tamaño del navegador aquí, mostrando el 100% en $ descanso tres.
Guarda y echa un vistazo a nuestra obra maestra.!
¡Bonito! Todo se ve increíble y eso casi envuelve nuestra interfaz de aplicación web de Navidad!
Este es un tema muy estacional, basado en un concepto de Navidad y Año Nuevo. Con solo un pequeño ajuste, podría cambiarlo fácilmente para satisfacer sus necesidades, por ejemplo:
Realmente espero que hayan disfrutado trabajando conmigo en esta aplicación web. Fue un proyecto divertido de construir y estoy feliz de haber podido compartir mis técnicas sobre cómo construirlo. El código fuente siempre está disponible a través de los enlaces de descarga, así que siéntase libre de indagar y hágame saber en los comentarios cualquier comentario que tenga, o si alguno de ustedes lo mejoraría de alguna manera..
Gracias a Tomas por el diseño inicial, y gracias por leer y seguir.
Accentsconagua