Hộp kiểm thủ thuật css

CSS hiện đang ở trạng thái khá tốt. Các tính năng mới được giới thiệu đang giúp củng cố CSS như một ngôn ngữ kịch bản thực sự. Chúng tôi biết rằng một dự thảo đề xuất đã được thực hiện để giới thiệu các tuyên bố

    

Typing effect for text
    

0 &

    

Typing effect for text
    

1. Mặc dù không khả dụng ngay bây giờ, nhưng nó tạo tiền lệ cho khả năng viết logic có điều kiện trong tương lai bằng CSS

Michelle Barker đã viết một bài báo cho Tạp chí Smashing thảo luận về các tính năng CSS sắp tới. Hãy xem nếu bạn chưa có thời gian để bắt kịp

Theo kinh nghiệm của tôi, rất dễ bỏ qua các tính năng hiện có trừ khi bạn liên tục kiểm tra các bản cập nhật. Các thuộc tính như

    

Typing effect for text
    

2 và

    

Typing effect for text
    

3 cũng như

    

Typing effect for text
    

4 đã xuất hiện được một thời gian nhưng dễ bị lu mờ bởi tiềm năng của các khung hiện đại

Hack WordPress bằng CSS

Cảm hứng của tôi cho bài viết này đến trực tiếp từ kinh nghiệm làm việc với WordPress hàng ngày của tôi. Tôi đã sử dụng WordPress được hơn 10 năm. Và trong thời gian đó, tôi phải viết hơn 10.000 dòng CSS để tùy chỉnh các thiết kế chủ đề khác nhau

Nhưng, cụ thể hơn, tôi sử dụng CSS để khắc phục nhu cầu về plugin. Cách thức hoạt động của WordPress là bạn cần sử dụng plugin cho hầu hết mọi thứ. Tất nhiên là trừ khi bạn biết một chút CSS. Bạn muốn hiển thị chú giải công cụ? . Bạn muốn thêm một biểu tượng vào một nút?

Bạn có được ý tưởng

Cách sử dụng các thủ thuật CSS này

Yêu cầu duy nhất là bạn biết một chút về CSS & HTML. Tôi đã cung cấp các mẫu mẫu mà bạn có thể nhập trực tiếp vào dự án của mình

Bạn có thể sử dụng mẫu này và lưu nó với tên

    

Typing effect for text
    

5

    CSS Tricks & Tips
    
    

    

Hiệu ứng gõ chữ cho văn bản

Thiết kế web ngày càng sáng tạo hơn. Và với sự trợ giúp của các tính năng hoạt hình CSS, bạn có thể làm cho các trang web của mình trở nên sống động. Trong ví dụ này, chúng tôi đang sử dụng các thuộc tính

    

Typing effect for text
    

6 và

    

Typing effect for text
    

7 để đạt được hiệu ứng máy đánh chữ

Cụ thể, đối với bản demo này, chúng tôi triển khai thuộc tính

    

Typing effect for text
    

8 để phân đoạn hoạt ảnh văn bản của chúng tôi. Trước tiên, bạn phải chỉ định số

    

Typing effect for text
    

8 mà trong trường hợp của chúng tôi là độ dài ký tự cho văn bản mà chúng tôi muốn tạo hiệu ứng động

Và, thứ hai, chúng tôi sử dụng

    

Typing effect for text
    

7 để tuyên bố khi nào hoạt ảnh sẽ bắt đầu. Ví dụ: nếu bạn viết một từ khác sau "Hiệu ứng nhập văn bản" thì hoạt ảnh sẽ không hoạt động trừ khi bạn thay đổi số

    

Typing effect for text
    

8 trong đoạn mã CSS

Điều đó nói rằng, hiệu ứng này không phải là đặc biệt mới. Tuy nhiên, hầu hết các nhà phát triển đổ xô đến các thư viện JavaScript mặc dù thực tế là có thể đạt được kết quả tương tự khi sử dụng CSS

CSSHTML

    

Typing effect for text
    

3

    

Typing effect for text
    

Đổ bóng cho hình ảnh trong suốt

Bạn đã bao giờ thử thêm một

    

Typing effect for text
    

52 vào một hình ảnh trong suốt chỉ để nó trông giống như bạn đã thêm một đường viền chưa? . Giải pháp thêm hiệu ứng đổ bóng cho ảnh trong suốt là sử dụng

    

Typing effect for text
    

53

Cách nó hoạt động là thuộc tính

    

Typing effect for text
    

53 đi theo các kênh alpha của hình ảnh đã cho. Như vậy, bóng dựa trên hình dạng bên trong hình ảnh chứ không phải được hiển thị bên ngoài nó

CSSHTML

    

Typing effect for text
    

5

    

Typing effect for text
    

9

Đặt con trỏ tùy chỉnh

Không chắc là bạn sẽ cần buộc khách truy cập của mình vào một con trỏ duy nhất. Ít nhất, không phải cho mục đích UX chung chung. Mặc dù vậy, một điều cần lưu ý về thuộc tính

    

Typing effect for text
    

55 là nó cho phép bạn hiển thị hình ảnh. Điều này tương đương với việc hiển thị chú giải công cụ nhưng ở định dạng ảnh

Một số trường hợp sử dụng bao gồm khả năng so sánh hai ảnh khác nhau mà không cần hiển thị những ảnh đó trong chế độ xem. e. g. Thuộc tính con trỏ có thể được sử dụng để lưu bất động sản trong thiết kế của bạn. Vì bạn có thể khóa con trỏ tùy chỉnh vào một phần tử div cụ thể nên nó sẽ không can thiệp vào các phần tử bên ngoài nó

CSSHTML

    

Typing effect for text
    

1

    

Typing effect for text
    

2

Tooltip đơn giản sử dụng attr[]

Tài sản

    

Typing effect for text
    

4 là một trong những khám phá yêu thích gần đây của tôi. Tôi muốn thêm chức năng chú giải công cụ vào blog WordPress của mình, nhưng làm như vậy sẽ yêu cầu sử dụng plugin bổ sung thêm phần mở rộng không cần thiết cho trang web của tôi. Rất may, điều đó có thể tránh được bằng cách sử dụng

    

Typing effect for text
    

4

Cách nó hoạt động khá đơn giản, hãy để tôi giải thích mã bên dưới

• Chúng tôi sử dụng

  
      
  
  Typing effect for text
      
  

  58 để chỉ định phần tử nào sẽ là chú giải công cụ. Bạn có thể tạo kiểu này theo cách bạn muốn, nhưng vì lợi ích của bản trình diễn, chúng tôi sử dụng

  
      
  
  Typing effect for text
      
  

  59
• Tiếp theo, chúng tôi tạo một phần tử giả

  
      
  
  Typing effect for text
      
  

  90 sẽ chứa hàm nội dung attr[] và thông số kỹ thuật của nó. Trong trường hợp này, chúng tôi gọi nó là tooltip-data
• Và cuối cùng, chúng tôi tạo ra một. lớp giả di chuột sẽ đặt

  
      
  
  Typing effect for text
      
  

  91 bất cứ khi nào ai đó di chuột qua chú giải công cụ

Ngoài ra, bạn phải bao gồm kiểu dáng tùy chỉnh. Tùy thuộc vào dữ liệu chú giải công cụ của bạn, bạn có thể cần phải điều chỉnh chiều rộng cũng như lề. Và sau khi thiết lập xong, bạn có thể sử dụng lại lớp tooltip-data attr[] trong bất kỳ phần nào trong thiết kế của mình

CSSHTML

    

Typing effect for text
    

9

    

Typing effect for text
    

0

Danh sách kiểm tra trong CSS thuần túy

Như tôi đã đề cập ở đầu bài viết, CSS đang phát triển với tốc độ ổn định. Và bản trình diễn danh sách kiểm tra động này là một ví dụ điển hình về điều đó

Cách nó hoạt động là chúng tôi sử dụng loại đầu vào

    

Typing effect for text
    

92 cùng với lớp giả

    

Typing effect for text
    

93. Và sử dụng thuộc tính

    

Typing effect for text
    

94 để thay đổi trạng thái bất cứ khi nào thông số kỹ thuật của

    

Typing effect for text
    

93 trả về true

You can achieve various things with this approach. E.g. Toggle hidden content when a user clicks on a specific checkbox. It works with input types such as radio and checkbox, but can also be applied to and elements.

CSSHTML

    

Typing effect for text
    

5

    

Typing effect for text
    

30

Các yếu tố tạo kiểu với. là và. ở đâu[]

Một trong những cách mà các khung CSS hiện đại hoạt động là thông qua việc sử dụng

    

Typing effect for text
    

96. Nói cách khác, các thuộc tính

    

Typing effect for text
    

97 và

    

Typing effect for text
    

98 có thể được sử dụng để tạo kiểu cho nhiều yếu tố thiết kế cùng một lúc. Tuy nhiên, quan trọng hơn, bạn có thể sử dụng các thuộc tính này để truy vấn các phần tử mà nếu không bạn sẽ phải chỉ định riêng lẻ

Đoạn mã CSS bên dưới bao gồm nhiều ví dụ khác nhau. Tôi đã thêm nhận xét để giải thích chức năng của từng truy vấn. Bạn có thể tìm hiểu thêm tại MDN. . Là[] &. ở đâu[]

CSS

    

Typing effect for text
    

31

Danh sách thả xuống đàn accordion sử dụng khung hình chính

Sự cố với các thư viện JavaScript [jQuery, Cash, v.v. ] là bạn thường phải tải toàn bộ thư viện ngay cả đối với các chức năng quy mô nhỏ. May mắn thay, rất nhiều thủ thuật CSS mà chúng tôi đã xem xét cho đến nay đã phá vỡ yêu cầu đó. Như ví dụ với đoạn mã đàn accordion này

Nếu bạn xem xét kỹ các xu hướng thiết kế web hiện tại, sẽ không mất nhiều thời gian để tìm thấy các biểu tượng trên các trang đích. Đó là một cách đơn giản để cô đọng nội dung mà nếu không sẽ chiếm không gian thiết kế. Câu hỏi thường gặp, tính năng sản phẩm, mẹo sử dụng - rất nhiều loại thông tin có thể được đặt bên trong đàn accordion. Và đoạn mã này giới thiệu việc triển khai nó trong CSS thuần túy

CSSHTML

    

Typing effect for text
    

32

    

Typing effect for text
    

33

Thanh bên hiệu ứng di chuột

Có thể triển khai thanh bên hiệu ứng di chuột động bằng CSS không? . Một lần nữa, điều này phần lớn có thể thực hiện được nhờ các thuộc tính như

    

Typing effect for text
    

94 và

    

Typing effect for text
    

10

Về khả năng tương thích, tôi đã dùng thử trên nhiều cấu hình di động khác nhau và có vẻ như nó hoạt động tốt. Mặc dù vậy, nó có thể hoạt động tốt hơn trên máy tính để bàn vì màn hình di động có thể cảm thấy chật chội

Trong thực tế, cách tiếp cận này sẽ hoạt động tốt với

    

Typing effect for text
    

11 để tạo hiệu ứng thanh bên dính

CSSHTML

    

Typing effect for text
    

34

    

Typing effect for text
    

35

Chữ cái dropcap sử dụng chữ cái đầu tiên

Trong CSS, có thể chọn một số phần tử

    

Typing effect for text
    

12 nhất định. Và, trong ví dụ này, chúng tôi nhắm mục tiêu lớp giả

    

Typing effect for text
    

13 để tạo hiệu ứng dropcap. Điều thú vị về lớp này là nó cho phép chúng ta tự do tạo kiểu chữ theo ý muốn. Như vậy, bạn có thể điều chỉnh giao diện của dropcap để phù hợp với thiết kế của mình

Nói về tài sản này, bạn có thể đạt được một số điều với nó. Miễn là một phần tử nhất định xuất hiện lần đầu tiên trên trang, nó có thể được tạo kiểu riêng bằng cách sử dụng

    

Typing effect for text
    

12. Tuy nhiên, như được hiển thị trong đoạn trích bên dưới - bạn cũng có thể sử dụng nó để nhắm mục tiêu nhiều phần tử mặc dù chúng đã xuất hiện trước đó

CSS

    

Typing effect for text
    

36

Bạn cũng có thể thử nghiệm với thuộc tính line-height để căn chỉnh đúng dropcap với vùng chứa của mình

Thêm một biểu tượng trước các nút bằng cách sử dụng. trước

Một trong những mục tiêu của tôi khi bắt đầu blog này là thử và sáng tạo hơn với cách tôi hiển thị nội dung. Và, bởi vì tôi viết các bài viết liệt kê và các bản tóm tắt khác nhau, tôi muốn đảm bảo rằng chúng có dấu ấn cá nhân. Tôi không phải là người đầu tiên hay người cuối cùng bắt đầu một blog như thế này, nhưng tôi nghĩ các yếu tố thiết kế tùy chỉnh có thể đi một chặng đường dài

Và, trong trường hợp này, bất cứ khi nào tôi liên kết với các nguồn bên ngoài, tôi sử dụng các nút có kiểu dáng tùy chỉnh được thêm vào chúng. Cụ thể, các nút có thêm biểu tượng. Bạn có thể tìm thấy rất nhiều "trình tạo nút" bằng cách tìm kiếm đơn giản trên Google, nhưng tôi chủ yếu quan tâm đến việc có một giải pháp phổ quát mà tôi có thể sử dụng lại bất cứ khi nào tôi muốn

Vì vậy, để đạt được mục tiêu của mình, tôi đã tạo một lớp

    

Typing effect for text
    

90 tùy chỉnh cho nút cụ thể. Chỉ cần làm rõ,

    

Typing effect for text
    

16 trong đoạn mã này được thoát khỏi Unicode cho

    

Typing effect for text
    

17

Bạn có thể điều chỉnh kích thước biểu tượng bằng cách thay đổi thuộc tính chiều rộng và chiều cao để phản ánh kích thước nút bạn đang cố tạo kiểu

CSSHTML

    

Typing effect for text
    

37

    

Typing effect for text
    

38

Hơn bất cứ điều gì, các mẹo và thủ thuật CSS này làm nổi bật khả năng không cần JavaScript đối với các tính năng thiết kế nhất định. Và, điều tuyệt vời là bạn có thể thực hiện những thủ thuật này trong bất kỳ thiết kế nào. Những ví dụ này có thể được kết hợp với nhau để đạt được sự tự do thiết kế sáng tạo hơn nữa

Làm cách nào để tạo kiểu cho hộp kiểm bằng CSS?

Làm cách nào để kiểm tra hộp kiểm bằng CSS?

Làm cách nào để nhắm mục tiêu hộp kiểm trong CSS?

Làm cách nào để tạo CSS hộp kiểm tùy chỉnh?