Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

novat

Aplicar "dropshadow" fora de um "border-radius"

Mensagens Recomendadas

novat

Viva, amigos!

Estou a desenvolver um website (www.nordey.com) que permite a criação de homepages google personalizáveis, bastanto, para tal, que o utilizador insira o link de uma imagem. De seguida, é analisado o tamanho da imagem e aplicado o efeito de "cantos arredondados" - sempre ser criar/alojar uma nova imagem.

Q: Como faço para aplicar a leve sombra "dropshadow" fora da borda redonda criada?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.03"></script>
<script type="text/javascript">
$.fn.corner.defaults.useNative = false;

$(document).ready(function(){
        $("#imgBox").corner("15px");
    });
</script>
</head>

<?php
$img = GetImageSize( $_GET['t'] );
$width = $img[0];
$height = $img[1];
?>

<style>
.wrap0, .wrap1, .wrap2, .wrap3 {
  display:inline-table;
  /* \*/display:block;/**/
  }
.wrap0 {
  float:left;
  background:url(http://15daysofjquery.com/examples/osds/shadow.gif) right bottom no-repeat;
  }
.wrap1 {
  background:url(http://15daysofjquery.com/examples/osds/shadow180.gif) no-repeat;
  }
.wrap2 {
  background:url(http://15daysofjquery.com/examples/osds/corner_bl.gif) -18px 100% no-repeat;
  }
.wrap3 {
padding:10px 14px 14px 10px;
  background:url(http://15daysofjquery.com/examples/osds/corner_tr.gif) 100% -18px no-repeat;
  }
  body { background: #fff;}
</style>
<body>
<h1>Using the Corner Plugin with Images</h1>

<img src="<?php print( $_GET['t'] ) ?>" />

<div style="border: 2px solid black;
            border-radius: 30px;
            -moz-border-radius: 30px;
            -khtml-border-radius: 30px;
            -webkit-border-radius: 30px;
            width: <?php echo $width; ?>px;
            height: <?php echo$height; ?>px;
            background: url('<?php print( $_GET['t'] ) ?>')" class="dropshadow" ></div>

Desde já, muito obrigado pelo vosso tempo :)

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
novat

O efeito de bordas redondas já funciona - metes o link de uma imagem de qualquer tamanho e é-te "dada" a aparência arredondada.

Q: É possível aplicar o drop shadow, de forma a criar sombra circundante à borda redonda?

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.