Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Douglas Evaristo Santos

Formas de fazer sombra em div

Por , em Desenvolvimento frontend

Recommended Posts

Douglas Evaristo Santos    2

Douglas Evaristo Santos
Postado

Bom dia amigos... Estou começando um novo projeto e pensei em começar esse tópico para trocar umas ideias com vocês sobre como VOCÊ faz sombra em div... Sei que existe inumeras formas, porem gostaria de saber a forma mais simples de se fazer uma sombra minimalista como a imagem abaixo

 

m9g.png

 

Pensei em varias formas, como por exemplo, criar 2 divs, uma sobre a outra e mudar apenas o posicionamento da de baixo... Seria esse o método mais facil?? Se eu fizer a borda de 2 lados mais espessa, com a cor, e colocar arredondado ficará bom será?

 

Enfim, vamos aproveitar esse tópico para trocar experiencias do caso... :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

zcommand    7

zcommand
Postado

dae Douglas blz? eu costumo usa o box shadow, como vc mesmo disse tem várias formas de fazer, mas acho o efeito apresentado pelo pelo box shadow bem bacaninha.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Evaristo Santos    2

Douglas Evaristo Santos
Postado

E ae zcommand... Entao cara, eu ja não gosto de usar o box shadow pelo fato de não suportar em navegadores antigos... Prefiro achar uma soluçao mais simples e universal, porque não adianta fugir, usuarios com ie7 serao realidade para todos nos... É foda... Mais enfim, voce so usa o box shadow mesmo ne? Nunca tentou fazer como eu citei de divs ou com bordas não?

Compartilhar este post

Link para o post
Compartilhar em outros sites

zcommand    7

zcommand
Postado

É Douglas esse é o problema de usar o BS, da até para arrumar para que funcione nos navegadores antigos, mas dá uma trabalheira só, dessa forma q vc postou não tentei ainda, vou até dar uma olhada para ver o resultado. uso geralmente o BS mesmo, mas devo ter alguma coisa aqui sobre isso se achar compartilho a ideia com vc. :joia:

Compartilhar este post

Link para o post
Compartilhar em outros sites

zcommand    7

zcommand
Postado

Cara valew ai, achei um hack baum pra resolver o problema do BS no ie 6 7 e 8: css3pie.com

Axo o BS mais natural, mas fiz aqui com camadas de div como vc tinha citado acima, ficou bacana também, a algum tempo atras tinha feito um teste com imagens, não gostei muito, a chance de dar algum bug é bem maior. Agora já que vc conseguiu um hack para os browser antigos vc vai tem bons resultados.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Evaristo Santos    2

Douglas Evaristo Santos
Postado

Tá certo cara... Vou usar o BS mesmo kkkkk vc me convenceu! Segue abaixo o codigo final caso alguem se interesse! Abraços!

 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body{ background-color:#2AC56C}
#teste {
margin:0; padding:0;
background-color:#17AA56;
width:50px;	height:40px;
display: table-cell; vertical-align: middle;
text-align:center; text-height:50px; color:#FFF; font-weight: bold;
-moz-border-radius: 5px;border-radius: 5px;
-moz-box-shadow: 0 5px #119E4D;-webkit-box-shadow: 0 4px 0 0px #119E4D;box-shadow: 0 4px #119E4D;
}
</style>
</head>
<body>
<div id="teste">ok</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito