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

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

// Posted by :Unknown // On :3 มิ.ย. 2556



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.... หรือจะสร้าง คลาสหรือ ไอดี ก็ได้นะครับ


ที่มา : http://www.sadung.com/?p=6074













Share :










Tweet :




























    










Leave a Reply










Subscribe to Posts | Subscribe to Comments