Categoría: CSS

Publicado el

Insertar una imagen responsive

Una cuestión muy importante en CSS, sobre todo en tiempos de mobile-first, es poder insertar una imagen responsive, capaz de verse bien en cualquier dispositivo, y esto adquiere mayor importancia cuando son imágenes de fondo.

Para hacerlo de modo exitoso es necesaria la propiedad background-size de CSS, la cual asimila  el valor cover, que es el encargado de decir escale el alto y ancho de la imagen de forma automática y proporcional de acuerdo a la ventana de visualización o viewport de que se trate.

Por supuesto que varia según el tamaño de la pantalla, si para pantallas grandes tipo PC, o televisiones,  una imagen con un tamaño de 5500x3600px es lo más adecuado, sin embargo no es lo recomendable para dispositivos más pequeños, como móviles, por tanto la opción de usar dos imágenes según el tamaño del display es útil y fácil de conseguir.

El uso de una imagen para una para dispositivos móviles y otra para equipos de más  alta resolución,  es una practica que ayuda mucho, teniendo en cuenta que queremos evitar que la imagen se pixele cuando se agrande, para cubrir el tamaño de la ventana del navegador, de lo que se trata es de hallar el tamaño adecuado, según nuestras necesidades

Para escribir la propiedad en el css, recordando que css es una hoja de cascada, por tanto las ordenes llevan un orden dado, nuestro código debería ser aproximadamente este: 

// indicamos la ubicación de la imagen  

background-image: url(images/background-picture.jpg);

//centramos la imagen vertical y horizontalmente */

background-position: center center;

//evitamos que el navegador repita la imagen para llenar el espacio */

background-repeat: no-repeat;


//dejamos la imagen fija de modo que no cambie si cambia la ventana del navegador, además, rescalandose  

background-attachment: fixed;


// llamamos a la propiedad cover para indicar que cubrirá todo el ancho 
background-size: cover;

//garantizamos que si hay un error al cargar o demora se muestre un color mientras tanto

background-color: #66999;

este código puedes escribirlo o verlo escrito también en este formato

background: #66999 url(background-photo.jpg) center center cover no-repeat fixed;

Y listo, esto es todo.

Espero modestamente que este artículo, sirva de ayuda a alguien.

Gracias.

Subir montañas hermana hombres……

Publicado el

Propiedad Background

La propiedad Background CSS Una propiedad usada a menudo en css. Una de las más comunes es  background-image, que se encarga de mostrar la imagen de fondo de un elemento.

background asimila solo un valor y es uno de estos tres, URL, none o inherit, su valor inicial es none, y no se hereda

 La imagen que muestra se coloca en el area  que ocupan el contenido  del elemento  hasta copar todo, hasta el borde.

En el caso de que se importe una imagen se usa el patrón URL, que asimila lo mismo  URIs que URLs, ya sean  externas , internas,   relativas o absolutas, según el caso.

Para recoger la URL que conduce a la imagen el formato es  url(direccion), además permite que la dirección como tal se encierre entre comillas, ya sean estas dobles o sencillas

Veamos un ejemplo: 

  
 div {
   background-image: url(http://www.mipaginadeimagenes.net/banco/css/imagenes/logo.png);
 }
  
 h2, h3, h4, h5 {
   background-image: url("imagenes/retrato.png");
 }
  
 h2, h3, h4, h5{
   background-image: url('../imagenes/arte.gif');
 }

Distribucion:

Cuando la imagen de fondo es más grande que el area donde queremos mostrarla, se vera solo la parte que va desde  esquina superior izquierda  a su opuesto y lo hara justo en la esquina superior izquierda del espacio que ocupa el elemento que recibe la imagen:

Si sucede al revés y la imagen es más pequeña que el espacio reservado para ella, el navegador la repetirá,  en todas las direcciones hasta cubrir completamente el espacio del elemento.

Para ayudar a resolver estos dentro de background existen diferentes opciones como   background-repeat,  que permitirá que la imagen se repita o no, background-attachment, permite que se mantenga fija en un su posición o se desplace cuando se mueve el cursor y   background-position, que brinda la posibilidad de modificar la posición por defecto e la imagen

La propiedad Background puede usarse simultáneamente en un area, por ejemplo un div junto a un color de fondo, por  eso es común ver background-image y background-color en un mismo espacio o elemento. En estos casos la imagen tiene prioridad, y el color de fondo solo será visible en aquellas areas de la imagen que sean transparentes por ejemplo al usar imágenes en formato png o en aquellas zonas que no estén cubiertas por la imagen

Usar ambas es una buena práctica, porque permite tener desde el primer momento algo que cubra el elemento. Considerando que puede haber demora en cargar la URL, o un fallo, que exista un color de fondo con una apariencia parecida a la imagen (si fuera posible),  mejorar la experiencia.

Y listo, esto es todo.

Espero modestamente que este artículo, sirva de ayuda a alguien.

Gracias.

…., si avanzo sígueme, si me detengo empújame, si retrocedo mátame…….

Publicado el

Uso de Calc

laravel

 La función calc(), que se añade a la propiedad width nos permite calcular o definir el ancho esperado de un div  

#div1 {
  position: absolute;
  left: 25px;
  width: calc(100% - 120px);
  border: 1px solid 0e0e0e;
  background-color: #000;
  padding: 5px;
  text-align: center;
}

Pueden usarse los operadores + - * /, la expresión requiere siempre una expresión matemática y puede ser usada para casos como los div que se cambian de tamaño, al deslizarse otro.

Y listo, esto es todo.

Espero modestamente que este artículo, sirva de ayuda a alguien.

Gracias.

…..lo que realmente importa no es lo que te da la vida, sino lo que haces con ello….

Translate »