CSS clamp

 height: clamp(280px, 23vw, 450px);

có nghĩa là chiều cao sẽ tự co giãn theo kích thước màn hình nhưng luôn nằm trong khoảng từ 280px đến 450px.

Cú pháp của clamp() là:

clamp(MIN, PREFERRED, MAX)

• 280px → Giá trị nhỏ nhất (không bao giờ thấp hơn).
• 23vw → Giá trị mong muốn (23% chiều rộng của cửa sổ trình duyệt).
• 450px → Giá trị lớn nhất (không bao giờ vượt quá).

Ví dụ

Chiều rộng màn hình	23vw	Kết quả
320px	73.6px	280px (vì nhỏ hơn min)
768px	176.6px	280px
1200px	276px	280px
1400px	322px	322px
1600px	368px	368px
2200px	506px	450px (vì vượt max)

---

Khi nào dùng?

Ví dụ cho ảnh sản phẩm:

.dmsp-image {
    height: clamp(280px, 23vw, 450px);
}

• Điện thoại → cao 280px.
• Tablet → khoảng 280–320px.
• Desktop → khoảng 320–450px.
• Màn hình siêu rộng → tối đa 450px, không bị quá cao.

---

Một số giá trị thường dùng

/* Luôn từ 250px đến 400px */
height: clamp(250px, 20vw, 400px);

/* Phù hợp card sản phẩm */
height: clamp(280px, 25vw, 420px);

/* Banner */
height: clamp(300px, 35vw, 700px);

clamp() rất hữu ích vì bạn không cần viết nhiều @media để thay đổi chiều cao theo từng kích thước màn hình.

Hoán đổi vị trí div trong CSS

 

--------------####----------------

--------------####----------------

DEMO

***** CSS

.vhproductall {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    align-content: center;

    margin-bottom: 40px;

}

.vhproductall .colt {

    width: calc(100% - 535px);

}

.vhproductall .cold {

    width: 535px;

}

--------------####---------------

NOTE: CHATGPT

Dòng CSS này:

.vhproductall:nth-child(even) .colt {
    order: 2;
}

Có nghĩa là:

• .vhproductall:nth-child(even): chọn tất cả phần tử có class là vhproductall và là phần tử con thứ chẵn (even = 2, 4, 6, ...).

• .colt: bên trong những phần tử .vhproductall chẵn đó, chọn phần tử con có class là colt.

• order: 2;: áp dụng thuộc tính CSS Flexbox order: 2, nghĩa là đổi thứ tự hiển thị của phần tử colt này trong layout flex.

---

Ví dụ dễ hiểu:

Giả sử HTML:

<div class="vhproductall">
  <div class="colt">A</div>
  <div class="other">B</div>
</div>
<div class="vhproductall">
  <div class="colt">C</div>
  <div class="other">D</div>
</div>

Nếu bạn dùng Flexbox trong .vhproductall, thì với nth-child(even) là phần tử thứ 2 (div thứ 2 .vhproductall), C có order: 2, sẽ bị đẩy xuống sau D, dù viết trước trong HTML.

Hover div trượt lên với "transition - transform"

 ==== transition - transform ====

****HTML

<div class="disnews">Nội dung hơn 5 dòng </div>

****CSS

.disnews {

    display: flex;

    width: 100%;

    padding: .75rem;

    border: 1px solid #d9d9d9;

    background-color: #fff;

    box-shadow: 0 1px 1px rgba(0, 0, 0, .16), 0 1px 1px rgba(0, 0, 0, .23);

    height: 100%;

    transition: .3s ease;

    margin-bottom: 30px;

}

.disnews:hover {                                                                                 

    transform: translateY(-.5rem);

}

Css cắt dòng với ellipsis

==== ellipsis CSS ====

****HTML

<div class="tintucnew-text">Nội dung hơn 5 dòng </div>

****CSS
.tintucnews-text {

    width: 100%;

    max-width: 600px; /* hoặc để 100% nếu responsive */

    display: -webkit-box;

    -webkit-line-clamp: 5;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

}

Css display-Grid

****HTML

<div class="glogallery">

   <div class="cases-item"></div>

   <div class="cases-item"></div>

   <div class="cases-item"></div>

   <div class="cases-item"></div>

   <div class="cases-item"></div>

   <div class="cases-item"></div>

   <div class="cases-item"></div>

   <div class="cases-item"></div>

</div>

*CSS

.glogallery {

   display: grid;

   grid-template-columns: repeat(4, 1fr); // 4 cột

   gap: 20px;

}

.cases-item {

   overflow: hidden;

   transition: transform 0.3s ease;

}

Hiệu ứng CSS HTML

Hiệu ứng CSS HTML 

**** HTML

<div class="sologian-page">

    <div class="wr-container2222">

    <div class="catglobal">

    <div class="catmodule">Sản phẩm</div>

    <div class="catnhom">Gia công kim khí</div>     

    </div>

    </div>

