Tin tức và phân tích của tất cả các thiết bị di động

10 hiệu ứng retro và HTML tuyệt vời

Hipstamatic, Spotify và giờ là Adidas: Xã hội của chúng ta dường như có một sự khao khát to lớn đối với những ngày xưa và những cách thức cũ. Có lẽ thị trường của chúng ta đã quá bão hòa với mọi thứ công nghệ cao và sáng tạo đến mức chúng ta bắt đầu thấy chán. Hoặc có thể đó chỉ là một nỗi nhớ tầm thường cho ngày xưa khi mọi thứ dường như dễ dàng, đơn giản và màu hồng. Nỗi ám ảnh hiện tại với mọi thứ từ quá khứ gần đây là điều hiển nhiên. Nó có thể được nhìn thấy ở khắp mọi nơi, và lĩnh vực thiết kế web cũng không ngoại lệ.

Trong thực tế, phong cách retro thể hiện theo thời gian trên web. Thể hiện qua các bảng màu pastel retro, hiệu ứng duotone, in hình học đậm nét đơn giản hóa quá mức, tác phẩm nghệ thuật trang trí, hiệu ứng nhiễu hạt, hình ảnh giống như Polaroid, thiết kế lấy cảm hứng từ báo lá cải, phong cảnh lấy từ các trò chơi trường học cũ, và Tất nhiên, kiểu chữ thời gian cũ.

Nói về điều này, typography là một trong những lựa chọn phổ biến nhất khi nói đến việc thấm nhuần một cảm giác retro lấp lánh trong một dự án. Đó là tinh tế và trong hương vị tốt. Và, quan trọng nhất, nó không áp đảo hoặc quá tải dự án. Đó là một liên lạc hoàn thiện hoàn hảo thu hút sự chú ý và thiết lập một bầu không khí phù hợp.

Thêm vào đó, bạn có thể nhanh chóng tái tạo các hiệu ứng của thập niên 80 hoặc 90 với sự trợ giúp của bộ ba CSS / JS và SVG yêu quý. Chỉ cần áp dụng hiệu ứng cho bất kỳ từ nào và nhận được kết quả mong muốn trong vài giây. Và bạn không cần phải loay hoay với các chương trình chỉnh sửa ảnh hoặc liên quan đến thiết kế như Photoshop hay Sketch để thực hiện sửa đổi. Đơn giản và thanh lịch đúng không?

Nếu bạn là người đánh giá cao cách làm việc này, chúng tôi đã kết hợp 10 đoạn mã với các hiệu ứng kiểu chữ retro tuyệt vời. Chúng ta sẽ thấy:

Rời khỏi thị trấn

Chúng tôi không thể giúp bắt đầu bộ sưu tập của chúng tôi với đoạn mã Gabrielle Week tuyệt vời này. Dự án của anh có tên Left the Country và chủ yếu lấy cảm hứng từ tác phẩm kinh dị "Stranger Things" của Duffer Brothers. Rất nhiều nhà thiết kế và phát triển đã tái tạo nó. Dribbble và Codepen có đầy đủ các ý kiến ​​chuyên môn về việc giới thiệu chương trình. Thậm chí còn có một trình tạo được phát triển bởi Nelson Cash cho phép bạn tạo lại logo bằng dữ liệu của mình và tải xuống hình ảnh. Nhưng nếu bạn muốn tránh tất cả các tĩnh, hãy thử đoạn mã của Jun, một giải pháp HTML và SCSS thuần túy.

Không có chỗ trống 404

No Vacancy 404 của Riley Shaw rất giống với tác phẩm trước đây của Gabrielle Wee. Nguồn gốc của nó nằm trong nghệ thuật đường nét tuyệt vời được tăng cường với một liên lạc lấp lánh và hiệu ứng nhấp nháy để thêm hiện thực. Nó nhắc nhở chúng ta về tất cả những dấu hiệu neon phát sáng ngày càng trở nên phổ biến vào giữa thế kỷ trước ở Mỹ. Tuy nhiên, có lẽ chúng không có vẻ thanh lịch và tinh tế như kiệt tác của Riley Shaw. Giải pháp là sự cộng sinh của sự thanh lịch, tinh tế và hấp dẫn cổ điển.

Dấu hiệu neon cổ điển

Cần nhiều hiệu ứng lấp lánh và một sự rung cảm của Mỹ? Sau đó, bạn nên chuyển sự chú ý của mình đến Dấu hiệu neon cổ điển của Kyle Lavery. Có vẻ như nó được phát hành từ những quảng cáo của những năm 1960 đã quá đông với các dấu hiệu được chiếu sáng. Sự kết hợp thông minh của các ống đa đường kính, hiệu ứng lấp lánh tuyệt vời, bảng màu gây tranh cãi và kiểu chữ tuyệt đẹp thực hiện thủ thuật, tạo ra một kiệt tác xuất sắc với mã.

Sư đoàn: Kẻ xâm lược không gian

Chúng ta hãy quay trở lại những năm 80 và các đoạn mã có các hiệu ứng kiểu chữ được tạo ra trong giai đoạn này. Trước hết, thập niên 80 và 90 tập trung vào các trò chơi video. Tuổi thơ của chúng tôi thật đáng yêu. Và Martin Pitt là một trong những người đã cố gắng nhắc nhở chúng tôi về điều đó. Bộ phận của anh ta: Kẻ xâm lược không gian đưa chúng ta trở lại tuổi thiếu niên. Nhận thức này enchant với những rung cảm tích cực và niềm vui. Trông thật dễ thương và mơ màng. Nó được tạo ra với sự trợ giúp của thư viện Chia tách, giúp thao tác với CSS dễ dàng.

Chơi với kiểu chữ retro

Không có 90 trò chơi arcade nào được chơi trên bảng điều khiển trò chơi video gia đình Atari. Nó chỉ là một từ đồng nghĩa với thập niên 80 và 90 trong thế giới Geek. Và Max Kohler biết điều đó hoàn toàn tốt. Codepen của nó dành riêng cho kiểu chữ retro khéo léo có logo Atari được sao chép. Bạn cũng sẽ tìm thấy bốn hiệu ứng nữa mang lại cho lời bài hát một nét đẹp retro.

Văn bản / kiểu chữ retro thập niên 80/404 SVG mới

Có một số hiệu ứng văn bản tuyệt vời trong bộ sưu tập của chúng tôi gợi lại một số ký ức ngọt ngào liên quan đến truyền hình. Ví dụ, Văn bản Retro mới của Vladimir Jovanović, Kiểu chữ thập niên 80 của David Park và 404 SVG của Marcos Mellado. Trong khi hai dự án đầu tiên sử dụng kiểu chữ in đậm, bề mặt bóng, cách điệu neon và tô màu mạnh mẽ cho một rung cảm giới thiệu VHS retro nhất định, thì dự án thứ hai cảm thấy hơi mộc mạc, trần tục và thô, giống như các video clip. nhạc kịch trên MTV từ thời kỳ đó.

Kiểu chữ cổ điển / tiêu đề cổ điển tuyệt vời

Đây sẽ không phải là một bộ sưu tập đầy đủ các hiệu ứng chữ retro mà không có một vài giải pháp truyền thống. Và chúng tôi có hai đoạn mã tuyệt vời: Kiểu chữ cổ điển của Thibault Jan Beyer và Tiêu đề cổ điển tuyệt vời của Kevin Nagata. Cả hai đều hiển thị một kiểu chữ cổ điển truyền thống, như chúng ta đã từng tưởng tượng về nó: siêu mỏng với chữ viết ngày càng dài, một nét trang trí nghệ thuật tinh tế và, tất nhiên, một cái bóng là trái tim và linh hồn của tác phẩm nghệ thuật. Trong khi dự án của Thibault Jan Beyer có vẻ cổ điển và hoành tráng; Dự án của Kevin Nagata có vẻ hơi hiện đại với giai điệu vui tươi nhất định.

Quay ngược thời gian

Nếu bạn mệt mỏi với mọi thứ cực kỳ hiện đại, tinh tế và cao cấp, thì đã đến lúc loại bỏ hiện tại và tìm kiếm cảm hứng trong quá khứ. Tin tưởng chúng tôi, anh ấy luôn có một con át chủ bài. Không một lần anh thất bại trong việc cứu ngày.

Nó cung cấp các xu hướng và giải pháp thiết kế cho phép một dự án nổi bật giữa đám đông. Và hiệu ứng letterpress retro là ví dụ hoàn hảo về điều đó. Chúng là những tiếng nổ ấm cúng và thân thiện từ quá khứ tự nhiên bắt mắt bạn, giống như một luồng không khí trong lành.