• Giới thiệu
  • Liên hệ
  • Điều khoản
  • Bảo mật
Tech News, Magazine & Review WordPress Theme 2017
  • Home
  • Designer
    • PHOTOSHOP
      • Tutorial
      • Download
    • ILLUSTRATOR
      • Tutorial
      • Download
    • LIGHTROOM
      • Tutorial
      • Download
    • PHOTOGRAPHY
  • Blogspot
    • Template Blogspot
    • Thủ Thuật Blogspot
  • WordPress
    • Plugin WordPress
    • Theme WordPress
    • Thủ Thuật WordPress
  • Thủ Thuật
    • Công Nghệ
    • Web
    • Windows
  • Tài Liệu
    • Lập Trình
    • Khóa học
    • Phần mềm
    • Tiktok
  • GAME
    • Game Offline
    • Game Online
No Result
View All Result
  • Home
  • Designer
    • PHOTOSHOP
      • Tutorial
      • Download
    • ILLUSTRATOR
      • Tutorial
      • Download
    • LIGHTROOM
      • Tutorial
      • Download
    • PHOTOGRAPHY
  • Blogspot
    • Template Blogspot
    • Thủ Thuật Blogspot
  • WordPress
    • Plugin WordPress
    • Theme WordPress
    • Thủ Thuật WordPress
  • Thủ Thuật
    • Công Nghệ
    • Web
    • Windows
  • Tài Liệu
    • Lập Trình
    • Khóa học
    • Phần mềm
    • Tiktok
  • GAME
    • Game Offline
    • Game Online
No Result
View All Result
Tin Tức Tổng Hợp
No Result
View All Result

10 ví dụ đáng kinh ngạc về thiết kế logo CSS, JavaScript & SVG

admin by admin
Tháng Tư 7, 2022
Home Tài Liệu Designer

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.

Hộp công cụ thiết kế web

Tải xuống không giới hạn: HTML & Bootstrap Templates, WordPress Themes & Plugins, v.v.

Nội dung

  • Pháo hoa hoạt hình bởi Julian Garnier
  • Mở rộng quy mô một cách dễ dàng của Hugo Darby-Brown
  • Viết tay bởi Grey Ghost
  • Mở & Đóng bởi Marco Barría
  • Chrome nguyên chất bởi Mike King
  • Trong ánh đèn sân khấu bởi Nikk Tifan
  • Hiệu ứng vẽ độc đáo bởi Cody
  • Biểu trưng tối giản nhưng thú vị bởi Melissa Cabral
  • Kể một câu chuyện tinh tế bởi Sam Chahine
  • Biểu trưng có thể làm được nhiều hơn
    • Bài viết liên quan:

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.


Đánh giá bài viết
[Total: 0 Average: 0]

Bài viết liên quan:

  1. 20 Mẫu & Bộ dụng cụ tạo logo được thiết kế đẹp mắt
  2. 20 mẫu logo tốt nhất cho nhà hàng
  3. 40 Ví dụ về Kiểu chữ Thông minh trong Thiết kế Logo
  4. 20 mẫu mô phỏng thương hiệu & nhận dạng doanh nghiệp miễn phí
  5. The 50 Best Fonts for Creating Beautiful Logos
Tags: hướng dẫn thiết kế logologothiết kế logothiết kế logo đẹp
admin

admin

Next Post
25 Ví dụ về Thiết kế Logo Sáng tạo cho các Nhiếp ảnh gia

25 Ví dụ về Thiết kế Logo Sáng tạo cho các Nhiếp ảnh gia

20 Hướng dẫn Tạo Logo Chuyên nghiệp trong Adobe Illustrator

20 Hướng dẫn Tạo Logo Chuyên nghiệp trong Adobe Illustrator

20 mẫu logo Monogram tốt nhất

20 mẫu logo Monogram tốt nhất

Login
guest
guest
0 Góp ý
Inline Feedbacks
Xem tất cả các bình luận

Ân sủng là gì? Sự ân sủng là gì?

Misoa là ai? Nữ MC lên tiếng “bị bạn trai tác động vật lý”

DQ là số điện thoại của ai? Vì sao gọi cho bạn?

M3p là ai? Làm nghề gì?

Quỷ Satan Là Ai? Sức Mạnh Của Quỷ Satan Là Gì?

Satan là ai? 4 câu truyện đáng sợ liên quan đến Satan

  • Viết BLog
    • Giới thiệu
    • Liên hệ
    • Điều khoản
    • Bảo mật

    © 2021 Đoàn Hải Blog

    No Result
    View All Result
    • Home
    • Designer
      • PHOTOSHOP
        • Tutorial
        • Download
      • ILLUSTRATOR
        • Tutorial
        • Download
      • LIGHTROOM
        • Tutorial
        • Download
      • PHOTOGRAPHY
    • Blogspot
      • Template Blogspot
      • Thủ Thuật Blogspot
    • WordPress
      • Plugin WordPress
      • Theme WordPress
      • Thủ Thuật WordPress
    • Thủ Thuật
      • Công Nghệ
      • Web
      • Windows
    • Tài Liệu
      • Lập Trình
      • Khóa học
      • Phần mềm
      • Tiktok
    • GAME
      • Game Offline
      • Game Online

    © 2021 Đoàn Hải Blog

    wpDiscuz
    0
    0
    Rất thích suy nghĩ của bạn, hãy bình luậnx
    ()
    x
    | Reply