</div>

**** CSS

.catglobal {

    position: absolute;

    bottom: 50px;

    left: 30px;

    text-align: left;

    color: #fff;

    animation: slideUp 0.6s ease-out forwards;

}

@keyframes slideUp {

  0% {

    opacity: 0;

    transform: translateY(30px); /* bắt đầu từ dưới */

  }

  100% {

    opacity: 1;

    transform: translateY(0);

  }

}

Hover Css: hiện chữ đẹp khi hover

 

**** HTML:

<div class="cases-pic posR">

<a href="#" class="case-link">

<img src="link__hinhanh">

<p>View</p>

</a>

</div>

**** CSS:

p:not(.has-background):last-of-type {

    padding-bottom: 0;

}

a.case-link p {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    text-align: center;

    display: grid;

    align-content: center;

    z-index: 999999;

    color: white;

    text-transform: uppercase;

    font-size: 18px !important;

    letter-spacing: 5px !important;

    top: -10px;

    opacity: 0;

}

a.case-link p {

    transition: .15s ease-in-out !important;

}

a.case-link:hover p {

    top: 0;

    opacity: 1;

}

hover ảnh CSS đẹp

 

**** HTML

<div class="post-item">

    <a href="#">

        <div class="post-thumbnail">

            <img src="">

        </div>

    </a>    

</div>

**** CSS

.category-page-single .post-item {

    margin-bottom: 10px;

    padding: 10px;

    background: #fff;

    position: relative;

    border-radius: 10px;

    border: 1px solid #e6e6e6;

    transition-duration: 0.3s;

}

.post-item .post-thumbnail {

    max-width: 290px;

    width: 100%;

    float: left;

    height: 190px;

    transition: 0.3s ease-in-out;

    background-repeat: no-repeat !important;

    background-size: cover !important;

    background-position: center center !important;

    overflow: hidden;

    position: relative;

    display: flex;

    flex-flow: wrap;

    align-items: center;

}

.post-item .post-thumbnail:before {

    content: "";

    background: rgba(255, 255, 255, .25);

    height: 220px;

    left: 100%;

    position: absolute;

    top: 100%;

    width: 100%;

    -webkit-transition: all 0.3s;

    -moz-transition: all 0.3s;

    -o-transition: all 0.3s;

    transition: all 0.3s;

}

.post-item:hover .post-thumbnail::before, 

.post-item:hover .post-thumbnail::after {

    left: 0;

    top: 0;

}

.post-item .post-thumbnail img {

    max-width: 100%;

    width: 100%;

    height: 100%;

    transition: 0.3s ease-in-out;

    object-fit: cover !important;

}

/***style***/

.post-item .post-thumbnail img {

    object-fit: fill !important;

}

**** Link

https://www.bkns.vn/lay-du-lieu-tu-website-khac-bang-php.html

Fix nội dung chạy , ảnh đứng yên

 

****HTML

<div class="danb-men">

<div class="elementor-background-overlay"></div>

</div>

**** CSS

.danb-men {

    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;

    margin-top: 0px;

    margin-bottom: 0px;

    padding: 1% 7% 3% 7%;

    position: relative;

}

.elementor-background-overlay {

    background-image: url(../images/services.jpg);

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    opacity: 0.05;

    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;

    height: 100%;

    width: 100%;

    top: 0;

    left: 0;

    position: absolute;

    background-attachment: fixed;

}

Css text - transform - writing-mode

 

writing-mode: vertical-lr;

transform: rotate(27deg);

Chi Tiết Sp Scroll Top

 

**** HTML

<div class="product-detail-head">

<div class="detail-theme-image">

<div class="inner-image">

    <div class="img ratio-1-1">

    <a data-fancybox="gallery'.$id.'" data-caption="'.$subject.'" href="url:images">

        <img src="url:images" class="img-fluid">

        </a>

    </div>

</div>

<div class="theme-bottom-image">

<div class="col-12 col-md-6">

<div class="item item-view-demo">

<a href="/view-demo/doanhnghiep03" class="btn btn-submit w-100" target="_blank">Xem thực tế</a>

</div>
</div>

<div class="col-12 col-md-6">

<div class="item item-registertrial"><button class="btn btn-submit-white w-100" nh-category-id="163" nh-template="doanhnghiep03" btn-registertrial="">Dùng thử</button>

</div>

</div>

<div class="clearfix"></div>

</div>

</div>

</div>

**** CSS

.product-detail-head {

    background: #fff;

    padding: 15px;

    box-shadow: 0 .3rem 1.525rem -.375rem rgba(0, 0, 0, .1);

    border-radius: 8px;

}

.detail-theme-image {

    position: relative;

}

.detail-theme-image .inner-image {

    border-radius: 8px;

    overflow: hidden;

}

.ratio-1-1 {

    padding-top: 100%;

    position: relative;

}

.img-fluid {

    max-width: 100%;

    height: auto;

}

