CodePen에 숨겨진 20 개의 멋진 크리스마스 프로젝트

CodePen은 재능있는 프론트 엔드 개발자를위한 온라인 놀이터입니다. 개발자가 시야를 넓히고 항상 다른 개발자가 무엇인지 알아볼 수있는 멋진 프로젝트를 찾을 수있는 곳입니다. 연말 연시는 크리 에이 티브 개인 프로젝트로 사랑하는 사람을 놀라게하거나 휴가 응원을 도울 멋진, 최첨단 디자인으로 고객에게 감사 인사 할 수있는 좋은 시간입니다..

이 게시물에서 우리는 CodePen에서 열리는 20 가지 멋진 크리스마스 실험, 영감을 얻어 자신 만의 디자인을 만들 수 있습니다..

1. 가족 크리스마스 노래 책

이 사랑스러운 Family Christmas Songbook 앱은 SoundCloud에서 호스팅되는 좋아하는 크리스마스 노래를 재생할 수 있습니다. 스타일 규칙은 LESS 스타일 시트 언어로 작성되고 뮤직 플레이어 기능은 사용자 정의 jQuery 플러그인에 의해 제공됩니다.

배경에있는 눈송이와 크리스마스 트리 아이콘은 엄숙한 분위기를 자아 내며, 펜 위로 마우스를 가져 가면 미묘한 CSS 효과를 발견 할 수도 있습니다.

CodePen의 Nicholas Petersen (@nicholaspetersen)이 만든 펜 크리스마스 노래 책을 참조하십시오..

2. 디지털 크리스마스 트리

크리스마스를위한 디자인은 전형적인 시각적 요소가 많은 창조적 인 방법으로 구축 될 수 있기 때문에 항상 감사드립니다. 이 펜은 이에 대한 좋은 예입니다. 처음에는 공휴일과 관련이없는 다채로운 삼각형 만 볼 수 있지만, 공개 버튼을 클릭하면 크리스마스 트리가됩니다. 그것은 유일한 해결책 일뿐만 아니라 단순한 게임을 연상시킵니다..

CodePen의 Prashant Sani (@Prashantsani)의 펜 디지털 크리스마스 트리보기.

3. 강설이 내리는 크리스마스 애니메이션

크리스마스를위한 멋진 애니메이션을 만들고 싶다면 반드시 자바 스크립트를 사용할 필요는 없습니다. 이 펜에서는 강설량 애니메이션과 배경 이미지가 모두 CSS로만 작성됩니다. CSS3의 놀라운 기능을 보여주기 때문에 코드를 조금 살펴볼 가치가 있습니다. 배경 이미지가 실제 SVG 그래픽으로 오인 될 수도 있습니다..

Codexen에서 Texx Smith (@texxs)의 Pen Christmas Animation 2014를 참조하십시오..

4. 산타가 뛰기!

산타를 실행! phaser.js HTML5 게임 프레임 워크를 사용하는 휴일을위한 재미있는 자바 스크립트 게임입니다. 이 게임에는 규칙이 너무 많지 않습니다. 산타가 무한히 뛰거나 적어도 떨어질 때까지. 이 펜은 JavaScript로 간단한 게임을 작성하는 방법을 이해할 수있는 좋은 기회를 제공합니다..

펜 산타 런을보세요! CodePen의 Nate Wiley (@natewiley).

5. 비밀 산타 이름 피커

모자에서 이름을 따는 것은 학교와 사무실에서 Secret Santas를 고르는 인기있는 방법이었습니다.이 펜은이 전통의 디지털 버전 일뿐입니다. 바닐라 자바 스크립트 만 사용하므로 쉽게 자신의 사이트에 삽입 할 수 있습니다. 그냥 변수 내에서 이름을 바꾸기 만하면됩니다..

CodePen의 Tobias Harison-Denby (@quagliero)의 Pen Secret Santa를 참조하십시오..

6. 순수한 CSS의 크리스마스 공

이 쾌활한 크리스마스 공은 국경 반경 규칙의 영향을받는 순수한 CSS로 작성되었습니다. 볼의 다른 부분은 정확하게 계산 된 상대 위치를 사용하여 함께 설정됩니다..

웹 페이지에 휴가 분위기를 빠르게 추가하려면 사이트의 전체적인 디자인과 일치하는 색상으로 적절한 장소에 공을 삽입하기 만하면됩니다.

펜 T'is가 볼을위한 시즌을 CodePen의 Jose Morales-Mendizabal (@moralejf)에 의해 확인하십시오..

7. 움직이는 눈송이

