Thứ năm, 03/09/2020 | 00:00 GMT+7

CSS3: Giới thiệu nhanh


Trong Thiết kế và Phát triển Web, giống như hầu hết các lĩnh vực khác, bạn phải phát triển để theo kịp thời đại. Điều này đặc biệt đúng với các tính năng mới được thêm vào một trong những công cụ mà nhà thiết kế thường sử dụng nhất, như CSS. CSS3, đặc tả mới nhất cho CSS, có một số tính năng mới mà các nhà thiết kế có thể bắt đầu tận dụng ngay bây giờ.

Thay đổi lớn nhất và quan trọng nhất trong CSS3 chắc chắn là module hóa quy trình phê duyệt thông số kỹ thuật. Điều này nghĩa là mỗi phần của CSS3 (đường viền, bóng hộp, hình ảnh, v.v.) có module riêng của nó. Điều đó nghĩa là chúng có thể được phê duyệt riêng lẻ và được phát triển riêng.

Điều này nghĩa là ta nhận được các thay đổi nhanh hơn và khi chúng đến, chúng phù hợp hơn với những gì cộng đồng và nhà phát triển trình duyệt đang yêu cầu. Điều đó cũng nghĩa là trình duyệt sẽ dễ dàng cập nhật tiêu chuẩn mới hơn, bởi vì nó được nhận từng phần, thay vì tất cả cùng một lúc. Điều này nghĩa là bạn bớt lo lắng về cách nội dung của bạn trông như thế nào trên các trình duyệt và nền tảng khác nhau.

Tất cả ta đều biết một vài người trong lĩnh vực của bạn giống khủng long hơn là nhà thiết kế. Đừng là một con khủng long, bị mắc kẹt trong việc sử dụng các kỹ thuật lỗi thời và thực hành thiết kế nhàm chán. Nâng cao thiết kế của bạn và tận dụng các công nghệ mới nhất với các kỹ thuật như:

Chuyển tiếp

Từ lâu, các nhà thiết kế đã phải vật lộn để sử dụng Adobe Flash và JavaScript để thực hiện chuyển đổi hình ảnh. Không còn nữa. Đã qua rồi thời của những chuyển đổi Flash xấu xí, thường phức tạp và khó triển khai hoạt ảnh JS. Như vậy, với quá trình chuyển đổi CSS3, các nhà thiết kế có thể sử dụng giải pháp phía trình duyệt gọn gàng, nhẹ nhàng để thực hiện quá trình chuyển đổi của họ, thay vì phương pháp phía server nặng nề. Có hai cách chính để làm điều này. Đầu tiên, và đơn giản nhất, bạn có thể sử dụng khai báo chuyển tiếp và kích hoạt các hiệu ứng dựa trên chuột như di chuột hoặc kích hoạt hoạt ảnh bằng một thay đổi JS đơn giản. Ngoài ra, bạn có thể sử dụng luật @keyframe để chỉ định các thay đổi cụ thể cho hoạt ảnh không yêu cầu user nhập. Bạn có thể đọc thêm về chuyển tiếp CSS3 tại đây .

Độ dốc

Bạn cảm thấy mệt mỏi với việc sử dụng Photoshop, đấu tranh để có được độ dốc cho các node đó? Những người khác cũng vậy. Rất may bây giờ, bạn không cần phải làm như vậy! CSS gradient cho phép các nhà thiết kế tạo ra các gradient đẹp mắt trông tuyệt vời trên bất kỳ màn hình nào. Hơn hết, tất cả đều nằm trong một file CSS nhẹ, đẹp mắt được hỗ trợ bởi tất cả các trình duyệt và không yêu cầu bạn sử dụng các hình ảnh đánh thuế tài nguyên nặng nề (bạn có để ý thấy chủ đề ở đây không?). Gradients thực sự đã xuất hiện được một thời gian nhưng chỉ bây giờ chúng mới có sẵn để sử dụng trong mọi trình duyệt. Ngay bây giờ, các gradient lặp lại và không lặp lại xuyên tâm và tuyến tính đã có sẵn và nhiều khả năng đang được triển khai.

Chuyển đổi 3D

Hãy trung thực một chút ở đây. Các nhà thiết kế của ta có thể là một group người rất… phô trương. Một số người có thể nói rằng ta thích ghi lại khả năng của bạn hơn các nhà thiết kế ít hiểu biết hơn ta . Bây giờ, nếu điều này có vẻ giống bạn hoặc nếu bạn chỉ muốn xây dựng một danh mục đầu tư đẹp, bắt mắt, thì các chuyển đổi 3D CSS3 có thể giúp công việc của bạn nổi bật. Đừng bao giờ đánh giá thấp giá trị của một chút flash (chơi chữ một cách vô liêm sỉ) trong thiết kế trang web , đặc biệt là khi bạn muốn nổi bật giữa một biển thực sự của các nhà thiết kế khác.

