(889174) CODE STORE V1

ตอนที่ 17 : @ box shadows with css (Special) *new*

  • เนื้อหานิยายตอนนี้เปิดให้อ่าน
  • View : 513
    จำนวนคนให้กำลังใจ : 0 ครั้ง
    6 มี.ค. 56


classic blockquote Special
- ไม่แสดงผลในไออีแต่แสดงผลในเบราว์เซอร์โครมและหมาไฟรุ่นใหม่ -
ขอบคุณเครดิตจากเว็บต่าง http://www.w3schools.com/http://www.css3.info/
แก้ไขโค้ดให้ใช้ได้ในเว็บไซด์เด็กดีดอทคอม : KENAKU/ANTUSU/ALEXSIT
ปล.อาจยังไม่สมบูรณ์เทาที่ควรค่ะ อาจจะมีปัญหาบ้างเล็กน้อย (10.0%)
ขอบคุณธีมสวยที่กิฟชอบที่สุดในเด็กดีจาก : ©Tenpoints !
สัญญาอนุญาตของครีเอทีฟคอมมอนส์ : ห้ามคัดลอก/ดัดแปลง/นำไปแจกต่อก่อนได้รับอนุญาต
 


<center><div class="shadow1">
<div class="889174(kenaku)" style="text-align: center;overflow: auto ">
ใส่ข้อความตรงนี้ค่ะ/รูปภาพ</div></div>
<style name="kenaku(giff)" type="text/css">
/*โค้ดกล่องใส่ข้อความหรือแบนเนอร์ เครดิต 889174kenaku(Giff)ห้ามลบ*/
.shadow1{width: 270px; height: 75px; /*ความกว้างและความสูงของกล่อง*/
box-shadow: -moz-box-shadow:-1px 1px 7px #000000;
-webkit-box-shadow: 0px 0px 0px #000000;/*สีของเงาในแต่ละเบราว์เซอร์*/
box-shadow: 0px 0px 7px #000000;/*สีของเงาในแต่ละเบราว์เซอร์*/
margin: 15px 0; /*ตรงนี้ห้ามไปยุ่งเด้ดขาดเลยค่ะ*/
background: #fff; /*สีพื้นหลังกล่องข้อความ-รูปภาพ*/
font-size:12px; /*ขนาดของฟอนต์ในกล่อง*/}div{ overflow:auto;} 
<!-- อย่าลบเครดิตตรงนี้ออก kenaku889174 --> </style>
</center>




<center><div class="shadow1">
<div class="889174(kenaku)" style="text-align: center;overflow: auto ">
ใส่ข้อความ/โค้ดแบนเนอร์ตรงนี้</div></div>
<style name="kenaku(giff)" type="text/css">
/*โค้ดกล่องใส่ข้อความหรือแบนเนอร์ เครดิต 889174kenaku(Giff)ห้ามลบ*/
.shadow1{width: 270px; height: 75px; /*ความกว้างและความสูงของกล่อง*/
box-shadow: -webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black; /*สีพื้นหลังกล่องข้อความ-รูปภาพ*/
font-size:12px; /*ขนาดของฟอนต์ในกล่อง*/}div{ overflow:auto;} 
<!-- อย่าลบเครดิตตรงนี้ออก kenaku889174 --> </style></center>
 




 

<center><div class="shadow1">
<div class="content" style="text-align: center;overflow: auto ">
ใส่ข้อความตรงนี้ค่ะ/รูปภาพ</div></div>
<style name="kenaku(giff)" type="text/css">
.shadow1{width: 250px; height: 75px; 
box-shadow:-moz-box-shadow:inset 0 0 10px #000000;
/*สีของเงาในแต่ละเบราว์เซอร์*/
-webkit-box-shadow: inset 0 0 10px #000000;/*สีของเงาในแต่ละเบราว์เซอร์*/
 box-shadow:inset 0 0 10px #000000/*สีของเงาในแต่ละเบราว์เซอร์*/
;margin: 15px 0;background: #fff;/*สีพื้นหลังกล่อง*/ 
 font-size:12px;/*ขนาดตัวอัการในกล่อง*/} div{overflow:auto;}
<!-- อย่าลบเครดิตตรงนี้ออก kenaku889174 --> </style></center><br />




