กล่องเงา
ด้วย CSS3 คุณสามารถสร้างผลกระทบเงา!
CSS3 ผลกระทบเงา
ด้วย CSS3 คุณสามารถเพิ่มเงาข้อความและองค์ประกอบ
ในบทนี้คุณจะได้เรียนรู้เกี่ยวกับคุณสมบัติต่อไปนี้:
-
text-shadow -
box-shadow
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
ตามด้วยหมายเลข -webkit- หรือ -moz- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.5 |
| box-shadow | 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
เงาข้อความ CSS3
CSS3 text-shadow คุณสมบัติใช้อายแชโดว์ให้กับข้อความ
ในการใช้งานที่ง่ายที่สุดที่คุณจะระบุเงาแนวนอน (2px) และเงาในแนวตั้ง (2px):
ผลเงาข้อความ!
ถัดไปเพิ่มสีให้เงา:
ผลเงาข้อความ!
จากนั้นให้เพิ่มผลเบลอเงา:
ผลเงาข้อความ!
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงข้อความสีขาวกับสีดำเงา:
ผลเงาข้อความ!
ตัวอย่างต่อไปนี้แสดงให้เห็นสีแดงเงาเรืองแสงนีออน:
ผลเงาข้อความ!
เงาหลาย
หากต้องการเพิ่มมากกว่าหนึ่งเงากับข้อความที่คุณสามารถเพิ่มรายการคั่นด้วยเครื่องหมายจุลภาคของเงา
ตัวอย่างต่อไปนี้แสดงให้เห็นสีแดงและสีฟ้านีออนเรืองแสงเงา:
ผลเงาข้อความ!
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงข้อความสีขาวกับสีดำ, สีฟ้า, และ darkblue เงา:
ผลเงาข้อความ!
ตัวอย่าง
h1
{
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
ลองตัวเอง» CSS3 box-shadow ทรัพย์สิน
CSS3 box-shadow คุณสมบัติใช้เงาองค์ประกอบ
ในการใช้งานที่ง่ายที่สุดที่คุณจะระบุเงาแนวนอนและแนวตั้งเงา:
ถัดไปเพิ่มสีให้เงา:
ถัดไปเพิ่มผลเบลอเงา:
นอกจากนี้คุณยังสามารถเพิ่มเงาไป :: :: ก่อนและหลังจากที่หลอกชั้นเรียนเพื่อสร้างผลที่น่าสนใจ:
ตัวอย่าง
#boxshadow {
position: relative;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding:
10px;
background: white;
}
#boxshadow img {
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
}
#boxshadow::after {
content: '';
position: absolute;
z-index: -1; /* hide shadow behind
image */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one
half of the remaining 30% */
height: 100px;
bottom: 0;
} ลองตัวเอง» การ์ด
ตัวอย่างของการใช้ box-shadow คุณสมบัติการสร้างบัตรกระดาษที่ชอบ:
1
1 มกราคม 2016
Hardanger, นอร์เวย์
ตัวอย่าง
div.card
{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:
center;
}
ลอง (บัตรข้อความ) » ลอง (Card ภาพ) » ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ออกกำลังกาย 5 »
CSS3 คุณสมบัติเงา
ตารางต่อไปนี้แสดงคุณสมบัติ CSS3 เงา:
| คุณสมบัติ | ลักษณะ |
|---|---|
| box-shadow | เพิ่มหนึ่งหรือมากกว่าเงาองค์ประกอบ |
| text-shadow | เพิ่มหนึ่งหรือมากกว่าเงาข้อความ |