Imágenes para Web

kino — Thu, 16 Jun 2011 23:24:48 +0000

Hoy quiero compartirles una página para buscar buenas imágenes para usar en web, que… no descubrí jaja, pero me la recomendaron y la verdad me ha dejado buen sabor de boca, espero que si ya la conocen la recomienden y sino, que la disfruten.

El sitio se llama Inmagine y puedes acceder desde AQUI.

Es uno de los mayores distribuidores de imágenes libre de regalías o copyright en el mundo, tiene la opción de comprar las imágenes con mayor calidad sin embargo las versiones gratuitas son bastante optimas para usar en nuestros sitios web o para editar con este fin.

En lo personal de aquí han surgido muchas de las imágenes que uso en mis diseños. Espero que les sirva.

http://www.inmagine.com/

Escribe notas sobre tus imagenes

adda — Mon, 09 Aug 2010 23:02:34 +0000

Tipmage es una clase javascript destinada a la creación y gestión de “notas” sobre las imágenes

Tipmage es una clase Javascript encaminadas a crear y gestionar información sobre herramientas (o “notas”) sobre las imágenes.

Tipmage permite marcar porciones rectangulares de una imagen y adjuntar una descripción a cada uno de ellos. La descripción se muestra como un tooltip cuando el ratón está sobre la parte derecha de la imagen.

La clase puede trabajar de dos maneras: en modo normal, sólo muestra la información sobre herramientas, mientras que en el modo de edición que también permite al usuario para modificarlas.

Tipmage apoya el uso de funciones de llamada especiales para realizar operaciones relacionadas con la edición de un texto de ayuda (por ejemplo AJaX llamadas para acceder a una base de datos).

Una hoja de estilos CSS externa permite personalizar la apariencia de la interfaz de usuario.

Esta clase de trabajo ha sido probado en Internet Explorer 5.5-> 8.0, Firefox 1.0-> 3.6, Chrome 5.0, Safari 2.0-> 5.0, Opera 7.6-> 10.0. y el apoyo parcial de IOS 3.0-> 4.0 (iPhone, IPAD).

Enlace: jpcbdp.wordpress.com

Imagenes con efecto Scrollable con jQuery

miguelortega — Fri, 18 Dec 2009 08:37:22 +0000

Scrollable con jQuery, es un excelente efecto para tus imágenes, donde puedes previsualizar tus imagenes con un efecto tipo scroll.

Además de hacer clic en las pestañas también puede desplazarse por los elementos:

Al hacer clic en el área de contenido
Al hacer clic en los botones de acción por debajo del desplazamiento
Utilizando las teclas de flecha izquierda y derecha en el teclado
Con su rueda del ratón

Descargar

Ver Ejemplo

Como centrar nuestra Web; div, img, swf etc… con CSS

miguelortega — Tue, 14 Jul 2009 05:04:45 +0000

Bueno en el corto tiempo que llevo aprendiendo CSS me eh topado con muchas (sino miles) de formas y estrañas maneras para centrar una web o un div o lo que sea con estilos para no hacercelas muy cardiaca les pongo unos cuantos ejemplos que si, vale, si centran nuestra web pero vamos no soy quien para decir que es correcto e incorrecto pero si lo estandar y lo menos complicado; lo consideraremos por ahora como “valido” y “correcto” vale?.

Maneras Incorrectas para centrar div

Centrar con margen en el body body{margin:100px;}

Esta no me la sabia, recien la vi me gusto esta un poco “rara”, lo usaban para una web con diseño flexible, pero no tenia tamaños, fijos, ni con porcentajes ( % ), y pues solo se veia correcto en FF, y con resoluciones de 1200×800 como minimo… la mia 1024×768 se veia horrible pero bueno.

<h1>Esta es la forma incorrecta para centrar una Web</h1>
<h2>con proporciones fluidas - margin:100px;</h2>
<div class="contenedor">
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

