20 dự án Giáng sinh tuyệt vời ẩn trong CodePen

CodePen là một sân chơi trực tuyến dành cho các nhà phát triển front-end tài năng, một nơi mà bạn luôn có thể tìm thấy các dự án tuyệt vời để mở rộng tầm nhìn của mình và xem các nhà phát triển khác đang làm gì. Các kỳ nghỉ cuối năm là thời điểm tuyệt vời để gây bất ngờ cho những người thân yêu của bạn với các dự án cá nhân sáng tạo, hoặc nói lời cảm ơn đến khách hàng của bạn với một số thiết kế tiên tiến, tuyệt vời sẽ giúp kỳ nghỉ vui vẻ.

Trong bài viết này, chúng tôi sẽ xem qua 20 thí nghiệm Giáng sinh tuyệt vời trên CodePen, mà bạn có thể sử dụng cho cảm hứng để tạo ra thiết kế của riêng bạn.

1. Sách bài hát Giáng sinh gia đình

Ứng dụng Songbook Giáng sinh đáng yêu này có thể phát các bài hát Giáng sinh yêu thích của bạn được lưu trữ trên SoundCloud. Các quy tắc kiểu được viết bằng ngôn ngữ biểu định kiểu LESS và chức năng trình phát nhạc được cung cấp bởi một plugin jQuery tùy chỉnh.

Các biểu tượng cây tuyết và cây thông Giáng sinh ở hậu cảnh mang đến bầu không khí trang trọng cho thiết kế và nếu bạn di chuột qua cây bút, bạn cũng có thể tìm thấy một số hiệu ứng CSS tinh tế.

2. Cây thông Noel kỹ thuật số

Thiết kế cho Giáng sinh luôn là một công việc biết ơn, vì các yếu tố hình ảnh điển hình của nó có thể được xây dựng theo nhiều cách sáng tạo. Cây bút này là một ví dụ tốt cho việc này. Lúc đầu, bạn chỉ có thể nhìn thấy những hình tam giác đầy màu sắc, dường như không liên quan đến ngày lễ, nhưng khi bạn nhấp vào nút Reveal, chúng được đặt cùng nhau thành một cây thông Noel. Đây không chỉ là một giải pháp độc đáo mà còn gợi nhớ đến một trò chơi đơn giản hơn.

3. Hoạt hình Giáng sinh với tuyết rơi

Bạn không nhất thiết phải sử dụng JavaScript, nếu bạn muốn tạo một hình ảnh động tuyệt vời cho Giáng sinh. Trong cây bút này, cả hoạt hình tuyết rơi và hình nền đều được tạo hoàn toàn bằng CSS. Thật đáng để kiểm tra mã một chút, vì nó cho thấy khả năng đáng kinh ngạc của CSS3. Hình nền có thể bị nhầm lẫn với đồ họa SVG thực.

4. Ông già Noel đang chạy!

Ông già Noel đang chạy! là một trò chơi JavaScript thú vị dành cho ngày lễ, sử dụng khung trò chơi HTML5 của phaser.js. Không có quá nhiều quy tắc trong trò chơi này: Santa chạy vô tận, hoặc ít nhất là cho đến khi anh ta ngã xuống. Cây bút này mang đến cho bạn một cơ hội tuyệt vời để hiểu cách viết một trò chơi đơn giản hơn bằng JavaScript.

5. Bí mật chọn tên ông già Noel

Chọn một cái tên từ chiếc mũ là một cách phổ biến trong các trường học và văn phòng để chọn Secret Santas - cây bút này chỉ là một phiên bản kỹ thuật số của truyền thống này. Vì nó chỉ sử dụng JavaScript vanilla, bạn có thể dễ dàng nhúng nó vào trang web của riêng bạn. Chỉ cần thay đổi tên bên trong biến cho.

6. Quả bóng Giáng sinh trong CSS thuần

Những quả bóng Giáng sinh vui vẻ này được viết bằng CSS thuần túy sử dụng các quy tắc bán kính đường viền. Các phần khác nhau của các quả bóng được đặt cùng nhau bằng cách sử dụng các vị trí tương đối được tính toán chính xác.

Nếu bạn muốn nhanh chóng thêm không khí ngày lễ vào một trang web, chỉ cần chèn một số quả bóng này vào các vị trí thích hợp có màu phù hợp với thiết kế chung của trang web.

7. Bông tuyết di chuyển

