Thế giới tự nhiên luôn phục vụ như một nguồn cảm hứng tuyệt vời. Và chúng ta có thể thấy một số kỳ quan tuyệt vời nhất của nó nhìn lên bầu trời.
Một bầu trời trong xanh như pha lê vào một ngày nắng, những ngôi sao lấp lánh vào ban đêm. Cũng vậy, những suy nghĩ về thám hiểm không gian và thiên hà của chúng ta cũng kích thích trí tưởng tượng của chúng ta. Những gì ở trên chúng ta mang lại cả một thực tế hàng ngày và sự tò mò về những điều chưa biết.
Không có gì đáng ngạc nhiên, một số nhà phát triển rất sáng tạo đã sử dụng bầu trời và không gian như một chủ đề để thử nghiệm. Việc sử dụng tiềm năng của ánh sáng, màu sắc, chuyển động và các công nghệ web mới nhất là phù hợp tự nhiên.
Hôm nay, chúng tôi sẽ giới thiệu với bạn một số ví dụ tuyệt vời rằng, bằng cách này hay cách khác, sử dụng bầu trời và không gian. Họ điều hành gam từ chính xác khoa học đến tưởng tượng thuần túy. Thưởng thức!
Cuộn xuống bầu trời
Hiệu ứng dịch chuyển thị sai là ở khắp mọi nơi trong những ngày này. Đó là một trong những xu hướng đã có một cuộc sống của riêng mình. Tuy nhiên, đây là một trong những ví dụ độc đáo và hấp dẫn nhất mà chúng tôi đã thấy. Cuộn xuống trang dẫn đến cuộn 3D các đám mây, trong khi màu nền thay đổi làm cho nó trông giống như bạn đang rơi xuống Trái đất.
Xem bút
Bản giới thiệu Canvallax: Parallax Sky Background của Shaw
Bản đồ cho các ngôi sao
Điều làm cho bản đồ sao này trở nên thú vị là tính tương tác dựa trên CSS và JavaScript. Nhấp vào một sistema và tập trung, hoàn thành với sự chuyển tiếp mượt mà như lụa. Bản đồ cũng cho thấy một quỹ đạo quỹ đạo mô phỏng và một số biểu tượng cảm xúc vui nhộn như đóng băng trên bánh.
Xem bút
Bản đồ sao CSS của Scott Weaver (@ sweaver2112)
Bắc cực quang
Một trong những kỳ quan thực sự của vũ trụ, ánh sáng phương bắc (aurora borealis) là thứ mà không nhiều người trong chúng ta nhìn thấy. Nhưng ít nhất chúng ta có thể cố gắng để tạo lại trải nghiệm. Ở đây, một phiên bản CSS thuần của bầu trời đêm màu xanh lá cây và màu tím sáng có thể làm sáng màn hình của bạn.
Xem bút
CSS miền Bắc thuần túy? Bởi Jhey
Mặt trời lặn trên web
Một hoàng hôn ấn tượng là trái lại, một cái gì đó mà hầu hết mọi người đều có thể trải nghiệm. Nhưng điều đó không làm cho nó bớt chói mắt. Đoạn mã này cho phép bạn đặt hoàng hôn chuyển động bất cứ lúc nào trong ngày, chỉ cần nhấp vào quả cầu lớn màu vàng. Màu sắc thay đổi tạo ra một hiệu ứng nổi bật.
Xem bút
Hoàng hôn
Thành phố của ánh đèn đêm
Bạn có muốn biết khi nào trăng tròn sẽ tỏa sáng ở Paris, Pháp? Hoạt hình thú vị này cho bạn biết, và cho bạn một cái nhìn về cửa sổ Tháp Eiffel. Bí ẩn duy nhất ở đây là liệu con mèo đen ấm cúng có làm điều gì đó đặc biệt khi sự kiện đến hay không.
Xem bút
Trăng tròn ở Paris? bởi Paulina Hetman
Saturn CSS tinh khiết
Những chiếc nhẫn của sao Thổ là một nguồn mê hoặc lớn trong con người chúng ta. Đại diện hành tinh chỉ CSS này cung cấp một cái nhìn hơi khác. Trời tối và những chiếc nhẫn không nổi bật như bình thường. Nhưng nó cung cấp một ví dụ tuyệt vời về cách chuyển màu CSS có thể giúp chúng ta tạo ra nghệ thuật tuyệt vời.
Xem bút
Sao Thổ của Luciano Felix
Tiếp cận mặt trời
Sử dụng WebGL làm cho hoạt hình mặt trời này ra khỏi thế giới này. Khi mặt trời rơi từ trên cùng của màn hình, hãy chú ý các hiệu ứng mờ xung quanh mép của nó. Mức độ chi tiết ở đây chỉ đơn giản là tuyệt vời. May mắn thay, không có nhiệt qua màn hình.
Xem bút
Scott Weaver Solar
Màu sắc cho mọi bầu trời
Bộ sưu tập của chúng tôi được hoàn thành bởi một mảnh nhỏ hơn một chút thực dụng. Nó là một tập hợp các gradient CSS đẹp mà bạn có thể sử dụng để tái tạo các kết hợp màu sắc bầu trời khác nhau. Bạn sẽ tìm thấy mọi thứ từ bóng tối của màn đêm, mặt trời mọc, hoàng hôn và màu xanh hoàn hảo của buổi trưa.
Xem bút
Độ dốc bầu trời bởi zessx
Khám phá bầu trời thông qua mã
Như đoạn mã trên đã chứng minh, bầu trời và không gian bên ngoài có thể thêm các yếu tố vui nhộn và vẻ đẹp cho web. Cho dù họ tái tạo thế giới của chúng tôi hoặc tìm cách cho chúng tôi thấy những thế giới mới, họ cung cấp một cách độc đáo để cải thiện trải nghiệm người dùng.
Quan tâm đến việc xem thêm ví dụ? Kiểm tra bộ sưu tập CodePen của chúng tôi!
