Thuộc tính display CSS chắc hẳn không còn xa lạ gì với các bạn lập trình viên Frontend, nó đóng vai trò nền tảng cơ bản khi khai báo một phần tử và xây dựng bố cục trên trang Web. Tuy nhiên không ít bạn vẫn còn nhầm lẫn hoặc không hiểu hết được các giá trị mà thuộc tính display CSS cung cấp. Để giải quyết vấn đề trên, bài viết này chúng ta sẽ cùng nhau tìm hiểu khái niệm Display CSS là gì và cách khai báo, sử dụng thuộc tính này trong CSS nhé. Display CSS là gì? CSS (Cascading Style Sheets) là thành phần đóng vai trò quan trọng trong việc định dạng và trình bày giao diện của trang Web. Trong CSS, thuộc tính Display mang ý nghĩa quy định cách mà một phần tử HTML hiển thị lên trang, từ đó ảnh hưởng đến việc tương tác với các phần tử khác trong layout chung. Đây là thuộc tính quan trọng nhất [...]

CSS là một trong ba kiến thức nền tảng của lập trình viên Frontend bên cạnh HTML và JavaScript, giúp bạn tạo ra phong cách cho trang Web. Để có thể khai báo và áp dụng CSS style đúng cho từng phần tử HTML trên DOM, chúng ta cần đến các CSS Selector. Vậy CSS Selector là gì? Bài viết hôm nay chúng ta cùng nhau tìm hiểu về nó và cách sử dụng các loại CSS Selector phổ biến hiện nay nhé. CSS Selector là gì? CSS Selector là một mẫu (template) hoặc quy tắc (rules) được sử dụng để xác định các phần tử HTML cụ thể trên trang, từ đó áp dụng các thuộc tính CSS lên chúng. Như chúng ta đã biết, có 3 cách để khai báo CSS bao gồm: inline (viết trực tiếp vào thẻ HTML thông qua thuộc tính style), internal (viết tại file HTML và nằm trong cặp <style></style>) và external (viết thành file css riêng và import vào thông qua các thẻ <link></link>). [...]

Bài viết được sự cho phép của tác giả Bùi Thị Huyền CSS là Cascading Style Sheets và được sử dụng để mô tả cách các phần tử HTML sẽ hiển thị. Đây là một trong những công nghệ đầu tiên được học sớm nhất để phát triển web, các developer tuyệt đối phải biết cơ bản. Mặc dù có vẻ như CSS không thể làm được gì nhiều ngoài việc cung cấp màu sắc, vị trí, v.v. của HTML, nhưng nó cũng có thể cho phép chúng ta tạo hình động và mang lại sức sống cho các ứng dụng và trang web của chúng ta. Có lẽ bây giờ nhiều người trong chúng ta quan tâm đến việc thành thạo CSS và học nó rất sâu, nhưng hoàn toàn đáng để biết một số mẹo và thủ thuật hữu ích có thể giúp bạn tạo các trang web tuyệt đẹp! Bạn đã sẵn sàng để xem 9 mẹo và thủ thuật có thể thay đổi cách sử dụng CSS của bạn [...]

Bài viết được sự cho phép của tác giả Nguyễn Thành Nam Hiệu ứng văn bản với gradient text là một cách tuyệt vời để tạo điểm nhấn cho văn bản trên trang web của bạn. Sử dụng CSS, bạn có thể dễ dàng áp dụng hiệu ứng gradient text để làm cho văn bản trở nên hấp dẫn và nổi bật. Dưới đây là một ví dụ sử dụng hiệu ứng gradient text được tạo bằng CSS. Để làm được như trên, bạn làm theo các bước hướng dẫn dưới đây: Bước 1: Tạo HTML cơ bản Đầu tiên, chúng ta cần tạo 1 khối HTML để chứa văn bản. <div> <p>thanhnamnguyen.dev</p> </div> Bước 2: Thêm CSS Gradient Sử dụng CSS sau để tạo hiệu ứng chuyển màu trên văn bản (gradient text). Mình sử dụng thuộc tính background: linear-gradient để tạo dải màu sắc tương ứng. Gradient này chạy từ trái qua phải và bao gồm bốn màu: #7953 [...]

