ใน CSS3 โดยใช้ Box-Shadow และ Border-Radius โดยตรงบนภาพเบราว์เซอร์ไม่สามารถแสดงผลได้ดี อย่างไรก็ตามหากคุณใช้ภาพเป็นภาพพื้นหลังเบราว์เซอร์สไตล์ที่เพิ่มเข้ามาสามารถทำให้ดีขึ้นได้ ฉันจะอธิบายวิธีการสร้างเอฟเฟกต์สไตล์ภาพที่แตกต่างกันโดยใช้ Box-Shadow, Border-Radius และ Transition
คำถามโดยการดูการสาธิตเราสังเกตเห็นว่าเราตั้งค่าแบล็กเรดิอุสและซ้อนกล่องฝังตัวสำหรับบรรทัดแรกของภาพ Firefox แสดงผลเรดิอุสชายแดนของภาพ แต่ไม่ได้แสดงผลไม้ที่ฝังอยู่ในกล่อง ไม่มีผลกระทบของโครเมี่ยมและซาฟารี
. ปกติ img {
ชายแดน: Solid 5px #000;
-webkit-Border-Radius: 20px;
-moz-Border-Radius: 20px;
แนวชายแดน: 20px;
-webkit-box-shadow: inset 0 1px 5px RGBA (0,0,0, .5);
-moz-box-shadow: inset 0 1px 5px RGBA (0,0,0, .5);
Box-shadow: inset 0 1px 5px RGBA (0,0,0, .5);
-
เอฟเฟกต์ Firefox :Chrome/Safari
วิธีแก้ปัญหาเพื่อให้แบ็คเรดิอุสและซ้อนกล่องฝังตัวทำงานอย่างถูกต้องเราจำเป็นต้องแปลงภาพเป็นภาพพื้นหลัง
วิธีการแบบไดนามิกในการทำงานนี้แบบไดนามิกเราจำเป็นต้องใช้ jQuery เพื่อเพิ่มภาพพื้นหลังเพื่อห่อแต่ละภาพ รหัส JS ต่อไปนี้จะเพิ่มเครื่องห่อหุ้มสแปนสำหรับแต่ละภาพและเส้นทางภาพพื้นหลังของ Span คือเส้นทางภาพ
รหัสค่อนข้างง่ายฉันไม่คิดว่าจะมีความจำเป็นต้องอธิบาย หากคุณไม่ทราบคุณสามารถตรวจสอบ jQuery API ได้โดยตรง
<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"> </script>
<script type = "text/javascript">
$ (เอกสาร) .ready (function () {
$ ("img"). load (function () {
$ (นี่) .wrap (function () {
return '<span style = "ตำแหน่ง: สัมพัทธ์; แสดง: inline-block; พื้นหลัง: url (' + $ (this) .attr ('src') + ') ศูนย์กลางที่ไม่มีการทำซ้ำความกว้าง:' + $ (นี่) .width () + 'px; -
-
$ (นี่) .css ("ความทึบ", "0");
-
-
</script>
เอาท์พุท
รหัสข้างต้นจะส่งออกผลลัพธ์ต่อไปนี้:
<span style = "ตำแหน่ง: สัมพัทธ์; แสดง: inline-block; พื้นหลัง: url (image.jpg) ศูนย์กลางที่ไม่มีการทำซ้ำความกว้าง: 150px; ความสูง: 150px;">>
<img src = "image.jpg" style = "ความทึบ: 0;">
</span>
ภาพวงกลมเพิ่มเราใช้ Radius ชายแดนเพื่อให้ได้ผลของภาพวงกลมผลกระทบมีดังนี้:
CSS:
.Circle .Image-wrap {
-webkit-Border-Radius: 50em;
-moz-Border-Radius: 50em;
แนวชายแดน: 50em;
-
รูปแบบการ์ดด้านล่างเป็นภาพสไตล์การ์ดโดยใช้กล่องใส่กล่องแบบฝังตัวหลายตัว
CSS:
.Card .Image-wrap {
-webkit-box-shadow: สิ่งที่ใส่เข้าไป 0 0 1px RGBA (0,0,0, .8), สิ่งที่ใส่เข้าไป 0 2px 0 RGBA (255,255,255, .5), สิ่งที่ใส่เข้าไป 0 -1px 0 RGBA (0,0,0, .4);
-moz-box-shadow: สิ่งที่ใส่เข้าไป 0 0 1px RGBA (0,0,0, .8), สิ่งที่ใส่เข้าไป 0 2px 0 RGBA (255,255,255, .5), inset 0 -1px 0 RGBA (0,0,0, .4);
Box -Shadow: Inset 0 0 1PX RGBA (0,0,0, .8), Inset 0 2px 0 RGBA (255,255,255, .5), inset 0 -1px 0 RGBA (0,0,0, .4);
-webkit-Border-Radius: 20px;
-moz-Border-Radius: 20px;
แนวชายแดน: 20px;
-
รูปแบบการบรรเทาทุกข์ด้านล่างนี้เป็นผลบรรเทา
CSS:
.EMBOSSED .Image-wrap {
-webkit -box -shadow: inset 0 0 2px RGBA (0,0,0, .8), inset 0 2px 0 RGBA (255,255,255, .5), inset 0 -7px 0 RGBA (0,0,0, .6)
-moz -box -shadow: inset 0 0 2px rgba (0,0,0, .8), inset 0 2px 0 rgba (255,255,255, .5), inset 0 -7px 0 rgba (0,0,0, .6)
Box -Shadow: Inset 0 0 2px RGBA (0,0,0, .8), inset 0 2px 0 RGBA (255,255,255, .5), inset 0 -7px 0 RGBA (0,0,0, .6)
-webkit-Border-Radius: 20px;
-moz-Border-Radius: 20px;
แนวชายแดน: 20px;
-
สไตล์การบรรเทาที่ยืดหยุ่นเมื่อเปรียบเทียบกับสไตล์การนูนสไตล์ใหม่จะเพิ่มแอตทริบิวต์ 1px Blur
CSS:
.SOFT-EMBOSSED .Image-wrap {
-webkit -box -shadow: inset 0 0 4px RGBA (0,0,0,1), inset 0 2px 1px RGBA (255,255,255, .5), inset 0 -9px 2px RGBA (0,0,0, .6)
-moz -box -shadow: inset 0 0 4px RGBA (0,0,0,1), inset 0 2px 1px RGBA (255,255,255, .5), inset 0 -9px 2px RGBA (0,0,0, .6)
Box -Shadow: Inset 0 0 4px RGBA (0,0,0,1), inset 0 2px 1px RGBA (255,255,255, .5), inset 0 -9px 2px RGBA (0,0,0, .6)
-webkit-Border-Radius: 20px;
-moz-Border-Radius: 20px;
แนวชายแดน: 20px;
-
สไตล์คัตเอาท์ใช้ SHADOW กล่องฝังเพื่อให้ได้เอฟเฟกต์คัตเอาท์
CSS:
. ตัดออก. image-wrap {
-webkit-box-shadow: 0 1px 0 rgba (255,255,255, .2), inset 0 4px 5px RGBA (0,0,0, .6), สิ่งที่ใส่เข้าไป 0 1px 0 RGBA (0,0,0, .6);
-moz-box-shadow: 0 1px 0 rgba (255,255,255, .2), inset 0 4px 5px rgba (0,0,0, .6), inset 0 1px 0 rgba (0,0,0, .6);
Box-Shadow: 0 1px 0 RGBA (255,255,255, .2), inset 0 4px 5px RGBA (0,0,0, .6), inset 0 1px 0 RGBA (0,0,0, .6);
-webkit-Border-Radius: 20px;
-moz-Border-Radius: 20px;
แนวชายแดน: 20px;
-
การเสียรูปและเรืองแสงในตัวอย่างนี้เราเพิ่มแอตทริบิวต์การเปลี่ยนแปลงลงในบรรจุภัณฑ์รูปภาพ เมื่อเมาส์เลื่อนผ่านมันจะเปลี่ยนจากมุมโค้งมนเป็นรูปทรงกลม จากนั้นเราใช้หลายกล่อง shadows เพื่อให้ได้เอฟเฟกต์การส่องสว่าง
CSS:
.Morphing-plowing .image-wrap {
-webkit-transition: 1s;
-MOZ-TRANSITION: 1S;
การเปลี่ยนแปลง: 1S;
-webkit-Border-Radius: 20px;
-moz-Border-Radius: 20px;
แนวชายแดน: 20px;
-
.Morphing-plowing .Image-wrap: โฮเวอร์ {
-webkit-box-shadow: 0 0 20px RGBA (255,255,255, .6), inset 0 0 20px RGBA (255,255,255,1);
-moz-box-shadow: 0 0 20px RGBA (255,255,255, .6), inset 0 0 20px RGBA (255,255,255,1);
Box-Shadow: 0 0 20px RGBA (255,255,255, .6), สิ่งที่ใส่เข้าไป 0 0 20px RGBA (255,255,255,1);
-webkit-Border-Radius: 60em;
-MOZ-Border-Radius: 60EM;
แนวชายแดน: 60em;
-
ไฮไลต์เอฟเฟกต์เอฟเฟกต์ไฮไลท์ทำได้โดยการเพิ่ม: หลังจาก pseudo-class ลงในองค์ประกอบ
CSS:
. Glossy .Image-wrap {
-webkit-box-shadow: inset 0 -1px 0 rgba (0,0,0, .5);
-moz-box-shadow: inset 0 -1px 0 rgba (0,0,0, .5);
Box -shadow: inset 0 -1px 0 RGBA (0,0,0, .5);
-webkit-Border-Radius: 20px;
-moz-Border-Radius: 20px;
แนวชายแดน: 20px;
-
. Glossy .Image-wrap: หลังจาก {
ตำแหน่ง: สัมบูรณ์;
เนื้อหา: ' ';
ความกว้าง: 100%;
ความสูง: 50%;
ด้านบน: 0;
ซ้าย: 0;
-webkit-Border-Radius: 20px;
-moz-Border-Radius: 20px;
แนวชายแดน: 20px;
ความเป็นมา: -Moz-Linear-Gradient (Top, RGBA (255,255,255,0.7) 0%, RGBA (255,255,255, .1) 100%);
ความเป็นมา: -webkit-gradient (เชิงเส้น, ด้านบนซ้าย, ด้านล่างซ้าย, สี-หยุด (0%, RGBA (255,255,255,0.7)), การหยุดสี (100%, RGBA (255,255,255, .1)));
ความเป็นมา: linear-gradient (บนสุด, RGBA (255,255,255,0.7) 0%, RGBA (255,255,255, .1) 100%);
-
ผลการสะท้อนในตัวอย่างนี้เราย้ายไฮไลต์ไปที่ด้านล่างเพื่อให้ได้เอฟเฟกต์การสะท้อนกลับ
CSS:
.Reflection .Image-wrap: หลังจาก {
ตำแหน่ง: สัมบูรณ์;
เนื้อหา: ' ';
ความกว้าง: 100%;
ความสูง: 30px;
ด้านล่าง: -31px;
ซ้าย: 0;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-MOZ-Border-Radius-Topright: 20px;
ชายแดนด้านซ้าย-ซ้าย-20px;
แนวชายแดนขวา-ขวา: 20px;
ความเป็นมา: -Moz-Linear-Gradient (Top, RGBA (0,0,0, .3) 0%, RGBA (255,255,255,0) 100%);
ความเป็นมา: -webkit-gradient (เชิงเส้น, ด้านบนซ้าย, ด้านล่างซ้าย, สี-หยุด (0%, RGBA (0,0,0, .3)), การหยุดสี (100%, RGBA (255,255,255,0)));
ความเป็นมา: linear-gradient (บนสุด, RGBA (0,0,0, .3) 0%, RGBA (255,255,255,0) 100%);
-
.Reflection .Image-wrap: โฮเวอร์ {
ตำแหน่ง: ญาติ;
ด้านบน: -8px;
-
ไฮไลท์และภาพสะท้อนในตัวอย่างนี้เราใช้: ก่อนและ: หลังจากรวมไฮไลท์และเอฟเฟกต์การสะท้อน
CSS:
. Glossy-Reflection .Image-wrap {
-webkit-box-shadow: inset 0 -1px 0 rgba (0,0,0, .5), inset 0 1px 0 rgba (255,255,255, .6);
-moz-box-shadow: inset 0 -1px 0 rgba (0,0,0, .5), inset 0 1px 0 rgba (255,255,255, .6);
Box -shadow: inset 0 -1px 0 RGBA (0,0,0, .5), inset 0 1px 0 RGBA (255,255,255, .6);
-webkit-transition: 1s;
-MOZ-TRANSITION: 1S;
การเปลี่ยนแปลง: 1S;
-webkit-Border-Radius: 20px;
-moz-Border-Radius: 20px;
แนวชายแดน: 20px;
-
. Glossy-Reflection .Image-wrap: ก่อน {
ตำแหน่ง: สัมบูรณ์;
เนื้อหา: ' ';
ความกว้าง: 100%;
ความสูง: 50%;
ด้านบน: 0;
ซ้าย: 0;
-webkit-Border-Radius: 20px;
-moz-Border-Radius: 20px;
แนวชายแดน: 20px;
ความเป็นมา: -Moz-Linear-Gradient (Top, RGBA (255,255,255,0.7) 0%, RGBA (255,255,255, .1) 100%);
ความเป็นมา: -webkit-gradient (เชิงเส้น, ด้านบนซ้าย, ด้านล่างซ้าย, สี-หยุด (0%, RGBA (255,255,255,0.7)), การหยุดสี (100%, RGBA (255,255,255, .1)));
ความเป็นมา: linear-gradient (บนสุด, RGBA (255,255,255,0.7) 0%, RGBA (255,255,255, .1) 100%);
-
. Glossy-Reflection .Image-wrap: หลังจาก {
ตำแหน่ง: สัมบูรณ์;
เนื้อหา: ' ';
ความกว้าง: 100%;
ความสูง: 30px;
ด้านล่าง: -31px;
ซ้าย: 0;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-MOZ-Border-Radius-Topright: 20px;
ชายแดนด้านซ้าย-ซ้าย-20px;
แนวชายแดนขวา-ขวา: 20px;
ความเป็นมา: -Moz-Linear-Gradient (Top, RGBA (230,230,230, .3) 0%, RGBA (230,230,230,0) 100%);
ความเป็นมา: -webkit-gradient (เชิงเส้น, ด้านบนซ้าย, ด้านล่างซ้าย, สี-หยุด (0%, RGBA (230,230,230, .3)), การหยุดสี (100%, RGBA (230,230,230,0,0)));
ความเป็นมา: linear-gradient (บนสุด, RGBA (230,230,230, .3) 0%, RGBA (230,230,230,0) 100%);
-
สไตล์เทปในตัวอย่างนี้เราใช้: หลังจากเพื่อให้ได้ผลของเทป
CSS:
.TAPE .Image-wrap {
-webkit-box-shadow: สิ่งที่ใส่เข้าไป 0 0 2px RGBA (0,0,0, .7), สิ่งที่ใส่เข้าไป 0 2px 0 RGBA (255,255,255, .3), สิ่งที่ใส่เข้าไป 0 -1px 0 RGBA (0,0,0, .5), 0 1PX 3PX RGBA
-moz-box-shadow: สิ่งที่ใส่เข้าไป 0 0 2px RGBA (0,0,0, .7), สิ่งที่ใส่เข้าไป 0 2px 0 RGBA (255,255,255, .3), inset 0 -1px 0 rgba (0,0,0, .5), 0 1px 3px 3px RGBA
Box -Shadow: Inset 0 0 2px RGBA (0,0,0, .7), inset 0 2px 0 RGBA (255,255,255, .3), inset 0 -1px 0 RGBA (0,0,0, .5), 0 1px 3px Rgba (0,0,4);
-
.TAPE .Image-wrap: หลังจาก {
ตำแหน่ง: สัมบูรณ์;
เนื้อหา: ' ';
ความกว้าง: 60px;
ความสูง: 25px;
ด้านบน: -10px;
ซ้าย: 50%;
ขอบซ้าย: -30px;
ชายแดน: Solid 1px RGBA (137,130,48, .2);
ความเป็นมา: -Moz-Linear-Gradient (Top, RGBA (254,243,127, .6) 0%, RGBA (240,224,54, .6) 100%);
ความเป็นมา: -webkit-gradient (เชิงเส้น, ด้านบนซ้าย, ด้านล่างซ้าย, สี-หยุด (0%, RGBA (254,243,127, .6)), การหยุดสี (100%, RGBA (240,224,54, .6)));
ความเป็นมา: linear-gradient (บนสุด, RGBA (254,243,127, .6) 0%, RGBA (240,224,54, .6) 100%);
-webkit-box-shadow: inset 0 1px 0 RGBA (255,255,255, .3), 0 1px 0 RGBA (0,0,0, .2);
-
การเสียรูปและสีในตัวอย่างนี้เราใช้: หลังจากบนองค์ประกอบเพื่อให้ได้ผลของการไล่ระดับสีรัศมีเมื่อเมาส์ผ่าน
CSS:
. มอร์ฟิงสี.
ตำแหน่ง: ญาติ;
-webkit-transition: 1s;
-MOZ-TRANSITION: 1S;
การเปลี่ยนแปลง: 1S;
-webkit-Border-Radius: 20px;
-moz-Border-Radius: 20px;
แนวชายแดน: 20px;
-
. การลงสีมิด
-webkit-Border-Radius: 30em;
-MOZ-Border-Radius: 30EM;
แนวชายแดน: 30em;
-
. มอร์ฟิงสี. image-wrap: หลังจาก {
ตำแหน่ง: สัมบูรณ์;
เนื้อหา: ' ';
ความกว้าง: 100%;
ความสูง: 100%;
ด้านบน: 0;
ซ้าย: 0;
-webkit-transition: 1s;
-MOZ-TRANSITION: 1S;
การเปลี่ยนแปลง: 1S;
-webkit-Border-Radius: 30em;
-MOZ-Border-Radius: 30EM;
แนวชายแดน: 30em;
-
. การลงสีมิด
ความเป็นมา: -webkit -gradient (เรเดียล, 50% 50%, 40, 50% 50%, 80, จาก (RGBA (0,0,0,0)), ถึง (RGBA (0,0,0,1)));
ความเป็นมา: -moz-radial-gradient (50% 50%, วงกลม, RGBA (0,0,0,0) 40px, RGBA (0,0,0,1) 80px);
-
รอบขอบขนนกนอกจากนี้เรายังสามารถใช้การไล่ระดับสีรัศมีเพื่อสร้างมาสก์เพื่อให้ได้เอฟเฟกต์ขนนก
CSS:
.feather .Image-wrap {
ตำแหน่ง: ญาติ;
-webkit-Border-Radius: 30em;
-MOZ-Border-Radius: 30EM;
แนวชายแดน: 30em;
-
.feather .Image-wrap: หลังจาก {
ตำแหน่ง: สัมบูรณ์;
เนื้อหา: ' ';
ความกว้าง: 100%;
ความสูง: 100%;
ด้านบน: 0;
ซ้าย: 0;
ความเป็นมา: -webkit -Gradient (เรเดียล, 50% 50%, 50, 50% 50%, 70, จาก (RGBA (255,255,255,0)), ถึง (RGBA (255,255,255,1)));
ความเป็นมา: -Moz-Radial-Gradient (50% 50%, วงกลม, RGBA (255,255,255,0) 50px, RGBA (255,255,255,1) 70px);
-
ความเข้ากันได้ของเบราว์เซอร์การนำไปใช้งานนี้ใช้งานได้ดีในเบราว์เซอร์ส่วนใหญ่ที่รองรับรัศมีเส้นขอบ, Box-Shadow,: ก่อนและ: หลังจากคุณสมบัติ (เช่น Chrome, Firefox และ Safari) ในเบราว์เซอร์ที่ไม่รองรับคุณสมบัติใหม่จะมีเพียงภาพต้นฉบับเท่านั้นที่จะปรากฏขึ้น
สร้างการใช้งานของคุณเอง
ด้วยความช่วยเหลือของ: ก่อนและ: หลังจากคลาสหลอกคุณสามารถสร้างสไตล์มากมายสำหรับรูปภาพและคุณสามารถลองสร้างเอฟเฟกต์ใหม่ด้วยตัวเอง