Khóa học CSS nâng cao của HowKteam – tôi học được gì, có gì hay

background-image: linear-gradient(to right bottom, rgba(142, 158, 140, .7), rgba(28,62,255,.7)), url(img/image2.jpg);
background-size: cover;
background-position: top;

transform: translateX(-3px);
transform: scaleY(1.4);
transform: skewX(10deg);

transition: all .4s

@keyframes nameAnimation {
	0%{
		opacity: 0;
		transform: translate(0, 100px);
	}

	80%{
		transform: translate(0, -20px);
	}

	100%{
		opacity: 1;
		transform: translate(0, 0);
	}
}

animation-name: nameAnimation;    /* tên Animation */
animation-duration: 2s;       /* Thời gian thực hiện */
animation-iteration-count: 4;  /* Số lần thực hiện infinite(lặp hoài) */
animation-delay: 3s;   /* Thời gian chờ trước khi thực hiện */
animation-fill-mode: backwards; /* Lấy keyframe đầu tiên khi nào keyframe đó */ thực hiện xong thì hãy hiện cái keyframe này lên

/* Cách ghi gọn: */
animation: nameAnimation 2s ease-out 3s

animation-timing-function: cubic-bezier(.96,.61,.06,.8);

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

//Ở CMD

//kiểm tra đã cài nodejs chưa
node -v

//Vào npm
npm init

//Thoát npm
ctrl + c

//Cài đặt package
npm install tenPackage --save
Vd: npm install node-sass --save // bạn chạy lệnh này để cài node-sass luôn nha

//gỡ cài đặt package
npm uninstall tenPackage --save

//Cài package dạng dev
npm install --sav-dev tenPackage

// khai báo biến
$tenBien: giaTri;

//mixin
@mixin tenMixin(Các biến) {
}
     //gọi mixin
     @include tenMixin();

//funtion
@function tenF(Các biến) {
}
     //gọi function
     ví dụ: margin: tenF() * 1px;

//extend
% tenExtend {
}
     //gọi extend
     @extend %tenExtend;

//nesting
.list {
     &__list-item {    //con nằm trong cha (dấu &: thay thế cho giá trị cha .list .list-item)

     }
}

//import file
@import 'đường_dẫn';  (không bao gồm dấu _ ở đầu)

"scripts": {
    "sasstocss": "node đường_dẫn_File_SCSS đường_dẫn_File_Cần_tạo_css -w"
}

//ví dụ
"scripts": {
    "sasstocss": "node scss/main.scss css/style.css -w"
}

npm run sasstocss
//lưu ý có thể tạo file bat cho nhanh

abstracts
    _mixins.scss
    _variables.scss
    _functions.scss
Base
    _animations.scss  //lưu các keyframes
    _base.scss  //lưu *, html, body
    _utilities.scss
    _typography.scss  // lưu body, heading
Components  //những cái tái sử dụng
Layout   //footer, nav, header
page //css từng trang

background-image: linear-gradient(to right,
    $color-primary-light, $color-primary-dark); /* Tạo background-gradient */
color: transparent;    /* Để color trùng với màu background */
-webkit-background-clip: text;    /* Cắt background */

.card{
    perspective: 150rem;
    position: relative;
    height: 45rem;

    &__side{
        backface-visibility: hidden;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        color: white;
        font-size: 2rem;
        height: 45rem;
        transition: all .8s ease;

        &--front{
            background-color: orangered;
        }

        &--back{
            background-color: green;
            transform: rotateY(180deg);
        }
    }

    &:hover &__side--front{
        transform: rotateY(-180deg);
    }

    &:hover &__side--back{ 
        transform: rotateY(0);
    }
}


//ở đây chỉ có 2 lưu ý là
perspective: cái cần có cho hiệu ứng lật card này.
backface-visibility: hidden;  :giấu đi các element phía dưới

background-size: cover;
background-blend-mode: screen;
  /* screen: màu background sẽ trộn chung với bức ảnh bên dưới*/
height: 23rem;

-webkit-box-decoration-break: clone;

shape-outside: circle(50% at 50% 50%);

filter: blur(5rem) brightness(70%);

object-fit: cover;
/* cha thì phải overflow: hidden; */

  column-count: 2;  /* số cột */
  column-gap: 4rem; /* khoảng cách giữa các cột */
  column-rule: 1px solid #ccc; /* cạch ngang giữa các cột */
  hyphens: auto; /* dấu '-' khi từ quá dài phải xuống hàng */