Album de Imagenes

Temática

Queridos lectores en esta ocasión vengo a proponer una de las tantas soluciones que se le puede dar al momento de querer colocar en nuestro sitio web, varias imágenes una seguida de la otra, ya bien sea para una especie de album de imágenes o solo colocar una sección con 2 imágenes una seguida de la otra.

Problemática

La problemática que se suele presentar es que, las imágenes que disponemos para colocar en nuestro sitio, no sean exactamente de las mismas dimensiones, ocasionando que nuestro sitio se vea algo desorganizado al colocarlas. Podría verse algo como esto:

album imagenes

y lo que deseamos es que se vea esto (con las mismas imágenes sin importar las dimensiones que se tengan):

album imagenes

Mas organizado no?

Muchos cometen el error de asignarle por CSS valores a los atributos width y height de tal manera que las 2 imagenes tengan las mismas dimensiones. Tamaño error dado que puede distorsionar la imagen y el efecto seria devastador.

Hay otras soluciones que les suelen dar que son erradas pero no las comentaré todas (Cualquier cosa me comentan y les doy respuesta).

Solución

Para solucionar esto, vamos a crear unos DIV con el mismo tamaño donde irán las imágenes. Usaré las propiedades width y height del DIV, no de la imágen (etiqueta img) porque distorsionaría la imagen:

album imagenes

Hasta ahora tenemos 2 DIV con un ancho y un alto especifico. Como los 2 tienen la misma clase (box-imagen), estos tendrán el mismo tamaño.

Ahora insertamos las imágenes:album imagenes

Calma, hasta ahora no hemos solucionado. La clave está en cubrir todo el espacio de los DIV con la imagen correspondiente. Y por lógica podremos usar las propiedades de CSS llamadas, min-height y min-width. Con ellas haremos que las imágenes tengan un mínimo de ancho igual al 100% del ancho de su contenedor (DIV) y un minimo de height igual al 100% de su contenedor. Con esto obligamos a que las imágenes no tengan un tamaño menos a esto porque quedará un espacio vacío dependiendo de las dimensiones de la imagen:

album imagenes

Adicional a esto, para que las imágenes mantengan sus justas proporciones (no se distorsionen) debemos agregar un valor al width de la imagen y el valor de “auto” al height de la imagen. En este caso le daremos un width del 100% ya que necesitamos que cubra todo el ancho de su contenedor. También le colocaremos la propiedad overflow con el valor de “hidden” al contenedor de las imágenes , ya que las imágenes no necesariamente tendrán las mismas proporciones que el contenedor y provocará que las imágenes se salgan del área de su contenedor provocando la problemática del principio:

album imagenes

Hasta hace poco pensé que me había ganado el cielo con esto pero no, me resolvió en imágenes mas anchas que altas pero cuando coloqué una imagen mas alta que ancha, se echó a perder. Averiguando encontré una propiedad CSS llamada object-fit. Esta toma valores parecidos a la propiedad background-size (en un tiempo solucionaba esta temática con el background-size pero me di cuenta que el SEO de los sitios no actúa en imágenes que aparecen como background sino en las etiquetas IMG). El valor que necesitamos para nuestro caso es el “cover” que cubre la totalidad del contenedor sin distorsionar la imagen. Por último haremos que nuestras imágenes queden centradas tanto vertical como horizontal dentro de su contenedor. Usaremos el position con el valor “absolute” para nuestra imagen y position con el valor de “relative” para el contenedor, luego le diremos que nuestra imagen estará a 50% del lado izquerdo (left) y a 50% del techo (top) del contenedor. También aplicaremos la propiedad transform en las que usaremos las funciones de CSS llamadas translateX() y translateY(). En nuestro caso le daremos a translateX() el valor de -50% y a translateY() el valor de -50%:

album imagenes
Ya con esto quedaría solucionado nuestro tamaño de las imágenes sin distorsionar sus proporciones ni afectar el diseño y vistosidad de nuestro sitio.

Espero les sirva de algo. Se que el tema con respecto a este tipo de cosas es extenso. Trataré de extenderme en el tema con otros post. Agradecería comenten los problemas que se les presenten y trataremos de solucionarlos. Hasta la próxima.

Como aplicar mixins SASS en un formulario básico

Antes de empezar a explicar el contenido de este post les recomiendo tener buenos conocimientos acerca de los fundamentos básicos CSS Para comprender mejor este material. Si aun no tienen una buena base de CSS sigan practicando hasta que tengan buen dominio sobre el, así se les hará muchas mas fácil al momento de elegir un preprocesador para utilizar todos estos componentes y mixins.

Comencemos, En este articulo explicare como estructuro personalmente mi carpeta de estilos, como distribuyo los archivos y como utilizar los mixins asimismo como los implemento en los proyectos. Lo que mas me gusta de los mixins es que te ahorran mucho tiempo y son muy fácil de usar, ademas de los beneficios en cuanto a rendimiento de velocidad, cosa que cualquier desarrollador agradece

Estructura de archivos

estrutura de carpeta estilos

por lo general, siempre creo una carpeta con el nombre de ‘styles’ o ‘estilos’ en la cual guardo solo los archivos en los que yo trabaje.

dentro de la carpeta SASS estructuro los archivos de forma en la cual el archivo maestro el cual importa todos los parciales siempre este en la raíz, este se diferencia de los demás ya que el nombre del archivo no tiene el underscore por delante. por lo general, creo otra carpeta para los mixins así mantengo una mejor organización.

Archivo  _variables.sass

variables

 

Aprovechare este archivo para explicar algunas cosas básicas, SASS nos da la posibilidad de crear archivos mas pequeños los cual nombra como “parciales”. Se coloca un piso (underscore) y así SASS evita procesarlos. Los archivos parciales solo se procesan cuando son llamados por un archivo maestro.

Como ven en la imagen, el único archivo procesado es el maestro “app.sass” el cual hace el llamado a los parciales con la directiva @import.

MIXINS

mixins

Estos archivos son hojas de estilos reusables, cualquier cantidad de veces que los necesites, pueden contener reglas CSS , condiciones e incluso argumentos como si fueran funciones. a continuación, muestro los mixins que utilice para realizar un formulario de contacto básico utilizando el preprocesador SASS y sus funciones.

linear-gradient

body

En principio como se ve en la imagen, use la sintaxis de SASS para crear un mixin con el carácter “=” en lugar de @mixin en cual creo básicamente una función a la cual le paso argumentos en este caso uso 2 para definir los colores que se degradaran. La segunda función tiene una sola variación que es el angulo en como se repartirá la degradación.

buttons form-btn

El mixin de los botones es bastante útil ya que se usan mucho en las paginas web. Esto te ahorra mucho tiempo ya que solo tienes que cambiarle unas pocas propiedades para personalizarlo.

box-shadow

backform

Otra función de SASS es la interpolación, en este caso la use para crear una función de box-shadow. Como se ve en la imagen, la variable “$inset” por default esta vacía, y uso la interpolación para que escribe el contenido como un string en caso de que este vacía no me genere ningún error.

form-inputs inputs

Por ultimo, el mixin para las etiquetas tipo input. También bastante para darle uniformidad a la pagina de una forma sencilla.