ตั้งค่าการอ่าน

ค่าเริ่มต้น

  • เลื่อนอัตโนมัติ
    941778 Code Store V 1 - ย้ายค่ะ

    ลำดับตอนที่ #17 : @ box shadows with css (Special) *new*

    • เนื้อหาตอนนี้เปิดให้อ่าน
    • 303
      0
      25 เม.ย. 56


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


    <center><div class="shadow1">
    <div class="941778(kenaku)" style="text-align: center;overflow: auto ">
    ใส่ข้อความตรงนี้ค่ะ/รูปภาพ</div></div>
    <style name="kenaku(giff)" type="text/css">
    /*โค้ดกล่องใส่ข้อความหรือแบนเนอร์ เครดิต 941778kenaku(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;} 
    <!-- อย่าลบเครดิตตรงนี้ออก kenaku941778 --> </style>
    </center>




    <center><div class="shadow1">
    <div class="941778(kenaku)" style="text-align: center;overflow: auto ">
    ใส่ข้อความ/โค้ดแบนเนอร์ตรงนี้</div></div>
    <style name="kenaku(giff)" type="text/css">
    /*โค้ดกล่องใส่ข้อความหรือแบนเนอร์ เครดิต 941778kenaku(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;} 
    <!-- อย่าลบเครดิตตรงนี้ออก kenaku941778 --> </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;}
    <!-- อย่าลบเครดิตตรงนี้ออก kenaku941778 --> </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;/*ห้ามลบออกเด้ดขาด*/}
    <!-- อย่าลบเครดิตตรงนี้ออก kenaku941778 --> </style></center>
     




    <center><div class="shadow1">
    <div class="941778(kenaku)" style="text-align: center;overflow: auto ">
    ใส่ข้อความตรงนี้ค่ะ/รูปภาพ</div></div>
    <style name="kenaku(giff)" type="text/css">
    /*โค้ดกล่องใส่ข้อความหรือแบนเนอร์ เครดิต 941778kenaku(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;} 
    <!-- อย่าลบเครดิตตรงนี้ออก kenaku941778 --> </style></center>




    <center><div class="shadow1">
    <div class="941778(kenaku)" style="text-align: center;overflow: auto ">
    ใส่ข้อความ/โค้ดแบนเนอร์ตรงนี้
    </div></div><style name="kenaku(giff)" type="text/css">
    /*โค้ดกล่องใส่ข้อความหรือแบนเนอร์ เครดิต 941778kenaku(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;} 
    <!-- อย่าลบเครดิตตรงนี้ออก kenaku941778 --> </style></center>
     




    <center><div class="shadow1">
    <div class="941778(kenaku)" style="text-align: center;overflow: auto ">
    ใส่ข้อความ/โค้ดแบนเนอร์ตรงนี้</div></div>
    <style name="kenaku(giff)" type="text/css">
    /*โค้ดกล่องใส่ข้อความหรือแบนเนอร์ เครดิต 941778kenaku(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;} 
    <!-- อย่าลบเครดิตตรงนี้ออก kenaku941778 --> </style></center>
     



    <center><div class="shadow1">
    <div class="941778(kenaku)" style="text-align: center;overflow: auto ">
    ใส่ข้อความ/โค้ดแบนเนอร์ตรงนี้</div></div>
    <style name="kenaku(giff)" type="text/css">
    /*โค้ดกล่องใส่ข้อความหรือแบนเนอร์ เครดิต 941778kenaku(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;} 
    <!-- อย่าลบเครดิตตรงนี้ออก kenaku941778 --> </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;/*ห้ามลบออกเด้ดขาด*/}
    <!-- อย่าลบเครดิตตรงนี้ออก kenaku941778 --> </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;/*ห้ามลบออกเด้ดขาด*/}
    <!-- อย่าลบเครดิตตรงนี้ออก kenaku941778 --></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

    ติดตามเรื่องนี้
    เก็บเข้าคอลเล็กชัน

    นิยายที่ผู้อ่านนิยมอ่านต่อ ดูทั้งหมด

    loading
    กำลังโหลด...

    อีบุ๊ก ดูทั้งหมด

    loading
    กำลังโหลด...

    ความคิดเห็น

    ×