CSS Loader - hay còn gọi là spinners hoặc loading animations, là những phần tử trực quan được sử dụng để hiển thị sự tiến triển khi trang web đang tải dữ liệu hoặc thực hiện các tác vụ nền. Trong bài viết này, chúng ta sẽ tìm hiểu về CSS Loader, cùng với việc giới thiệu một số nguồn trang web cung cấp CSS Loader miễn phí để bạn có thể tích hợp vào trang web của mình. 1. CSS Loader là gì? CSS Loader giúp cải thiện trải nghiệm người dùng bằng cách cung cấp phản hồi trực quan về quá trình tải trang web. Được xây dựng bằng CSS và thỉnh thoảng kết hợp với JavaScript, chúng có thể mang lại hiệu ứng đẹp mắt và sáng tạo. 2. Lợi ích của việc sử dụng CSS Loader Cải thiện trải nghiệm người dùng: người dùng sẽ biết được khi nào trang web đang xử lý dữ liệu, giúp họ chờ đợi một cách thoải [...]

Bài viết được sự cho phép của tác giả Nguyễn Thành Nam Đối với lập trình viên frontend, việc tạo hiệu ứng và hoạt ảnh trên trang web là một phần quan trọng của việc tối ưu hóa trải nghiệm người dùng. Có nhiều thư viện mạnh mẽ giúp lập trình viên thực hiện công việc này một cách dễ dàng và hiệu quả. 1. Animate.css Animate.css là một thư viện animation CSS nhẹ và dễ sử dụng, giúp thêm hiệu ứng vào các phần tử HTML một cách nhanh chóng. Với nhiều loại hiệu ứng như bounce, fadeIn, zoomIn, thư viện này mang lại sự linh hoạt và đa dạng cho trang web của bạn. Sử dụng CDN để nhúng Animate.css <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> Sử dụng hiệu ứng <div class="animate__animated animate__bounce">Chào mừng bạn đến trang web!</div> 2. GSAP (GreenSock Animation Platform) GSAP là một thư viện animation mạnh mẽ, cung [...]

Trong thế giới phát triển web đầy sôi động, reactjs nổi lên như một thư viện JavaScript phổ biến giúp xây dựng các ứng dụng web giao diện người dùng liền mạch và tương tác. Khi nói đến việc tạo kiểu cho các ứng dụng ReactJS, CSS đóng một vai trò quan trọng trong việc xác định giao diện trực quan và khả năng sử dụng tổng thể. Hiểu được cách tích hợp và tối ưu hóa CSS trong ReactJS là điều cần thiết để tạo ra các ứng dụng hiệu quả cao, hấp dẫn về mặt thẩm mỹ. CSS trong ReactJS CSS (Cascading Style Sheets) là một ngôn ngữ tạo kiểu được sử dụng để định nghĩa giao diện trực quan của trang web. Ngôn ngữ này giúp kiểm soát các khía cạnh như màu sắc, kiểu chữ, bố cục và hành vi đáp ứng, tạo ra sự thống nhất và tăng cường khả năng bảo trì trong quá trình phát triển. Vì vậy, việ [...]

