使用CSS / JS / jQuery折弯图像效果？ [英] Bending image effect with CSS/JS/jQuery?

问题描述

我试图在我的网站上的图像风格有一个轻微的弯曲效果和阴影下面的图像的弯曲部分 - 就像这样（看到ebay）：

有人知道如何实现？任何建议的jQuery或java脚本库？

解决方案

我对slash197的答案做了修改。它看起来完全像在图片中，至少在Firefox中。但是它是可笑的大，需要额外的标记。

我把图像容器div（大部分代码由slash197）在另一个div。

$ b b

 < div class =container> 
< div class =shadow>& nbsp;< / div> 
< div class =img-container> 
< img src =http://your.server.com/path/to/your/image.jpg/> 
< / div> 
< / div> 
   

CSS ：

  .container {
 position：relative; 
 display：inline-block; / *或block * / 
 margin：20px; / *不需要* / 
} 
 .img-container {
 padding：5px; 
 border：1px solid #cccccc; 
 border-radius：2px; 
 display：inline-block; 
 background：white; 
 position：relative; 
 top：0; 
 left：0; 
} 
 .shadow {
 box-shadow：0 20px 5px 5px #cccccc; / *调整颜色，模糊或扩展，如果你想* / 
 transform：skewy（-3deg）; 
 position：absolute; 
 left：8px; 
 bottom：22px; / *调整这个来改变阴影的大小* / 
 height：20px; 
 width：100px; 
} 
  

在这里它的所有荣耀： http://jsfiddle.net/VCEJB/1/

EDIT：已将更改为到 skewy ，因为它可能看起来稍微好一些。

I'm trying to style the images on my website with a slight bending-effect and a shadow below the bended parts of the image - just like this (seen on ebay):

Does somebody know how to achieve? Any suggested jQuery or java-script libraries? Or is it achieveable with CSS only?

解决方案

I did a modification to slash197's answer. It looks exactly like in the picture, at least in Firefox. However it is ridiculously large and needs additional markup.

I put the image container div (most of code by slash197) inside another div. Then I added yet another div and gave it a shadow, then I just positioned it correctly.

HTML:

<div class="container">
    <div class="shadow">&nbsp;</div>
    <div class="img-container">
        <img src="http://your.server.com/path/to/your/image.jpg" />
    </div>
</div>

CSS:

.container {
    position: relative;
    display: inline-block; /* or block */
    margin: 20px; /* not required */
}
.img-container {
    padding: 5px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    display: inline-block;
    background: white;
    position: relative;
    top: 0;
    left: 0;
}
.shadow {
    box-shadow: 0 20px 5px 5px #cccccc; /* adjust color, blur or spread if you want */
    transform: skewy(-3deg);
    position: absolute;
    left: 8px;
    bottom: 22px; /* adjust this to change the shadow's size */
    height: 20px;
    width: 100px;
}

Here it is in all its glory: http://jsfiddle.net/VCEJB/1/

EDIT: Changed rotate to skewy as it probably looks marginally better.

这篇关于使用CSS / JS / jQuery折弯图像效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！