Bóng đổ cho hình ảnh PNG trong CSS

Tôi có một hình ảnh PNG, có dạng miễn phí (không phải hình vuông).

Tôi cần áp dụng hiệu ứng đổ bóng cho hình ảnh này.

Cách tiếp cận tiêu chuẩn ...

-o-box-shadow:      12px 12px 29px #555;
-icab-box-shadow:   12px 12px 29px #555;
-khtml-box-shadow:  12px 12px 29px #555;
-moz-box-shadow:    12px 12px 29px #555;
-webkit-box-shadow: 12px 12px 29px #555;
box-shadow:         12px 12px 29px #555;

... Hiển thị bóng cho hình ảnh này, giống như nó là một hình vuông. Vì vậy, tôi thấy hình ảnh và bóng vuông của mình, không theo dạng đối tượng, được hiển thị trong hình ảnh.

Có cách nào để làm điều đó đúng?

Đến bữa tiệc muộn một chút, nhưng đúng vậy, hoàn toàn có thể tạo bóng đổ động "thật" xung quanh các PNG mặt nạ alpha, sử dụng kết hợp bộ lọc dropshadow (cho Webkit), SVG (cho Firefox) và bộ lọc DX cho IE.

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

<!-- HTML elements here -->

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
        <feOffset dx="12" dy="12" result="offsetblur"/>
        <feFlood flood-color="rgba(0,0,0,0.5)"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

Một số so sánh giữa bóng đổ thật và bóng hộp và một bài viết về kỹ thuật tôi vừa mô tả .

Tôi hi vọng cái này giúp được!

Có, có thể sử dụng filter: dropShadow(x y blur? spread? color?), bằng CSS hoặc nội tuyến:

img {
  width: 150px;
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png">

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png" style="-webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222);">

Nếu bạn có> 100 hình ảnh mà bạn muốn có bóng đổ, tôi khuyên bạn nên sử dụng chương trình dòng lệnh ImageMagick . Với điều này, bạn có thể áp dụng bóng đổ hình cho 100 hình ảnh chỉ bằng cách gõ một lệnh! Ví dụ:

for i in "*.png"; do convert $i '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage "shadow/$i"; done

Lệnh (shell) ở trên lấy mỗi tệp .png trong thư mục hiện tại, áp dụng bóng đổ và lưu kết quả vào thư mục bóng /. Nếu bạn không thích bóng đổ được tạo ra, bạn có thể điều chỉnh các tham số rất nhiều; bắt đầu bằng cách xem tài liệu về bóng và các hướng dẫn sử dụng chung có rất nhiều ví dụ thú vị về những điều có thể được thực hiện đối với hình ảnh.

Nếu bạn thay đổi suy nghĩ trong tương lai về giao diện của bóng đổ - đó chỉ là một lệnh để tạo hình ảnh mới với các tham số khác nhau :-)

