DEV Community: Drawcard

CodePen Challenge: Pool Rules

Drawcard — Mon, 09 Aug 2021 09:11:07 +0000

CODEPEN CHALLENGE:
https://codepen.io/challenges/2021/august/1

DEV TIME: 2.5 hrs

FEATURES:

Screws are 100% CSS
Material icon font for the icons

CodePen Challenge: Fibonacci Sequence

Drawcard — Mon, 09 Aug 2021 09:08:55 +0000

CodePen Challenge:
https://codepen.io/challenges/2021/july/4

DEV TIME: 2.5 hrs

FEATURES:

Flexbox layout utilising a golden mean ratio, that is derived from the Fibonacci sequence
Earthy colour palette, to match the imagery and suit a herbarium theme
Added mobile responsivness (<768px)
Nice hover effect on buttons
Thanks to Wikipedia for dummy content

(View full screen)

CodePen Challenge: Tessellations

Drawcard — Mon, 26 Jul 2021 09:48:53 +0000

This week's CodePen challenge called for repeating patterns, or tiles to be incorporated in the work. After some trial and error I managed to create a nice & repetitious folded paper effect using just CSS and the conic-gradient declaration.

CodePen Challenge: Textile Patterns

Drawcard — Mon, 26 Jul 2021 09:46:00 +0000

Our entry for this week's CodePen Challenge took the 4 supplied fabric swatches, and added a little bit more realism to them. We ended up mocking up a generative poster design for a fictitious textile exhibition - which changes layout every time the page is reloaded!

DEV TIME: 2 hours
FEATURES:

Added more linear gradients to create a 3d fabric texture
Used clip-path on the swatches to give them a ragged edge
Added some randomisation effects in JS to create a new layout every time the page is refreshed
Adapted script to add in random rotation & better grouping of elements, and adaption to mobile resolution

CodePen Challenge: Dots & Dashes

Drawcard — Mon, 12 Jul 2021 01:33:18 +0000

This week's CodePen Challenge is based on an open interpretation of the theme "Dots and Dashes".

As a solution to this, I decided to build on the theme of morse code, and create something interactive and educational.

Using a library, morse-decoder, I wrote a simple JS script that listens for key inputs, and then this is encoded into morse code and output on the screen. As a bonus, the audio version of that morse code character is also played.

Check it out here (click inside the preview below first, so the script can detect your key press!)

See the Pen CPC 2021-07-1 Dots & Dashes by Drawcard (@drawcard) on CodePen.

CodePen Challenge: Menu Layout

Drawcard — Mon, 12 Jul 2021 01:27:31 +0000

This week's CodePen challenge involves creating a digital menu for a café - taking a raw HTML file with no styling, and doing something creative with it. It's a great open brief with loads of possibilities, and we decided to answer it by creating a menu as it might appear in real life - with the added bonus of making fold down nicely for mobile displays.

Features

• Flexbox layout of 3 panels within a container
• CSS skew transform to create the 3d fold effect
• Global variables to define colour system, padding system etc.
• Mobile responsiveness with some overrides below 768px

Check out our design below, and be sure to view it in a mobile to see its responsiveness in action! Take a look at the HTML and CSS to see how we answered the problem.