.ratio-1-1 img{

position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    height: 100%;

    width: 100%;

    object-fit: cover;

}

.detail-theme-image .inner-image .img:hover img {

    object-position: bottom;

}

.detail-theme-image .inner-image .img img {

    object-position: top;

    -webkit-transition: all 3s ease-in-out 0s;

    -moz-transition: all 3s ease-in-out 0s;

    -ms-transition: all 3s ease-in-out 0s;

    transition: all 3s ease-in-out 0s;

}

/*** 2 buttton******/

.btn {

    z-index: 0;

    border: 0;

}

.btn:not(:disabled):not(.disabled) {

    cursor: pointer;

}

.btn:hover {

    color: #fff !important;

}

.btn:not(.btn-registertrial) {

    position: relative;

    overflow: hidden;

}

.w-100 {

    width: 100% !important;

}

.btn {

    display: inline-block;

    font-weight: 400;

    color: #212529;

    text-align: center;

    vertical-align: middle;

    user-select: none;

    background-color: transparent;

    border: 1px solid transparent;

    padding: 0.85rem 1.25rem;

    font-size: 1.4rem;

    line-height: 1.5;

    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

}

.btn:not(.btn-registertrial):before {

    content: '';

    position: absolute;

    height: 100%;

    width: 0%;

    top: 0;

    left: -40px;

    transform: skewX(45deg);

    background: linear-gradient(90deg, #0D5DD6 0%, #9747FF 100%);

    z-index: -1;

    transition: all 1s;

}

.btn:not(.btn-registertrial):hover:before {

    width: 160%;

}

.btn:not(.btn-registertrial):before {

    content: '';

    position: absolute;

    height: 100%;

    width: 0%;

    top: 0;

    left: -40px;

    transform: skewX(45deg);

    background: linear-gradient(90deg, #0D5DD6 0%, #9747FF 100%);

    z-index: -1;

    transition: all 1s;

}

.btn-submit {

    border: 1px solid #0D5DD6;

    background-color: #0D5DD6;

    color: #fff;

    border-radius: .5rem;

}

.btn-submit-white {

    width: 100%;

    border: 1px solid #0D5DD6;

    color: #0D5DD6;

    border-radius: 0.5rem;

}

Button css bài viết

 

**** HTML

<div class="home-news-box posR">

<div class="news__date clearfix ">

        <div class="news__date__month">Oct</div>

        <div class="news__date__day">04</div>

    </div>

</div> 

****CSS

.news__date {

    background-color: #9e0b0f;

    color: #fff;

    line-height: 1;

    padding: 7px 10px;

    position: absolute;

    right: -10px;

    z-index: 9;

    text-align: center;

    top: 10px;

}

.news__date::before {

    background-color: rgba(250, 250, 250, 0.5);

    content: "";

    height: 2px;

    position: absolute;

    right: calc(50% - 10px);

    top: 7px;

    width: 20px;

}

.news__date__month {

    font-size: 10px;

    font-weight: bold;

    margin-bottom: 3px;

    margin-top: 10px;

    text-transform: uppercase;

}

.news__date__day {

    font-size: 16px;

    text-align: center;

    display: block;

    font-family: Verdana, Geneva, sans-serif;

}

.news__date::after {

    border-color: #bf1926 transparent transparent;

    border-style: solid;

    border-width: 9px 10px 0 0;

    bottom: -9px;

    content: "";

    height: 0;

    position: absolute;

    right: 0;

    width: 0;

}

CSS transform: translate

**** JS

$(".blog-macdep").on( "click", function() {

    $(".blog-macdep").toggleClass("is-active");

});

**** HTML

<div class="blog-macdep posR is-active">   

Mặc đẹp

</div>

**** CSS

.blog-macdep.is-active:after{

    transform: rotate(180deg);

}

.blog-macdep:after{

    position: absolute;

    content: "";

    top: 12px;

    right: 14px;

    width: 0;

    height: 0;

    border: 10px solid transparent;

    background-image: url(../images/select.svg);

    background-repeat: no-repeat;

    background-size: 12px;

    background-position: 50%;

    transition: all .3s;

}

**** STEP 2

.css{
    transform: translate(0, -50%)
} 

**** HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <img class ="img-test1" src="./Asset_1.svg" alt="">
        <img class ="img-test2" src="./Asset_2.svg" alt="">
        <img class ="img-test3" src="./Asset_3.svg" alt="">
    </div>
</body>
</html>

****CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    width: 100px;
    height: 100px;
}

.container {
    background-color: red;
    height: 400px;
    width: 100%;
    display: flex;
    justify-content: center;    
}

.img-test1:hover {
    transition: 3s;
    transform: translate(200px, 200px);
}

.img-test2:hover {
    transition: 3s;
    transform: translate(200px, 200px);
}

.img-test3:hover {
    transition: 3s;
    transform: translate(200px, 200px);
}

Link: Xem tại đây