ปล่อยเงาสำหรับภาพ PNG ใน CSS

ฉันมีภาพ PNG ที่มีรูปแบบอิสระ (ไม่ใช่สี่เหลี่ยมจัตุรัส)

ฉันต้องใช้เอฟเฟกต์เงาเงากับภาพนี้

แนวทางมาตรฐาน ...

-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;

... แสดงเงาของภาพนี้ราวกับเป็นสี่เหลี่ยมจัตุรัส ดังนั้นฉันเห็นภาพและเงาสี่เหลี่ยมจัตุรัสซึ่งไม่เป็นไปตามรูปแบบของวัตถุที่แสดงในภาพ

มีวิธีการทำอย่างถูกต้องหรือไม่?

สายไปงานเลี้ยงเล็ก ๆ น้อย ๆ แต่ใช่มันเป็นไปได้โดยสิ้นเชิงที่จะสร้างเงาแบบไดนามิก "จริง" แบบไดนามิกรอบ PNG ที่สวมหน้ากากโดยใช้ตัวกรอง dropshadow (สำหรับ Webkit), SVG (สำหรับ Firefox) และ DX ตัวกรองสำหรับ 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>

การเปรียบเทียบระหว่างแบบเลื่อนเงาจริงและกล่องเงาและบทความเกี่ยวกับเทคนิคที่ผมได้อธิบายเพียง

ฉันหวังว่านี่จะช่วยได้!

ใช่มันเป็นไปได้ที่จะใช้filter: dropShadow(x y blur? spread? color?)ทั้งใน CSS หรือแบบอินไลน์:

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);">

หากคุณมี> 100 ภาพที่คุณต้องการที่จะมีเงาสำหรับผมจะแนะนำให้ใช้โปรแกรมบรรทัดคำสั่งImageMagick ด้วยสิ่งนี้คุณสามารถใช้เงาหล่นรูปกับ 100 ภาพเพียงแค่พิมพ์คำสั่งเดียว! ตัวอย่างเช่น:

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

คำสั่งด้านบน (เชลล์) ใช้ไฟล์. png แต่ละไฟล์ในไดเรกทอรีปัจจุบันนำเงามาใช้และบันทึกผลลัพธ์ใน shadow / directory หากคุณไม่ชอบเงาแบบหล่นที่สร้างขึ้นคุณสามารถปรับแต่งพารามิเตอร์ได้มาก เริ่มต้นด้วยการดูเอกสารเกี่ยวกับเงาและคำแนะนำการใช้งานทั่วไปมีตัวอย่างเจ๋ง ๆ มากมายที่สามารถทำกับรูปภาพได้

หากคุณเปลี่ยนใจในอนาคตเกี่ยวกับรูปลักษณ์ของเงา - มันเป็นเพียงคำสั่งเดียวในการสร้างภาพใหม่ด้วยพารามิเตอร์ที่แตกต่างกัน :-)

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

มันใช้งานได้ดีสำหรับฉัน สิ่งหนึ่งที่ควรทราบใน IE คือคุณต้องใช้สีเต็ม (# 222222) ตัวละครสามตัวไม่ทำงาน

ดังที่ดัดลีย์กล่าวถึงในคำตอบของเขาสิ่งนี้เป็นไปได้ด้วยตัวกรอง CSS แบบหล่น - เงาสำหรับ webkit, SVG สำหรับ Firefox และ DirectX ตัวกรองสำหรับ Internet Explorer 9-

อีกหนึ่งขั้นตอนคือการอินไลน์ SVG โดยไม่ต้องร้องขอเพิ่มเติม:

.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')";
}

เพิ่มเส้นขอบด้วยรัศมีในชั้นเรียนของคุณหากเป็นบล็อก เพราะโดยค่าเริ่มต้นเงาจะใช้กับเส้นขอบบล็อกแม้ว่าภาพของคุณจะมีมุมโค้งมน

border-radius: 4px;

เปลี่ยนรัศมีเส้นขอบตามมุมภาพของคุณ หวังว่าความช่วยเหลือนี้

เพียงเพิ่มสิ่งนี้:

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

ตัวอย่าง:

<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); 
}

นี่คือตัวอย่างโค้ดแท่งภาพเคลื่อนไหวเรืองแสงพร้อมสำหรับสิ่งนี้:

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

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

เมื่อฉันโพสต์สิ่งนี้เป็นครั้งแรกมันเป็นไปไม่ได้ดังนั้นนี่จึงเป็นวิธีแก้ปัญหา ตอนนี้ฉันเพียงแค่แนะนำให้ใช้คำตอบอื่น ๆ

ไม่มีวิธีที่จะทำให้ได้ภาพที่ชัดเจน แต่คุณสามารถปลอมมันด้วย div ด้านหลังภาพที่อยู่ตรงกลาง

หากกลอุบายของฉันไม่ทำงานคุณต้องตัดภาพและทำมันสำหรับทุก ๆ ภาพเล็กน้อย (ยิ่งภาพยิ่งมีความแม่นยำของเงามากขึ้น) แต่สำหรับภาพส่วนใหญ่จะดูไม่เป็นไรมีเพียงหนึ่งภาพ img

สิ่งที่คุณต้องทำคือใส่ชุดพันรอบตัวคุณ img อย่างนั้น

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

จากนั้นให้คุณใส่ตัวแบ่งที่ว่างเปล่าไว้ในห่อ (นี่จะทำหน้าที่เป็นเงา)

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

และจากนั้นคุณต้องทำให้เงาปรากฏอยู่ด้านหลัง img ด้วย 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;
}