Bán kính viền

Các góc được bo tròn trông rất tuyệt. Các góc được bo tròn trông tự nhiên. Các góc tròn trước đây là một vấn đề khó khăn trong việc viết mã và việc sử dụng hình ảnh có thể nhanh chóng tăng kích thước file . Như vậy, các node của bạn có thể có các cạnh tròn, tự nhiên mà không cần quá nhiều mã! Sử dụng thuộc tính bán kính đường viền mới của CSS3 để tạo các cạnh tròn đơn giản mà không yêu cầu các thuộc tính chiều caochiều rộng quá mức và không bị vỡ khi bạn chỉnh sửa nội dung hoặc vị trí. Nếu bạn muốn có một ví dụ, hãy thử các đoạn mã này (do webreference.com cung cấp ) trên trang web của bạn .

CSS:


.box {
  border: 2px solid orange;
  border-radius : 25px;
  width: 100px;
  padding: 10px;
  text-align:center;
}

HTML:

  `<div class='box'>Submit</div>`

Hình ảnh đường viền

Tiếp tục về chủ đề đường viền, bao lâu bạn muốn có một đường viền đẹp, đẹp xung quanh một div hoặc hình ảnh, chỉ để nhận ra rằng bạn phải dành thời gian trong Photoshop và thậm chí nhiều thời gian hơn để làm cho đường viền phản hồi vì tất cả các lựa chọn mặc định của bạn chỉ đơn giản là không hấp dẫn? Bây giờ đường viền của bạn chỉ bị giới hạn bởi trí tưởng tượng và kỹ năng Photoshop / Illustrator của bạn. Đến đây bạn có thể dễ dàng làm việc với các sprite hình ảnh và áp dụng chúng với thuộc tính border-image . Điều đó sẽ cho phép bạn nhanh chóng và dễ dàng tạo ra những đường viền đẹp đẽ mà bạn muốn, tất cả mà không cần mất hàng giờ loay hoay và điều chỉnh mọi thứ.

Phông chữ Web

Có vẻ như chỉ ngày hôm qua các nhà thiết kế buộc phải tham khảo các bảng và danh sách các phông chữ “an toàn cho web”. Chà, những ngày đó đang ở phía sau ta , và tất cả ta nên biết ơn. Luật @ font-face hiện cho phép bạn sử dụng các dịch vụ như Google Web Fonts và bộ gõ để bao gồm bất kỳ phông chữ nào mà bạn có thể tưởng tượng chỉ là kết hợp một biểu định kiểu mới. Điều này nghĩa là các lựa chọn kiểu chữ của bạn không còn giới hạn đối với những kiểu chữ mà bạn biết là user cuối của bạn có thể có quyền truy cập. Điều này cũng nghĩa là không cần chỉ định thêm 12 họ phông chữ khác nhau chỉ đảm bảo văn bản của bạn không phải là phông chữ mặc định xấu xí.

Cột CSS

Bạn muốn bố trí các bài viết của bạn theo bố cục dựa trên cột, đáp ứng? Cách đây không lâu, điều đó nghĩa là bạn có một số lựa chọn. Đầu tiên, bạn có thể sử dụng một chiếc bàn và bị mọi người trong giới thiết kế ghét bỏ. Thứ hai, bạn có thể sử dụng JS để đưa nội dung của bạn vào chứa các div và tự chán ghét bản thân trong repository ảng thời gian cực khổ mà một quá trình diễn ra như vậy. Tuy nhiên, bây giờ, không cần bàn hay sự đánh đổi nào! Bạn chỉ cần sử dụng luật cột là xong. Vấn đề duy nhất bạn có thể gặp phải là làm cho mọi thứ trông giống nhau trên tất cả các trình duyệt (Tôi đang xem xét bạn IE) nhưng với Internet Explorer theo cách của dodo, có vẻ như vấn đề đó cũng nên được giải quyết.

Bộ chọn

Cuối cùng, và có lẽ quan trọng nhất, ta có các bộ chọn CSS mới. Sẽ mất nhiều không gian hơn tôi muốn sử dụng để đi vào chi tiết về tất cả chúng, vì vậy ta sẽ chỉ nêu ra những điểm nổi bật và bạn có thể xem danh sách đầy đủ tại đây . Ta vẫn có thể sử dụng các bộ chọn CSS2 cũ, nhưng bây giờ ta có một số luật mới. Điều quan trọng là bây giờ ta có khả năng chọn các phần tử DOM dựa trên giá trị thuộc tính của chúng, thay vì chỉ định ID và Lớp cho mỗi phần tử. Đến đây bạn có thể tạo kiểu cho chúng chỉ đơn giản dựa trên trường thuộc tính của chúng.


Tags:

Các tin liên quan