Skip to main content
Ambient.Impact

Main navigation

  • Web dev
    • Services
    • Snippets
    • Why the web?
    • Components
    • Resources
    • Tags
  • Portfolio
  • Gaming
  • About
  • Contact

Breadcrumb

  1. Web development
  2. Tags

CodePen

Range sliders by Ana Tudor

A variety of horizontal range sliders, resembling various physical sliders, e.g. for sound volume.
Source link
https://codepen.io/collection/DgYaMj/
Tags
Forms - Sliders
CSS - Gradients
Design inspiration
CodePen

It's more than just the words, or owning your data and experimenting on your own site

As we move our code to CodePen, our writing to Medium, our photographs to Instagram we don’t just run the risk of losing that content and the associated metadata if those services vanish. We also lose our own place to experiment and add personality to that content, in the context of our own home on the web.

Source link
It's more than just the words - rachelandrew.co.uk
Tags
IndieWeb
CodePen
Medium
Instagram

Up & Down rotating sign on CodePen

A sign that reads "up", with an arrow pointing to the top right hand corner. The sign rotates along the z-axis to read "dn" with the arrow pointing to the bottom left corner. It then rotates again to the starting position.
Play this animated GIF
Source link
http://codepen.io/jonbp1993/pen/XprEZN
Tags
Canvas
JavaScript
Design inspiration
CodePen

Discoid on CodePen

A series of red, green, and white disco lights rotating in a perspective pattern.
Play this animated GIF
Source link
http://codepen.io/tmrDevelops/pen/ygBgVL
Tags
Canvas
JavaScript
CodePen

GloppyGoop

A screenshot of the linked Pen: many white blobs that stick to each other litter the screen, against a dark background. The blobs have various colours of rim lighting (around the edges).
Source link
GloppyGoop on CodePen
Tags
CodePen
JavaScript
Canvas
SVG
Design inspiration

Elastic border that responds to the pointer

A screenshot of the linked Pen: a solid pale blue on the left, and solid pale red on the right, with the transition being stretched in the middle towards the right, as if it were made of an elastic material.
Source link
Mouse elastic border on CodePen
Tags
Design inspiration
Canvas
JavaScript
CodePen
Subscribe to CodePen
  1. Find me on GitHub
  2. Find me on GitLab
  3. Find me on Drupal.org
  4. Find me on Mastodon
  5. Find me on Steam
  6. Find me on YouTube