ไม่มีหมวดหมู่

download font

ดาวน์โหลดฟอนต์ download font

download icon

ดาวน์โหลด ไอค่อน จากสะดุ้ง

download template

ดาวน์โหลด เทมเพลตเว็บต่างๆ

Download Vector

ดาวน์โหลดภาพเว็กเตอร์ จากสะดุ้ง

ของเสริม photoshop

brush style patterns

Home » สะดุ้ง css

CSS 3D STYLE ง่ายๆสวยๆ

Submitted by on วันอังคาร, 5 เมษายน 2011One Comment


คำค้นหา: , , , ,

style css3d CSS 3D STYLE ง่ายๆสวยๆ

CSS Style 3D

CSS Style 3D

ถ้าหากต้องการแต่งตัวอักษรให้มีสีสวยงามดูมีมิติ ซึ่ง CSS ก็สามารถทำได้ง่ายๆ เพียงแค่เรานำ Style นี้ไปใช้ ตัวอักษรเราก็จะมีเอฟเฟค
เป็นเงา 3D แล้วครับ ตัวอย่างของ 3D CSS ตามรูปตัวอย่างนี้เลยครับมาดูการใช้งานกันนะครับ อยากแรกนำโค๊ด CSS ไปใช้กันก่อนนะครับตามตัวอย่างนี้เลยครับ
อย่างแรกเรามาสร้าง Style กันก่อนนะครับ โดยถ้าใครเขียน Css แยกไว้ก็นำ Style ไปเขียนที่ไฟล์นั้นตามนี้เลยนะครับ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
h1 {
  text-shadow: 0 1px 0 #ccc, 
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
 
 
}

แต่ถ้าใครไม่ได้แยก CSSออก ให้แทรกไว้ในส่วนของ แท็ก head นะครับ นำโค๊ดนี้ไปแทรกระหว่างแท็ก head นะครับ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<style type="text/css">
 
h1 {
  text-shadow: 0 1px 0 #ccc, 
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
 
 
}
</style>

แค่นี้เราก็ได้ Style 3D ให้ตัวอักษรเราแล้วครับ จากตัวอย่างโค๊ด CSS นี้ตรง h1 ถ้าเราเรียกใช้แท็กนี้ ตัวอักษรก็จะเป็น Style 3D แล้วครับ ตัวอย่างการเรียกใช้ Style นะครับ

1
<h1>ทดสอบการใช้ CSS 3D</h1>

ในส่วนของ h1 ราสามารถเปลี่ยนได้นะครับ ไม่ว่าจะเป็นแท็ก B H2 H3.... หรือจะสร้าง คลาสหรือ ไอดี ก็ได้นะครับ

<<< google Plus (กูเกิ้ล พลัส)ซัดที่นี่


Related Posts

คุณอาจจะสนใจ บทความต่อไปนี้(มั้ง)

  สามารถนำบทความไปเผยแพร่ต่อได้ แต่ต้องทำ ลิงค์กับมาที่บทความนั้นๆด้วยนะครับ หากไม่ทำตามจะมีความผิดทางกฏหมายตาม พรบ. เกี่ยวกับลิขสิทธิ์ นะครับ


One Comment »

  • smartboy said:

    Thank a lot kub

    Reply to this commentตอบกลับความเห็นนี้

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can add images to your comment by clicking here.