Card Ui Skeleton Screen

This creates a skeleton of a card component using CSS custom properties to draw different gradients on the background-image. Skeleton screens can be used to improve perceived performance while loading.

Made with: HTML,CSS (SCSS)

View Code

The Iphone X Css Illustration

This is a design based on the leaks of the iPhone X. All the design is made with pure CSS. No PNGs or vectors. Enjoy inspecting.

Made with: HTML,CSS

View Code

Gooey Button Hover Effect With Svg Filters & Css

Uses the "gooey" SVG filter on top of a button element, and pseudo-elements with hover transitions for "bubbles".

Made with: HTML,CSS

View Code

Gooey Button

Gooey button hover effect with SVG filters & CSS.

Made with: HTML,CSS

View Code

Css-Only Numbered Lists With Drop Shapes

Styled numbered list using CSS counters and pseudo elements for drop-shaped backgrounds.

Made with: HTML (Pug),CSS

View Code

Product Card Ui

Product card UI in pure CSS.

Made with: HTML,CSS

View Code

Css-Only Numbered Lists With Drop Shapes

Styled numbered list using CSS counters and pseudo elements for drop-shaped backgrounds.

Made with: HTML (Pug),CSS

View Code

Intersection Observer

API that can be used to understand the visibility and position of DOM elements relative to a containing element or to the top-level viewport. The position is delivered asynchronously and is useful for understanding the visibility of elements and implementing pre-loading and deferred loading of DOM content.

Made with: HTML (Pug),CSS (SCSS),JavaScript (Babel)

View Code

Zoom Image

Zoom image with scale.

Made with: HTML

View Code

Duotone Calendar

Duotone image with SVG filter.

Made with: HTML

View Code

Scrolling Half By Half

Scrolling half by half in pure CSS.

Made with: HTML,CSS

View Code

Pure Css3 Checkboxes With Fontawesome

Pure CSS3 checkboxes with FontAwesome and transitions.

Made with: HTML,CSS (SCSS)

View Code

Responsive Css Vertical Slider With Thumbnails

An experiment to create a completely responsive vertical slider with thumbnails using only CSS, and retaining the aspect ratio of the images.

Made with: HTML

View Code

Animated Weather Icons

Animated weather icons in HTML, SVG and CSS.

Made with: HTML,CSS

View Code

Css Perspective

Made with: HTML,CSS (SCSS)

View Code

Sliding Diagonals Background Effect

An animated background under the content.

Made with: HTML,CSS

View Code

Flexbox Image Slider

A simple Flexbox image slider/carousel made with vanilla JavaScript.

Made with: HTML

View Code

Vue Time Comparison

Using the browser's native API for .toLocaleTimeString to get rid of libraries like moment.js for world time that respects daylight savings. Made with Vue, SVG, GreenSock.

Made with: HTML

View Code

Flexbox Image Slider

A simple Flexbox image slider/carousel made with vanilla JavaScript.

Made with: HTML,CSS (SCSS),JS

View Code

Morphing Tab Button With List

Morphing button with a dropdown list beneath it.

Made with: HTML

View Code