Pens from Nick Piesco https://codepen.io/nickpiesco/ en nospam@codepen.io Copyright 2024 2018-10-15T02:05:19-07:00 Literary Constellations https://codepen.io/nickpiesco/pen/GYNNBG https://codepen.io/nickpiesco/pen/GYNNBG Nick Piesco

See the Code - See it Full Page - See Details

This is based on the work of self-described designer and data geek [Nicholas Rougeux](https://www.c82.net/). His [Literary Constellations](https://www.c82.net/work/?id=357) takes the first sentences from each chapter of classic novels and creates a ‘star chart’ based on the lengths of the words and their parts of speech. This version works on *your* literature, taking the value of the input and generating an SVG ‘constellation’. Since detecting parts of speech isn’t really easily automatable, I select a random angle from the nine possible ones that he uses. This can create some collisions and messy results, so feel free to keep banging on that ‘Go’ button until you find something you like.

]]>
Literary Constellations 2018-10-15T02:05:19-07:00
CSS Grid Koru https://codepen.io/nickpiesco/pen/LBXeLz https://codepen.io/nickpiesco/pen/LBXeLz Nick Piesco

See the Code - See it Full Page - See Details

This is inspired by the work of Kiwi artist [Gordon Walters](http://www.art-newzealand.com/Issues1to40/walters.htm), specifically [this study](https://collections.tepapa.govt.nz/object/699555) for his 1984 piece [Kapiti](https://www.aucklandartgallery.com/explore-art-and-ideas/artwork/11848/kapiti). I used a repeating gradient for the background and CSS Grid (plus what turned out to be some surprisingly convoluted logic in JS) to place the individual [koru](https://teara.govt.nz/en/photograph/2422/the-koru). Thanks to the magic of subpixel rendering, though, the edges don’t *quite* line up sometimes, and I couldn’t be bothered to re-write it to add a bunch of unnecessary `div`s, so please enjoy the wabi-sabi. Click the button to re-shuffle.

]]>
CSS Grid Koru 2018-09-30T21:19:30-07:00
1967 Fiat Range https://codepen.io/nickpiesco/pen/OwzMwr https://codepen.io/nickpiesco/pen/OwzMwr Nick Piesco

See the Code - See it Full Page - See Details

This is a reconstruction of a 1968 advertisement for [Fiat](https://www.fiat.com/) by the Swiss designer [Armin Vogt](http://www.armin-vogt.ch/). I saw it pop up on [Twitter](https://twitter.com/Patrick_Myles/status/1015937606138368001) a little while back and thought it might make a neat CSS Grid exercise. I initially used CSS variables for the colours and measurements, but the repetition the markup required meant it made a lot more sens to port it to Sass and write a mixin for the position and length of the ‘chunks’, as I called them. If you’re interested in more about this pioneering ad campaign, there’s a [short PDF](http://www.armin-vogt.ch/fileadmin/images/downloads/TheCreationOfTheFIAT-Logo1968.pdf ) on Vogt’s website.

]]>
1967 Fiat Range 2018-07-30T21:17:04-07:00
CSS Grid Tiles https://codepen.io/nickpiesco/pen/oWbxbY https://codepen.io/nickpiesco/pen/oWbxbY Nick Piesco

See the Code - See it Full Page - See Details

[Present and Correct](https://www.presentandcorrect.com) constantly posts super-inspiring stuff on Twitter and Instagram. [This photo of a wall in Porto](https://www.instagram.com/p/BSTwViCjBQ7/) inspired me to lay my own tile using CSS Grid and some JavaScript. (I never liked grouting anyway.) If the arrangement doesn’t suit your fancy, keep pressing the button until it does.

]]>
CSS Grid Tiles 2017-04-19T19:23:27-07:00
CSS Grid Calendar https://codepen.io/nickpiesco/pen/pRWzEv https://codepen.io/nickpiesco/pen/pRWzEv Nick Piesco

See the Code - See it Full Page - See Details

Learning my way around [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/), using Massimo Vignelli’s classic [Stendig Calendar](http://www.stendigcalendar.com/) as inspiration. (Don’t have CSS Grid enabled in your browser? [Here’s how to do it.](https://igalia.github.io/css-grid-layout/enable.html))

]]>
CSS Grid Calendar 2017-04-19T09:22:56-07:00
CSS-Only Tooltips https://codepen.io/nickpiesco/pen/MbxmEp https://codepen.io/nickpiesco/pen/MbxmEp Nick Piesco

See the Code - See it Full Page - See Details

These tooltips rely on the `data-tooltip` attribute to populate the content. There’s nothing super-fancy going on here with respect to how they’re positioned, although you may notice some funk when the tooltip-triggering text (try saying that three times fast) has a line break in it.

]]>
CSS-Only Tooltips 2016-12-20T22:17:08-07:00
Font-Weight Gradient https://codepen.io/nickpiesco/pen/RRzZjL https://codepen.io/nickpiesco/pen/RRzZjL Nick Piesco

See the Code - See it Full Page - See Details

I saw this type treatment in an in-flight magazine, and thought it might be neat to automate. The more `font-weight`s you have available, the better it works; but try it out with fewer weights and different string lengths.

]]>
Font-Weight Gradient 2016-08-29T01:04:03-07:00
Bow-Tie Callout https://codepen.io/nickpiesco/pen/MyXWmm https://codepen.io/nickpiesco/pen/MyXWmm Nick Piesco

See the Code - See it Full Page - See Details

The image of a callout from [this Medium article about the Asana rebrand](https://medium.com/building-asana/circling-ourselves-the-story-behind-asana-s-rebrand-e8247516705a) inspired me to try to build it with CSS. Playing with skew transforms, radial gradients, and text columns was pretty fun – re-size your browser to see the column count change.

]]>
Bow-Tie Callout 2016-04-19T00:41:08-07:00
Remove Hover Behaviour from Pseudoelements https://codepen.io/nickpiesco/pen/gPPXKR https://codepen.io/nickpiesco/pen/gPPXKR Nick Piesco

See the Code - See it Full Page - See Details

A demo from an old <a href="https://gist.github.com/nickpiesco/3738186">gist</a> needed a new home.

]]>
Remove Hover Behaviour from Pseudoelements 2016-01-09T18:59:03-07:00
Thick Lines: Sundown https://codepen.io/nickpiesco/pen/KVKBLz https://codepen.io/nickpiesco/pen/KVKBLz Nick Piesco

See the Code - See it Full Page - See Details

Inspired by <a href="http://www.draplin.com/">Aaron Draplin</a>’s <a href="http://www.draplin.com/1998/01/ddc114_thick_lines_poster_series.html">‘Thick Lines’ poster series</a>, I wanted to see if I could duplicate the magic with Sass. This uses another ‘box-shadow’ stepped gradient function, this time using an arglist.

]]>
Thick Lines: Sundown 2015-12-05T17:50:46-07:00