Menu

CSS3-1

ปรัปแต่ง css (cascading style sheets) ให้มีประสิทธิภาพสูงสุด
CSS Minify (ย่อไฟล์ css) click
CSS Formatter (จัดเรียงฟอร์แมต css) click

เว็บไซต์แนะนำ
http://www.w3schools.com/


BORDERS กำหนดเส้นขอบ (ด้วยรูปภาพ)
ตัวอย่างคำสั่ง

<div style=”width:100px; height:50px; padding:15px; -webkit-border-image:url(http://www.gifstop.com/images/borders/roseborder.gif) 0 0;”>
This text…
</div>

ตัวอย่างผลลัพธ์

This text…


BORDERS กำหนดเส้นขอบ (ด้วยเส้นโค้ง)
ตัวอย่างคำสั่ง

<div style=”width:100px; height:50px; border:solid 3px #000; border-radius:5px; padding:10px;”>
This text…
</div>

ตัวอย่างผลลัพธ์

This text…


BORDER ใส่เงาให้กับกล่องข้อความด้วย box-shadow
ตัวอย่างคำสั่ง

<div style=”width:100px; height:50px; padding:10px; border:solid 3px #000; box-shadow:2px 2px 2px red;”>
This text…
</div>

ตัวอย่างผลลัพธ์

This text…


BACKGROUND กำหนดภาพพื้นหลังให้กับกล่องข้อความ
ตัวอย่างคำสั่ง

<div style=”width:100px; height:50px; padding:10px; background-image:url(https://pixabay.com/static/uploads/photo/2016/05/01/10/20/flowers-1364656__180.jpg);”>
This text…
</div>

ตัวอย่างผลลัพธ์

This text…


GRADIENT กำหนดการไล่ระดับสี (ไล่จากบนลงล่าง)
ตัวอย่างคำสั่ง

<div style=”width:100px; height:50px; padding:10px; background:linear-gradient(yellow,red);”>
This Text…
</div>

ตัวอย่างผลลัพธ์

This Text…


GRADIENT กำหนดการไล่ระดับสี (ไล่จากซ้ายไปขวา)
ตัวอย่างคำสั่ง

<div style=”width:100px; height:50px; padding:10px; background:linear-gradient(to right,yellow,red);”>
This Text…
</div>

ตัวอย่างผลลัพธ์

This Text…


GRADIENT กำหนดการไล่ระดับสี (ไล่ตามเส้นทแยงมุม)
ตัวอย่างคำสั่ง

<div style=”width:100px; height:50px; padding:10px; background:linear-gradient(to bottom right,yellow,red);”>
This Text…
</div>

ตัวอย่างผลลัพธ์

This Text…


GRADIENT กำหนดการไล่ระดับสี (ไล่สีด้วยมุม)
ตัวอย่างคำสั่ง

<div style=”width:100px; height:50px; padding:10px; background:linear-gradient(0deg,yellow,red);”>
This Text…
</div>

ตัวอย่างผลลัพธ์

This Text…


GRADIENT กำหนดการไล่ระดับสี (ไล่สีด้วยมุม 45 องศา)
ตัวอย่างคำสั่ง

<div style=”width:100px; height:50px; padding:10px; background:linear-gradient(45deg,yellow,red);”>
This Text…
</div>

ตัวอย่างผลลัพธ์

This Text…


GRADIENT กำหนดการไล่ระดับสี (ไล่สีcแบบกำหนดให้โปร่งไส)
ตัวอย่างคำสั่ง

<div style=”width:100px; height:50px; padding:10px; background:linear-gradient(to right,rgba(42, 81, 222, 0.07),rgb(63, 99, 228));”>
This Text…
</div>

ตัวอย่างผลลัพธ์

This Text…


TEXT-SHADOW กำหนดการใส่เงาให้กับตัวอักษร
ตัวอย่างคำสั่ง

<h3 style=”text-shadow:1px 1px 1px blue;”>ตัวอย่างการใส่เงาให้กับข้อความ</h3>

ตัวอย่างผลลัพธ์

ตัวอย่างการใส่เงาให้กับข้อความ


TRANSITIONS การเปลี่ยนแปลงเอฟเฟกต์
ตัวอย่างคำสั่ง

<style>
.tranfrom{
width: 150px;
height: 50px;
background: yellow;
transition:width 1.5s;
}

.tranfrom:hover{
width: 500px;
}

</style>

<div class=”tranfrom”></div>

ตัวอย่างผลลัพธ์

ตามตัวอย่าง กล่องสีเหลืองจะขยายออกเป็น 500px แต่ในที่นี้ WordPress เราไม่สนับสนุน! ต้องขออภัยครับผม.