Học viên: Phạm Thanh Huấn
Lớp: Web Frontend - React Js 29
Emai: HuanPT99@gmail.com
Link tham khảo: https://www.makeuseof.com/css-tips-and-tricks-you-must-know/

8 mẹo và thủ thuật CSS cần thiết mà các developers nên biết

Bạn có đang sử dụng các phương pháp CSS chính này cho quy trình làm việc nhanh chóng và thiết kế web đẹp không?

CSS được sử dụng để thêm phong cách vào trang 0web sau khi bạn đã thiết lập khung HTML. Hơn nữa, bạn có thể tạo các thiết kế mượt mà trong CSS chỉ với một vài đoạn code.

Các developers nên biết những thủ thuật CSS sau để phát triển dự án của mình một cách nhanh chóng và hiệu quả. Chúng chắc chắn sẽ nâng cao hiệu suất làm việc của bạn lên một tầm cao mới - hãy bắt đầu ngay.

1. Các hiệu ứng di chuột ( Hover Effects )

Bạn có thể thêm Hover hiệu ứng cho một phần tử HTML bằng cách sử dụng bộ chọn :hover.

Ví dụ: Thêm hover hiệu ứng vào một phần tử nút.

HTML code:

<button>Hover Over Me</button>

CSS code:

button:hover {
color: #0062FF;
border: #0062FF solid 1px;
background: #FFFF99;
}

Bạn có thể thử với mã này và thêm các hiệu ứng như fade-in, grow-in, skew, v.v. Biến nó thành của riêng bạn!

Hiệu ứng CSS Fade-in khi di chuột

button{
opacity:0.5;
}
button:hover{
opacity:1;
}

Hiệu CSS Grow-in khi di chuột

button:hover{
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}

2. Thay đổi kích thước hình ảnh để phù hợp với thẻ div Container

Bạn có thể thay đổi kích thước hình ảnh để phù hợp với thẻ div container bằng cách sử dụng các thuộc tính height, width, and thuộc tính object-fit.

HTML Code:

<img class="random-image" src="https://picsum.photos/200/300" />

CSS Code:

.random-image {
                height: 100%;
                width: 100%;
                object-fit: contain;
            }

3. Ghi đè tất cả các styles ( Overriding all the Styles )

Bạn có thể ghi đè lên tất cả các khai báo kiểu dáng khác của một thuộc tính (bao gồm kiểu dáng trong dòng) bằng cách sử dụng chỉ thị !important ở cuối một giá trị.

HTML Code:

<p class="className" id="idName" style="background-color: orange;">
            Hello World!
        </p>

CSS Code:

p {
                background-color: yellow;
            }
            .className {
                background-color: blue !important;
            }
            #idName {
                background-color: green;
            }

Trong ví dụ này, !important sẽ ghi đè lên tất cả các khai báo background-color khác và đảm bảo background-color sẽ được đặt là màu xanh dương thay vì màu xanh lá cây.

4. Cắt ngắn văn bản với dấu ba chấm ( Truncate Text With Ellipsis )

Bạn có thể cắt ngắn văn bản tràn trên bằng dấu ba chấm (…) bằng cách sử dụng thuộc tính CSS text-overflow.

HTML CCode:

<p class="text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor.
        </p>

CSS Code:

.text {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 200px;
            }

5. Sử dụng text-transform ( Using text-transform )

Bạn có thể định dạng kiểu chữ in hoa, chữ thường hoặc in hoa chữ cái đầu tiên bằng cách sử dụng thuộc tính CSS text-transform.

Chữ in hoa

HTML Code:

<p class="uppercase">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit.
       </p>

CSS Code:

 .uppercase {
                text-transform: uppercase;
            }

Chữ thường

HTML Code:

 <p class="lowercase">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>

CSS Code:

 .lowercase {
                text-transform: lowercase;
            }

In hoa chữ cái đầu

HTML Code:

 <p class="capitalize">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>

CSS Code:

 .capitalize {
                text-transform: capitalize;
            }

6. Sử dụng khai báo thuộc tính Single-Line ( Using Single-Line Property Declaration )

Bạn có thể sử dụng các thuộc tính rút gọn trong CSS để làm code của bạn ngắn gọn và dễ đọc.