ตอนนี้วางตำแหน่ง imgWrap เพื่อวางตำแหน่ง img ดั้งเดิม ... เพื่อจัดกึ่งกลางเงาของ img คุณสามารถยุ่งกับค่าสองค่าแรกของกล่องเงาทำให้ค่าลบ .... หรือคุณสามารถวางตำแหน่ง img และเงา divs อย่างแน่นอน ทำให้ค่าบนและซ้ายของ img = 0 และค่า div เงา = ครึ่งหนึ่งของความกว้างและความสูงของ img ตามลำดับ

ถ้านี่ดูน่าเกลียดลดความน่าสนใจของคุณและลองอีกครั้ง

(หากคุณไม่ต้องการเงาหลัง img เพียงแค่บนโครงร่างคุณต้องทำให้ img ทึบแสงและทำให้มันทำหน้าที่ราวกับว่ามันโปร่งใสซึ่งไม่ใช่เรื่องยากและคุณสามารถแสดงความคิดเห็นและฉันจะอธิบายในภายหลัง)

ในกรณีของฉันมันต้องทำงานกับเบราว์เซอร์มือถือที่ทันสมัยด้วยภาพ PNG ในรูปทรงและความโปร่งใสที่แตกต่างกัน ฉันสร้างเงาโดยใช้ภาพซ้ำ นั่นหมายความว่าฉันมีimgองค์ประกอบสองอย่างในภาพเดียวกันอันหนึ่งอยู่ด้านบนของอีกอันหนึ่ง (โดยใช้position: absolute) และอีกอันอยู่ข้างหลังมีกฎต่อไปนี้ที่ใช้กับมัน:

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

ซึ่งรวมถึงฟิลเตอร์ความสว่างเพื่อทำให้ภาพด้านล่างมืดลงและฟิลเตอร์เบลอเพื่อสร้างเงาเงาตกที่มีเอฟเฟกต์เลอะเลือน ความทึบแสงที่ 50% จะถูกนำไปใช้เพื่อทำให้นุ่มขึ้น

สามารถใช้ข้ามเบราว์เซอร์โดยใช้mozและตั้งmsค่าสถานะ

ตัวอย่าง: https://jsfiddle.net/5mLssm7o/

มีคุณสมบัติที่เสนอซึ่งคุณสามารถใช้สำหรับเงาแบบหล่นโดยพลการ คุณสามารถดูได้ที่นี่ความอนุเคราะห์จาก Lea Verou:

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

การสนับสนุนเบราว์เซอร์มีน้อยมาก

สิ่งนี้จะเป็นไปไม่ได้เมื่อใช้ css - ภาพเป็นรูปสี่เหลี่ยมจัตุรัสและเงาจึงเป็นเงาของรูปสี่เหลี่ยม วิธีที่ง่ายที่สุดคือการใช้ photoshop / gimp หรือโปรแกรมแก้ไขรูปภาพอื่น ๆ เพื่อใช้เงาเช่นแกนหลัก

เคล็ดลับที่ฉันมักจะใช้เมื่อฉันต้องการเงา "นิดหน่อย" (อ่าน: รูปร่างต้องไม่แม่นยำมาก) วาง DIV ด้วยการเติมเรเดียล 100% -black-to-100% - โปร่งใสภายใต้ภาพ CSS สำหรับ DIV ดูเหมือนว่า:

.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 */
  }

สิ่งนี้จะสร้าง 'จุด' สีดำจางหายไปเป็นวงกลมบน 320x320 DIV หากคุณปรับขนาดความสูงหรือความกว้างของ DIV คุณจะได้รับวงรีที่สอดคล้องกัน ดีมากที่จะสร้างเช่นเงาภายใต้ขวดหรือรูปทรงกระบอกอื่น ๆ

มีเครื่องมือที่ยอดเยี่ยมและยอดเยี่ยมอย่างเหลือเชื่อในการสร้างการไล่ระดับ CSS ที่นี่:

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

PS: คลิกโฆษณาที่สุภาพเมื่อคุณใช้งาน (และไม่ฉันไม่ได้มีส่วนเกี่ยวข้องกับมัน แต่การคลิกมารยาทควรกลายเป็นนิสัยโดยเฉพาะอย่างยิ่งสำหรับเครื่องมือที่คุณใช้บ่อย ๆ ... เพียงแค่บอกว่า ... เนื่องจากเราทุกคนทำงานในเน็ต ... )

คุณไม่สามารถทำสิ่งนี้ได้อย่างน่าเชื่อถือในทุกเบราว์เซอร์ Microsoft ไม่รองรับตัวกรอง DX ตั้งแต่ IE10 + อีกต่อไปดังนั้นจึงไม่มีวิธีแก้ปัญหาใดที่ทำงานได้อย่างสมบูรณ์:

https://msdn.microsoft.com/en-us/library/hh801215(v=vs.85).aspx

คุณสมบัติเดียวที่ทำงานได้อย่างน่าเชื่อถือในทุกเบราว์เซอร์คือbox-shadowและนี่จะทำให้เส้นขอบบนองค์ประกอบของคุณ (เช่น div) ส่งผลให้เส้นขอบสแควร์:

กล่องเงา: แนวนอนแนวตั้งแนวตั้งฉากหลังเบลอระยะแพร่กระจายระยะทางสีแทรก

เช่น

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

หากคุณมีภาพที่เป็น 'สี่เหลี่ยม' แต่มีมุมโค้งมนที่สม่ำเสมอเงาจะทำงานด้วยborder-radiusดังนั้นคุณจึงสามารถจำลองมุมโค้งมนของภาพใน div ของคุณได้

นี่คือเอกสารประกอบของ Microsoft สำหรับbox-shadow:

https://msdn.microsoft.com/en-us/library/gg589484(v=vs.85).aspx

บางทีคุณอาจกำลังค้นหาสิ่งนี้อยู่ http://lineandpixel.com/blog/png-shadow

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