Hiển thị các bài đăng có nhãn css. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn css. Hiển thị tất cả bài đăng

Thứ Tư, 10 tháng 6, 2026

Icon trong select css đẹp

**** HTML



<div class="select-wrap">

    <select name="customer_shipping_phuongxa" id="customer_shipping_phuongxa">

        <option value="">Chọn Phường / Xã</option>

    </select>

</div> 

**** CSS
.appline .select-wrap{

    position:relative;

    width:100%;

}

.appline .select-wrap select{

    -webkit-appearance:none;

    -moz-appearance:none;

    appearance:none;


    background:#fff;

    border:1px solid #d9d9d9;

    box-sizing:border-box;

    border-radius:16px !important;

    height:40px !important;

    width:100%;

    padding:5px 45px 5px 20px !important;

    transition:all .2s;

    font-size:14px;

    cursor:pointer;

}

.appline .select-wrap select::-ms-expand{

    display:none;

}

.appline .select-wrap:after{

    content:"";

    position:absolute;

    top:50%;

    right:18px;

    margin-top:-2px;

    width:0;

    height:0;

    border-style:solid;

    border-width:5px 4px 0 4px;

    border-color:#888 transparent transparent transparent;

    pointer-events:none;

}

Người đăng: vào lúc Không có nhận xét nào:
Nhãn: , ,

Thứ Tư, 31 tháng 12, 2025

Fix load website bị giật nhẹ

 html {

  overflow-y: scroll;

}

Người đăng: vào lúc Không có nhận xét nào:
Nhãn: , ,

Thứ Ba, 23 tháng 9, 2025

Tỉ lệ giữa hai div của css Flex

🔹 Tỉ lệ 4-8 

<div class="flex gap-6 p-6">

    {{-- Form thêm key --}}

    <div class="w-1/3 bg-gray-800 p-4 rounded">

        <!-- Nội dung form -->

    </div>


    {{-- Danh sách keys --}}

    <div class="w-2/3 bg-gray-800 p-4 rounded">

        <h2 class="text-lg font-bold mb-4">Your AI Keys</h2>

        <!-- Nội dung danh sách keys -->

    </div>

</div>

👉 Ở đây:

w-1/3 = 33% (tương đương 4/12).

w-2/3 = 66% (tương đương 8/12).



🔹 Tỉ lệ 5-7

<div class="flex gap-6 p-6">

    {{-- Form thêm key --}}

    <div class="w-5/12 bg-gray-800 p-4 rounded">

        <!-- Nội dung form -->

    </div>


    {{-- Danh sách keys --}}

    <div class="w-7/12 bg-gray-800 p-4 rounded">

        <h2 class="text-lg font-bold mb-4">Your AI Keys</h2>

        <!-- Nội dung danh sách keys -->

    </div>

</div>


🔹 Tỉ lệ 6-6

<div class="flex gap-6 p-6">

    {{-- Form thêm key --}}

    <div class="w-1/2 bg-gray-800 p-4 rounded">

        <!-- Nội dung form -->

    </div>


    {{-- Danh sách keys --}}

    <div class="w-1/2 bg-gray-800 p-4 rounded">

        <h2 class="text-lg font-bold mb-4">Your AI Keys</h2>

        <!-- Nội dung danh sách keys -->

    </div>

</div>

Người đăng: vào lúc Không có nhận xét nào:
Nhãn: , ,

Thứ Sáu, 11 tháng 7, 2025

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);

  }

}

Người đăng: vào lúc Không có nhận xét nào:
Nhãn: , ,

Thứ Hai, 30 tháng 9, 2024

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
Người đăng: vào lúc Không có nhận xét nào:
Nhãn: , ,
Đăng ký: Bài đăng (Atom)