Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

Sign in to follow this  
novat

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

Recommended Posts

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 :)

Share this post


Link to post
Share on other 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?

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  

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.