Trang web đẹp nhìn, theo cách riêng, là kiệt tác nhỏ của kỷ nguyên Internet. Tùy chỉnh có thể dễ hoặc phức tạp tùy ý, từ sửa theme WordPress đến phát triển giao diện trang web từ đầu đến cuối.
Sau đó, bạn có thể gặp yếu tố thích thú và màu muốn tái sử dụng trong dự án riêng. Bài viết này chỉ những yếu tố thiết yếu để trang web "bật mí" mọi thứ bạn muốn biết.
Màu Này Là Màu Gì?
ColorZilla
Ban đầu tạo cho Firefox, ColorZilla giờ có trên Chrome và trình duyệt liên quan.
Sau khi cài, bạn thấy nút thêm trong UI cả hai trình duyệt. Nút này cho khả năng tìm màu của hầu như mọi thứ trực tuyến. Bạn nhanh chóng nhận ra ColorZilla làm không chỉ nhận diện màu - nó hỗ trợ bảng màu (palettes).
Font Này Là Font Gì?
WhatFont? (Chrome)
Nói chính xác, bạn không cần tiện ích WhatFont? để biết font trang web, nhưng đó là cách nhanh nhất. Thay thế là mở stylesheet và lật lội tìm.
Cài WhatFont? và bạn thấy biểu tượng mới trong UI trình duyệt. Trừ khi khởi động lại trình duyệt hoàn toàn, bạn phải làm mới trang muốn xác định font. Sau khi làm, nhấp nút trên trình duyệt.
Nút mới xuất hiện góc trên bên phải trang, khi di chuột qua văn bản, tên font hiển thị. Nhấp vào font cung cấp thông tin thêm về cỡ chữ. Nó cũng xác định font khác trong "stack" (hàng đợi dự phòng) - tiện nếu bạn muốn xem thay thế mà lập trình viên web xem xét cho typeface dự định.
Font Finder (Firefox)
Tiện ích độc quyền Firefox cùng dòng với WhatFont? của Chrome.
Cài tiện ích, bạn có tùy chọn mới trong menu chuột phải.
Khi tìm thứ muốn xác định, highlight nó, rồi mở tùy chọn. "Analyse Selection" (Phân tích lựa chọn) sẽ nói cho bạn mọi thứ bạn muốn biết.
Chi tiết nó cung cấp không thể nào hơn. Nếu văn bản đánh dấu "(stack)", nó chọn font đầu tiên trong stack bạn cài. Stack thường kết thúc bằng thuật ngữ chung như "sans-serif" như ví dụ. Trong trường hợp hiếm font khác trong stack không cài, nó fallback về font sans-serif mặc định hệ thống.
Bạn cũng tùy chỉnh yếu tố qua tùy chọn "Adjust Element". Khi tiện ích nhắc nhập font family, bạn tự do sáng tạo. Ví dụ chúng tôi thay hầu như mọi font trên Wikipedia thành font khác, tạo hỗn hợp kỳ lạ hiển thị. Thay đổi không vĩnh viễn và biến mất khi tải lại trang.
"Replace font (entire DOM)" cho phép thay mọi instance của font trên trang. Không thích Roboto (chúng tôi dùng làm sans-serif chính)? Highlight tùy chọn, nhấp "Roboto" từ danh sách font trên trang, nhập tên font bạn thích. Lại không vĩnh viễn, nhưng cho phép "chơi" thiết kế trang yêu thích, dù tạm thời.
Đo Lường Trang Web
Page Ruler (Chrome)
"Một thước? Thật sao?" chúng tôi nghe bạn hỏi. Page Ruler là thước màn hình hơi khác so với nghe. Thực tế, chúng tôi hoàn toàn hiểu sự hoài nghi ban đầu.
Vị trí quan trọng trên Web. Yếu tố trang phải căn cách vừa phải, nếu không không hấp dẫn. Mặc dù thông tin này khá hiếm ai muốn biết, Page Ruler làm nó trở nên khả thi.
Cài như tiện ích khác, bạn có nút khác trên UI. Lưu ý phải mở trang web để thử tiện ích - không dùng được trang built-in của Chrome vì lý do bảo mật.
Sau khi nhấp nút, bạn có dải thông tin thêm ngay dưới thanh địa chỉ, dùng chuột kéo thả hình dạng, kích thước sẽ tính và hiển thị trên dải đó. Bên cạnh đó có tùy chọn bật/tắt lưới, giúp độ chính xác.
Nếu muốn, cũng đổi màu hình chữ nhật từ xanh mặc định. Bất kể màu nào chọn, nó tự thêm độ trong suốt để thấy nội dung bên dưới.
Page Ruler xứng đáng ghi nhận vì cách tiếp cận tối giản, gói tất cả thông tin thiết yếu vào thanh nhỏ đầu cửa sổ.
MeasureIt (Firefox và Chrome)
MeasureIt làm nhiệm vụ giống Page Ruler và có cho cả Firefox và Chrome.
Sau khi cài, nhấp nút, bạn kéo thả tạo hình chữ nhật. Bên cạnh hình chữ nhật là số pixel, nghĩa là đo chính xác vị trí.
Nếu lo đo không chính xác chỉ dùng chuột, bạn điều chỉnh kích thước vùng highlight bằng phím mũi tên, làm chính xác dễ dàng hơn nghe. Gợi ý tích "Area" (Diện tích) trong cài đặt; nó không thay đổi cách phần mềm hoạt động, chỉ cho ý diện tích hình chữ nhật bạn vẽ chiếm.
Chúng tôi cược bạn sẽ ngạc nhiên thấy bao nhiêu pixel trên màn hình và diện tích chúng tạo ra khi highlight. Nếu không gì khác, chắc chắn nó đặt thuật ngữ "screen real estate" (bất động sản màn hình) vào bối cảnh.
Kết Luận
Mất chút thời gian làm chủ các tiện ích này, nhưng chúng đặt thông tin tuyệt vời trong tầm với. Bạn nhanh chóng nắm bắt, nhưng nếu thấy khó thay thế font, nhớ tên phải chính xác. "Comic Sans" không hoạt động, "Comic Sans MS" (như trong Office) mới hoạt động.
Nhớ rằng tất cả tiện ích này đòi hỏi độ chính xác trong thông tin bạn cung cấp, và bạn sẽ được trang bị tốt để dùng chúng trọn vẹn.