ajutor CSS , image shadow

Clickuserx · August 2, 2012

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.

Editat August 2, 2012 de Clickuserx

Maxsoft · August 3, 2012

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>

</body>

</html>

sursa: snipplr.com

Autentificare

ajutor CSS , image shadow

Postări Recomandate

Clickuserx 0

Partajează acest post

Link spre post

Distribuie pe alte site-uri

Maxsoft 0

Partajează acest post

Link spre post

Distribuie pe alte site-uri

Creează un cont sau autentifică-te pentru a adăuga comentariu

Creează un cont

Autentificare

Navigare

Activitate