Jump to content
Forum Roportal
Sign in to follow this  
Clickuserx

ajutor CSS , image shadow

Rate this topic

Recommended Posts

Buna. Incerc sa construiesc un website cu o interfata relativ simpla despre fotografie. Am nevoie de ajutorul dumneavoastra. Nu stiu cum sa fac un shadow la imagini, la cele de pe pagina principala, front page, m-am uitat pe internet si am vazut ceva CSS pentru a incadra pozele cu shadow dar eu doresc ca in exemplele de mai jos , aceasta umbra sa fie doar in partea de jos a pozei

 

De asemenea as fi recunoscator daca mi-ati putea spune cu pot pe front page sa pun doar ceva in genul unor articole, fara sa incarc toate pozele , doar o poza, titlul si link pentru a merge mai departe la galerie sau link de UP .

 

Mentionez ca momentan site-ul care doresc sa il construiesc / modific se afla pe platforma blogspot.

post-374301-0-40708300-1343883591_thumb.jpg

post-374301-0-58726100-1343883771_thumb.jpg

Edited by Clickuserx

Share this post


Link to post
Share on other sites

Efectul pe care vrei sa-l obtii se numeste lifted corner drop shadow, il poti obtine din codul asta:

<!DOCTYPE html>

 

 

<html>

<head>

<style>

.box{

width:200px;

height:100px;

 

}

 

.drop-shadow {

position:relative;

float:left;

width:40%;

padding:1em;

margin:2em 10px 4em;

background:#fff;

-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

}

 

.drop-shadow:before,

.drop-shadow:after {

content:"";

position:absolute;

z-index:-2;

}

 

.drop-shadow p {

font-size:16px;

font-weight:bold;

}

 

 

.lifted {

-moz-border-radius:4px;

border-radius:4px;

}

 

.lifted:before,

.lifted:after {

bottom:15px;

left:10px;

width:50%;

height:20%;

max-width:300px;

-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);

-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);

box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);

-webkit-transform:rotate(-3deg);

-moz-transform:rotate(-3deg);

-ms-transform:rotate(-3deg);

-o-transform:rotate(-3deg);

transform:rotate(-3deg);

}

 

.lifted:after {

right:10px;

left:auto;

-webkit-transform:rotate(3deg);

-moz-transform:rotate(3deg);

-ms-transform:rotate(3deg);

-o-transform:rotate(3deg);

transform:rotate(3deg);

}

 

</style>

</head>

<body>

 

<div class="box drop-shadow lifted"></div>

 

</body>

</html>

 

sursa: snipplr.com

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×