Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock

En este tutorial veremos como agregarles información a una imagen con solo CSS. Muchas veces queremos agregarles una breve descripción a una imagen y no sabemos como, lo único que se me ocurre en este momento es agregarle informació
n con un tooltip. Pero un tooltip no es el único método para agregarles información a una imagen, con este tutorial veremos que es mucho mas fácil agregarles información a una imagen.

Antes de comenzar veremos una demostracion:

Comencemos:

  • Paso 1: Vamos a Blogger>> Plantilla>> Edicion HTML>>
  • Paso 2: Buscamos la siguiente linea (Ctrol + F)
]]></b:skin>
  • Paso 3: Justo por encima de ]]></b:skin> pegamos el siguiente código CSS.
.w{
  margin:0 auto;
  margin-top:10%;
  width:300px;
  height:300px;
  position:relative;
  border:1px solid rgba(0,0,0,.1);
  border-radius:1px;
  background:white;
  box-shadow:0 0 22px 1px rgba(0,0,0,.3);
}
.w:after{
  content:"";
  width:70%;
  left:15%;
  bottom:10px;
  z-index:-1;
  height:40px;
  position:absolute;
  border-radius:150px/0px 0px 25px 25px;
  box-shadow:0 3px 75px rgba(0,0,0,.6),0 6px 45px rgba(0,0,0,.6),0 0 65px rgba(0,0,0,.6);
}
.glass{
  width:100%;
  height:100%;
  position:absolute;
  background:linear-gradient(135deg ,rgba(255,255,255,.8) 0px, rgba(255,255,255,.2) 200px, rgba(255,255,255,.0) 201px, rgba(255,255,255,.0) 300px);
}
.glass:before{
  content:"";
  width:100%;
  height:1px;
  position:absolute;
  background:rgba(255,255,255,.5);
  margin-top:0px;
}
.Titulo{
  text-shadow:1px 1px 2px rgba(0,0,0,.9);
  z-index:1;
  background:rgba(0,0,0,.6);
  color:white;
  display:inline-block;
  position:absolute;
  top:0;
  left:0;
  padding:5px 0px 5px 10px;
  font:28px Myriad Pro;
  margin-top:20px;
  max-width:250px;
}
.Titulo:before{
  content:"";
  position:absolute;
  width:10px;
  height:100%;
  box-sizing:border-box;
  margin-top:-5px;
  margin-right:-15px;
  right:0;
  border-left:15px solid rgba(0,0,0,.6);
  border-top:15px solid rgba(0,0,0,.6);
  border-bottom:15px solid rgba(0,0,0,0);
}
.descripcion{
  text-shadow:1px 1px 2px rgba(0,0,0,.9);
  font:11px Verdana;
  background:rgba(0,0,0,.6);
  color:white;
  display:inline-block;
  position:absolute;
  bottom:0;
  right:0;
  max-width:250px;
  margin-bottom:20px;
  min-height:19px;
  padding:5px 10px 5px 0px;
}
.descripcion:before{
  content:"";
  position:absolute;
  width:10px;
  height:100%;
  box-sizing:border-box;
  margin-top:-5px;
  margin-left:-15px;
  left:0;
  border-right:15px solid rgba(0,0,0,.6);
  border-top:15px solid rgba(0,0,0,.6);
  border-bottom:15px solid rgba(0,0,0,0);
}
  • Paso 4: Dentro de una entrada pegamos el siguiente código HTML
<div class="w">
<div class="Titulo">
FERNANDO SALAS</div>
<div class="descripcion">
Administrador de Tutoriales-Blogger.info</div>
<div class="glass">
</div>
<img src="http://2.bp.blogspot.com/-8fPHadAh2e0/UXRFmU5CUpI/AAAAAAAAA9U/bP8YRqLmXuM/s1600/Caja+de+Comentarios+de+Google++en+Blogger.png" />
</div>
Nota:-  Solo debemos lo que esta en Rojo por la información de la imagen
Nota:-  Cambia lo que esta en Rojo por las URL de la imagen
- - 0 Comentarios
Tag

Comentarios (0)

:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar