สลับสีตาราง HTML ง่าย ๆ ด้วย CSS บรรทัดเดียว

เจอคำถามเรื่องการ Style สลับสีตาราง HTML มาบ่อย ๆ วันนี้เลยเอาบอกในบทความ เทคนิคง่าย ๆ แต่ได้ใช้บ่อย กันซะเลย

CSS บรรทัดเดียว สลับสีตาราง ได้เล๊ย!!!

เอา Code Css นี้ไปใส่ใน File stylesheet หรือเอาไปแปะไว้ที่ Tag <style>...</style> ของหน้าเว็บไซต์กันได้เลย ตัวอย่างนี้คือ ทำให้ Row ของตารางที่เป็นเลขคี่ (1,3,5 ....) ทั้งหมดมี Background เป็นสีเทา ด้วยคำสั่ง nth-child(odd)

tbody tr:nth-child(odd) {background-color: #ccc;}

เพิ่มเติมนิด ถ้าอยากให้กำหนดให้ใส่สีใน Row เลขคู่แทน เราก็สามารถเปลี่ยนคำสั่งจาก odd เป็น even ตามตัวอย่างนี้

tbody tr:nth-child(even) {background-color: #ccc;}

เพิ่มอีกหน่อย ถ้าอยากกำหนดสีให้ทั้ง Row เลขคู่ เลขคี่ ก็แบบนี้เลย

tbody tr:nth-child(even) {background-color: #ffc3a0;} //เลขคู่
tbody tr:nth-child(odd) {background-color: #e5ff7f;} //เลขคี่

Read More

ลบขีดเส้นใต้ link ทิ้ง css link ไม่มีขีดเส้นใต้

วันนี้ Onlymycode มาพร้อมกับเทคนิคง่าย ๆ แต่ได้ใช้บ่อย สำหรับคนที่เริ่มหัดเขียนเว็บใหม่ มักจะมีคำถามนี้เลย ทำยังไงถึงจะลบขีดเส้นใต้ ของ link ได้ ทำยังไงให้ link ไม่มีขีดเส้นใต้ วันนี้เรามีคำสั่งง่าย ๆ มาบอกกันครับ

ทำยังไง ให้ link ไม่มีขีดเส้นใต้

เอา Code Css นี้ไปใส่ใน File stylesheet หรือเอาไปแปะไว้ที่ Tag <style>...</style> ของหน้าเว็บไซต์กันได้เลย

a{text-decoration: none;}

แต่หากอยากให้หายไปเฉพาะบาง Class ก็กำหนดได้ดังนี้

a.onlyThisLink{text-decoration: none;}

วิธีใช้งาน

<a class="onlyThisLink">Link</a>

ตามนี้เลยครับ เทคนิคง่าย ๆ แต่ได้ใช้บ่อยของวันนี้ ขอบคุณที่เข้ามาอ่านครับ

Read More

แจก!!! Radio button css สวย ๆ มัดรวมไว้ในไฟล์เดียว

หากใครกำลังมองหา CSS สวย ๆ สำหรับทำ Radio button แล้วละก็ วันนี้ Onlymycode มีโค้ดไฟล์ CSS มาแจก ให้ท่าน ๆ สามารถโหลดไปใช้งานกันได้เลยผ่าน ปุ่ม Download ด้านล่าง

Download

See the Pen Radio button css example by Kiti Chan Boyd (@kiti-chan-boyd) on CodePen.

ตัวอย่างการใช้งาน Checkbox CSS

เริ่มที่ เรียกใช้งาน  css file ใน Tag <header>....</header>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin = "anonymous">
<link rel="stylesheet" href="icheck-bootstrap.css">

ตัวอย่างการสร้างสร้าง Radio Button ผ่าน css ของ icheck คือการเรียกใช้งาน DIV ที่ครอบ Input radio ไว้ เช่น <div class="radio icheck-success"></div>  และการกำหนด Id ให้กับ input และ label ให้สอดคล้องกัน

<div class="container">
   <div class="row">
        <div class="col-sm-3">
            <div class="radio icheck-default">
                <input type="radio" id="default1" name="default" />
                <label for="default1">Option 1</label>
            </div>
            <div class="radio icheck-default">
                <input type="radio" checked id="default2" name="default" />
                <label for="default2">Option 2</label>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="radio icheck-primary">
                <input type="radio" checked id="primary1" name="primary" />
                <label for="primary1">Option 1</label>
            </div>
            <div class="radio icheck-primary">
                <input type="radio" id="primary2" name="primary" />
                <label for="primary2">Option 2</label>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="radio icheck-success">
                <input type="radio" id="success1" name="success"/>
                <label for="success1">Option 1</label>
            </div>
            <div class="radio icheck-success">
                <input type="radio" checked id="success2" name="success"/>
                <label for="success2">Option 2</label>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="radio icheck-info">
                <input type="radio" checked id="info1" name="info" />
                <label for="info1">Option 1</label>
            </div>
            <div class="radio icheck-info">
                <input type="radio" id="info2" name="info" />
                <label for="info2">Option 2</label>
            </div>
        </div>
    </div>
</div>

Read More

แจก!!! Checkbox css สวย ๆ มัดรวมไว้ในไฟล์เดียว

หากใครกำลังมองหา CSS สวย ๆ สำหรับทำ Checkbox แล้วละก็ วันนี้ Onlymycode มีโค้ดไฟล์ CSS มาแจก ให้ท่าน ๆ สามารถโหลดไปใช้งานกันได้เลยผ่าน ปุ่ม Download ด้านล่าง

Download

See the Pen Checkbox CSS Example by Kiti Chan Boyd (@kiti-chan-boyd) on CodePen.

ตัวอย่างการใช้งาน Checkbox CSS

เริ่มที่ เรียกใช้งาน  css file ใน Tag <header>....</header>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin = "anonymous">
<link rel="stylesheet" href="icheck-bootstrap.css">

ตัวอย่างการสร้างสร้าง checkbox ผ่าน css ของ icheck คือการเรียกใช้งาน DIV ที่ครอบ Input checkbox ไว้ เช่น <div class="checkbox icheck-success"></div>  และการกำหนด Id ให้กับ input และ label ให้สอดคล้องกัน

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <div class="checkbox icheck-default">
                <input type="checkbox" checked id="icheck-default" />
                <label for="icheck-default">icheck-default</label>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="checkbox icheck-primary">
                <input type="checkbox" checked id="icheck-primary" />
                <label for="icheck-primary">icheck-primary</label>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="checkbox icheck-success">
                <input type="checkbox" checked id="icheck-success" />
                <label for="icheck-success">icheck-success</label>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="checkbox icheck-info">
                <input type="checkbox" checked id="icheck-info" />
                <label for="icheck-info">icheck-info</label>
            </div>
        </div>
    </div>
</div>

Read More

ทำ DIV ให้สูงเท่ากัน แก้ปัญหาขนาด DIV ในหน้าไม่เท่ากัน

วันนี้ Onlymycode มาพร้อมกับเทคนิคง่าย ๆ แต่ได้ใช้บ่อยเช่นเคย ไม่ว่าทุกจะทำเว็บ Blog หรือเว็บ Ecommerce ปัญหาที่มักจะเจอกันบ่อย ๆ นั้นก็คือ ขนาด DIV ไม่เท่ากัน ดังนั้นเราจึงนำเสนอเทคนิคการแก้ปัญหาง่าย ๆ ด้วยการใช้งาน matchHeight js นั้นเอง

ตัวอย่างการใช้งาน matchHeight js

See the Pen matchHeight js example by Kiti Chan Boyd (@kiti-chan-boyd) on CodePen.

หลักการทำงานของ js ตัวนี้ก็คือ หา DIV ที่มีความสูงมากสุดในแถวนั้น ๆ (Row) จากนั้นทำการกำหนดค่าให้กับ DIV อื่น ๆ ในแถวเดียวกันให้มีความสุดเท่ากับ DIV ที่มีความสูงสูงที่สุด

ตัวอย่างการเขียนโค้ด

เริ่มที่ เรียกใช้งาน  Javascript file ใน Tag <header>....</header>

<script type='text/javascript' src='https://code.jquery.com/jquery-1.12.4.min.js' crossorigin = "anonymous"></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js' crossorigin = "anonymous"></script>

ตัวอย่างการสร้างวางตำแหน่ง DIV

<div class="container">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
</div>

ตัวอย่าง CSS (โดยกำหนดความสูงของ DIV ให้แตกต่างกัน)

<style>
.container{
  float:left;
  display:inline-block;
  width:100%;
  height:auto;
  padding:25px;
}

.box{
  float:left;
  width:50px;
  border:1px solid #ccc;
  margin-right:15px;
}

#box1{
  height:20px;
  background-color:#F00; 
}

#box2{
  height:30px;
  background-color:#4cc203; 
}

#box3{
  height:50px;
  background-color:#00c4ff; 
}
</style>

ในส่วนของ Script กำหนดค่าตัวแปรเริ่มต้นสี ของแต่ละ Input ในรูปแบบของ Array (ส่วนโค้ดสีแดง) เรียกใช้งาน Function colorpicker (ส่วนโค้ดสีส้ม) และส่วนควบคุม (ส่วนโค้ดสีฟ้า) ตามกรอบด้านล่าง

<script>
$(document).ready(function(){
$('.container .box').matchHeight();
})
</script>

ขอบคุณความรู้จาก : https://www.cssscript.com/

Read More