Realistic Toggle Button
HTML and CSS realistic toggle button with little JavaScript.
Made with: HTML (Pug),CSS (SCSS),JavaScript
Book Layout
A responsive skeuomorph book layout, packed with fun little features.
Made with: HTML,CSS
Underline Effect
Pure CSS animated underline effect on several lines.
Made with: HTML,CSS (SCSS)
Submenu Expand
A playful animation expanding the submenu on the toolbar in web apps. Translates, fades and morphes SVG icons. Inspired by Virgil Panas more submenu transition on dribbble.
Made with: HTML
Pure Css Tabs
Radio version of tabs. Requirements: not rely on specific IDs for CSS (the CSS shouldn't need to know specific IDs), flexible for any number of unkown tabs [2-6], accessible. Caveats: since these are checkboxes the tabs not tab-able, need to use arrow keys.
Made with: HTML,CSS
Neon Text Effect
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari
Made with: HTML,CSS
Flex Panels
This boxes resize when clicked. Try to click more than one and see what happens.
Made with: HTML,CSS,JavaScript
Media Player Css Only
3D cube media player CSS only. Based on this awesome Dribbble shot by Balraj Chana.
Made with: HTML (Haml),CSS (SCSS)
Perspective Grid With Animation
This gallery utilizes CSS Grid Layout and CSS3 perspective to create something a little unique.
Made with: HTML (Pug),CSS (Sass),JavaScript
Text With Video Background
This demo explores creating knockout text/paths in SVG and looping a YouTube video as the fill.
Made with: HTML
Smooth 3D Perspective Slider
Responsive smooth 3D perspective slider on mouse move.
Made with: HTML/Pug
Gradient Underline Animation
Using a css background gradient and css animation this allows the animation of a link underline to carry across multiple lines. This previously would be achieved using the :pseudo elements. However doing this over multiple lines proved tricky.
Made with: HTML
