CSS : .form-control-sm

Post by Goborijung at 2020-08-11 09:52:45 | ID: 709

<style>
.form-control-sm {
	height: calc(1em + .5rem + 2px);
	padding: .0rem .5rem;    
	font-size: .775rem;
	background: #f1f1f1;
}
</style>

CSS : Background-Repeat

Post by Goborijung at 2021-03-24 16:47:37 | ID: 1056

<style>
body {
  background-image: url("paper.gif");
  /*background-repeat: repeat-x; แนวนอน*/
  /*background-repeat: repeat-Y; แนวตั้ง*/
  background-repeat: no-repeat;
}
</style>

CSS : Animate CSS

Post by Goborijung at 2020-06-27 14:48:26 | ID: 639

** Animate CSS
>> CDN :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

How to use Syntax :
- animate หมายความว่าต้องการให้วัตถุนี้ขยับ
- infinite ขยับไม่ต้องหยุดนะ
- bounce ขยับแบบไหน อันนี้ขยับแบบเด้งๆ

>> Example 1
<h3 class="animated infinite bounce">เด้ง</h3>

>> Example 2
<span class="animated infinite bounce" style="display: inline-block;">TransferIn (new option)</span>

>> การกำหนดเวลา (เอาไปเขียนใส่เองใน css)
animation-duration: 1s;

----------------------------------------------------------------------------

>> Class สำหรับ Margin – Padding – Border

วิธีการคือ {boxmodel}{position}-{rem} //สูงสุดไม่เกิน 5

margin-top 3 rem  		= mt-3
margin-bottom 3 rem  	= mb-3
padding 5 rem 		= p-5
margin 2 rem 		= m-2
padding-bottom 3 rem 	= pd-3 หรือ pb-3

CSS : Fix Table on Top , Fixed Table :: Recommend

Post by Goborijung at 2022-03-14 14:39:37 | ID: 1412

<style>
	.table-responsive { overflow-y: auto; height: 425px; }
	.table-responsive thead th {
		position: sticky;
		top: 0;
		background-color: blue;
	}
	td { white-space: nowrap; }
</style>

CSS : gradients

Post by Goborijung at 2021-06-11 15:28:01 | ID: 1243

https://www.w3schools.com/css/css3_gradients.asp

CSS : Position

Post by Goborijung at 2021-04-09 16:50:59 | ID: 1123

https://www.w3schools.com/css/css_positioning.asp

https://iamgique.medium.com/%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B9%81%E0%B8%95%E0%B8%81%E0%B8%95%E0%B9%88%E0%B8%B2%E0%B8%87%E0%B8%82%E0%B8%AD%E0%B8%87-%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B8%87%E0%B8%B2%E0%B8%99-css-property-position-%E0%B8%A3%E0%B8%B0%E0%B8%AB%E0%B8%A7%E0%B9%88%E0%B8%B2%E0%B8%87-relative-%E0%B8%81%E0%B8%B1%E0%B8%9A-absolute-5865a8698111

Css : Table Striped

Post by Goborijung at 2021-07-10 10:09:52 | ID: 1278

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

CSS : td nowrap , td padding row , th padding row

Post by Goborijung at 2021-05-17 15:39:08 | ID: 1205

// No Wrap Text
td { white-space: nowrap; }

// Custom Padding th
.table th { padding: .25rem; }

// Custom Padding td
.table td { padding: 0 2px; }

CSS : Animate CSS Effect Name

Post by Goborijung at 2020-06-27 14:51:11 | ID: 640

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<?php
	$arrAnimate = array(
		'bounce'
		,'flash'
		,'pulse'
		,'rubberBand'
		,'shake'
		,'headShake'
		,'swing'
		,'tada'
		,'wobble'
		,'jello'
		,'bounceIn'
		,'bounceInDown'
		,'bounceInLeft'
		,'bounceInRight'
		,'bounceInUp'
		,'bounceOut'
		,'bounceOutDown'
		,'bounceOutLeft'
		,'bounceOutRight'
		,'bounceOutUp'
		,'fadeIn'
		,'fadeInDown'
		,'fadeInDownBig'
		,'fadeInLeft'
		,'fadeInLeftBig'
		,'fadeInRight'
		,'fadeInRightBig'
		,'fadeInUp'
		,'fadeInUpBig'
		,'fadeOut'
		,'fadeOutDown'
		,'fadeOutDownBig'
		,'fadeOutLeft'
		,'fadeOutLeftBig'
		,'fadeOutRight'
		,'fadeOutRightBig'
		,'fadeOutUp'
		,'fadeOutUpBig'
		,'flipInX'
		,'flipInY'
		,'flipOutX'
		,'flipOutY'
		,'lightSpeedIn'
		,'lightSpeedOut'
		,'rotateIn'
		,'rotateInDownLeft'
		,'rotateInDownRight'
		,'rotateInUpLeft'
		,'rotateInUpRight'
		,'rotateOut'
		,'rotateOutDownLeft'
		,'rotateOutDownRight'
		,'rotateOutUpLeft'
		,'rotateOutUpRight'
		,'hinge'
		,'jackInTheBox'
		,'rollIn'
		,'rollOut'
		,'zoomIn'
		,'zoomInDown'
		,'zoomInLeft'
		,'zoomInRight'
		,'zoomInUp'
		,'zoomOut'
		,'zoomOutDown'
		,'zoomOutLeft'
		,'zoomOutRight'
		,'zoomOutUp'
		,'slideInDown'
		,'slideInLeft'
		,'slideInRight'
		,'slideInUp'
		,'slideOutDown'
		,'slideOutLeft'
		,'slideOutRight'
		,'slideOutUp'
	);
?>

CSS : Center Box กำหนดข้อความให้อยู่ตรงกลางของหน้าจอ

Post by Goborijung at 2020-08-10 16:59:20 | ID: 706

<style>
	.center-box{
		width: 200px; 
		height: 200px; 
		position: absolute; 
		left: 50%; 
		top: 50%; 
		margin-left: -100px; 
		margin-top: -100px; 
		background-color: #ff0000;
	}
</style>

<div class="center-box">
	This Content
</div>

>> อธิบายได้ว่า
เรากำหนดให้ความกว้างและความยาวของกล่องเท่ากับ 200px
กำหนดให้ตำแหน่งแกน x และ แกน y อยู่ที่ 50% ของหน้าจอ

แต่ถ้าเรากำหนดตำแหน่งแกน x และ แกน y อยู่ที่ 50% ของหน้าจออย่างเดียวกล่องข้อตวามนี้ก็จะยังไม่อยู่ในตำแหน่งกึ่งกลาง 
เลยต้องกำหนด margin-left และ margin-top ให้ติดลบเท่ากับค่าครึ่งหนึ่งของความกว้างและความยาวของกล่อง

เท่านี้เราก็จะได้ กล่องที่เป็น Position Absolute และอยู่กึ่งกลางหน้าจอแล้ว ลองเอาไปประยุกต์ใช้กันนะครับ