ตัวอย่างโค้ดHTML ที่มีคลาสชื่อว่า simple
โค้ด: เลือกทั้งหมด
<article class="simple">
<p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p>
</article>
โค้ด: เลือกทั้งหมด
p {
margin: 0;
}
article {
max-width: 500px;
padding: 10px;
background-color: red;
background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
}
.simple {
box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}
โค้ด: เลือกทั้งหมด
<article class="multiple">
<p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p>
</article>
โค้ด: เลือกทั้งหมด
p {
margin: 0;
}
article {
max-width: 500px;
padding: 10px;
background-color: red;
background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
}
.multiple {
box-shadow: 1px 1px 1px black,
2px 2px 1px black,
3px 3px 1px red,
4px 4px 1px red,
5px 5px 1px black,
6px 6px 1px black;
}
- ค่าความยาวแรกคือออฟเซ็ตแนวนอน(horizontal offset) - ระยะห่างไปทางขวาเงาถูกใส่จากกล่องเดิม (หรือซ้ายถ้าค่าเป็นลบ)
- ค่าความยาวที่สองคือออฟเซ็ตแนวตั้ง(vertical offset) - ระยะห่างด้านล่างที่เงาถูกใส่จากกล่องเดิม (หรือด้านบนหากค่าเป็นลบ)
- ค่าความยาวที่สามคือรัศมีเบลอ - จำนวนการเบลอที่ใช้กับเงา
- ค่าตำแหน่งทร่สีคือสีพื้นฐานของเงา
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP