Imagen sobresaliente...

Kinopio · #1 (**permalink**) 03/03/2008, 15:30

Hola maestros, quisiera saber si me pudieran explicar, como se hace el efecto en las páginas de html...usando claro está css...para hacer que una imagen insertada sobresalga de un margen...pero sin afectar al texto que la acompaña...

www.templatehelp.com/preset/pr_preview.php?i=18658&pr_code=5w52z65746tCIw3sN4W WbbV0g8194M

Gracias...

hades87 · #2 (**permalink**) 03/03/2008, 16:30

diria qeu ese efeto de sobresalir es parte del photoshop.

cleft · #3 (**permalink**) 03/03/2008, 19:47

Igualmente pienso que es un grafico que contiene el fondo y la foto de la mujer.
Para lo anterior, usando CSS: seria de definir dicha imagen como background del elemento (una capa preferiblemente).

Ahora, si se quiere ir a mas extremos, en mi opinion podria hacer de la siguiente forma:
Creas una capa con solo el background (sin la foto de la chica).
Luego, con posicionamiento absoluto, colocar la imagen de la chica (seria en formato PNG preferiblemente), con lo cual, te permitira rotar varias fotografias (digamos, otra chica, un hombre, etc) nada mas cargando imagenes PNG en cada pagina que visites.

Bueno, creo que no me estoy explicando muy bien, pero te dejo un articulo donde hablan sobre el "Uso Creativo de transparencia PNG"
http://www.digital-web.com/articles/...reativity_png/

Revisa la parte de ABC News.

Kinopio · #4 (**permalink**) 03/03/2008, 22:56

Ea... gracias por responder...ahora bien, ese efecto de photoshop, saben donde lo puedo encontrar, o tutoriales de este...
gracias...

hades87 · #5 (**permalink**) 04/03/2008, 04:34

bueno con photoshop es hacer un rectángulo, ahí metes como el banner, dejar un borde del mismo color y la imagen de la chica que sobresalga, si eso pregunta mejor en el foro de diseño gráfico o investiga por ahí

JavierB · #6 (**permalink**) 04/03/2008, 09:56

Movido al foro de Diseño Gráfico desde Css.

Saludos,

Roggers · #7 (**permalink**) 04/03/2008, 13:24

Creas una Capa de color verde como en la imagen de ejemplo para el fondo

Luego ubicas otra capa rectangular mas pequeña ... tambien como el del ejemplo

Y por ultimo Ubicas la imagen de la chica ... claro contorneando la figura...

Y queda listo...

Solo es cuestión de ubicar bien las capas...

Pdta. Puedes dar el mismo color verde al fondo de tu pagina ... y de esta manera queda mejor el efecto que buscas...

Chausito

LORIAN · #8 (**permalink**) 05/03/2008, 11:41

Al hacer la composicion en photoshop has de cuidar que te quede en el mismo lugar para despues al particionar la imagen y maquetes con css quede exactamente en su sitio y de el efecto sobresaliente

Kinopio · #9 (**permalink**) 05/03/2008, 18:54

Lorian, podrías explicarme eso...de que quede exactamente igual??