Bạn có thể làm cho những bông tuyết này di chuyển bằng cách di chuột qua chúng trên máy tính để bàn hoặc bằng cách nghiêng điện thoại thông minh của bạn. Chức năng được cung cấp bởi JavaScript hướng đối tượng, được nhà phát triển sử dụng thông minh để tạo lớp Bông tuyết tùy chỉnh.

Bản thân những bông tuyết được xây dựng trong CSS3 và nền sử dụng độ dốc - không có hình ảnh nào trong cây bút này.

8. Thí nghiệm Accordion ngày lễ

Accordion kỳ nghỉ này chỉ đơn giản là đẹp. Nếu bạn di chuột qua một tab, nó sẽ tập trung bằng cách mở rộng một chút và nếu bạn nhấp vào nó, nó đột nhiên bật lên và bao phủ toàn bộ trang. Thật thú vị khi lưu ý rằng cây bút này sử dụng Đồ họa vectơ có thể mở rộng (SVG) được tạo kiểu bằng CSS.

Các SVG mạnh hơn so với vẻ ngoài của chúng ngay từ cái nhìn đầu tiên, chúng có thể được định vị và thiết kế thông minh với các quy tắc phong cách giống như chúng ta sử dụng với các yếu tố HTML thông thường.

9. Người tuyết CSS tinh khiết

Ai nói thiết kế phẳng cần phải nhàm chán? Người tuyết đáng yêu này có thể dễ dàng thêm tinh thần Giáng sinh vào bất kỳ thiết kế nào. Không có hình ảnh nào được sử dụng cho người tuyết, nó hoàn toàn được viết bằng CSS. Thật đáng để xem mã CSS một chút và xem cách nhà phát triển sử dụng: trước và sau các bộ chọn giả để đạt được kết quả mong muốn.

10. Bông tuyết CSS3

Bạn có thể tạo điều kiện cho việc tạo các hình ảnh chỉ CSS3 bằng cách sử dụng các công cụ phát triển front-end tiên tiến; bông tuyết CSS3 được thiết kế tốt này là một ví dụ tuyệt vời cho việc này. Nhà phát triển đã sử dụng ngôn ngữ tạo khuôn mẫu Jade biên dịch thành HTML và bộ xử lý Sass CSS để thực hiện thiết kế bông tuyết tuyệt đẹp này.

11. Nút Giáng sinh

Thiết kế thông minh thường chọn các giải pháp tinh tế, giống như Nút Giáng sinh đầy tuyết trong cây bút này. Nền đỏ sẫm là một lựa chọn hoàn hảo cho thiết kế Giáng sinh; không phải tất cả mọi thứ cần phải xanh.

Màu sắc, độ dốc, kiểu chữ và hiệu ứng di chuột làm cho nút này rất thanh lịch và trang trọng. Bạn chỉ cần một vài trong số họ để nhanh chóng trang trí một trang web cho Christmastime.

12. Chúc mừng ngày lễ

Nếu bạn thích cuộn parallax, tại sao bạn không sử dụng nó cho các thiết kế kỳ nghỉ của bạn? Nhà phát triển của cây bút này đã thử nghiệm thông minh hiệu ứng này và sử dụng plugin Parallax.js theo cách ít phổ biến hơn, hiệu ứng cuộn không theo chiều dọc như bình thường mà nằm ngang. Không khí Giáng sinh được tăng cường bởi một trận tuyết rơi ấn tượng

Nếu tôi phải chọn bất kỳ sai sót nào của cây bút này, đó sẽ là lựa chọn màu sắc: chữ màu trắng trên nền trắng một phần làm suy yếu đáng kể khả năng tiếp cận của thiết kế.

13. Giấy gói Giáng sinh CSS

Bạn có thể tạo một giấy gói Giáng sinh hoàn toàn độc đáo với sự trợ giúp của CSS3. Nhà phát triển của cây bút này cho thấy không chỉ một, mà là sáu biến thể cho việc này. Các mẫu đẹp đạt được bằng cách sử dụng thông minh các gradient CSS và thuộc tính chế độ trộn nền.

Bạn có thể tìm thấy nhiều ví dụ hay hơn và giải thích chi tiết trên trang web riêng của nhà phát triển.

14. Hộp trong hộp