이 눈송이는 바탕 화면에 올려 놓거나 스마트 폰을 기울여 움직일 수 있습니다. 이 기능은 개발자가 사용자 정의 Snowflake 클래스를 만들기 위해 현명하게 사용하는 객체 지향 JavaScript에 의해 제공됩니다..

눈송이 자체는 CSS3로 만들어졌으며 배경은 그라디언트를 사용합니다.이 펜에는 전혀 이미지가 없습니다..

Pen Happy Xmas를보십시오! Paul Neave (@neave)의 CodePen.

8. 휴일 아코디언 실험

이 휴가 아코디언은 단순히 아름답습니다. 탭 위로 마우스를 가져 가면 조금 더 확대하여 초점을 맞추고, 클릭하면 갑자기 팝업되어 전체 페이지를 덮습니다. 이 펜은 CSS로 스타일이 지정된 SVG (Scalable Vector Graphics)를 사용한다는 점이 흥미 롭습니다..

SVG는 처음 보는 것보다 강력합니다. 규칙적인 HTML 요소와 동일한 스타일 규칙을 사용하여 SVG를 현명하게 배치하고 디자인 할 수 있습니다.

CodePen의 Dmitriy Levchenko (@levchenkod)의 펜 홀리데이 실험보기.

9. 순수한 순수한 CSS 눈사람

평평한 디자인은 누가 지루할 필요가 있다고 말했습니까? 이 사랑스러운 눈사람은 어떤 디자인에도 크리스마스 정신을 쉽게 추가 할 수 있습니다. 눈사람에 사용 된 이미지가 없습니다. CSS로 완전히 작성되었습니다. CSS 코드를 조금 살펴보고 개발자가 : before 및 : after 의사 선택기를 사용하여 의도 한 결과를 얻는 방법을 살펴볼 가치가 있습니다..

CodePen의 Ali Khalilifar (@alikhalilifar)의 펜 플랫 CSS 순수 눈사람보기.

10. CSS3 눈송이

고급 프런트 엔드 개발 도구를 사용하여 CSS3 전용 이미지를 쉽게 만들 수 있습니다. 이 잘 디자인 된 CSS3 눈송이는 이것에 대한 훌륭한 예입니다. 개발자는 HTML로 컴파일 된 Jade 템플릿 언어와 Sass CSS 전처리기를 사용하여이 멋진 눈송이 디자인을 구현했습니다..

CodePen의 Steve Szczecina (@steveszc)의 펜 CSS3 Snowflake보기.

11. 크리스마스 버튼

스마트 한 디자인은 종종이 펜의 눈 덮인 크리스마스 단추처럼 미묘한 솔루션을 선택합니다. 진한 빨간색 배경은 크리스마스 디자인을위한 완벽한 선택입니다. 결국 모든 것이 녹색 일 필요는 없다..

색상, 그라디언트, 서체 및 호버 효과는이 버튼을 매우 우아하고 엄숙하게 만듭니다. Christmastime 사이트를 신속하게 꾸미려면 그 중 몇 개만 있으면됩니다..

CodePen의 vijender (@ VIRU)의 Pen tcjou보기.

12. 시차 해피 홀리데이

시차 스크롤링을 좋아한다면 휴일 디자인에 왜 사용하지 않습니까? 이 펜의 개발자는 현명하게 효과를 실험하고 덜 일반적인 방식으로 Parallax.js jQuery 플러그인을 사용했습니다. 스크롤 효과는 평소처럼 수직이 아니라 수평이었습니다. 인상적인 강설로 크리스마스 분위기가 더욱 강해집니다.

이 펜의 결함을 골라야한다면, 색상 선택이 될 것입니다. 부분적으로 흰색 배경에 흰색 문자가 있으면 디자인의 접근 가능성이 크게 약화됩니다..

CodePen의 aai210 (@ aai210)에 의한 Pen Parallax Happy Holiday보기.

13. CSS 크리스마스 포장지

CSS3를 사용하여 완전히 독특한 크리스마스 포장지를 만들 수 있습니다. 이 펜의 개발자는 하나 뿐이 아니라 6 가지 변형을 보여줍니다. 아름다운 패턴은 CSS 그래디언트와 배경 혼합 모드 속성을 똑똑하게 활용하여 얻을 수 있습니다..

개발자의 자체 웹 사이트에 대한 자세한 설명과 자세한 설명을 볼 수 있습니다..

CodePen의 Bennett Feely (@bennettfeely)의 Pen jEbraK를 참조하십시오..

14. 박스 내 박스

