CARATULAS DISCOGRAFÍCAS KIRADOBER : imagen

Mostrando entradas con la etiqueta imagen. Mostrar todas las entradas

PÁGINA DE BIENVENIDA

7/20/2020

Poner un texto en medio de dos imágenes

Lo más fácil para hacerlo es que hagas una tabla con 3 columnas. En la parte de la izquierda y derecha pones tus imágenes y en la parte del centro pones el texto que quieras colocar.

Para hacerlo solo tienes que usar este código, para que te sea más fácil:

<table style="text-align: left; width: (medida que le quieras dar al ancho de tu tabla)px; height: (medida de lo alto)px;" border="0"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top;"><img
style="width: (medida que le quieras dar al ancho de tu imagen)px; height: (medida de lo alto)px;" alt="e"
src="(ruta de acceso de tu foto).jpg"><br>
</td>
<td style="vertical-align: top;">(Aquí va el texto que
quieras poner)<br>
</td>
<td style="vertical-align: top;"><img
style="width: (medida que le quieras dar al ancho de tu imagen)px; height: (medida de lo alto)px;" alt="r"
src="(ruta de acceso de tu otra foto).jpg"><br>
</td>
</tr>
</tbody>
</table>

Configuración:

En el mismo código te pongo lo que va en cada sitio por ejemplo en:
width: (medida que le quieras dar al ancho de tu tabla) como puedes leer va el nacho de la tabla que tienes que calcularla tu mismo de esta manera la harás a tu gusto.
En height: va el Alto de la Tabla.
En style="width: (medida que le quieras dar al ancho de tu imagen)px; el ancho de la Imagen.
En height: (medida de lo alto)px; el alto de la Imagen.
Fijate que hay dos uno en el renglón superior y otro en la parte inferior.
Y aquí <td style="vertical-align: top;">(Aquí va el texto que quieras poner)<br>

Fecha:14/05/2018

Publicado por:

5/14/2018

Menú vertical uno

Cada vez se pueden hacer mas maravillas con el CSS3, es cuestión de experimentar e ir probando, sobre todo al que les guste el diseño web como a mi. En esta ocasión, he diseñado este menú vertical en el que solo se ve una pestaña, pero que al posar el cursor sobre ella, se despliega como si fuera de papel. Esta confeccionado integramente con CSS3, quitando de los pequeños iconos que son imágenes en formato png transparente. El resultado es un menú original y visualmente atractivo, como podéis ver.

Para ponerlo en vuestro blog o web, tan solo tenéis que copiar el siguiente código y ponerlo en un Gadget HTML. Modificáis lo siguiente para adaptarlo a lo que queráis enlazar a vuestro gusto: Lo que esta en color rojo son las direcciones Urls, lo que esta en color verde es el texto de los enlaces y lo que esta en color violeta son las Urls de las imágenes de los iconos.

1-Un clic en “Diseño”

2-Clic en “Añadir un gadget”

3-Busca el widget que dice “HTML-Javascript” y ábrelo

4-Coloca el siguiente codigo en el interior

<div class="menudesplegable"><a class="main">Menu</a><div class="sub first"><img src="http://png-4.findicons.com/files/icons/1254/flurry_system/32/home.png"><a href="https://blogimagenzero.blogspot.com.es/"><p><span>Inicio</span></a></p><div class="sub even"><img src="http://png-5.findicons.com/files/icons/2352/frankfurt/32/contact.png"><a href="https://blogimagenzero.blogspot.com.es//p/contacto_1.html"><p><span>Contacto</span></a></p><div class="sub odd">
<img alt="" src="http://png-4.findicons.com/files/icons/653/the_spherical/32/web.png"><a href="https://blogimagenzero.blogspot.com.es//p/webs-amigas.html"><p><span>Webs Amigas</span></a></p><div class="sub even">
<img alt="" src="http://png-4.findicons.com/files/icons/1588/farm_fresh_web/32/layout_content.png"><a href="https://blogimagenzero.blogspot.com.es//p/contenido.html"><p><span>Contenido</span></a></p><div class="sub odd last">
<img alt="" src="http://png-5.findicons.com/files/icons/753/gnome_desktop/32/gnome_emblem_photos.png"><a href="https://blogimagenzero.blogspot.com.es//p/banners_5.html"><p><span>Banners</span></a></p></div></div></div></div></div></div>

<style type="text/css">

.menudesplegable {width:250px; height:35px; margin:0 auto 450px auto; position:relative; z-index:100;
-webkit-perspective:400px;
-moz-perspective:400px;
perspective:400px;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}

.menudesplegable div {position:absolute; padding:10px;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
top:100%; left:0; width:230px;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}

