Konstantin's public fiddles
-
Animated Prepopulation (concept) on Input Element
Animated Prepopulation. What if attention was brought to the actual prepopulation of form fields with animation?
-
Responsive Images (Using Srcset & Sizes)
No-Library (pure JS), HTML, CSS, JavaScript
-
Draggable/Sortable List
No-Library (pure JS), HTML, CSS, JavaScript
-
Floating Label (Using :placeholder-shown pseudo class)
Concept for floating label for the input element (using :placeholder-shown pseudo class and placeholder), When input is empty user doesn't see the label but when he starts typing the label appears above the input
-
substitute colors for red (like: crimson, firebrick, etc...)
Substitute more subtle color for red;
-
Using CSS Counters
Using CSS Counters for each checkbox to increment score when checkbox is clicked
-
Jumping Animation
Jumping animation using animation-direction: alternate and keyframes from 0 to 50%
-
Using :lang pseudo-class
Declaring :lang pseudo class without prefix it with other selector, will apply this style both on the parent and its descendants.
-
Following Eyes (attempt)
Idea for JS code was taken from: https://codepen.io/sergep/pen/rkcjt
-
Bulged-in Text Effect
No-Library (pure JS), HTML, CSS, JavaScript
-
The Fab Four Techinc (with max-width only)
No-Library (pure JS), HTML, CSS, JavaScript
-
Android Robot (CSS Image)
No-Library (pure JS), HTML, CSS, JavaScript
-
Mountain Landscape (#cssimage, css image)
No-Library (pure JS), HTML, CSS, JavaScript
-
Pinpoint (using rotate and border-botom-right-radius
No-Library (pure JS), HTML, CSS, JavaScript
-
Image Grid (using CSS custom variables)
No-Library (pure JS), HTML, CSS, JavaScript
-
Using Custom Variables (from within JS)
Using Custom Variables to move element according to the click on its parent.
-
A Lightbox Image Gallery Equivalent in CSS3
From Pro CSS Animation book. (Chapter 6, Page 97)
-
Transformed element has child with position fixed
If transformed element has a child with position: fixed; that child will treat the transformed element as its viewport.
-
Circular loader (using linear-gradient, pseudo-element and span)
No-Library (pure JS), HTML, CSS, JavaScript
-
Click on <a> link that doesn't jump to the top of the page
When user will click on the <a href="#x"> it won't jump to the top of the page. The secret is in the href value it should be value (id) that doesn't exists on the page e.g. href="#x"