Tobias Reich | The Blog Pros

What is a Design System?

Varun Vachhar and Catherine Maritan take the conversation of Design Systems past style guides and component libraries and get into breaking down silos between development and design.

Read it

Our Sponsor

Divi: Build Anything Visually

Divi is powered by the Divi Builder, an insanely fast and incredibly intuitive front end editor like nothing you have seen before. It will change the way you build websites forever.

Try it

Glicky

Glicky is an in-browser task runner for modern web development.

Check it out

Svelte 3: Rethinking reactivity

Read all about the new Svelte 3, the component framework that runs at build time.

Read it

Commit messages guide

A guide to understanding the importance of commit messages and how to write them well.

Read it

Only CSS: 3D Scan

A stunning demo of a 3D scan animation made only with CSS. By Yusuke Nakaya.

Check it out

Inclusively Hidden

Scott O’Hara highlights the methods of hiding content that are most appropriate for modern web development, and notes the accessibility impacts of each.

Read it

Sketch vs Figma, Adobe XD, And Other UI Design Applications

Ashish Bogawat summarizes the unique features of the new Sketch alternatives.

Read it

MockIt

MockIt gives you an interface to configure and create mock APIs for your applications.

Check it out

CORS Tutorial: A Guide to Cross-Origin Resource Sharing

Learn all about Cross-Origin Resource Sharing, how it protects you, and how to enable CORS in your applications. By Steve Hobbs.

Read it

Tiny Mirror

Davy Wybiral made an insane little webcam, right inside of a favicon! Check out the demo.

Check it out

Introducing Mozilla WebThings

Ben Francis introduces Mozilla WebThings, an open platform for monitoring and controlling devices over the web.

Read it

Fading out siblings on hover in CSS

Trys Mudford shows how to make a special hover effect with a neat trick.

Read it

Getting started with Javascript – The right tools and resources

Chris Heilmann talks about how to get started with Javascript, and where to find the right resources. You can read the transcript here.

Watch it

Mouse Trail

Noah Yamamoto explains how to create an artsy mouse trail animation.

Read it

GB Studio

A free and easy to use retro adventure game creator for your favourite handheld video game system.

Check it out

Giving Generative Art Its Due

Jason Bailey writes about Automat und Mensch, a show on the history of generative art.

Read it

Naming things to improve accessibility

Hidde de Vries explains how browsers decide on the names for links, form fields, tables and form groups.

Read it

AI4Animation – for JavaScript & Three.js

A port of the AI4Animation project, for use with Three.js on the web. It explores the possibilities of using artificial intelligence to generate realtime character animations.

Check it out

Direction aware hover effect

Tobias Reich made this great hover effect that starts from where you hover with the mouse.

Check it out

From Our Blog

How to Create and Animate Rotated Overlays

A tutorial on how to create and animate rotated overlays, or “reveal” elements, for interesting page transition effects.

Read it

Collective #510 was written by Pedro Botelho and published on Codrops.

It's the second week of the Color Palettes challenge!

Last week, we kicked off the month with a color palette that was just peachy! Check out the Pens from the first week of the challenge in our collection #CodePenChallenge: Peach Beach 🍑.

January Challenge Sponsor: Monday.com

A new way to manage your work. Plan. Organize. Track. In one visual, collaborative space.

With monday.com, you can manage all of your projects in a single place. See projects at a glance, stay on top of your schedule, and collaborate better with your team.

Week Two Prompt: Primary Colors 🍎

This week we're going back to basics with the primary colors red, blue, and yellow in these shades: #F44336, #1E88E5, #FDD835.

Your Challenge

Create a Pen inspired by this week's palette. You could choose to only use these colors, or use them as a starting point to experiment with a wider palette.

How to Participate

Create a Pen and tag it codepenchallenge and the weekly tag cpc-primary. We'll gather those Pens into a collection and share our favorites on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).

Ideas

In-browser paint tools are fun! Create a paint tool that features red, blue, and yellow on the palette.
These three colors happen to be part of the Material Design color palette. Could you build a clean, Material-style UI with the primaries?
Explore or explain how these three colors blend together to create new colors.

Resources

Building a painting tool? Check out Frank Dip's Pixel Art Maker or Mona La's Paint Blocks for inspiration.
Read about how the color system works in Material Design. You can grab light and dark variants from CodePen's built-in design assets.
Digging into color blending? Check out how painters mix colors on a real palette, and take a peek at the blending on Letter mix blend mode from Tobias Reich.

The post #CodePenChallenge: Primary Colors 🍎 appeared first on CodePen Blog.