.menudesplegable .odd {background:#ddd;
-moz-transform:rotateX(-180deg);
-webkit-transform:rotateX(-180deg);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.menudesplegable .even {background:#eee;
-moz-transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.menudesplegable .first {background:#ddd;
-moz-transform:rotateX(-100deg);
-webkit-transform:rotateX(-100deg);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.menudesplegable .last {box-shadow:0 15px 10px -10px rgba(0,0,0,0.3); border-radius: 0 0 10px 10px;}
.menudesplegable:hover .sub {
-moz-transform:rotateX(0deg);
-webkit-transform:rotateX(0deg);
}

.menudesplegable .sub img {display:block;float:left; padding:0 10px 10px 0;}
.menudesplegable .sub p {font: normal 15px , sans-serif; color:#000 !important; padding:0; margin:0;}
.menudesplegable .sub p span {display:block; font: bold 22px century gothic, sans-serif; color:#ea0 !important;text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, -1px 1px 2px #000000;}
.menudesplegable .sub p a {text-decoration:none;font: normal 12px/15px arial, sans-serif; color:#09c !important;}
.menudesplegable .sub p a:hover {text-decoration:none;}
.menudesplegable a.main {display:block; font: bold 30px century gothic, sans-serif;text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, -1px 1px 2px #000000; text-align:center; text-decoration:none;cursor:pointer; color:#F2F2F2 !important; border-radius:10px 10px 0 0; position:relative; z-index:100;border:2px solid #000000;
background-image: linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -o-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -moz-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -webkit-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -ms-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.16, rgb(0,102,153)),
color-stop(0.58, rgb(0,0,0))
);
}
.menudesplegable a.main:hover {opacity:0.7;}
</style>

5-Da un clic en “Guardar”

Fecha:04/05/2018

Fuente:redeando

Publicado por:

featured imagen menú widget

5/04/2018

Imagen o Texto que te redireccione a una pagina Web

Vamos a trabajar un poco los links para redireccionar a tus lectores ya sea a un post o a otra Página o a una Web determinada, tanto con texto como con Imágenes

Estos son los códigos Normalizados.

Si deseas que vaya directamente es

-------------------------------------------------------------

<a href="URL DESTINO"><img src="laimagen"></a>
------------------------------------------------------------
Si deseas que aparezca en una ventana nueva es
------------------------------------------------------------------------------------------------------
<a href="URL_DE_WEB" target="_blank"><img src="URL_DE_IMAGEN"></a>
------------------------------------------------------------------------------------------------------
En este caso, se mostrará la palabra “Enlace” y al dar click nos llevará a la “URL DESTINO”. Lo que nosotros queremos lograr es que se muestre la imagen y esta nos lleve a una dirección.
--------------------------------------------------
<a href="URL DESTINO">Enlace</a>
------------------------------------------------
Esto lo lograremos sabiendo el código HTML para mostrar una imagen:
----------------------------------------------
<img src="URL DE LA IMAGEN">
---------------------------------------------

Fecha:02/05/2018

Publicado por:

featured imagen truco

5/02/2018

Colocar una Imágen con Texto alrededor

Las Imágenes son la portada de una publicación donde el Lector se fija en la primera mirada y a continuación va a por el texto que tiene que ser de calidad pero primero va a la imágen por esto el texto tiene que estar muy bien colocado alrededor de la Imágen.

ahora os explicare el caso más clásico es el de envolver con texto una foto que se ubicará contra el margen izquierdo.

Aqui lo que debemos hacer es “flotar” hacia la izquierda el elemento, en este caso, la imagen.

Para esto, CSS dispone de una propiedad llamada “float”, justamente como su nombre lo indica, sirve para flotar elementos dentro del documento HTML.

La propiedad “float” puede tomar 3 posibles valores:

float: left
(flota el elemento contra la izquierda)

float: right
(flota el elemento contra la derecha)

float: none
(no flota el elemento hacia ningún lado, es la opción por defecto)

Bien, realicemos el caso típico de flotar una imagen contra la izquierda y automáticamente la misma se rodeará con el texto.

Para este caso utilizaremos un DIV contenedor y dentro de el una imagen y un texto.

El código HTML estándar para esto sería:

<div><img style="float:left;" src="URL_imagen" />Texto a mostrar</div>

Nótese que aquí aplicamos la propiedad “float: left” a la etiqueta IMG directamente dentro de la línea HTML y no desde un archivo.

Esta técnica se llama “inline” y si bien es válida, hoy por hoy se recomienda poner las propiedades CSS dentro de un archivo para tal fin. Pero aquí lo hago así para simplificar el código.

Tellus elementum sagittis vitae et leo. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque. Imperdiet sed euismod nisi porta. Ultrices gravida dictum fusce ut. Nisi scelerisque eu ultrices vitae auctor eu augue ut lectus. Pellentesque habitant morbi tristique senectus et netus. Tincidunt eget nullam non nisi. Eget duis at tellus at urna condimentum. Convallis a cras semper auctor neque vitae tempus quam. Consectetur a erat nam at.

He utilizado un texto de ejemplo bastante largo para que se aprecie el efecto visual.

Hagamos práctico el ejemplo con imagen a la derecha:

<div>
<img src="imagen.jpg" hspace="5" vspace="5" style="float: right;" />
Texto a mostrar
</div>

Así se vería este ejemplo:

Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Adipiscing elit duis tristique sollicitudin. Consectetur adipiscing elit ut aliquam purus sit. Est pellentesque elit ullamcorper dignissim. Nulla facilisi cras fermentum odio. Tortor id aliquet lectus proin nibh nisl condimentum id venenatis. Vitae justo eget magna fermentum iaculis eu. Cursus in hac habitasse platea dictumst quisque sagittis purus sit. Quis enim lobortis scelerisque fermentum dui.

Hagamos práctico el ejemplo con imagen a la izquierda: "right"

<div>
<img src="imagen.jpg" hspace="5" vspace="5" style="float: right;" />
Texto a mostrar
</div>

Esto se veria asi:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed enim ut sem viverra aliquet eget. Erat imperdiet sed euismod nisi porta. Auctor eu augue ut lectus arcu bibendum at varius. Feugiat in ante metus dictum at. Tellus elementum sagittis vitae et leo. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque. Imperdiet sed euismod nisi porta. Ultrices gravida dictum fusce ut. Nisi scelerisque eu ultrices vitae auctor eu augue ut lectus. Pellentesque habitant morbi.

Y ahora un ejemplo con el float por defecto que sería “none”:

tempus imperdiet nulla malesuada pellentesque. Imperdiet sed euismod nisi porta. Ultrices gravida dictum fusce ut. Nisi scelerisque eu ultrices vitae auctor eu augue ut lectus. Pellentesque habitant morbi tristique senectus et netus. Tincidunt eget nullam non nisi. Eget duis at tellus at urna condimentum. Convallis a cras semper auctor neque vitae tempus quam. Consectetur a erat nam at.

En este último ejemplo podemos ver como el texto se coloca directamente después de donde termina la imagen, es decir, sin flotarse hacia ningún lado.
Rodeando con texto otros elementos como videos

Tal cual lo acabamos de hacer con las imágenes, se puede rodear con texto otros elementos, por ejemplo videos.

<div>
<div style="float: left;" />
<iframe width="300" height="200" src="https://www.youtube.com/embed/LauDl7qwcA0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
Texto a mostrar
</div>

Para ellos solo basta reemplazar la imagen por otro DIV que contenga el video y aplicarle a este último DIV la misma propiedad “float”.

Así se vería este ejemplo:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Fecha: 02/05/2018

Fuente:pasoapaso.com

Publicado por:

featured imagen truco

5/02/2018

Ampliar una imagen al clickar sobre ella,

Es un truco muy sencillo sin tener que meter mano a la plantilla que siempre es un peligro por si cometes algún herror además ahorramos tiempo que el tiempo va muy caro en estos días no es así sin mas vamos al lío.

Sólo debes cambiar la URL de la imagen (en su tamaño normal)

Configuración

El primer width y height son las medidas a la que se va agrandar la imagen al hacer clik, width es el ancho y height es el alto: this.width=500;this.height=400"

El segundo width y height son las medidas a la que se va a reducir la imagen al hacer doble click que será la original : width=120;this.height=100"

El último width es el ancho de la imagen que se mostrará al cargar la página, es decir el thumbnail, se recomienda que sea el mismo ancho que tendrá la imagen al reducirse cuando se haga doble click mejor dicho la (Original): width="120"/>

Como ven, sin necesidad de tocar la plantilla pueden usar este truco para mostrar una galería de fotos, o simplemente para reducir el espacio en el blog.

Fecha:21/04/2018
Fuente
Publicado por:

featured imagen truco

4/21/2018

Ampliar una Imágenen con sólo pasar el mouse por encima

Un truco para no tener que poner imágenes tan grandes que ocupen mucho espacio en tu blog y no vaya tan pesado solo vasta añadir este efecto para que se amplíe al pasar el cursor por encima de esta para que se amplíe a nuestro gusto.

Así permitirá a todos los visitantes de tu sitio puedan observar mas detalladamente las imágenes de tus post, sin tener que descargarlas al ordenado tan grndes o para ampliarlas. Además este efecto es muy llamativo.

Puedes colocarlas en todos los post o también hacer una combinación añadiéndole algunos este efecto, otros con el que amplia las imágenes haciendo un clic sobre ellas, y los demás con imágenes comunes.

Aquí puedes ver el Efecto

Para colocarlo simplemente tienes que copiar este código y pegarlo dentro de la entrada.

Configuración:

Las partes del código que debes remplazar son:

Url de la imagen: Con la imagen que elegiste para añadirle el efecto: URL de la imagen

El primer width y height del codigo: Con las medidas que quieres que se amplié: this.width=400;this.height=300;

El segundo width y height : Por las medidas que desees que se reduzca; this.width=100;this.height=80;

Los ultimos width y height: Deben ser igual a las medidas anterior, este te indicara como se vera en la pagina: width="100" height="80" />

(Recordad ponerlo en Modo HTLM) ("no" en Redactar)

Width: Es ancho.

Height: Es Alto

Fecha:21/04/2018

Publicado por: