Một lĩnh vực đã được chứng kiến một chút thử nghiệm tốt gần đây là sử dụng CSS để thiết kế hoàn toàn hoặc nâng cao tác phẩm nghệ thuật. Ví dụ, các nhà thiết kế đã thử tái tạo các nhân vật nổi tiếng với kết quả ấn tượng.
Tương tự như vậy, chúng ta cũng thấy một số biểu trưng rất thú vị được tạo bằng CSS, cùng với lượng lớn JavaScript và SVG được đưa vào để đạt được hiệu quả tốt. Chúng cùng nhau cung cấp một mức độ linh hoạt mà các định dạng khác không có.
Hãy xem mười ví dụ về biểu trưng được xây dựng bằng sự kết hợp của CSS, JavaScript và SVG. Một số là nguyên bản, một số khác đến từ các thương hiệu nổi tiếng: Tất cả đều đáng để chiêm ngưỡng.
Nội dung
Pháo hoa hoạt hình bởi Julian Garnier
Cái này anime.js hoạt ảnh logo sử dụng kết hợp CSS và (tất nhiên) JS để tạo ra một biểu trưng hoạt hình đầy màu sắc và năng động. Không chỉ có hoạt ảnh giới thiệu thú vị mà những lần nhấp sau đó vào biểu trưng sẽ phóng ra nhiều pháo hoa hơn. Đó là một loại chất gây nghiện.
Xem bút hoạt hình logo anime.js bởi Julian Garnier
Mở rộng quy mô một cách dễ dàng của Hugo Darby-Brown
Một lợi thế thú vị của việc sử dụng CSS cho logo của bạn là khả năng chia tỷ lệ để phù hợp với bất kỳ kích thước nào – giống như một tệp SVG. Biểu trưng ví dụ bên dưới cho Shop Talk thể hiện khả năng chia tỷ lệ pixel hoàn hảo của CSS, ngay bên cạnh PNG không thể theo kịp.
Xem bút Biểu trưng Shop Talk được làm bằng CSS của Hugo Darby-Brown
Viết tay bởi Grey Ghost
Ví dụ này đã được một thời gian, nhưng nó vẫn còn đẹp. Văn bản kịch bản của logo được tiết lộ như thể nó đang được viết tay trên màn hình. Nó đơn giản nhưng hiệu quả.
Xem bút Faithmade: Logo hoạt hình bởi GRAY GHOST
Mở & Đóng bởi Marco Barría
Mặc dù biểu trưng màu trắng này trông tuyệt đẹp trên nền nhiều màu, nhưng viên ngọc thực sự ở đây là chức năng phát / đảo ngược được tích hợp sẵn. Nhấn “play” sẽ làm cho biểu trưng xuất hiện thông qua hoạt ảnh mượt mà, trong khi đảo ngược (bạn đoán nó) sẽ làm được toàn bộ xử lý ngược. Điều này có thể hữu ích trong các tình huống, ví dụ, bạn muốn biểu thị việc đóng một phần tử.
Xem bút Logo bởi Marco Barría
Chrome nguyên chất bởi Mike King
Đây là sự thể hiện trung thực của biểu trưng Chrome, được thực hiện bằng CSS thuần túy và trong một phần tử HTML duy nhất. Nó cho thấy mức độ có thể đạt được với CSS trong việc tạo ra một giao diện liền mạch và các hình dạng phức tạp. Hiệu ứng di chuột quay cũng là một nét đẹp.
Xem bút Biểu trưng Google Chrome đơn thành phần bởi Mike King
Trong ánh đèn sân khấu bởi Nikk Tifan
Di chuột vào một trong các biểu trưng trong bút này sẽ tạo hiệu ứng “tiêu điểm” trên vùng ngay lập tức của con trỏ của bạn. Nó thêm một yếu tố thú vị và khuyến khích sự tương tác.
Xem bút Z24 Logo Anmitaion bởi Nikk Tifan
Hiệu ứng vẽ độc đáo bởi Cody
Ví dụ này rất nổi bật ở một vài cấp độ. Đầu tiên, hoạt ảnh đưa logo từ một loại bản vẽ kỹ thuật đến thành phẩm rất thú vị khi xem. Thứ hai, nền gradient hoạt hình tinh tế bổ sung hoàn hảo cho toàn bộ cảnh.
Xem bút Animating Gradient với CSS bởi Cody
Biểu trưng tối giản nhưng thú vị bởi Melissa Cabral
Được rồi, tối thiểu và vui vẻ thường không được đề cập cùng nhau. Nhưng trong trường hợp này – nó phù hợp. Biểu trưng đơn giản này với một cầu vồng của các khối động ở nền làm tăng thêm cá tính cho một thứ mà nếu không thì sẽ khá đơn giản.
Xem bút Logo bởi Melissa Cabral
Kể một câu chuyện tinh tế bởi Sam Chahine
Hoạt hình là một trong những mốt lớn trong logo, nhưng đôi khi nó có thể hơi quá đà. Điều làm cho ví dụ này trở nên tuyệt vời là hình ảnh động của cuốn sách mở đầu là phần bổ sung của thương hiệu mà không lạm dụng nó.
Xem bút Biểu trưng Learnosity bởi Sam Chahine
Biểu trưng có thể làm được nhiều hơn
Trong nhiều năm, chúng tôi đã sử dụng logo như một nguồn tài nguyên tĩnh. Nhưng khi bạn kết hợp sức mạnh của CSS, JavaScript và SVG, một logo có thể trở thành một nơi mà chúng ta có thể thêm một số tương tác thực tế. Và tương tác với logo về bản chất là tương tác với thương hiệu.
Vì vậy, đây không chỉ là cách thêm một tính năng thú vị khác vào trang web của bạn – mà còn là một bài tập trong việc tăng nhận thức về thương hiệu.