<center><div class="shadow1">
<div class="content" style="text-align: center;overflow: auto ">
ใส่ข้อความตรงนี้ค่ะ/รูปภาพ<div></div>
<style name="kenaku(giff)" type="text/css">
.shadow1{width: 250px; height: 75px;  /*ความกว้างและความสูงของกล่อง*/
box-shadow:-moz-box-shadow:3px 3px 5px 6px #ccc;/*สีของเงาในแต่ละเบราว์เซอร์*/
-webkit-box-shadow: 3px 3px 5px 6px #ccc;/*สีของเงาในแต่ละเบราว์เซอร์*/
box-shadow: 3px 3px 5px 6px #ccc;/*สีของเงาในแต่ละเบราว์เซอร์*/
margin: 15px 0;background: #fff;font-size:12px/*ขนาดตัวอักษรในกล่อง*/;}
div{overflow:auto;/*ห้ามลบออกเด้ดขาด*/}
<!-- อย่าลบเครดิตตรงนี้ออก kenaku889174 --> </style></center>
 




<center><div class="shadow1">
<div class="889174(kenaku)" style="text-align: center;overflow: auto ">
ใส่ข้อความตรงนี้ค่ะ/รูปภาพ</div></div>
<style name="kenaku(giff)" type="text/css">
/*โค้ดกล่องใส่ข้อความหรือแบนเนอร์ เครดิต 889174kenaku(Giff)ห้ามลบ*/
.shadow1{width: 270px; height: 75px; /*ความกว้างและความสูงของกล่อง*/
box-shadow:-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3),
 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3)
, 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3),
 0 0 40px rgba(0, 0, 0, 0.1)
 inset;;margin: 15px 0; /*ตรงนี้ห้ามไปยุ่งเด้ดขาดเลยค่ะ*/
background: #fff; /*สีพื้นหลังกล่องข้อความ-รูปภาพ*/
font-size:12px; /*ขนาดของฟอนต์ในกล่อง*/}div{ overflow:auto;} 
<!-- อย่าลบเครดิตตรงนี้ออก kenaku889174 --> </style></center>




<center><div class="shadow1">
<div class="889174(kenaku)" style="text-align: center;overflow: auto ">
ใส่ข้อความ/โค้ดแบนเนอร์ตรงนี้
</div></div><style name="kenaku(giff)" type="text/css">
/*โค้ดกล่องใส่ข้อความหรือแบนเนอร์ เครดิต 889174kenaku(Giff)ห้ามลบ*/
.shadow1{width: 270px; height: 75px; /*ความกว้างและความสูงของกล่อง*/
box-shadow:  -webkit-box-shadow: 0 15px 10px #777;/*สีของเงา*/
  -moz-box-shadow: 0 15px 10px #777;/*สีของเงา*/
  box-shadow: 0 15px 10px #777;/*สีของเงา*/
margin: 15px 0; /*ตรงนี้ห้ามไปยุ่งเด้ดขาดเลยค่ะ*/
background: #fff; /*สีพื้นหลังกล่องข้อความ-รูปภาพ*/
font-size:12px; /*ขนาดของฟอนต์ในกล่อง*/}div{ overflow:auto;} 
<!-- อย่าลบเครดิตตรงนี้ออก kenaku889174 --> </style></center>
 




<center><div class="shadow1">
<div class="889174(kenaku)" style="text-align: center;overflow: auto ">
ใส่ข้อความ/โค้ดแบนเนอร์ตรงนี้</div></div>
<style name="kenaku(giff)" type="text/css">
/*โค้ดกล่องใส่ข้อความหรือแบนเนอร์ เครดิต 889174kenaku(Giff)ห้ามลบ*/
.shadow1{width: 270px; height: 75px; /*ความกว้างและความสูงของกล่อง*/
box-shadow:  -webkit-box-shadow: 10px 10px 5px #888;/*สีของเงา*/
  -moz-box-shadow: 10px 10px 5px #888;/*สีของเงา*/
 box-shadow: 10px 10px 5px #888;/*สีของเงา*/
margin: 15px 0; /*ตรงนี้ห้ามไปยุ่งเด้ดขาดเลยค่ะ*/
background: #fff; /*สีพื้นหลังกล่องข้อความ-รูปภาพ*/
font-size:12px; /*ขนาดของฟอนต์ในกล่อง*/}div{ overflow:auto;} 
<!-- อย่าลบเครดิตตรงนี้ออก kenaku889174 --> </style></center>
 