이 상상력이 풍부한 디자인은 전통적인 러시아 인형 (인형 내부의 인형)에서 영감을 얻었습니다. 바깥 상자를 클릭하여 열면 다른 안쪽 상자의 바깥 상자이기도 한 안쪽 상자가 나타납니다. 이 기능은 jQuery로 작성되었으며 상자의 정확한 위치는 CSS 파일의 절대 및 상대 위치 규칙을 사용하여 설정됩니다..

CodePen의 ericanton (@EricAnton)에 의한 펜 홀리데이 인사말보기.

15. 종이 껍질 효과가있는 선물 상자

이 선물에서 리본을 끌어서 제거하면 선물의 내부 내용을 나타내는 과냉 지 종이 필 효과를 볼 수 있습니다. 개발자 웹 사이트에서 전체 자습서를 읽을 수 있지만, 배우는 것이 가치있는 속임수입니다. 코드를 사용하려면 GitHub에서도 복제 할 수 있습니다..

CodePen의 LegoMushroom의 펜 선물 상자 (@ sol0mka)보기.

16. 홀리데이 스피릿 애니메이션 캔버스

크리스마스는 HTML5 캔버스를 애니메이션 배경으로 사용하여 개발자가이 펜에서 사용한 것처럼 새로운 것을 실험하기에 좋은 시간입니다. 캔버스는 HTML 파일의 내용 (해피 홀리데이!) 앞에 있으며, 스마트 CSS 포지셔닝을 통해 배경으로 설정됩니다.

펜은 또한 별도의 JavaScript 파일로 포함 된 배경 애니메이션 스크립트를 사용합니다..

펜 홀리데이 스피릿 (Code Holiday)을 참조하십시오 ... CodePen의 Tiffany Rayside (@tmrDevelops).

17. 선물 카드 UI

이 눈길을 사로 잡는 기프트 카드는 크리스마스에만 해당되는 것이 아니며 언제든지 웹 사이트에서 선물로 사용자를 놀라게하고 싶을 때 사용할 수 있습니다. Sass 스타일 시트 언어로 작성 되었기 때문에 JavaScript에 의존하지 않습니다..

이 디자인은 개발자가 전체 영역을 표시하는 대신 요소의 특정 영역 만 표시 할 수있는 클립 경로 CSS3 속성을 사용합니다.

CodePen의 David Khourshid (@davidkpiano)의 Pen Gift Card UI보기.

18. 순수한 CSS 메리 크리스마스 카드

HTML과 CSS3 만 사용하여 무한히 웃기는 산타는 실제로 키 프레임 애니메이션 구문을 어떻게 사용할 수 있는지 이해할 수있는 기회를 제공합니다. CSS3에서는 @keyframes 규칙을 사용하여 애니메이션 규칙을 지정한 다음 애니메이션 CSS3 속성을 사용하여이 지정된 애니메이션을 특정 요소에 바인딩 할 수 있습니다.

개발자가 bodyLaugh, beardLaugh, headLaugh 및 mouthLaugh라는 맞춤 키 프레임을 사용하여이 작업을 수행 한 것처럼 키 프레임의 이름을 애니메이션 속성의 첫 번째 값으로 추가해야합니다..

Code Pen의 Alireza Sheikholmolouki (@ Alireza29675)의 Pen Pure CSS Merry Christmas를 참조하십시오..

19. 크리스마스 크래커

이 인상적인 Xmas Cracker 위에 마우스를 올리면 방문객에게 즐거운 성탄절을 보내고 싶은 놀라운 크리스마스 메시지가 드러납니다. HTML은 HAML, HTML Abstraction Markup Language로 작성되며, 스타일 규칙은 Sass Syntheticically Awesome Styesheets 언어의 힘을 이용합니다.

그 결과는 영리하고 대단합니다. 좀 더 많은 자바 스크립트를 추가함으로써 사용자에게 인용 부호 나 메시지를 전달하는 데 사용될 수도 있습니다.

코드 팬 (CodePen)의 Mike Samways (@msamways)의 Xmas 크래커 CSS3보기.

20. 깜박이는 크리스마스 조명

이 번쩍이는 크리스마스 불빛은 어떤 웹 사이트에도 빠르게 독특한 분위기를 줄 수 있습니다. 프론트 엔드 코드는 HAML로 작성되어 HTML로 컴파일되고 Sass는 CSS로 컴파일되며 jQuery.

애니메이션 효과는 CSS3에서 제공하는 앞에서 설명한 @keyframes 규칙을 통해 얻을 수 있습니다. LED의 색상은 HSL 색상 스케일을 사용하여 이전 LED의 색조 값에 50도를 추가하여 jQuery 파일에 설정됩니다.

CodePen의 White Wolf Wizard (@WhiteWolfWizard)에 의한 Pen Xmas Light보기.