webkit css slim scroll

.enable-slimscroll {
    overflow: auto;
}

.enable-slimscroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.enable-slimscroll::-webkit-scrollbar-track {
    background-color: #ddd;
}

.enable-slimscroll::-webkit-scrollbar-thumb:vertical,
.enable-slimscroll::-webkit-scrollbar-thumb:horizontal {
    background-color: #999;
}

.enable-slimscroll::-webkit-scrollbar-thumb:vertical:hover,
.enable-slimscroll::-webkit-scrollbar-thumb:horizontal:hover {
    background: #3297fd;
} 

การทำให้ text ไม่ล้นออกจาก html element (css : word-wrap)

        ปกติเวลาเราเขียนตัวหนังสือไปยาวๆ  โดยไม่มีการเว้นวรรคคำ  จะทำให้ text นั้นล้นออกจาก html element  เรามีวิธีแก้คือ ใช้คำสั่ง word-wrap:break-word;  ของ css โดยกำหนดให้กับ element ที่ไม่ต้องการให้ text นั้นล้นออกมาครับ

*{
   word-wrap:break-word;
}

css select html element ลำดับที่ n

/* start 1, 2, 3, ..., n */
td:nth-child(2){
  /* select second td */
}

การเขียน class ซ้อน class ด้วย less css

        ประโยชน์ คือมันช่วยให้งานเราง่ายขึ้นครับ สามารถจัดกลุ่ม จัดลำดับชั้นของการเขียน css ได้ดีขึ้น สบายตาขึ้น  ดูปุ๊ป รู้ปั๊ป ว่า อันไหน เป็นลูกของอันไหน เพราะไม่มีการเขียนซ้ำซ้อน  เหมือนที่เราเขียน css ธรรมดา

#layoutWest-resizer.ui-layout-resizer-west-closed{
    background-color : @grayColor;
    border : solid @grayBorderColor;
    border-width : 0px 1px 0px 0px;
    .round-box(0px, 0px, 0px, 0px);

    #layoutWest-toggler{
        position : relative !important;
        top : 45% !important;
        height : 32px !important;
        width : 32px !important;

        .ui-state-default{
            background : none;
            border : none;
            .box-shadow(0px, 0px, 0px, #fff);

            .ui-icon{
                background-image : url('../images/expand-arrow.png');
                background-position : 0px 0px;
                width : 32px;
                height : 32px;
                position : relative;
                right : 7px;
            }
        }

        .ui-state-default:hover{
            .box-shadow(0px, 0px, 0px, #fff);
            .ui-icon{
                background-image : url('../images/expand-arrow-hover.png');
                background-position : 0px 0px;
                width : 32px;
                height : 32px;
            }
        }
    }
}

        หลังจากนั้น  โค๊ดข้างบนนี้ก็จะถูกคอมไพล์ใหม่ กลายเป็น css ธรรมดา ซึ่ง class ไหนที่ซ้อนกันอยู่ก็จะถูกคอมไพล์เป็นอีกชุดนึง

pseudo element :not

:not(p){

}
#div:not([name$=button]){

}
:not(.dialog).profile{

}

remove outline html

Input text Google Chrome

Button MS IE

/* วิธีแก้ */
*{
   outline : none;
}

การกำหนดเงาของ element html ด้วย css (less)

less

/*
less
เงาข้างนอก
*/
.box-shadow (@x : 0px, @y : 0px, @blur : 2px, @color : #ccc){
    /* Chrome */
    -webkit-box-shadow : @x @y @blur @color;
    /* Firefox */
    -moz-box-shadow : @x @y @blur @color;
    /* IE */
    box-shadow : @x @y @blur @color;
}
/*เงาข้างใน*/
.box-shadow (@x : 0px, @y : 0px, @blur : 2px, @color : #ccc){
    /* Chrome */
    -webkit-box-shadow : inset @x @y @blur @color;
    /* Firefox */
    -moz-box-shadow : inset @x @y @blur @color;
    /* IE */
    box-shadow : inset @x @y @blur @color;
}

การเรียกใช้งาน