Ví dụ, thuộc tính rút gọn background trong CSS cho phép bạn xác định các giá trị của background-color, background-image, background-repeat, và background-position. Tương tự, bạn cũng có thể xác định các thuộc tính cho font, border, margin, và padding.

Thuộc tính khai báo background trên một dòng.

background-color: black;
background-image: url(images/xyz.png);
background-repeat: no-repeat;
background-position: left top;

Bạn có thể đơn giản hóa việc khai báo ở trên thành một dòng duy nhất:

background: black url(images/xyz.png) no-repeat left top;

Các thuộc tính rút gọn rất tiện dụng để sử dụng, nhưng bạn cần xem xét một số trường hợp đặc biệt khó khăn (như đã được đề cập trên MDN Web Docs) khi sử dụng chúng.

7. Chú thích gợi ý ( Tooltips )

Chú thích gợi ý (tooltips) là một cách cung cấp thông tin thêm về một phần tử khi người dùng di chuyển con trỏ chuột qua phần tử đó.

Chú thích gợi ý phù hợp

HTML code:

<div class="tooltip_div">Right Tooltip
          <span class="tooltip">This is the Tooltip text</span>
</div>

CSS code:

body {
                text-align: center;
            }
            .tooltip_div {
              position: relative;
              display: inline-block;
            }

            .tooltip_div .tooltip {
              visibility: hidden;
              width: 170px;
              background-color: blue;
              color: #fff;
              text-align: center;
              border-radius: 6px;
              padding: 5px 0;

              /* Positioning the tooltip */
              position: absolute;
              z-index: 1;
              top: -5px;
              left: 105%;
            }

            .tooltip_div:hover .tooltip {
              visibility: visible;
            }

Chú thích gợi ý bên trái

HTML Code:

<div class="tooltip_div">Left Tooltip
          <span class="tooltip">This is the Tooltip text</span>
        </div>

CSS code:

body {
                text-align: center;
            }
            .tooltip_div {
            position: relative;
            display: inline-block;
            }

            .tooltip_div .tooltip {
              visibility: hidden;
              width: 170px;
              background-color: blue;
              color: #fff;
              text-align: center;
              border-radius: 6px;
              padding: 5px 0;

              /* Positioning the tooltip */
              position: absolute;
              z-index: 1;
              top: -5px;
              right: 105%;
            }

            .tooltip_div:hover .tooltip {
              visibility: visible;
            }

Chú thích gợi ý trên đầu

HTML Code:

 <div class="tooltip_div">Top Tooltip
          <span class="tooltip">This is the Tooltip text</span>
        </div>

CSS Code:

 body {
                text-align: center;
            }
            .tooltip_div {
            margin-top: 100px;
            position: relative;
            display: inline-block;
            }

            .tooltip_div .tooltip {
                visibility: hidden;
                width: 170px;
                background-color: blue;
                color: #fff;
                text-align: center;
                border-radius: 6px;
                padding: 5px 0;

                /* Positioning the tooltip */
                position: absolute;
                z-index: 1;
                bottom: 100%;
                left: 50%;
                margin-left: -60px;
            }

            .tooltip_div:hover .tooltip {
              visibility: visible;
            }

Chú thích gợi ý bên dưới

HTML code:

<div class="tooltip_div">Bottom Tooltip
          <span class="tooltip">This is the Tooltip text</span>
        </div>

CSS code:

body {
                text-align: center;
            }
            .tooltip_div {
            margin-top: 100px;
            position: relative;
            display: inline-block;
            }

            .tooltip_div .tooltip {
              visibility: hidden;
              width: 170px;
              background-color: blue;
              color: #fff;
              text-align: center;
              border-radius: 6px;
              padding: 5px 0;

              /* Position the tooltip */
              position: absolute;
              z-index: 1;
              top: 100%;
              left: 50%;
              margin-left: -60px;
            }

            .tooltip_div:hover .tooltip {
              visibility: visible;
            }

Bạn cũng có thể sử dụng thư viện Bootstrap để tạo chú thích Bootstrap tùy chỉnh.

8. Thêm hiệu ứng bóng đổ (Add Shadow Effects)

Bạn có thể thêm hiệu ứng bóng đổ CSS cho văn bản và phần tử bằng cách sử dụng thuộc tínhtext-shadow và box-shadow tương ứng.

CSS Text Shadow

