css

Tìm hiểu các vùng làm việc của CSS 1. Giới thiệu các vùng làm việc trong CSS Để làm việc với CSS, chúng ta có thể sử dụng một trong ba vùng làm việc như sau: Vùng làm việc nội tuyến Vùng làm việc bên trong Vùng làm việc bên ngoài 2. Vùng làm việc nội tuyến Vùng làm việc nội tuyến của CSS là...

Cách tạo hiệu ứng Dialog Box đơn giản với jQuery Dialog, Lightbox hay Popup là những thuật ngữ quen thuộc trong Jquery. Nó giúp mở một cửa sổ nhỏ, nổi bật giữa trang web để hiện thông báo hướng dẫn, giới thiệu hay tạo một form lấy thông tin từ người dùng. Những box như vậy tương tác ngay trên...

Tìm hiểu và áp dụng kỹ thuật Parallax Scrolling (Phần 2) Chào các bạn, chúng ta hãy cùng trở lại với chủ đề Parallax Scrolling nhé! Nếu như có bạn nào chưa biết hoặc đã quên hiệu ứng này thì có thể xem Kỹ thuật Parallax Scrolling – Phần 1 mình đã đăng trước đó. Ở phần đầu, chúng ta đã được...

Tìm hiểu và áp dụng kỹ thuật Parallax Scrolling (Phần 1) Với việc phát triển nhanh chóng của những công nghệ web như HTML5, CSS3, Javascript và bên cạnh đó là sức sáng tạo không giới hạn của các Web Designer, việc tạo ra các trải nghiệm mới lạ, khiến các website thêm sinh động không còn là...

Chia sẻ các website "đỉnh" dành cho developer và web designer Đối với web designer và developer thì việc cập nhật các tin tức về xu hướng thiết kế, học các kỹ năng, kỹ thuật mới, đọc các bài phân tích, tìm ý tưởng sáng tạo cho website hay cần tìm đọc các tài liệu tham khảo là điều rất cần...

Tìm hiểu các kỹ thuật quản lý CSS của website tốt hơn Học CSS để có thể tự thiết kế giao diện cho website không hề khó vì CSS vốn rất dễ học. Chỉ cần biết quy tắc cú pháp viết CSS, biết lập vùng chọn và chịu khó tham khảo các thuộc tính là có thể viết được ngon lành. Thế nhưng một cái khó...

Sử dụng SASS để triển khai OOCSS Kỹ thuật viết CSS theo kỹ thuật OOCSS (CSS hướng đối tượng) nhằm giúp hạn chế khả năng trùng lặp CSS, cũng như dễ bảo dưỡng nếu sau này có nhu cầu sửa lại. Thế nhưng bản thân mình lúc mới áp dụng OOCSS cũng cảm thấy có một khó khăn rất lớn đó là mình không thể...

Giới thiệu Brackets Editor cho Web Designer Sau một thời gian sử dụng công cụ code editor Brackets, mình đã chính thức tạm bỏ hẳn Sublime Text và Coda 2 để sang dùng Brackets vì các lợi ích vượt trội của nó trong việc thiết kế website, đặc biệt là công việc front-end development vốn làm việc...

Hướng dẫn cách dàn trang với CSS Flexbox Trong CSS, từ trước tới nay nếu chúng ta muốn dàn layout của trang thì sẽ sử dụng các thuộc tính float và kỹ thuật clear float để chia cột website như ý muốn. Hoặc muốn thuận tiện hơn thì sử dụng các CSS Grid Framework để tiết kiệm thời gian. Nhưng nói...

Hướng dẫn cách chia cột trong CSS tối ưu với Semantic.gs Thực tế dựa theo kinh nghiệm đã trải qua của mình, thì phần chia cột cho website trong CSS là bước mình thấy buồn nhạt nhất vì chúng ta phải làm đi làm lại một động tác với nhiều đoạn CSS na ná nhau. Chính vì lẽ đó, mình đã chuyển qua...

