css imagenes

css imagenes: Hola a todos hoy voy a seguir el tema de las animaciones con imágenes, hoy toca insertar estilos css en nuestro código html.

Con los estilos css modificamos las propiedades de los objetos a los cuales se menciona a través de su IDE o su clase, me aplicare, podemos modificar su marco, su opacidad, su situación su anchura largura, incluso haremos animaciones cuando entre el ratón dentro de su zona pero

«vallamos por partes» como dijo Jack el Destripador

Hay varias formas de colocar el texto css dentro de nuestro código css con imagenes para modificar las propiedades de la imagen

css para imagenes en línea

(poco recomendable, pero si utilizado)

css para imagenes en línea, nos referimos a que el código para cambiar propiedades del objeto con css imagenes,  se integran dentro del código de la imagen. Este código tiene preferencia a la hora de la pre visualización sobre los demás formas de colocar el css , pero no es recomendable por SEO  pongamos ejemplos que es lo más fácil para comprender

<img id="destacada" src="https://animacionesweb.online/imagenes/imagenesclientes/r119luna.png" width="120" height="250"   style="border: 5px solid; color: blue ;" />

En el ejemplo del codigo de una imagen se ha agregado

“style="border: 5px solid; color: blue ;"

Con esto hemos conseguido poner un marco a la imagen solido de 5 pixeles de ancho de color azul

Como ves es muy sencillo colorar css integrado en el código, aunque los puristas de programación descartan este método,

Con este método podemos conseguir muy rápidamente ejemplos como este en los que copiando repetidamente una imagen y modificando solo la propiedad opacity  style="opacity:0.1 ;"

Creamos composiciones de imágenes curiosas con solo modificar un numero en el código,

mejor que plugins no….?

<img id="destacada" src="https://animacionesweb.online/imagenes/imagenesclientes/r119luna.png" width="120" height="250" style="opacity:0.1 ;" />

css imagenes con hojas de estilo externas

Los estilos css se pueden colocar todos agrupados en otra página, lo que facilita la visualización a los exploradores sobre todo cuando se tiene miles de estilos con bibliotecas que no vas a usar jamás

Para decirle al explorador donde se encuentra esa página de estilos , en la cabecera de nuestra página web hay que colocar un link como este para que sepa donde tiene que leer las modificaciones de nuestra pagina,

En este caso el archivo css se llama «style.css» y se encuentra en la raiz de nuestro proyecto.

<link rel="stylesheet" href="style.css">

En esta página ya podemos colocar nuestros códigos css.

 En css hay que colcar el elemento a modificar, y seguidamente entre llaves todas las modificaciones que deseamos.

1 Para determinar aque elemento deseamos modificar tenemos dos occiones:

                Por su indicador ( el nombre id que vimos en nuestro código)

Lo que seria algo asi

# holaindentificador {width: 120px;
                                 height: 250px;
                                  }
 <img id="holaindentificador" src="imagen.png" />

 Con esto modificaríamos el tamaño de la imagenes con css, en una hoja externa, llamando la propiedad por su identificador ( en la hoja de estilos se denomina ” #” para llamar al id)

Ventajas o desventaja de este método : que solo puede debería  haber dos objetos en nuestra pagina web con dos indicadores iguales .

  La segunda forma de llamar a nuestro objeto es nombrado el nombre de la clase

<img class="holasoyunnombredeclase" src="imagen.png" />
.holasoyunnombredeclase {width: 120px;
                         height: 250px;
                         }

yo uitilizo el nombre del classpara las clases css y el id lo dejo para actuar con javacript que tamien necesita saber a quien se realiza las aciones a tomar

Como veis en la hoja de estilos , una clase va acompañada por un ”.” , El nombre de la clase y unas ”{}” con las propiedades css que queremos cambiar

Y si prefieres generar animaciones web sin manejar ningún tipo de código online y gratis aquí te dejo el link de nuestra pagina web donde hacemos animaciones web

Deja un comentario