Thuộc tính text-shadow CSS thêm các hiệu ứng bóng đổ và layer lên văn bản. Thuộc tính text-shadow chấp nhận một danh sách các hiệu ứng bóng đổ được phân tách bằng dấu phẩy để áp dụng cho văn bản.

Cú pháp của thuộc tính text-shadow CSS :

/* You can use 4 arguments with the text-shadow CSS property:
offset-x, offset-y, blur-radius, and color */
/* offset-x | offset-y | blur-radius | color */
text-shadow: 2px 2px 4px red;
/* color | offset-x | offset-y | blur-radius */
text-shadow: #18fa3e 1px 2px 10px;

Lưu ý: Các đối số color và blur-radius là tùy chọn.

Ví dụ:

text-shadow: 1px 1px rgba(123, 25, 15, 0.5), 2px 2px rgba(129, 28, 18, 0.51), 3px 3px rgba(135, 31, 20, 0.52), 4px 4px rgba(140, 33, 22, 0.53), 5px 5px rgba(145, 36, 24, 0.54), 6px 6px rgba(150, 38, 26, 0.55), 7px 7px rgba(154, 40, 28, 0.56), 8px 8px rgba(158, 42, 30, 0.57), 9px 9px rgba(162, 44, 31, 0.58), 10px 10px rgba(166, 45, 33, 0.59), 11px 11px rgba(169, 47, 34, 0.6), 12px 12px rgba(173, 48, 36, 0.61), 13px 13px rgba(176, 50, 37, 0.62), 14px 14px rgba(178, 51, 38, 0.63), 15px 15px rgba(181, 52, 39, 0.64), 16px 16px rgba(184, 54, 40, 0.65), 17px 17px rgba(186, 55, 41, 0.66), 18px 18px rgba(189, 56, 42, 0.67), 19px 19px rgba(191, 57, 43, 0.68), 20px 20px rgba(193, 58, 44, 0.69), 21px 21px rgba(195, 59, 45, 0.7), 22px 22px rgba(197, 60, 46, 0.71), 23px 23px rgba(199, 61, 47, 0.72), 24px 24px rgba(201, 62, 47, 0.73), 25px 25px rgba(202, 62, 48, 0.74), 26px 26px rgba(204, 63, 49, 0.75), 27px 27px rgba(206, 64, 49, 0.76), 28px 28px rgba(207, 65, 50, 0.77), 29px 29px rgba(209, 65, 51, 0.78), 30px 30px rgba(210, 66, 51, 0.79), 31px 31px rgba(211, 67, 52, 0.8), 32px 32px rgba(213, 67, 52, 0.81), 33px 33px rgba(214, 68, 53, 0.82), 34px 34px rgba(215, 69, 53, 0.83), 35px 35px rgba(216, 69, 54, 0.84), 36px 36px rgba(218, 70, 54, 0.85), 37px 37px rgba(219, 70, 55, 0.86), 38px 38px rgba(220, 71, 55, 0.87), 39px 39px rgba(221, 71, 56, 0.88), 40px 40px rgba(222, 72, 56, 0.89), 41px 41px rgba(223, 72, 57, 0.9), 42px 42px rgba(224, 73, 57, 0.91), 43px 43px rgba(225, 73, 57, 0.92), 44px 44px rgba(225, 73, 58, 0.93), 45px 45px rgba(226, 74, 58, 0.94), 46px 46px rgba(227, 74, 58, 0.95), 47px 47px rgba(228, 75, 59, 0.96), 48px 48px rgba(229, 75, 59, 0.97), 49px 49px rgba(230, 75, 59, 0.98), 50px 50px rgba(230, 76, 60, 0.99);

CSS Box Shadow

Thuộc tính box-shadow được sử dụng để tạo bóng đổ cho các phần tử HTML.

Cú pháp của thuộc tính CSS box-shadow

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

Lưu ý: Các tham số blur, spread và color là tùy chọn.

Ví dụ:

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

Style Your Website Using Modern CSS Tricks

Thêm text shadows bản CSS vào trang web là một cách tuyệt vời để thu hút sự chú ý của người dùng. Nó có thể mang lại cho trang web một vẻ đẹp đặc biệt và một cảm giác riêng tư. Hãy sáng tạo và thử nghiệm một số ví dụ về text-shadow có thể phù hợp với chủ đề trang web của bạn.

Cảm ơn mọi người đã dành thời gian đọc bài dịch của mình!