Limitation breeds creativity.

 

A temporary or lasting failure to put words on paper

Ernest Hemmingway

Ernest Hemmingway

For sale:

Baby shoes.

Never worn.

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?


<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>

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

– Lynn Fisher

<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);
}
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);
}
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);
}
body {
  counter-reset: game;
}

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

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

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

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

<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);
  }
}

linear

steps(5)

animation-timing-function

So much to learn!

Where do I start?

Intelligent people are more likely to show perfectionist tendencies.

You have to be bad at something, before you're good at it .

Join in pass the pen.

Send me your creations!

Limitation Breeds Creativity

By Cassie Evans

Limitation Breeds Creativity

  • 1,071
Loading comments...

More from Cassie Evans