Drop Shadow com CSS

Recentemente elaborei um container para dashboards. Enquanto estava no photoshop tudo bem. Drop shadow nos dashboards, tudo bem, tudo feliz.

Quando fui levar para o html, procurei por drop shadow com CSS ou jQuery. Achei alguns exemplos, mas nenhum deles fez um drop shadow com transparência, isto é, preciso ter uma cor solida de fundo. Fiquei frustrado. Talvez eu tenha reinventado a roda, mas consegui com pouco código fazer um efeito drop shadow simples e com transparência ;).

A única limitação que consigo ver (até agora) é que a caixa deve ter no mínimo 234x222px, que no meu caso atende a necessidade.

Então vamos lá.

No html, digitamos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pt-br">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" href="arquivo-css.css" type="text/css" media="screen" />
</head>
<body>
<ul class="dashwin" style="top:200px;left:50px;width:370px;height:250px;">
<li>
<div class="content">
hello!
</div>
</li>
<li class="rightcorner1"></li>
<li class="rightback"></li>
<li class="bottom">
<ul>
<li class="leftcorner"></li>
<li class="centerback"></li>
<li class="rightcorner2"></li>
</ul>
</li>
</ul>
</body>
</html>

 

No CSS, digitamos:

.dashwin,
.dashwin > li.bottom > ul {
margin:0;
padding:0;
list-style:none;
}
.dashwin {
min-width:234px;
min-height:222px;
position:absolute;
}
.dashwin > li > div.content {
width:100%;
height:99%;
position:absolute;
left:-7px;
top:-2px;
border:1px solid #666;
background:#ccc;
}
.dashwin > li.rightcorner1 {
width:100%;
min-width:5px;
height:6%;
min-height:14px;
background:url(corpo-win-d-1.png) no-repeat top right;
}
.dashwin > li.rightback {
width:100%;
min-width:5px;
height:93%;
min-height:50px;
background:url(corpo-win-d-2.png) repeat-y right;
}
.dashwin > li.bottom {
width:100%;
min-width:5px;
height:1%;
min-height:14px;
}
.dashwin > li.bottom ul {
width:100%;
background:#f4f4f4;
}
.dashwin > li.bottom li.leftcorner {
width:6%;
min-width:14px;
height:8px;
float:left;
background:url(corpo-win-b-1.png);
}
.dashwin > li.bottom li.centerback {
width:88%;
min-width:50px;
height:8px;
float:left;
background:url(corpo-win-b-2.png);
}
.dashwin > li.bottom li.rightcorner2 {
width:6%;
min-width:14px;
height:8px;
float:left;
background:url(corpo-win-b-3.png) right;
}

 

As imagens necessárias:

corpo-win-d-2

Lado direito 2

corpo-win-d-1

Lado direito 1

corpo-win-b-3

Rodapé 3

corpo-win-b-2

Rodapé 2

corpo-win-b-1

Rodapé 1

 

Até a próxima.

Anúncios

Deixe um comentário

Faça o login usando um destes métodos para comentar:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s