Estilo para las imágenes dentro de un post

Tomado desde Ciudad Blogger

Podemos darle un estilo muy personalizado a nuestras entradas con una imagen de fondo como esta que estoy publicando. Para tener este efecto en el texto de nuestras entradas sólo usamos el siguiente código dentro del post:

<table bordercolor="#000000" cellspacing="5" cellpadding="5" width="100%" background="http://URL de la imagen de fondo" border="0"><tbody><tr><td><p>Aquí va el texto de la entrada. Si desean agregar una imagen encima de la imagen de fondo sólo agregan la siguiente etiqueta y dentro de ella la URL de la imagen. <img style="float:right; margin:5px 5px 5px 5px;cursor:pointer; cursor:hand;width: 200px; height: 183px;" src="http://URL de la segunda imagen" border="0" alt="" /> y aquí continua el texto de la entrada.</p></td></tr></tbody></table>

Aquí va el texto de la entrada. Si desean agregar una imagen encima de la imagen de fondo sólo agregan la siguiente etiqueta y dentro de ella la URL de la imagen. y aquí continua el texto de la entrada.Ahí pueden ver dónde deben escribir el texto de la entrada, y en caso de que deseen usar una foto encima de la imagen de fondo sólo agregan la etiqueta correspondiente como se explica en el código. Si no desean una imagen encima entonces eliminan esa etiqueta. Imagen encima En bordercolor pueden modificar el ancho del borde de la imagen, sino desean que tenga el borde lo dejan en cero como está. El margen entre la imagen y el texto lo pueden modificar en cellspacing y cellpadding. La posición de la segunda foto pueden cambiarla en float; cambian right si la desean a la derecha; left, a la izquierda o center si la quieren centrada. El tamaño de la segunda imagen lo modifican con width (ancho) y height (alto). Les recomiendo que usen una imagen de fondo que no dificulte la lectura de la entrada. De igual modo elijan una imagen que sea del tamaño adecuado al tamaño del post, ya que una foto muy chica se repetirá muchas veces hasta ocupar el espacio. Que se diviertan personalizando sus posts.

---

---

Otro ejemplo para imágenes dentro de un <div class="container"> </div> que sustituiré por <div class="contenedor"> </div>

Código HTML

Fade in Overlay

Hello World

Que sería así:

<div class="contenedor">
<img alt="Avatar" class="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdC-DqbgDhpZwFZVP3zf8nJzjkD53W9vZTpFctt8V9GXgCOdm5_U5yhbAqwX9q-gLZfFQtv7S69ri2fpLqvNLmCYW9xEULRjHYfeK4KpX6OEfPAdkT73AHjiELKBTRldjvoRTw63PTOA0/w499-h498-no/"/>
  <br>
<div class="overlay">
<div class="text">
Hello World</div>
</div>
</div>

Este sería el estilo:

  /* Contenedor div para imágenes */


.contenedor {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.contenedor:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

Cajas estilosas Ejemplo 1:

Este ejemplo de Fade Overlay fue tomado desde w3schools

Ejemplo de una caja estilosa

Ejemplo 2:

Hola Mundo

Ejemplo 2.1:

Lorem ipsum dolor sit amet consectetur adipiscing elit mus potenti, libero quam parturient senectus ultrices vehicula aenean pharetra sociosqu, nam nascetur aptent at porttitor vel vestibulum interdum.

Ejemplo 2.2:

Lorem ipsum dolor sit amet consectetur adipiscing elit mus potenti, libero quam parturient senectus ultrices vehicula aenean pharetra sociosqu, nam nascetur aptent at porttitor vel vestibulum interdum.

Este ejemplo lo ubicamos al "centro". Este sería el código:

<center>
<div class="caja" style="-moz-border-radius: 5px; -webkit-border-radius: 5px; background: repeating-linear-gradient(135deg , #212529 , #212529 5px , rgba(0 , 0 , 0 , 0) 5px , rgba(0 , 0 , 0 , 0) 10px); border-left: 7px solid #90949c; border-radius: 5px; border: 1px solid #343a40; color: white; font-family: &quot;consolas&quot; , &quot;inconsolata&quot; , &quot;monaco&quot; , monospace; font-size: 16px; margin: 0 0 25px; overflow: hidden; padding: 20px; text-align: left; width: 50%;">
<i class="fas fa-quote-left" style="color: white; font-size: 20px;"></i>
Lorem ipsum dolor sit amet consectetur adipiscing elit mus potenti, libero quam parturient senectus ultrices vehicula aenean pharetra sociosqu, nam nascetur aptent at porttitor vel vestibulum interdum.
<i class="fas fa-quote-right" style="color: white; font-size: 20px;"></i>
</div>
</center>

<center>
<div class="caja" style="-moz-border-radius: 5px; -webkit-border-radius: 5px; background: repeating-linear-gradient(135deg , #212529 , #212529 5px , rgba(0 , 0 , 0 , 0) 5px , rgba(0 , 0 , 0 , 0) 10px); border-left: 7px solid #90949c; border-radius: 5px; border: 1px solid #343a40; color: white; font-family: &quot;consolas&quot; , &quot;inconsolata&quot; , &quot;monaco&quot; , monospace; font-size: 16px; margin: 0 0 25px; overflow: hidden; padding: 20px; text-align: left; width: 50%;">
<i class="fas fa-quote-left" style="color: white; font-size: 20px;"></i>
Lorem ipsum dolor sit amet consectetur adipiscing elit mus potenti, libero quam parturient senectus ultrices vehicula aenean pharetra sociosqu, nam nascetur aptent at porttitor vel vestibulum interdum.
<i class="fas fa-quote-right" style="color: white; font-size: 20px;"></i>
</div>
</center>

El código para la caja "estilosa" ha sido tomado desde Marabelia. NOTA: Pendiente de revisarlo nuevamente, para copiar el HTML y el CSS 

Código

---

Artículos relacionados

- Descarga tus videos favoritos de YouTube con Rolle Tube

- Descarga videos desde Facebook con este sencillo método

---

.bisel {
font-size:.8em;
width: 80%;
margin: 10px auto;
padding: 1em 2.5em;
color: #00008B;
background-color: #BDACEF;
background:
-moz-radial-gradient(0 100%, circle, rgba(228,228,228,0) 2em, #445E75 2.1em),
-moz-radial-gradient(100% 100%, circle, rgba(228,228,228,0) 2em, #445E75 2.1em),
-moz-radial-gradient(100% 0, circle, rgba(228,228,228,0) 2em, #445E75 2.1em),
-moz-radial-gradient(0 0, circle, rgba(228,228,228,0) 2em, #445E75 2.1em);
background:
-webkit-radial-gradient(0 100%, circle, rgba(228,228,228,0) 2em, #BDACEF 2.1em),
-webkit-radial-gradient(100% 100%, circle, rgba(228,228,228,0) 2em, #BDACEF 2.1em),
-webkit-radial-gradient(100% 0, circle, rgba(228,228,228,0) 2em, #BDACEF 2.1em),
-webkit-radial-gradient(0 0, circle, rgba(228,228,228,0) 2em, #BDACEF 2.1em);
background-position: bottom left, bottom right, top right, top left;
-moz-background-size: 50% 50%;
background-size: 51% 51%;
background-repeat: no-repeat;
}

Hello World

Hello World

---

Lorem ipsum dolor sit amet consectetur adipiscing elit mus potenti, libero quam parturient senectus ultrices vehicula aenean pharetra sociosqu, nam nascetur aptent at porttitor vel vestibulum interdum.

---