*{margin:0;padding:0;}
body{background:#DDD;margin:100px;}
h1, h2{text-align:center;}
.contenedor{background:#EEE;border:5px solid #CCC;padding:10px;}

Ver ejemplo en linea

Centrar con etiqueta HTML

<center>
<h1>Esta es la forma incorrecta para centrar una Web</h1>
<h2>con proporciones fluidas - con etiqueta <center></h2>
<div class="contenedor">
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</center>

Obvio que esta parte no sirbe mas que para, nada vamos jaja, todo lo hace el

*{margin:0;padding:0;}
body{background:#DDD;}
h1, h2{text-align:center;}
.contenedor{background:#EEE;border:5px solid #CCC;padding:10px; width:940px; }

Ver ejemplo en linea

Centrar con tablas

<table align="center" width="940">
	<tr>
		<td>
            <h1>Esta es la forma incorrecta para centrar una Web</h1>
            <h2>con proporciones fluidas - con <table></h2>
            <div class="contenedor">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
		</td>
	</tr>        
</table>

Aqui quitamos el reset CSS del *{margin:0;}, para que tome automatico por el navegador.

1
2
3

body{background:#DDD;}
h1, h2{text-align:center;}
.contenedor{background:#EEE;border:5px solid #CCC;padding:10px;  }

Ver ejemplo en linea

Bueno hay otra manera, que es con el “body{text-align:center;}” luego otro div centrado de la manera correcta con “.midiv{margin:0 auto;text-align:center;}” el text-align del body nos sirve para alinear horizontalmente en IE6 pero esto no la agrego ya que no lo veo util, si tenemos un correcto.

1 2	<html xmlns="http://www.w3.org/1999/xhtml">

Centrar un div correctamente

Centrar div con margin .midiv{margin:auto;}

Esta manera para centrar divs es la mas usada y mas rapida y talves la mas mmm “correcta” y comun (me incluyo y la recomiendo).

<h1>Esta es la forma correcta para centrar una Web con margin auto</h1>
<h2>con proporciones fijas o fluidas</h2>
<div class="contenedor">
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

*{margin:0;padding:0;}
body{background:#DDD;}
h1, h2{text-align:center;}
.contenedor{margin:auto;width:940px;background:#EEE;border:5px solid #CCC;padding:10px;}

Ver ejemplo en linea

Centrar div con posision absoluta .midiv{position:absolute;}

Esta igual es valida, cuando queremos posicionar un elemento absoluto y que no se mueva con otras resoluciones de pantalla cuando este no esta relativo a otro div, y algunos decidieron aplicarlo a su body o bien a su div contenedor.

<h1>Esta es la forma correcta para centrar una Web</h1>
<h2>con proporciones fijas o fluidas</h2>
<div class="contenedor">
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
ok tenemos un acho de 940px + 20px de padding (10px de izquierda y derecha) + 10px de border (5px de izquierda y derecha) tenemos mmm... <em>1,2 llevo uno, brinca la tablita</em> 970px de ancho total, entonces con un left al 50% debemos quitarle un margen izquierdo de la mitad de nuestro ancho total ok? y son "margin-left:-485px;" ok? y listo...

*{margin:0;padding:0;}
body{background:#DDD;}
h1, h2{text-align:center;}
.contenedor{background:#EEE;border:5px solid #CCC;padding:10px;width:940px;position:absolute; left:50%; margin-left:-485px;}

Ver ejemplo en linea

Bueno en conclusion para centrar elementos, texto, etc… aqui va lo siguiente.

Centrar un div con
css

1	.contenedor{margin:auto;}

Centrar text con css

1 2	p{text-align:center;}/Esto centrara el texto dentro de las etiquetas P/ .contenedor{text-align:center;} /Tambien podemos indicar que todo texto dentro de esta clase este centrado/

Centrar una imagen con
css

Directo para centrar una imagen pues, no, debe tener un contenedor para decir en que o en donde se esta centrando y con el anterior de “text-align:center;” basta

1	.contenedor{text-align:center;}

Centrar una tabla con
css

Asi de la nada no podemos centrar una tabla, (amenos que sea posicion, absoluta, pero como que no es util para eso tenemos los benditos divs). con el “text-align:center;” se centrara el texto asi que no, nos vale.

<table align="center">
    <tr>
        <td></td>
    </tr>
</table>

1	table{margin:auto;}

Centrar un SWF (Flash) con
css

<div class="contenedor">
<object type="application/x-shockwave-flash" data="miflash.swf" width="500" height="130">
	<param name="movie" value="flash.swf" />
	<param name="quality" value="high" />
	<img src="miflash.png" width="500" height="130" alt="" />
</object>

Como se mensionaba antes, para posicionar elementos con valga la redundancia “posicion” absoluta, se les da si “top” y “left” al 50% y luego se les resta un margen relativo a su ancho y su alto.

1	.contenedor{position:absolute;top:50%;left: 50%;margin-top: -500px;margin-left: -130px;}

Y esto nos centrara nuesto SWF, y aligual eso es todo por hoy espero les sirva de algo, ya estoy hasta los coj…. de los divs y css por hoy jeje chao.

ZoneArtCSS | Desarrollo Web, Diseño de páginas Web, Aplicaciones Móviles, Notas de Tecnología » imagenes

Imágenes para Web

Escribe notas sobre tus imagenes

Imagenes con efecto Scrollable con jQuery

Como centrar nuestra Web; div, img, swf etc… con CSS

Maneras Incorrectas para centrar div

Centrar con margen en el body body{margin:100px;}

Centrar con etiqueta HTML

Centrar con tablas

Centrar un div correctamente

Centrar div con margin .midiv{margin:auto;}

Centrar div con posision absoluta .midiv{position:absolute;}

Centrar un div con css

Centrar text con css

Centrar una imagen con css

Centrar una tabla con css

Centrar un SWF (Flash) con css

Centrar un div con
css

Centrar una imagen con
css

Centrar una tabla con
css

Centrar un SWF (Flash) con
css