CSS là một trong 3 ngôn ngữ trụ cột của anh em lập trình Frontend bên cạnh HTML và JavaScript. Để xây dựng được giao diện của một Website hoàn chỉnh, chúng ta sẽ cần phải viết khá nhiều CSS; trong đó sẽ có nhiều style được sử dụng lại với nhiều Website khác nhau. Vì vậy có nhiều các CSS Frameworks được tạo ra giúp anh em Dev thuận tiện hơn, tối ưu hóa thời gian viết code và hoàn thiện dự án. Bài viết hôm nay chúng ta cùng nhau tìm hiểu top 5 CSS Frameworks tốt nhất hiện nay và xem bạn đã biết và sử dụng bao nhiêu trong số đó nhé. CSS Framework là gì? CSS - Cascading Style Sheets là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi HTML, giúp tạo phong cách (styles) cho các phần tử trên trang Web như bố cục, màu sắc, màu chữ, font chữ, … CSS Framework là tập hợp các đoạn code CSS có cấu [...]

Bài viết được sự cho phép của tác giả Trần Anh Tuấn Trong quá trình đi làm và học tập mình đã tích hợp được nhiều kinh nghiệm cũng như nhiều lỗi về CSS mà chúng ta trong lúc làm hay gặp, trong bài viết này mình chia sẻ chúng cho các bạn hi vọng sẽ giúp ích cho các bạn nhé. Xuất hiện khoảng trống giữa các thẻ, nguyên nhân có thể  là do margin, padding, thẻ inline-block hoặc chưa dùng reset CSS Kích thước lớn hơn dự kiến dù đã set width, height, nguyên nhân là chưa dùng box-sizing: border-box dẫn đến width height thêm padding và border vô nên to hơn Khi dùng flexbox co lại màn hình nhưng cấu trúc không rớt xuống hàng nguyên nhân là do mặc định flex-wrap: nowrap nên nó sẽ không rớt Khi làm việc với chữ đặc biệt là dạng người dùng nhập vào nhiều người cố ý spam với 1 từ dài như aaaaaaaaaaaaa hoặ [...]

Bài viết được sự cho phép của tác giả Phạm Bình Chào các bạn, Bạn có bao giờ code CSS mà không biết phải đặt tên class như thế nào không? Mình thì có đấy. Nhất là khi maintain dự án, mất bao nhiêu công mới nghĩ ra được cái tên hay thì lại bị người người trước dùng mất rồi. Tự nghĩ Code CSS thì nên tập trung vào việc căn chỉnh các thuộc tính, chứ không nên mất nhiều thời gian vào cách đặt tên, nên mình đã đi tìm hiểu xem có cái quy tắc nào trong cách đặt tên không, để rồi cứ theo quy tắc là làm, đỡ phải nghĩ nhiều. Sau một hồi lục sục trên mạng, mình thấy có cái quy tắc BEM này khá hay nên viết bài để chia sẻ tới mọi người. I. Quy tắc BEM là gì? BEM là viết tắt của Block Element Modifiers – một quy tắc giúp bạn đặt tên cá [...]

Bootstrap css chắc không xa lạ với các web developer, nhưng mình thấy có rất nhiều bạn sử dụng Bootstrap sai cách trong các dự án web. Tại sao mình lại nói vậy, thì các bạn hãy theo dõi bài viết này nhé. I. Không nên tích hợp bằng cách Download.zip Trong thực tế khi làm việc với Bootstrap, chúng ta thường hay tùy biến lại những styles mặc định mà Bootstrap cung cấp như màu sắc, box-shadow, border,… Thế nhưng khi tích hợp Bootstrap vào dự án, nhiều bạn lại chọn cách download file .zip chứa các file css, js – là những file đã được compile và không có khả năng tùy biến cao. Khi tích hợp Bootstrap theo cách này, mà muốn tùy biến lại css thì mình thấy các bạn hay làm là viết các css muốn ghi đè vào một file là custom.css, sau đó cho file này load sau các css của Bootstrap. Nghe thì cũng hợp lý đấy, nhưng cá [...]

