Limitation Breeds Creativity

@cassiecodes

Limitation breeds creativity.

A temporary or lasting failure to put words on paper

https://austinkleon.com/

Ernest Hemmingway

For sale:

Baby shoes.

Never worn.

https://twitter.com/jeffnoon

Decision Paralysis

the state of over-analyzing a situation

so that a decision or action is never taken.

Surveyor spacecraft

Phylis Buwalda

Hooray!

Umm.

where's the CSS?

https://codepen.io/cassie-codes

https://codepen.io/pen

https://css-tricks.com/gooey-effect/


<svg class="blobbyfilter">

  <filter id="gooey" height="130%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blur" />
    <feColorMatrix  in="blur" mode="matrix" values="..." result="goo" />
  </filter>
  
</svg>


<svg class="blobbyfilter">

  <filter id="gooey" height="130%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blur" />
    <feColorMatrix  in="blur" mode="matrix" values="..." result="goo" />
  </filter>
  
</svg>


<svg class="blobbyfilter">

  <filter id="gooey" height="130%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blur" />
    <feColorMatrix  in="blur" mode="matrix" values="..." result="goo" />
  </filter>
  
</svg>

https://codepen.io/pen

http://diana-adrianne.com/

https://a.singlediv.com/

I found it’s not always what tools you have to work with, but how you look at them

– Lynn Fisher

https://a.singlediv.com/

@nathantaylor

codepen link

<div class="game">
  <div id="goodObjects">
    <input type="checkbox" class="goodObject object">
  </div>

  <div id="badObjects">
    <input type="checkbox" class="badObject object">
  </div>
  
  <h3 class="score"></h3>
</div>

body {
  counter-reset: game;
}

.goodObject:checked {
  counter-increment: game 2;
}

.badObject:checked {
  counter-increment: game -1;
}

.score::after {
  content: counter(game);
}

body {
  counter-reset: game;
}

.goodObject:checked {
  counter-increment: game 2;
}

.badObject:checked {
  counter-increment: game -1;
}

.score::after {
  content: counter(game);
}

codepen link

body {
  counter-reset: game;
}

.goodObject:checked {
  counter-increment: game 2;
}

.badObject:checked {
  counter-increment: game -1;
}

.score::after {
  content: counter(game);
}

codepen link

body {
  counter-reset: game;
}

.goodObject:checked {
  counter-increment: game 2;
}

.badObject:checked {
  counter-increment: game -1;
}

.score::after {
  content: counter(game);
}

codepen link

body {
  counter-reset: game;
}

.goodObject:checked {
  counter-increment: game 2;
}

.badObject:checked {
  counter-increment: game -1;
}

.score::after {
  content: counter(game);
}

codepen link

body {
  counter-reset: game;
}

.goodObject:checked {
  counter-increment: game 2;
}

.badObject:checked {
  counter-increment: game -1;
}

.score::after {
  content: counter(game);
}

codepen link

body {
  counter-reset: game;
}

.goodObject:checked {
  counter-increment: game 2;
}

.badObject:checked {
  counter-increment: game -1;
}

.score::after {
  content: counter(game);
}

codepen link

When you restrict yourself to a limited toolset, you inevitably delve deeper into it

https://2019.uxlondon.com/

codepen link

<div class="glitch-container">
  <div class="glitch-img bottom"></div>
  <div class="glitch-img middle"></div>
  <div class="glitch-img top"></div>
</div>

.top {
  opacity: 1;
  animation: glitch-top 0.8s steps(3) alternate infinite; 
}

@keyframes glitch-top {
  0% { 
    clip-path: inset(24% 0 70% 0);
    transform: translateX(-5px);
  }
  50% {
    clip-path: inset( 31% 0 59% 0);
    transform: translateX(10px);
  }
  100% {
    clip-path: inset( 76% 0 18% 0);
    transform: translateX(-4px);
  }
}

.top {
  opacity: 1;
  animation: glitch-top 0.8s steps(3) alternate infinite; 
}

@keyframes glitch-top {
  0% { 
    clip-path: inset(24% 0 70% 0);
    transform: translateX(-5px);
  }
  50% {
    clip-path: inset( 31% 0 59% 0);
    transform: translateX(10px);
  }
  100% {
    clip-path: inset( 76% 0 18% 0);
    transform: translateX(-4px);
  }
}

.top {
  opacity: 1;
  animation: glitch-top 0.8s steps(3) alternate infinite; 
}

@keyframes glitch-top {
  0% { 
    clip-path: inset(24% 0 70% 0);
    transform: translateX(-5px);
  }
  50% {
    clip-path: inset( 31% 0 59% 0);
    transform: translateX(10px);
  }
  100% {
    clip-path: inset( 76% 0 18% 0);
    transform: translateX(-4px);
  }
}