Tổng quan về 960 Grid – CSS Framework 960 Grid là một CSS Framework, mục đích của nó là giúp những người thiết kế web có thể tiết kiệm thời gian, công sức cho những công việc phải lặp đi lặp lại. Tuy đây là một framework rất phổ biến nhưng lại thiếu trầm trọng tài liệu hướng dẫn. Nếu đây là lần...

Tổng hợp 11 bộ sưu tập hiệu ứng CSS3 đẹp mắt cho website Với các tính năng hỗ trợ các hiệu ứng chuyển động trong CSS3, giờ đây bạn có thể tự tạo các hiệu ứng chuyển động vô cùng đẹp mắt và chuyên nghiệp mà không cần dùng tới sự trợ giúp của Javascript hay jQuery vì nó là nguyên nhân ảnh hưởng...

Hướng dẫn fix lỗi liên kết bị xuống hàng ở Google Chrome Cách đây vài ngày, Google Chrome cập nhật lên phiên bản mới nhất gây ra tình trạng website bị lỗi xuống hàng ở các liên kết gây ra cảm giác rất khó chịu và nhiều người lầm tưởng website của mình bị lỗi giao diện, ấy thế mà thật ra lỗi...

Tìm hiểu cách làm hiển thị Responsive cho website Bài này chỉ nói qua Responsive nên các kiến thức cơ bản mình sẽ không nói qua, do vậy bạn cần chuẩn bị kiến thức HTML và CSS căn bản để có thể hiểu được trọn vẹn. Responsive là gì? Responsive là một tính từ để chỉ một website có thể hiển...

Tìm hiểu Prepros để biên dịch SASS, LESS, HAML…chuyên nghiệp Prepros là một ứng dụng miễn phí (cũng có bản Pro) giúp chúng ta biên dịch các ngôn ngữ hỗ trợ viết CSS, HTML (hay còn gọi là Processor) để làm việc nhanh hơn. Nếu bạn đã từng biết qua LESS, SASS hay HAML thì đó là Processor, mình...

Tìm hiểu cách sử dụng SASS để viết CSS chuyên nghiệp Khi viết CSS theo cách bình thường, có thể bạn đã chán ngán nhiều thao tác lặp đi lặp lại rất nhạt nhẽo, và bạn mong muốn có một cái gì đó hỗ trợ bạn làm việc với CSS chuyên nghiệp hơn. Nếu như bạn muốn đưa kiến thức CSS của mình lên một tầm...

Tổng kết serie CSS cơ bản Với 25 bài trước trong serie CSS cơ bản, mình chắc chắn là bạn đã có một lượng kiến thức nhất định về CSS rồi phải không nè? Ít nhất là bạn đã hiểu được làm sao để chia cột website, làm thế nào mà phần tử này có thể đổi màu khi rê chuột vào, làm sao cái hộp này có thể...

Hướng dẫn cách thay đổi hình dạng với transform và transform-origin Ngoài thuộc tính transition của CSS3 giúp bạn tạo ra các hiệu ứng chuyển động của các phần tử trong website, thì nó còn một thuộc tính khác được sử dụng kèm với transition rất thường xuyên đó là thuộc tính transform có chức...

Tìm hiểu cách tạo chuyển động với transition Một trong các kỹ thuật phổ biến ở các website hiện đại là có các hiệu ứng chuyển động cho từng đối tượng rất đẹp mắt được làm hoàn toàn bằng CSS3, khi mà trước đây đa phần các hiệu ứng chuyển động phải cần có sự trợ giúp của Javascript. Trong CSS3 có...

Tìm hiểu CSS Framework và cách sử dụng Qua các bài hướng dẫn CSS, chắc bạn cũng đã biết việc viết CSS từ đầu tới cuối cho các thành phần trong website rất gian nan và khá tốn công sức để có được một giao diện như ý muốn. Trong đó, có rất nhiều bước mà bạn phải làm đi làm lại đến chán nản. Vậy...