<center><div class="shadow1">
<div class="889174(kenaku)" style="text-align: center;overflow: auto ">
ใส่ข้อความ/โค้ดแบนเนอร์ตรงนี้</div></div>
<style name="kenaku(giff)" type="text/css">
/*โค้ดกล่องใส่ข้อความหรือแบนเนอร์ เครดิต 889174kenaku(Giff)ห้ามลบ*/
.shadow1{width: 270px; height: 75px; /*ความกว้างและความสูงของกล่อง*/
-moz-border-radius: 5px;border-radius: 5px;
-moz-box-shadow: 5px 5px black;-webkit-box-shadow: 5px 5px black;
box-shadow: 5px 5px black;background: #fff; /*สีพื้นหลังกล่องข้อความ-รูปภาพ*/
font-size:12px; /*ขนาดของฟอนต์ในกล่อง*/}div{ overflow:auto;} 
<!-- อย่าลบเครดิตตรงนี้ออก kenaku889174 --> </style></center>
 



<center><div class="shadow1">
<div class="content" style="text-align: center;overflow: auto ">
ใส่ข้อความตรงนี้ค่ะ/รูปภาพ<div></div></div>
<style name="kenaku(giff)" type="text/css">
.shadow1{width: 250px; height: 75px;  /*ความกว้างและความสูงของกล่อง*/
box-shadow:-webkit-box-shadow: 1px 1px 17px rgba(39, 19, 50, 0.47);
-moz-box-shadow:1px 1px 17px rgba(39, 19, 50, 0.47);
box-shadow: 1px 1px 17px rgba(39, 19, 50, 0.47);
margin: 15px 0;background: #fff;font-size:12px/*ขนาดตัวอักษรในกล่อง*/;}
div{overflow:auto;/*ห้ามลบออกเด้ดขาด*/}
<!-- อย่าลบเครดิตตรงนี้ออก kenaku889174 --> </style></center>



<center><div class="shadow1">
<div class="content" style="text-align: center;overflow: auto ">
ใส่ข้อความตรงนี้ค่ะ/รูปภาพ</div></div>
<style name="kenaku(giff)" type="text/css">
.shadow1{width: 250px; height: 75px;  /*ความกว้างและความสูงของกล่อง*/
box-shadow:-webkit-box-shadow: -0 16px 6px -4px black;
-moz-box-shadow: -0 16px 6px -4px black;
box-shadow:  -0 16px 6px -4px black;
margin: 15px 0;background: #fff;font-size:12px/*ขนาดตัวอักษรในกล่อง*/;}
div{overflow:auto;/*ห้ามลบออกเด้ดขาด*/}
<!-- อย่าลบเครดิตตรงนี้ออก kenaku889174 --></style></center>
 

example : 1

TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF

TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF
TEST CODE & EDIT CODE BY GIFF
 
*โค้ดที่ใช้ลบส่วนต่างๆในตอนนี้ค่ะ*
 โค้ดลบส่วนที่อยู่เหนือชื่อบทความขึ้นไป *edit


- don't copy to change -
(c)kenaku/antusu edit code & design
theme :©Tenpoints!

672 ความคิดเห็น

  1. #624 `( harlequin ). (@harlequinz) (จากตอนที่ 17)
    วันที่ 9 เมษายน 2556 / 21:37
    โค้ดดีมากเลยค่ะ ขอยืมหน่อยนะคะ :D
    #624
    0
  2. #528 ✧LMD (@ottonon) (จากตอนที่ 17)
    วันที่ 26 มีนาคม 2556 / 11:49
    ขอบคุณค่า *w*
    #528
    0
  3. #478 ` /โลลิป็อบส์ (@lunladomo) (จากตอนที่ 17)
    วันที่ 19 มีนาคม 2556 / 15:45
    ขอบคุณจ้า สวยมาก *0*
    #478
    0
  4. #452 ½ ' Y K c. (@poison12) (จากตอนที่ 17)
    วันที่ 16 มีนาคม 2556 / 12:39
    ขอยืมค่ะ
    #452
    0
  5. #451 Captaininz (@bananajub555) (จากตอนที่ 17)
    วันที่ 15 มีนาคม 2556 / 22:19
    ขอบคุณมากจ้ะ น้องกิฟ
    #451
    0
  6. #379 TANGMO. (@tangmo469) (จากตอนที่ 17)
    วันที่ 2 มีนาคม 2556 / 14:22
    ขอบคุณจ้า
    #379
    0
  7. #370 梅梅'灣娘 APH-Taiwan[ (@tiwa2812) (จากตอนที่ 17)
    วันที่ 28 กุมภาพันธ์ 2556 / 06:12
    ขอบคุณมากมายค่า ><
    #370
    0
  8. #355 Akiko.Reki (@akiko-reki) (จากตอนที่ 17)
    วันที่ 25 กุมภาพันธ์ 2556 / 21:03
    ขอบคุณมากๆ เลยน๊าาาา
    #355
    0
  9. #349 ❄Varsha } βәliәvә me (@tear-of-rain) (จากตอนที่ 17)
    วันที่ 24 กุมภาพันธ์ 2556 / 16:43
    ขอบคุณค่ะ > w <
    #349
    0
  10. #303 guxlice (@guxlice) (จากตอนที่ 17)
    วันที่ 15 กุมภาพันธ์ 2556 / 17:08
    ขอบคุณมากค่า
    #303
    0
  11. #256 .`Lilyroz (@lunladomo) (จากตอนที่ 17)
    วันที่ 3 กุมภาพันธ์ 2556 / 17:37
    ขอเน้ ♥
    #256
    0
  12. #174 ☆ bluesky (@cromejang) (จากตอนที่ 17)
    วันที่ 18 มกราคม 2556 / 20:42
    แ อ ร๊ ย ย๊ ะ ! โค้ดนี้แจ่มจีจี ≧▽≦
    #174
    0
  13. #143 ☂ caℓℓ her ωιnnιe (@191angel) (จากตอนที่ 17)
    วันที่ 16 มกราคม 2556 / 12:34
    ว้าวววว สวยมากกกกก
    ขอบคุณมากๆๆๆเลยน้าค้าาา ><
    #143
    0
  14. #135 Piccolino (@kt-gib) (จากตอนที่ 17)
    วันที่ 13 มกราคม 2556 / 14:08
    ขอบคุณมากค่ะ ~
    สวยมากเลย *0*
    #135
    0
  15. #122 MyMangpor (@sudenkorento) (จากตอนที่ 17)
    วันที่ 12 มกราคม 2556 / 18:10
    สวยมากๆ เลยค่ะ สมกับการรอคอย มันเริดมาก 
    #122
    0
  16. #112 `Bloody Prince★ (@whiteprince) (จากตอนที่ 17)
    วันที่ 12 มกราคม 2556 / 10:26
    สวยจริงๆด้วยค่ะ :))
    #112
    0
  17. #110 DOF89 (@love_x) (จากตอนที่ 17)
    วันที่ 11 มกราคม 2556 / 02:10
    เริศศศศศศศศศศศศศศศศศ *0*
    #110
    0
  18. #109 แพนด้าตากลม XD (@softly-plus) (จากตอนที่ 17)
    วันที่ 10 มกราคม 2556 / 22:11
    เจ๋งมากกก *O*
    #109
    0
  19. #108 Takato yume hope (@ayaka-yumi) (จากตอนที่ 17)
    วันที่ 10 มกราคม 2556 / 18:15
    สุดยอดเลยอะ!!//เค้ายังไม่ได้ลงเฟร้ย!!!
    #108
    0
  20. #106 i'm พีทาโกรัส (?) (@burakku) (จากตอนที่ 17)
    วันที่ 10 มกราคม 2556 / 17:47
    กรี๊ดดดด รอค่าาา
    #106
    0
  21. #105 ┗ Mink`Tae (@evangeline-az) (จากตอนที่ 17)
    วันที่ 10 มกราคม 2556 / 16:47
    รอเด้อค่าาาาาาาา ~
    #105
    0
  22. #104 MS.POCKY (@kamdotcom12) (จากตอนที่ 17)
    วันที่ 10 มกราคม 2556 / 13:50
    แม่งไม่รับรอง IE
    #104
    0
  23. วันที่ 9 มกราคม 2556 / 21:06
    รอค่าาาาา สวยมากก>___<
    #103
    0
  24. #102 แพนด้าตากลม XD (@softly-plus) (จากตอนที่ 17)
    วันที่ 9 มกราคม 2556 / 21:04
    สวยๆๆๆ *O* รอค้าบบบ
    #102
    0