SLIDE 1

Produces This	CODE
HELLO ITOPPLUS	Direction = LEFT `<marquee direction="LEFT">HELLO ITOPPLUS</marquee>`
HELLO ITOPPLUS	Direction = RIGHT `<marquee direction="RIGHT">HELLO ITOPPLUS</marquee>`
HELLO ITOPPLUS	Direction = DOWN `<marquee direction="DOWN">HELLO ITOPPLUS</marquee>`
HELLO ITOPPLUS	Direction = UP `<marquee direction="UP">HELLO ITOPPLUS</marquee>`

Produces This	CODE
HELLO ITOPPLUS	Scrolldelay = 500 `<marquee scrolldelay="500">HELLO ITOPPLUS</marquee>`
HELLO ITOPPLUS	Scrolldelay = 1000 `<marquee scrolldelay="1000">HELLO ITOPPLUS</marquee>`
HELLO ITOPPLUS	Scrollamount = 20 `<marquee scrollamount="20">HELLO ITOPPLUS</marquee>`
HELLO ITOPPLUS	Scrollamount = 50 `<marquee scrollamount="50">HELLO ITOPPLUS</marquee>`

การใช้ Border Code ในภาษา HTML

ลักษณะความกว้าง ของ Border

Produces This	CODE
HELLO ITOPPLUS	style="border: 1px solid #000;" `<div style="border: 1px solid #000;">HELLO ITOPPLUS</div>`
HELLO ITOPPLUS	style="border-left: 2px solid #000;" `<div style="border-left: 2px solid #000;">HELLO ITOPPLUS</div>`
HELLO ITOPPLUS	style="border-right: 3px solid #000;" `<div style="border-right: 3px solid #000;">HELLO ITOPPLUS</div>`
HELLO ITOPPLUS	style="border-top: 4px solid #000;" `<div style="border-top: 4px solid #000;">HELLO ITOPPLUS</div>`
HELLO ITOPPLUS	style="border-bottom: 10px solid #f00;" `<div style="border-bottom: 10px solid #f00;">HELLO ITOPPLUS</div>`

ปรับแต่ง Border

Produces This	CODE
HELLO ITOPPLUS	style="border: 2px dotted #000;" `<div style="border: 2px dotted #000;">HELLO ITOPPLUS</div>`
HELLO ITOPPLUS	style="2px dashed #000" `<div style="border: 2px dashed #000;">HELLO ITOPPLUS</div>`
HELLO ITOPPLUS	style="border: 2px solid #000;width: 50%;" `<div style="border: 2px solid #000;width: 50%;">HELLO ITOPPLUS</div>`
HELLO ITOPPLUS	style="border: 5px solid #f00;" `<div style="border: 5px solid #f00;">HELLO ITOPPLUS</div>`
HELLO ITOPPLUS	style="border: 2px solid #f00; box-shadow: 3px 3px 3px 0px #00000069;" `<div style="border: 2px solid #f00;box-shadow: 3px 3px 3px 0px #00000069;">HELLO ITOPPLUS</div>`
HELLO ITOPPLUS	style="border: 5px solid #6cda4c; border-radius: 10px 20px 30px 40px;" `<div style="border: 5px solid #6cda4c;border-radius: 10px 20px 30px 40px;">HELLO ITOPPLUS</div>`
HELLO ITOPPLUS	style="border: 5px solid #6cda4c; background-image: url('...'); `<div style="border: 5px solid #6cda4c;background-image: url(http://itp1.itopfile.com/ImageServer/707dbe7f91af7ddb/0/0/1z-z166476456825.jpg);">HELLO ITOPPLUS</div>`
HELLO ITOPPLUS	style="background:linear-gradient(to right, red, purple);padding:5px;" style="background:#222;padding:10px;color:#fff;" `<div style="background: linear-gradient(to right, red, purple);padding:5px;"> <div style="background: #222;padding:10px;color: #fff;">HELLO ITOPPLUS</div></div>`

Gradient Generator

Border Radius

การใช้ Class Button ในภาษา HTML

การเรียกใช้คลาส button

