CodePen is an online playground for talented front-end developers, a place where you can always find cool projects to widen your horizons, and see what other developers are up to. Year-end holidays are a great time to surprise your loved ones with creative personal projects, or to say thanks to your customers with some cool, cutting edge designs that will help the holiday cheer.
In this post we will take a peek at 20 awesome Christmas experiments on CodePen, that you can use for inspiration to create your own designs.
This lovely Family Christmas Songbook app can play your favourite Christmas songs hosted on SoundCloud. The style rules are written in the LESS stylesheet language, and the music player functionality is provided by a custom jQuery plugin.
The snowflake and Christmas tree icons in the background give a solemn atmosphere to the design, and if you hover over the pen you can also find some subtle CSS effects.
Designing for Christmas is always a thankful job, as its typical visual elements can be built in many creative ways. This pen is a good example for this. At first you can only see colourful triangles, seemingly unrelated to the holidays, but when you click on the Reveal button, they are set together into a Christmas tree. It’s not only a unique solution, but also reminiscent of a simpler game.
Read more: 30 Cool CSS Animations You Have To See
These cheerful Christmas balls are written in pure CSS taking leverage of the border-radius rules. The different parts of the balls are set together by utilizing precisely calculated relative positions.
If you want to quickly add a holiday atmosphere to a web page, just insert some of these balls to the appropriate places in a colour that matches the overall design of the site.
The snowflakes themselves are built in CSS3, and the background uses gradients – there are no images in this pen at all.
This holiday accordion is simply beautiful. If you hover over a tab it comes to focus by expanding a bit, and if you click on it it suddenly pops up and covers the whole page. It’s interesting to note that this pen uses Scalable Vector Graphics (SVG) that are styled with CSS.
SVGs are more powerful than they seem to be at first sight, they can be smartly positioned and designed with the same style rules we use with regular HTML elements.
Who said flat design needs to be boring? This lovely snowman can easily add Christmas spirit to any design. There’s no images used for the snowman, it’s completely written in CSS. It’s worth to take a look at the CSS code a bit, and see how the developer uses the :before and :after pseudo selectors to achieve the intended result.
10. CSS3 Snowflake
You can facilitate the creation of CSS3-only images by using advanced front-end development tools; this well-designed CSS3 snowflake is an excellent example for this. The developer made use of the Jade templating language that compiles into HTML, and the Sass CSS preprocessor to implement this stunning snowflake design.
11. Christmas Button
Smart designs frequently opt for subtle solutions, just like the snowy Christmas Button in this pen. The dark red background is a perfect choice for a Christmas design; not everything needs to be green after all.
The colours, the gradients, the typeface, and the hover effect make this button very elegant and solemn. You need only a few of them to quickly decorate a site for Christmastime.
If you like parallax scrolling, why wouldn’t you use it for your holiday designs? The developer of this pen smartly experimented with the effect, and used the Parallax.js jQuery plugin in a less common way, the scrolling effect is not vertical as usual, but horizontal. The Christmas atmosphere is intensified by an impressive snowfall
If I had to pick on any flaw of this pen, it would be the colour choice: white letters on a partially white background significantly weakens the accessibility of the design.
You can create a completely unique Christmas wrapping paper with the help of CSS3. The developer of this pen shows not only one, but six variants for this. The beautiful patterns are achieved by the smart utilization of CSS gradients and the background-blend-mode property.
You can find even more cool examples and a detailed explanation on the developer’s own website.
14. Box Within a Box
This imaginative design was inspired by traditional Russian dolls (a doll inside of a doll). If you open the outer box by clicking on it, it reveals an inner box that is also the outer box of another inner box. The functionality is written in jQuery, and the exact places of the boxes are set with the help of absolute and relative position rules in the CSS file.
If you manage to remove the ribbon from this gift by dragging it away, you can take a look at the supercool paper peel effect that reveals the inner contents of the gift. You can read the full tutorial on the developer’s website, it’s a trick that it’s definitely worth to learn. If you just want to use the code you can clone it from GitHub as well.
Christmas can be a great time for experimenting with new things, just like the developer did it in this pen by using HTML5 canvas as an animated background. The canvas comes before the content (Happy Holidays!) in the HTML file, and it’s set as a background with the help of smart CSS positioning.
17. Gift Card UI
The design makes use of the clip-path CSS3 property that allows developers to display only a specific region of an element, instead of showing its whole area.
This infinitely laughing Santa – using only HTML and CSS3 – can give you the opportunity to understand how the keyframe animation syntax can be used in practice. In CSS3 you can use the @keyframes rule to specify the rules of an animation, and then you can bind this specified animation to a certain element by using the animation CSS3 property.
You need to add the name of the keyframe as the first value of the animation property, just like the developer did this with the custom keyframes called bodyLaugh, beardLaugh, headLaugh, and mouthLaugh specifically created for this pen.
19. Xmas Cracker
If you hover over this impressive Xmas Cracker, it reveals a unique Christmas message that’s an amazing way to wish a Merry Christmas to your visitors. The HTML is written in HAML, the HTML Abstraction Markup Language, while the style rules take leverage of the power of the Sass Syntactically Awesome Styesheets language.
The animated glowing effect is achieved by the aforementioned @keyframes rule provided by CSS3. The colours of the leds are set in the jQuery file by adding 50 degrees to the Hue value of the previous led using the HSL colour scale.