Meo Code - Frontend

Flexbox Css

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://thachpham.com/web-development/html-css/huong-dan-css3-flexbox-toan-tap.html

text-align-last: justify;

display: flex; justify-content: space-between;

CSS Canh đều các thành phần con

pointer-events: none;

CSS Hạn chế con trỏ chuột khỏi những thao tác:

white-space: normal;

white-space: nowrap;

word-break: break-all;

CSS Xác định khoảng trắng có bên trong thành phần được xử lý như thế nào.

Text will never wrap to the next line. The text continues on the same line until a
tag is encountered

Break words at any character:

Tag sub: H₂O

Tag sup: a²

Tạo một ký tự nhỏ bên dưới

Tạo một ký tự nhỏ phía bên trên.

Tag del: ~~Text~~

CSS: text-decoration: line-through;

Thẻ Định dạng chữ gạch ngang trong văn bản

CSS Định dạng chữ gạch ngang trong văn bản

CSS: text-shadow: 0px 1px 3px #000;

CSS Định dạng shadow text

CSS:


ol { counter-reset: item }
li{ display: block }
li:before { 
  content: counters(item, ".") " ";
  counter-increment: item;
}

CSS Ordered list

Menu 1
Menu 1
1. menu 2
2. menu 2
3. menu 2
  1. menu 2
  2. menu 2
  3. menu 2
Menu 1

CSS:


input:focus, textarea:focus {
    border-color: rgba(21,156,64,.6) !important;
    outline: 0;
    outline-color: #000000;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 1px rgba(21,156,64,.6) !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 1px rgba(21,156,64,.6) !important;
}

CSS: .btn-focus:focus { outline: 0; }

CSS text-stroke generator

CSS text-stroke generator

[class^="col-"], div[class*=" col-"] { border-color: red; }

CSS Selector [attribute*=value]

Filter Property

filter: grayscale(100%);

filter: hue-rotate(40deg);

Apply a hue rotation on the image

rem: là đơn vị tham chiếu tỷ lệ so với phần tử gốc của website ở đây là thẻ << /span>html > dựa vào giá trị của thuộc tính font-size

em: là đơn vị tham chiếu tỷ lệ so với phần tử cha trực tiếp chứa nó hoặc chính nó dựa vào giá trị của thuộc tính là font-size

REM

Border gradient

Button border gradient

transform: skew(ax, ay)

transform: skewX(-10deg);

CSS Triangle

border-bottom: 10vw solid #EC6607;

border-left: 50vw solid transparent;

Clip-path css

https://bennettfeely.com/clippy/

Note Css