Produces This	CODE
HELLO ITOPPLUS	`<div class="botton_width"> <div class="botton_itopplus"> HELLO ITOPPLUS </div> </div> .bottom_width { width: 38%; margin: 0 auto; display: block; padding: 10px; } .botton_itopplus { text-align: center; background-color: #78e65b; padding: 10px; border: 2px solid #3aa61b; color: #fff; cursor: pointer; }`

การเปลี่ยนสีปุ่ม button (background-color)

Produces This	CODE
HELLO ITOPPLUS	`.botton_itopplus { background-color: #000; }`
HELLO ITOPPLUS	`.botton_itopplus { background-color: #cb2727; }`

การเพิ่มเงา (box-shadow)

Produces This	CODE
HELLO ITOPPLUS	`box-shadow: 2px 2px 2px 0px #000; .botton_itopplus { text-align: center; background-color: #78e65b; padding: 10px; border: 2px solid #3aa61b; color: #fff; cursor: pointer; box-shadow: 2px 2px 2px 0px #000; }`
HELLO ITOPPLUS	`box-shadow: 2px 2px 2px 0px #d3c73e`

การไล่สี (background-gradient)

Produces This	CODE
HELLO ITOPPLUS	`background-image:linear-gradient(to bottom right, #ff0000, #ffff00); .botton_itopplus { text-align: center; background-image:linear-gradient(to bottom right, #ff0000, #ffff00); padding: 10px; border: 2px solid #3aa61b; color: #fff; cursor: pointer; box-shadow: 2px 2px 2px 0px #000; }`
HELLO ITOPPLUS	`background-image: linear-gradient(to bottom right, #66d645, #ffff00);`

ปรับขอบ (border-radius)

Produces This	CODE
HELLO ITOPPLUS	`border-radius: 10px 10px 10px 10px; .botton_itopplus { text-align: center; background-color: #78e65b; padding: 10px; border: 2px solid #3aa61b; color: #fff; cursor: pointer; border-radius: 10px 10px 10px 10px; }`

การเพิ่ม effect button

Produces This	CODE
HELLO ITOPPLUS	`transition: 0.32s; .botton_itopplus { transition: 0.32s; background-color: #78e65b; } .botton_itopplus:hover { background-color:#000 }`
HELLO ITOPPLUS	`transition: 0.32s; .botton_itopplus { transition: 0.32s; } .botton_itopplus:hover { box-shadow: 1px 1px 2px 2px #0000003b; }`
HELLO ITOPPLUS	`transition: 0.32s; .botton_itopplus { transition: 0.32s; } .botton_itopplus:hover { border-radius: 10px; }`
HELLO ITOPPLUS	`transition: 0.32s; .botton_itopplus { transition: 0.32s; } .botton_itopplus:hover { transform: scale(1.05,1.05); border-radius: 5px; background-image: linear-gradient(to bottom right, #ff0000, #ffff00); box-shadow: 2px 2px 2px 1px #0000006b; }`

link button

Produces This	CODE
HELLO ITOPPLUS	`<a href=" (Link) " target="_blank"> <div class="botton_width"> <div class="botton_itopplus"> HELLO ITOPPLUS </div> </div> </a>`

COL SYSTEMS

col-md

<div class="row row-col">
<div class="col-md-6 padding-col"> (Pictures.jpg) </div>

<div class="col-md-6 padding-col"> (Pictures.jpg) </div>

</div>

col-sm

<div class="row row-col">
<div class="col-sm-4 padding-col"> (Pictures.jpg) </div>

<div class="col-sm-4 padding-col"> (Pictures.jpg) </div>

<div class="col-sm-4 padding-col"> (Pictures.jpg) </div>

</div>

col-xs

HELLO ITOPPLUS

<div class="row row-col">
<div class="col-xs-12 padding-col"> (Pictures.jpg) </div>

<div class="col-xs-12 padding-col"> HELLO ITOPPLUS </div>

</div>

<div class="row row-col">
<div class="col-xs-3 padding-col"> (Pictures.jpg) </div>

<div class="col-xs-9 padding-col"> HELLO ITOPPLUS </div>

</div>