Thiết kế giàu trí tưởng tượng này được lấy cảm hứng từ búp bê truyền thống của Nga (một con búp bê bên trong búp bê). Nếu bạn mở hộp bên ngoài bằng cách nhấp vào nó, nó sẽ hiển thị một hộp bên trong cũng là hộp bên ngoài của một hộp bên trong khác. Chức năng được viết bằng jQuery và vị trí chính xác của các hộp được đặt với sự trợ giúp của các quy tắc vị trí tuyệt đối và tương đối trong tệp CSS.

15. Hộp quà tặng với hiệu ứng Peel giấy

Nếu bạn quản lý để gỡ ruy băng khỏi món quà này bằng cách kéo nó đi, bạn có thể xem hiệu ứng bóc vỏ giấy siêu tiết lộ nội dung bên trong của món quà. Bạn có thể đọc hướng dẫn đầy đủ trên trang web của nhà phát triển, đây là một mẹo mà nó chắc chắn đáng để học hỏi. Nếu bạn chỉ muốn sử dụng mã, bạn cũng có thể sao chép nó từ GitHub.

16. Canvas hoạt hình ngày lễ tinh thần

Giáng sinh có thể là thời điểm tuyệt vời để thử nghiệm những điều mới, giống như nhà phát triển đã làm điều đó trong cây bút này bằng cách sử dụng canvas HTML5 làm nền hoạt hình. Khung vẽ xuất hiện trước nội dung (Chúc mừng ngày lễ!) Trong tệp HTML và được đặt làm nền với sự trợ giúp của định vị CSS thông minh.

Bút cũng sử dụng tập lệnh hoạt hình nền được bao gồm dưới dạng tệp JavaScript riêng.

17. Giao diện người dùng thẻ quà tặng

Thẻ quà tặng bắt mắt này không chỉ dành cho Giáng sinh, mà có thể được sử dụng bất cứ lúc nào khi bạn muốn gây bất ngờ cho người dùng bằng một món quà trên trang web của bạn. Nó không dựa vào JavaScript vì nó hoàn toàn được viết bằng ngôn ngữ biểu định kiểu Sass.

Thiết kế sử dụng thuộc tính CSS3 đường dẫn clip cho phép nhà phát triển chỉ hiển thị một vùng cụ thể của một phần tử, thay vì hiển thị toàn bộ khu vực của nó.

18. Thẻ Giáng sinh vui vẻ CSS nguyên chất

Ông già Noel cười vô cùng này - chỉ sử dụng HTML và CSS3 - có thể cho bạn cơ hội hiểu cách sử dụng cú pháp hoạt hình khung hình trong thực tế. Trong CSS3, bạn có thể sử dụng quy tắc @keyframes để chỉ định quy tắc của hoạt hình và sau đó bạn có thể liên kết hoạt hình được chỉ định này với một thành phần nhất định bằng cách sử dụng thuộc tính CSS3 hoạt hình.

Bạn cần thêm tên của khung hình chính làm giá trị đầu tiên của thuộc tính hoạt hình, giống như nhà phát triển đã làm điều này với các khung hình chính tùy chỉnh có tên bodyLaugh, beardLaugh, headLaugh và mouthLaugh được tạo riêng cho bút này.

19. Xmas Cracker

Nếu bạn di chuột qua Xmas Cracker ấn tượng này, nó sẽ tiết lộ một thông điệp Giáng sinh độc đáo, đó là một cách tuyệt vời để chúc một Giáng sinh vui vẻ cho khách truy cập của bạn. HTML được viết bằng HAML, Ngôn ngữ đánh dấu trừu tượng HTML, trong khi các quy tắc kiểu sẽ tận dụng sức mạnh của ngôn ngữ Sass Syntactally Awesome Styesheets.

Kết quả là thông minh và tuyệt vời thực sự. Bằng cách thêm một chút JavaScript, nó thậm chí có thể được sử dụng để gửi báo giá hoặc tin nhắn tùy chỉnh cho người dùng.

20. Đèn Xmas nhấp nháy

Những đèn Giáng sinh nhấp nháy này có thể nhanh chóng mang lại một bầu không khí độc đáo cho bất kỳ trang web nào. Mã mặt trước được viết bằng HAML biên dịch thành HTML, Sass biên dịch thành CSS và jQuery.

Hiệu ứng phát sáng hoạt hình đạt được theo quy tắc @keyframes đã nói ở trên do CSS3 cung cấp. Màu sắc của các led được thiết lập trong tệp jQuery bằng cách thêm 50 độ vào giá trị Hue của led trước đó bằng thang màu HSL.