img {
  -webkit-filter: drop-shadow(5px 5px 5px #222222);
  filter: drop-shadow(5px 5px 5px #222222);
}

Điều đó đã làm việc rất tốt cho tôi. Một điều cần lưu ý trong IE bạn cần đủ màu (# 222222) ba ký tự không hoạt động.

Như Dudley đã đề cập trong câu trả lời của mình, điều này là có thể với bộ lọc CSS bóng đổ cho webkit, bộ lọc SVG cho Firefox và DirectX cho Internet Explorer 9-.

Một bước nữa là nội tuyến SVG, loại bỏ yêu cầu bổ sung:

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url("data:image/svg+xml;utf8,<svg height='0' xmlns='http://www.w3.org/2000/svg'><filter id='drop-shadow'><feGaussianBlur in='SourceAlpha' stdDeviation='4'/><feOffset dx='12' dy='12' result='offsetblur'/><feFlood flood-color='rgba(0,0,0,0.5)'/><feComposite in2='offsetblur' operator='in'/><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge></filter></svg>#drop-shadow");
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

Thêm đường viền với bán kính trong lớp bạn nếu nó là một khối. bởi vì theo mặc định bóng sẽ áp dụng trên viền khối, ngay cả khi hình ảnh của bạn có góc tròn.

border-radius: 4px;

thay đổi bán kính đường viền của nó theo góc hình ảnh của bạn. Hy vọng điều này giúp đỡ.

Chỉ cần thêm điều này:

-webkit-filter: drop-shadow(5px 5px 5px #fff);
 filter: drop-shadow(5px 5px 5px #fff); 

thí dụ:

<img class="home-tab-item-img" src="img/search.png"> 

.home-tab-item-img{
    -webkit-filter: drop-shadow(5px 5px 5px #fff);
     filter: drop-shadow(5px 5px 5px #fff); 
}

Dưới đây là đoạn mã hoạt hình di chuột phát sáng sẵn sàng cho việc này:

http://codepen.io/widhi_allan/pen/ltaCq

-webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,0.80));

Khi tôi đăng bài này ban đầu thì không thể, vì vậy đây là cách giải quyết. Bây giờ tôi chỉ đơn giản đề nghị sử dụng các câu trả lời khác.

Không có cách nào để có được phác thảo chính xác của hình ảnh nhưng bạn có thể giả mạo nó với một div phía sau hình ảnh ở trung tâm.

Nếu thủ thuật của tôi không hiệu quả thì bạn phải cắt hình ảnh và thực hiện nó cho từng hình ảnh nhỏ. (càng nhiều hình ảnh, bóng sẽ càng chính xác) nhưng đối với hầu hết các hình ảnh, nó trông ổn với chỉ một img.

những gì bạn cần làm là đặt một div quấn quanh img của bạn như vậy

<div id="imgWrap">
    <img id="img" scr="imgLocation">
</div>

sau đó bạn đặt một dải phân cách trống bên trong bọc (cái này sẽ đóng vai trò là cái bóng)

<div id="imgWrap">
    <div id="shadow"> </div>
    <img id="img" scr="imgLocation">
</div>

và sau đó bạn phải làm cho bóng xuất hiện phía sau img với CSS:

#img {
    z-index: 1;
}

#shadow {
    z-index: 0; /*make this value negative if doesnt work*/
    box-shadow: 0 -130px 180px 150px rgba(255, 255, 0, 0.6);
    width: 0;
    height: 0;
}

bây giờ định vị imgWrap để định vị img ban đầu ... để căn giữa bóng của img, bạn có thể lộn xộn với hai giá trị đầu tiên của bóng hộp làm cho chúng âm .... hoặc bạn hoàn toàn có thể định vị img và div div làm cho img giá trị trên cùng và bên trái = 0 và giá trị div bóng = một nửa chiều rộng và chiều cao của img tương ứng.

Nếu điều này có vẻ khủng khiếp, hãy cắt img của bạn lên và thử lại.

(Nếu bạn không muốn bóng phía sau img chỉ trên phác thảo thì bạn cần làm cho img của bạn mờ đi và làm cho nó hoạt động như thể nó trong suốt, điều đó không khó và bạn có thể nhận xét và tôi sẽ giải thích sau)

Trong trường hợp của tôi, nó phải hoạt động trên các trình duyệt di động hiện đại, với hình ảnh PNG với các hình dạng và độ trong suốt khác nhau. Tôi đã tạo bóng đổ bằng cách sử dụng bản sao của hình ảnh. Điều đó có nghĩa là tôi có hai imgyếu tố của cùng một hình ảnh, một yếu tố trên cùng (sử dụng position: absolute) và yếu tố phía sau có các quy tắc sau được áp dụng cho nó:

.image-shadow {
  filter: blur(10px) brightness(-100);
  -webkit-filter: blur(10px) brightness(-100);
  opacity: .5;
}

Điều này bao gồm bộ lọc độ sáng để làm tối hình ảnh phía dưới và bộ lọc mờ để tạo bóng đổ hiệu ứng mờ thường có. Opacity ở mức 50% sau đó được áp dụng để làm mềm nó.

Điều này có thể được áp dụng trình duyệt chéo bằng cách sử dụng mozvà mscờ.

Ví dụ: https://jsfiddle.net/5mLssm7o/

Có một tính năng được đề xuất mà bạn có thể sử dụng cho bóng đổ hình dạng tùy ý. Bạn có thể thấy nó ở đây, lịch sự của Lea Verou:

http://www.netmagazine.com/features/hot-web-stiterias-css-bleinating-modes-and-filters-shadow-dom

Hỗ trợ trình duyệt là tối thiểu, mặc dù.

Điều này sẽ không thể xảy ra với css - một hình ảnh là một hình vuông, và vì vậy bóng sẽ là bóng của hình vuông. Cách dễ nhất là sử dụng photoshop / gimp hoặc bất kỳ trình chỉnh sửa hình ảnh nào khác để áp dụng bóng như vẽ lõi.

Một mẹo mà tôi thường sử dụng khi tôi chỉ cần bóng "một chút" (đọc: đường viền không được siêu chính xác) là đặt DIV với tỷ lệ lấp đầy 100% từ 100% đến 100% dưới hình ảnh. CSS cho DIV trông giống như:

.shadow320x320{    
        background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.58) 1%, rgba(0,0,0,0) 43%, rgba(0,0,0,0) 100%); /* FF3.6+ */
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.58)), color-stop(1%,rgba(0,0,0,0.58)), color-stop(43%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
        background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* Opera 12+ */
        background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* IE10+ */
        background: radial-gradient(ellipse at center, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  }

Điều này sẽ tạo ra một 'chấm' mờ dần màu đen trên DIV 320x320. Nếu bạn chia tỷ lệ chiều cao hoặc chiều rộng của DIV, bạn sẽ có được một hình bầu dục tương ứng. Rất đẹp để tạo bóng, ví dụ như bóng dưới chai hoặc hình dạng giống như hình trụ khác.

Có một công cụ tuyệt vời, siêu tuyệt vời để tạo độ dốc CSS tại đây:

http://www.colorzilla.com/gradient-editor/

ps: Làm một nhấp chuột quảng cáo lịch sự khi bạn sử dụng nó. (Và, không, tôi không liên kết với nó. Nhưng nhấp chuột lịch sự sẽ trở thành một thói quen, đặc biệt là đối với công cụ bạn sử dụng thường xuyên ... chỉ cần nói ... vì tất cả chúng ta đều làm việc trên mạng ... )

Bạn không thể làm điều này một cách đáng tin cậy trên tất cả các trình duyệt. Microsoft không còn hỗ trợ các bộ lọc DX kể từ IE10 +, vì vậy không có giải pháp nào ở đây hoạt động hoàn toàn:

https://msdn.microsoft.com/en-us/l Library / hh801215 (v = vs85) .aspx

Thuộc tính duy nhất hoạt động đáng tin cậy trên tất cả các trình duyệt là box-shadowvà điều này chỉ đặt đường viền trên thành phần của bạn (ví dụ: div), dẫn đến đường viền vuông:

box-Shadow: vertical Offerset verticalPackset BlurDistance lây lan Chèn màu ;

ví dụ

box-shadow: -2px 6px 12px 6px #CCCED0;

Nếu bạn tình cờ có một hình ảnh 'vuông' nhưng với các góc được làm tròn đồng nhất, bóng đổ sẽ hoạt động border-radius, vì vậy bạn luôn có thể mô phỏng các góc tròn của hình ảnh trong div của bạn.

Đây là tài liệu của Microsoft cho box-shadow:

https://msdn.microsoft.com/en-us/l Library / gg589484 (v = vs85) .aspx

Có lẽ bạn đang tìm kiếm này. http://lineandpixel.com/blog/png-shadow

img { png-shadow: 5px 5px 5px #222; }