Thiết kế của thập niên 80 - chúng tôi yêu thích nó! Với tất cả các hình dạng hình học, nền không gian và hiệu ứng ánh sáng đèn neon này, trang đích của chúng tôi cho một sự kiện đặc biệt (tiệc Giáng sinh) không thể rạng rỡ hơn! Hãy chỉ cho chúng tôi cách làm điều đó.
Gỡ bỏ băng đô của bạn, bật đèn neon và chèn Tron vào VCR của bạn ... những năm 80 đã trở lại!
Là một nhà thiết kế, tôi luôn có một điểm yếu cho thiết kế của thập niên 80 mà không ai nói đến. Với tất cả những hình dạng hình học này, hàng tấn hoa văn, hình nền không gian với những hiệu ứng neon rẻ tiền đó (nó sẽ mang lại những kỷ niệm đẹp).
Trên thực tế, bạn có thể nhìn thấy nó ở khắp mọi nơi. Từ "Strangers Things" của Netflix, MineCraft hay Muse, nơi vừa phát hành một album mang hương vị thập niên 80 - hay thậm chí là bản làm lại của Tron.
Vì vậy, tại sao không tận dụng xu hướng này và chỉ cho bạn cách triển khai nó trong trang đích được tạo bằng Elementor ?
Nó không chỉ là một hướng dẫn lý thuyết. Chúng tôi đã xem xét một số yếu tố cho khoảng thời gian giảm giá hiện tại (Thứ Sáu Đen), để cung cấp cho bạn công cụ chuẩn bị cho các sự kiện trong tương lai.
Phần mở đầu
Hiệu ứng neon
Ở giữa bố cục, tôi đặt logo, thông điệp và nút.
Bạn có thể thấy rằng thông điệp quan trọng nhất được viết bằng "đèn neon". Để có được giao diện neon đó, bạn cần thêm CSS vào thiết kế của mình. CSS sẽ thêm rất nhiều bóng hồng vào văn bản. Đó là toàn bộ sự việc.
Vì vậy, bạn cần thêm một tiện ích tiêu đề, thay đổi kích thước của phông chữ đã chọn để làm cho nó tỏa sáng và đặt màu thành trắng.
Sau đó mở tab Nâng cao và dán vào tab CSS tùy chỉnh, thêm mã này:
selector { text-shadow: 0 0 20px #fff, 0 0 10px #fff, 0 0 50px #ff0fad, 0 0 50px #ff0fad, 0 0 40px #ff0fad, 0 0 100px #ff0fad, 0 0 75px #ff0fad; }
Nếu bạn muốn sử dụng một bóng râm khác bên cạnh màu hồng, chỉ cần thay đổi số màu sau dấu thăng. Đó là tất cả.
Tiêu đề dọc
Một khía cạnh thú vị khác của thiết kế này xuất hiện bên cạnh các chữ cái "FRI", với năm gắn liền với nó xuất hiện theo chiều dọc (90 độ).
Để đạt được diện mạo này, bạn cần thêm một tiện ích phần nội thất. Điều này được thực hiện để thực hiện hiệu ứng dọc chỉ trên một cột.
Sau khi thêm phần bên trong, thêm một tiện ích tiêu đề vào mỗi cột.
Tạo kiểu cho văn bản của bạn và sau đó mở tab nâng cao của cột thứ hai (cột bạn muốn xoay) và trong tab CSS tùy chỉnh, hãy viết mã này:
selector { float: left; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); }
Nền retro 80
Phần tính năng
Thiết kế
Dàn dựng trên Photoshop
Xây dựng cuộc sống
Cố vấn trưởng
Bộ phận phê bình
Thiết kế
Bảng giá
Thiết kế
Lấy mô hình hoàn toàn tuyệt vời này
Mẫu hiển thị trong hướng dẫn này hiện có sẵn trong thư viện Elementor. Vì vậy, bạn có thể sử dụng nó với một cú nhấp chuột.