div.box{
    background-color : white;
    width : 200px;
    height : 100px;
    .box-shadow(0px, 0px, 2px, #ccc);
}

การกำหนดรัศมีของ element html ด้วย css (less)

less

/*  
less
*/
.round-box (@topRight : 5px, @bottomRight : 5px, @bottomLeft : 5px, @topLeft : 5px){
    /*chrome*/
    -webkit-border-top-right-radius: @topRight;
    -webkit-border-top-left-radius: @topLeft;
    -webkit-border-bottom-right-radius: @bottomRight;
    -webkit-border-bottom-left-radius: @bottomLeft;

    /*Firefox*/
    -moz-border-radius-topright: @topRight;
    -moz-border-radius-topleft: @topLeft;
    -moz-border-radius-bottomright: @bottomRight;
    -moz-border-radius-bottomleft: @bottomLeft;

    /*IE*/
    border-top-right-radius: @topRight;
    border-top-left-radius: @topLeft;
    border-bottom-right-radius: @bottomRight;
    border-bottom-left-radius: @bottomLeft;
}

การเรียกใช้งาน

.round-box (15px, 10px, 0px, 5px);
.round-box (3px, 3px, 3px, 3px);
.round-box; /* 5px for all coner by defult */

div.topic{
    .round-box (3px, 3px, 3px, 3px);
    color : red;
    background-color : yellow;
}

การหมุนภาพด้วย css (less)

less

.rotate(@radius : 45deg){
    -ms-transform:rotate(@radius); /* IE 9 */
    -moz-transform:rotate(@radius); /* Firefox */
    -webkit-transform:rotate(@radius); /* Safari and Chrome */
    -o-transform:rotate(@radius); /* Opera */
}

การเรียกใช้งาน

.rotate(180deg);
.rotate; /* 45deg by defult */
.rotate(-90deg);

div.close{
    background-image : url('../images/close-icon.png');
    background-position : 0px 0px;
    .rotate(45deg);
}

การทำให้ตัวอักษร html ไม่สามารถ select ได้

        ปกติเราจะสามารถใช้เมาส์ครอบตัวหนังสือได้แบบรูปข้างล่างนี้  แต่ถ้าเราใช้ class ข้างล่างนี้เราจะไม่สามารถครอบตัวหนังสือที่มี class นี้อยู่ได้

ไม่สามารถ select ได้

.text-unselectable{
    -webkit-touch-callout: none; /* none | text | auto */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

สามารถ select ได้

.text-selectable{
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

        ผมเอาไว้ทำตัวหนังสือที่อยู่ในปุ่มน่ะครับ  คือทำปุ่มเอง   โดยใช้พวก div หรือ span ทีนี้มันจะชอบเจอปัญหาว่า พอคลิกไปเรื่อยๆ  ตัวหนังสือมันไม่นิ่ง  ตัวหนังสือข้างใน ปุ่มมันจะโดนครอบ  ทำให้รู้สึกว่า  เขียนปุ่มเหมือนไม่ใช่ปุ่ม  ดูแล้วมันไม่สบายตา  ผมก็เลยลองหาวิธีแก้ดูครับ  เลยได้โซลูชั่นนี้มาครับ

css selector

        ผมแค่ทำสรุปไว้น่ะครับ  ขาดตกบกพร่องอะไร ก็ต้องขออภัยมา ณ ที่นี้ด้วยครับ

css selector  ที่เราใช้อยู่  จำแนกตามประเภทของการ select ได้ทั้งหมดเป็น 9 แบบ ดังนี้
1. Universal Selector
2. Type Selector
3. Class Selector
4. ID Selector
5. Contextual Selector
6. Pseudo Element และ Pseudo Class Selector
7. Direct Child Selector
8. Adjacent Sibling Selector
9. Attribute Selector

การกำหนดขอบโค้งให้กับ element html (CSS3)

.round-box-medium{  
 /* Firefox */
 -moz-border-radius : 5px;
 /* Chrome */
 -webkit-border-radius : 5px; 
 /* IE */
 border-radius : 5px;
}

Position CSS

Position แบ่งออกเป็น 4 แบบ คือ

1. static
2. relative
3. absolute
4. fixed

        Static : คือ การเซตให้ element ไหลตาม normal flow ครับ  ซึ่งโดยทั่วไป  ค่า static ก็จะเป็น default อยู่แล้วครับ
     
        แล้วเจ้า nowmal flow มันคืออะไรล่ะ
        Nowmal flow ก็คือการที่ element หรือ tag html หนึ่งๆ จัดเรียงตัว หรือเรียงตำแหน่ง ตามค่า default ของมันที่ถูกเซตมาให้ตั้งแต่ครั้งแรก เช่น tag <div></div>  เมื่อมีการใช้แท็กนี้  หลายๆตัวด้วยกันแบบนี้

<div>XXX</div><div>YYY</div><div>ZZZ</div>

ตัวที่มาต่อกับตัวด้านหน้า  จะเกิดการขึ้นบรรทัดใหม่โดยอัตโนมัติ  ได้ผลลัพธ์เป็นดังนี้ครับ

XXX
YYY
ZZZ


หรือ tag span

จัดโครงหน้าเว็บไซต์ด้วย CSS

ลบ เส้นใต้ link (tag a) html (Remove Underline Link HTML)

ค่าปกติ (default) จะถูกกำหนดเป็น ดังนี้

a{
   text-decoration:underline;
}

ให้เรากำหนดใหม่เป็น  ดังนี้ครับ

integrate external style (css)

<head>
    <link href="mystyle.css" rel="stylesheet" type="text/css"></link>
</head>