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 CSS 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 đang 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ư đơn giản, đơ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ỉnh thoảng xuất hiện 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 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 cũ và dĩ nhiên là kiểu chữ 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 giới thiệu một cảm giác retro lấp lánh cho 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 kết thúc hoàn hảo thu hút sự chú ý và tạo ra một bầu không khí phù hợp.

Ngoài ra, 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 sử dụng hiệu ứng trên 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 phải đối phó 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 các thay đổ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 chính tả 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 nhưng bắt đầu bộ sưu tập của chúng tôi với phầ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. Nhiều nhà thiết kế và phát triển đã tái tạo nó. Dribbble và Codepen có đầy đủ ý 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 mọi thứ tĩnh, hãy thử đoạn mã của Wee, đây là một giải pháp HTML và SCSS thuần túy.

Không có không gian trống 404

Riley Shaw's No Vacancy 404 tương tự như 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 để tăng tính châ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ỹ. Nhưng chúng có thể không 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 tập trung sự chú ý của mình vào Dấu hiệu neon cổ điển của Kyle Lavery. Có vẻ như nó đến từ những năm 1960 quảng cáo tràn ngập các dấu hiệu được chiếu sáng. Sự kết hợp thông minh của các đường ố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à phông chữ tuyệt vời thực hiện thủ thuật, tạo ra một kiệt tác độc đáo với mã.

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

Chúng ta hãy quay trở lại thập niên 80 và các phần mã với các hiệu ứng chính tả được tạo ra trong giai đoạn này. Đầu tiên và quan trọng nhấ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. Sự cố 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. Cái nhìn sâu sắc này làm say mê những rung cảm tích cực và niềm vui. Trông thật ngọt ngào và mơ màng. Nó được tạo bằng thư viện Splting, giúp thao tác với CSS dễ dàng.

Trò chơi với kiểu chữ retro

Không có 90 mà không có trò chơi arcade được chơi trên bảng điều khiển 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 đó một cách hoàn hảo. Codepen dành riêng cho kiểu chữ retro đã khéo léo tái tạo logo Atari. Bạn cũng sẽ tìm thấy bốn hiệu ứng bổ sung mang lại cho lời bài hát một nét đẹp retro.

Văn bản / kiểu chữ retro 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 1980 của David Park và 404 SVG của Marcos Mellado. Trong khi hai dự án đầu tiên sử dụng phông chữ đậm, hoàn thiện bóng, cách điệu neon và màu sắc quyết liệt cho một sự rung cảm giới thiệu VHS retro nhất định, thì hai dự án lại cảm thấy hơi mộc mạc, trần tục và thô thiển, 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 in 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 đề Awesome Vintage của Kevin Nagata. Cả hai đều thể hiện một phông chữ cổ điển truyền thống, mà chúng ta thường tưởng tượng: siêu mỏng với các chữ cái 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à tiên tiến, đã đến lúc loại bỏ hiện tại và tìm kiếm cảm hứng sớm hơn. 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 in retro là ví dụ hoàn hảo về điều đó. Họ đang chào đón và những vụ nổ dễ chịu từ quá khứ mà tự nhiên chú ý, giống như một luồng không khí trong lành.