Galeria de imagem com CSS

UrbanZone :: Informática ::  :: Web :: html | Css

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Re: Galeria de imagem com CSS

Mensagem por Storm em 2009-04-22, 10:41 pm

Colocar imagem de fundo mas com varias opções.
Código:
<style type="text/css">body {
background-image: url(ENDEREÇO DA IMAGEM);
background-position: right;
background-attachment: fixed;
background-repeat: no-repeat;
}</style>

Escolher posição da imagem de fundo:

Substituir :background-position: right;

por:
background-position: top left; (em cima, à esquerda)
background-position: top center; (em cima, no meio)
background-position: top right; (em cima, à direita)
background-position: center left; (ao centro, à esquerda)
background-position: center center; (ao centro, no meio)
background-position: center right; (em cima, à direita)
background-position: bottom left; (em baixo, à esquerda)
background-position: bottom center; (em baixo, ao meio)
background-position: bottom right; (em baixo, à direita)


Última edição por Storm em 2009-05-27, 10:56 pm, editado 1 vez(es)


avatar
Storm
Sub Admin

Masculino
Posts : 852 País de Origem :

Ver perfil do usuário http://pwp.netcabo.pt/fernando.martim/

Voltar ao Topo Ir em baixo

efeitos para as imagens

Mensagem por Saduny em 2009-04-23, 2:37 pm

imagem com link:
Código:
<a href="LINK DE DESTINO" target="_blank"><img src="LINK DA IMAGEM" border="0" alt="DESCRIÇÃO DA IMAGEM"></a>
Imagem transparente:
Código:
<img src="AQUI URL " style="filter:alpha(opacity=50)">

Reflicta a imagem em posição Vertical/ Horizontal
Código:
<img src="AQUI URL " style="filter:flipv">
efeito de noite:
Código:
<img src="AQUI  URL" style="filter:xray()">
Efeito de preto e branco:
Código:
<img src="AQUI  URL" style="filter:gray;">
Efeito de gravadura na imagem:
Código:
<img src="AQUI  URL" style="filter:progid:dximagetransform.microsoft.emboss">
Efeito de realce nas imagem:
Código:
<img src=" AQUI  URL" style="filter:progid:dximagetransform.microsoft.emboss">


EFEITOS À PASSAGEM DO MOUSE

De Preto e Branco para Cor:
Código:
<style type="text/css"> a: AQUI URL {filter:gray;} a:visited img {filter:gray;} a:hover img {filter:none;} </style>
De Cor para Preto e Branco:
Código:
<style type="text/css"> a: AQUI URL {filter:none;} a:visited img {filter:none;} a:hover img {filter:gray;} </style>
De normal para reflectida:
Código:
<style type="text/css"> a:link img {filter:gray;} a:visited img {filter:gray;} a:hover img {filter:none;} </style>
De reflectida para normal:
Código:
<style type="text/css"> a:link img {filter:none;} a:visited img {filter:none;} a:hover img {filter:gray;} </style>
Colucar imagens próximas:
Código:
<div style="white-space: nowrap;"> <img src="URL IMAGEM"> <img src="URL IMAGEM”"> </div>


avatar
Saduny
Moderador

Masculino
Posts : 422 País de Origem :

Ver perfil do usuário http://correiacv.hi5.com/friend/p418283374--+%C2%A2%CF%83%D1%8F%

Voltar ao Topo Ir em baixo

Imagens

Mensagem por Storm em 2009-04-27, 4:02 pm

Parte Css:

Código:
Código:
<style type="text/css">
.stormgr{padding-top:9px;width:170px; height:300px; background: transparent url(Url);}
.stormgr .storm a {position:relative; left:9px;display:block; height:20px; width:150px; overflow:hidden;text-decoration:none; border:none; border: 1px solid #FFF !important;}
.stormgr .storm a img{ border:none;}
.stormgr .storm a:hover img{filter:alpha(opacity=50); opacity:0.5;}
.stormgr .storm a:hover { height:180px; background-image: url(url); border: 1px dashed Black !important;}
</style>

Parte Html:

Código:
Código:
<div class="stormgr">
<div class="storm"><a href="#"><img src="URL DA IMAGEM" width="150" height="180"/></a></div>
<div class="storm"><a href="#"><img src="URL DA IMAGEM" width="150" height="180"/></a></div>
<div class="storm"><a href="#"><img src="URL DA IMAGEM" width="150" height="180"/></a></div>
<div class="storm"><a href="#"><img src="URL DA IMAGEM" width="150" height="180"/></a></div>
<div class="storm"><a href="#"><img src="URL DA IMAGEM" width="150" height="180"/></a></div>
<div class="storm"><a href="#"><img src="URL DA IMAGEM" width="150" height="180"/></a></div>
</div>

Ps: As Imagens devem ter o tamanho conforme os "width" e "height"...


avatar
Storm
Sub Admin

Masculino
Posts : 852 País de Origem :

Ver perfil do usuário http://pwp.netcabo.pt/fernando.martim/

Voltar ao Topo Ir em baixo

Re: Galeria de imagem com CSS

Mensagem por nandorocha em 2009-10-20, 3:31 pm

pessoal ajudai.me quero por a imagem do fundo a ocupar a pagina do perfil toda.. dai.me um codigo para me ajudar por favor
avatar
nandorocha
Membro

Masculino
Posts : 9 País de Origem :

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: Galeria de imagem com CSS

Mensagem por nandorocha em 2009-10-20, 3:36 pm

dai.me um codigo para por a minha imagem de fundo a ocupar a pagina do perfil toda... pf
avatar
nandorocha
Membro

Masculino
Posts : 9 País de Origem :

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: Galeria de imagem com CSS

Mensagem por Lyrical em 2009-10-20, 3:38 pm

Tens Photoshop nandofuck?
a unica solucao para teu problema sao programas de edicao de imagens
redimensiona e depois fazes upload.



Paulo Rosa aka lyrical / lirycal_s, from Beira Moçambique, Mtc, é um graffiteiro um dos melhores que ja vi, free vector wallpaper graffiti
avatar
Lyrical
Administrador

Masculino
Posts : 1146 País de Origem :

Ver perfil do usuário http://urbanzone.withme.us

Voltar ao Topo Ir em baixo

Re: Galeria de imagem com CSS

Mensagem por nandorocha em 2009-10-20, 3:40 pm

nao meu mas deixa.la ent meu
avatar
nandorocha
Membro

Masculino
Posts : 9 País de Origem :

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: Galeria de imagem com CSS

Mensagem por Lyrical em 2009-10-20, 4:15 pm

Aranja um photoshop, vai te ajudar muito mesmo. acredite...



Paulo Rosa aka lyrical / lirycal_s, from Beira Moçambique, Mtc, é um graffiteiro um dos melhores que ja vi, free vector wallpaper graffiti
avatar
Lyrical
Administrador

Masculino
Posts : 1146 País de Origem :

Ver perfil do usuário http://urbanzone.withme.us

Voltar ao Topo Ir em baixo

Re: Galeria de imagem com CSS

Mensagem por Conteúdo patrocinado


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

UrbanZone :: Informática ::  :: Web :: html | Css

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum