Các trang web trông hấp dẫn, theo cách riêng của chúng, là một kiệt tác nhỏ của thời đại Internet. Tùy chỉnh có thể dễ dàng hoặc phức tạp như bạn muốn, từ việc sửa đổi chủ đề WordPress đến phát triển giao diện của trang web từ đầu đến cuối.
Sau đó, bạn có thể bắt gặp các yếu tố bạn thích và màu sắc bạn muốn sử dụng lại trong các dự án của riêng mình. Trong bài viết này, chúng tôi sẽ chỉ cho bạn những điều cần thiết để các trang web cho bạn biết mọi thứ bạn muốn biết.
Màu gì?
ColorZilla
Ban đầu được tạo cho Firefox, ColorZilla kể từ đó đã có sẵn trên Chrome và các trình duyệt liên quan của nó.
Sau khi cài đặt, bạn sẽ tìm thấy một nút bổ sung trong giao diện người dùng cho cả hai trình duyệt. Nút này cung cấp cho bạn khả năng tìm ra màu của bất kỳ thứ gì trực tuyến. Bạn sẽ nhanh chóng nhận ra rằng ColorZilla còn làm được nhiều việc hơn là chỉ xác định màu sắc vì nó còn hỗ trợ cả bảng màu.
Phông chữ là gì?
WhatFont? (Chrome)
Nói một cách chính xác, bạn không cần WhatFont? tiện ích mở rộng để tìm ra phông chữ của một trang web, nhưng cho đến nay đây là cách nhanh nhất để làm như vậy. Cách thay thế là mở bảng định kiểu và tìm kiếm qua nó.
Cài đặt WhatFont? và bạn sẽ thấy một biểu tượng mới trong giao diện người dùng trình duyệt của mình. Trừ khi khởi động lại hoàn toàn trình duyệt, bạn sẽ phải làm mới trang mà bạn muốn xác định phông chữ. Khi bạn đã thực hiện xong việc này, hãy nhấp vào nút trong trình duyệt của bạn.
Một nút mới sẽ xuất hiện ở góc trên bên phải của trang web và khi bạn di chuột qua văn bản, tên phông chữ sẽ được hiển thị. Nhấp vào phông chữ sẽ cung cấp thông tin bổ sung liên quan đến định cỡ. Nó cũng sẽ xác định các phông chữ khác trong “ngăn xếp”, điều này rất thuận tiện nếu bạn muốn xem các nhà phát triển web cân nhắc lựa chọn thay thế nào cho kiểu chữ dự định của họ.
Công cụ tìm phông chữ (Firefox)
Một tiện ích mở rộng độc quyền của Firefox giống với Chrome’s WhatFont?
Cài đặt tiện ích mở rộng và bạn sẽ có một tùy chọn mới trong menu ngữ cảnh khi nhấp chuột phải.
Khi bạn tìm thấy điều gì đó bạn muốn xác định, hãy đánh dấu nó, sau đó hiển thị các tùy chọn có sẵn cho bạn. “Phân tích lựa chọn” sẽ cho bạn biết mọi thứ bạn từng muốn biết.
Chi tiết mà nó cung cấp không có gì là khó hiểu. Nếu văn bản được đánh dấu là “(ngăn xếp)” thì nó sẽ chọn phông chữ đầu tiên trong ngăn xếp mà bạn đã cài đặt. Ngăn xếp thường kết thúc bằng một thuật ngữ chung, như “sans-serif” trong ví dụ trên. Trong trường hợp không chắc, một trong các phông chữ khác trong ngăn xếp không được cài đặt, phông chữ đó sẽ trở về mặt sans-serif mặc định của hệ thống của bạn.
Bạn cũng có thể tùy chỉnh các phần tử thông qua tùy chọn “Điều chỉnh phần tử”. Khi tiện ích mở rộng nhắc bạn nhập họ phông chữ, bạn có thể sử dụng. Trong ví dụ của chúng tôi, chúng tôi chỉ thay đổi mọi phông chữ trên Wikipedia thành một thứ gì đó khác biệt, tạo ra sự kết hợp kỳ lạ được hiển thị. Những thay đổi này không phải là vĩnh viễn và sẽ biến mất khi bạn tải lại trang.
“Thay thế phông chữ (toàn bộ DOM)” cho phép bạn thay đổi mọi phiên bản phông chữ trên trang. Bạn không phải là người hâm mộ của Roboto (cái mà chúng tôi sử dụng làm sans-serif chính của mình)? Đánh dấu tùy chọn này, nhấp vào “Roboto” từ danh sách các phông chữ có trên trang và nhập tên phông chữ bạn muốn xem. Một lần nữa, nó không phải là vĩnh viễn, nhưng nó cho phép bạn chơi với thiết kế của các trang web yêu thích của mình, ngay cả khi chỉ là tạm thời.
Đo lường địa điểm
Thước kẻ trang (Chrome)
"Một người cai trị? Thật sự?" chúng tôi nghe bạn hỏi. Page Ruler là thước đo màn hình hơi khác một chút so với cách phát âm của nó. Trên thực tế, chúng tôi cũng hoàn toàn hiểu bất kỳ sự hoài nghi ban đầu nào.
Định vị các vấn đề trên Web. Các phần tử của một trang phải được cách đều nhau, nếu không chúng sẽ không hấp dẫn bằng. Mặc dù thông tin này đặc biệt bí mật mà bạn cần biết, nhưng Page Ruler vẫn làm cho nó trở nên khả thi.
Cài đặt nó giống như bạn làm với bất kỳ tiện ích mở rộng nào khác và bạn sẽ có một nút khác trong giao diện người dùng trình duyệt của mình. Lưu ý rằng bạn sẽ phải mở một trang web để dùng thử tiện ích mở rộng - bạn sẽ không thể sử dụng một trong các trang web tích hợp sẵn của Chrome vì lý do bảo mật.
Khi bạn đã nhấp vào nút, bạn sẽ nhận được một dải thông tin bổ sung ngay bên dưới thanh địa chỉ và bạn có thể sử dụng chuột để nhấp và kéo ra một hình dạng, kích thước của hình dạng đó sẽ được tính toán và hiển thị dọc theo thanh nói trên . Ngoài ra, bạn cũng có tùy chọn để bật hoặc tắt lưới, mặc dù nó có thể giúp đảm bảo độ chính xác.
Nếu bạn muốn, bạn cũng có thể thay đổi màu của hình chữ nhật từ màu xanh lam mặc định của nó. Bất kể màu bạn chọn là gì, nó sẽ tự động thêm một mức độ trong suốt để bạn có thể nhìn thấy nội dung bên dưới nó.
Page Ruler xứng đáng được ghi nhận vì có cách tiếp cận đặc biệt tối giản đối với các tính năng của nó, đóng gói tất cả thông tin cần thiết vào một thanh nhỏ dọc theo đầu cửa sổ.
MeasureIt (Firefox và Chrome)
MeasureIt thực hiện nhiệm vụ tương tự như Page Ruler và khả dụng cho cả Firefox và Chrome.
Sau khi cài đặt, hãy nhấp vào nút và bạn có thể nhấp và kéo để tạo hình chữ nhật. Bên cạnh hình chữ nhật sẽ là số lượng pixel, nghĩa là bạn có thể nhận được các phép đo chính xác để định vị.
Nếu bạn lo lắng về việc thực hiện các phép đo chính xác chỉ với một con chuột, bạn có thể điều chỉnh kích thước của vùng được đánh dấu bằng các phím mũi tên, giúp tạo độ chính xác dễ dàng hơn nhiều so với âm thanh. Chúng tôi khuyên bạn nên kiểm tra tùy chọn "Khu vực" trong cài đặt; nó không thay đổi cách hoạt động của phần mềm và chỉ cung cấp cho bạn ý tưởng về diện tích hình chữ nhật bạn đã vẽ.
Chúng tôi cá là bạn sẽ ngạc nhiên khi thấy có bao nhiêu pixel trên màn hình và diện tích chúng tạo nên khi được đánh dấu. Nếu không có gì khác, chắc chắn nên đặt thuật ngữ “bất động sản màn hình” vào quan điểm.
Kết luận
Phải mất một lúc để khai thác tốt nhất các tiện ích mở rộng này, nhưng chúng cung cấp một số thông tin tuyệt vời trong tầm tay. Bạn sẽ nhanh chóng hiểu được chúng, nhưng nếu bạn cảm thấy khó thay thế phông chữ, hãy nhớ tên cần chính xác. “Comic Sans” sẽ không hoạt động, trong khi “Comic Sans MS” (như nó xuất hiện trong Office) sẽ hoạt động.
Hãy nhớ rằng tất cả các tiện ích mở rộng này đều yêu cầu loại thông tin bạn cung cấp chính xác như vậy và bạn sẽ được trang bị đầy đủ để sử dụng chúng một cách tối đa.