Bài viết được sự cho phép của tác giả Phạm Bình Chào các bạn, CSS là ngôn ngữ quen thuộc của bất kỳ web developer nào, bởi nó là một trong những ngôn ngữ “vỡ lòng” khi bạn bắt đầu học lập trình web. Bản thân CSS rất thú vị, bởi nó có nhiều màu sắc, nhiều thuộc tính hay ho. Tuy nhiên khi viết code CSS thì ngược lại – khá nhàm chán. I. Vấn đề của CSS Làm việc nhiều với CSS, mình nhận ra rằng có một số vấn đề như sau: Tên class, id rất dễ bị trùng nhau, muốn phân biệt thì phải thêm tiền tố, hoặc sử kiểu tổ hợp các selector. Điều này làm code css dài ngoằng, khó nhìn, và bị lặp đi lặp lại. Mặc dù hỗ trợ var() và env() giúp CSS có thể lưu giá trị và sử dụng biến, nhưng có vẻ cộng đồng developer không hoan nghênh cách làm này, do không phả [...]

Nếu đã có bài làm một website trong năm 2016 nó như thế nào, thì giờ ta sẽ nói xem viết css trong năm 2024 sẽ ra mần sao  Anh technical leader: em biết sao không, anh đã không viết code từ năm 2016 tới giờ, công việc của anh giờ chỉ toàn làm chính trị trong công ty thôi. Giờ em thấy cái dự án này công ty mình mới lấy về, họ muốn thêm phần giao diện cho nó khác đi, sửa responsive lại chút Ngon ăn đấy anh, nhận đi. Cái này họ làm React, nhưng mà lúc đó không biết đứa nào viết chỉ có một file css duy nhất với hơn 3000 dòng code, nhìn gớm quá, nhiều cái cứ xài tới xài lui mà không chịu kế thừa, cấu trúc thì khỏi nói rồi, gớm luôn, em thấy giờ mình làm sao cho tốt? Đúng rồi anh, ai mà làm như thế. Trước mắt, chúng ta coi hết lại đống này, xóa bớt mấy cá [...]

Bài viết được sự cho phép của tác giả Phạm Bình Chào các bạn, Chắc các bạn đều biết Bootstrap là một trong những framework để xây dựng giao diện website phổ biến nhất hiện nay.  Cũng vì Bootstrap phổ biến, nên cách chúng ta sử dụng nó trong các dự án cũng vô cùng đa dạng, đa dạng tới mức nhiều khi ta không biết nên sử dụng sao cho đúng, cho hay. Nên trong bài viết này, mình xin phép được chia sẻ một vài best practice (tạm dịch là các mẹo hay, các lưu ý) khi sử dụng Bootstrap trong dự án mà mình tự đúc kết được trong quá trình làm việc với nó. Let’s go… 1. Nên tích hợp Bootstrap thông qua NPM Khi vào trang chủ của Bootstap, bạn sẽ bị “mời gọi” bởi một nút Download như trong hình dưới. [caption id="attachment_51617" align="aligncenter" width="612"] Trang chủ getbootstrap.com[/caption] Vì sự mời gọi này, mà nhiều bạn tích hợp Bootstrap và [...]

AutoComplete là một tính năng giúp bạn có thể đưa ra các gợi ý thông qua các kí tự mà người dùng nhập vào trong ô input. Nó thừa được sử dụng với form để giảm bớt thời gian nhập liệu cũng như tăng trải nghiệm người dùng khi sử dụng website của bạn. Hầu hết các thư viện UI Components hiện nay đều cung cấp sẵn cho bạn Input AutoComplete component; trong bài viết này mình sẽ hướng dẫn các bạn tạo 1 component đơn giản như thế chỉ với code React và sử dụng CSS. Nguồn ảnh: queryscript.net Phân tích yêu cầu Như hình trên, chúng ta có thể thấy Autocomplete Field bao gồm 2 phần: Input nhập giá trị và List danh sách các gợi ý hiển thị lên. Các yêu cầu đáp ứng như sau: Khi người dùng bấm vào ô input (focus) thì sẽ hiển thị ra danh sách dropdown list gợi ý Khi người dùng bắt đầu gõ vào ô input giá trị, chúng ta sẽ get lấy giá [...]