Card Ui Skeleton Screen

9.08.2017

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

Card Ui Skeleton Screen

The Iphone X Css Illustration

8.08.2017

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

The Iphone X Css Illustration

Gooey Button Hover Effect With Svg Filters & Css

8.08.2017

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 Hover Effect With Svg Filters & Css

Gooey Button

8.08.2017

Gooey button hover effect with SVG filters & CSS.

Made with: HTML,CSS

View Code

Gooey Button

Css-Only Numbered Lists With Drop Shapes

8.08.2017

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

Made with: HTML (Pug),CSS

View Code

Css-Only Numbered Lists With Drop Shapes

Product Card Ui

8.08.2017

Product card UI in pure CSS.

Made with: HTML,CSS

View Code

Product Card Ui

Css-Only Numbered Lists With Drop Shapes

8.08.2017

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

Made with: HTML (Pug),CSS

View Code

Css-Only Numbered Lists With Drop Shapes

Intersection Observer

7.08.2017

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

Intersection Observer

Zoom Image

6.08.2017

Zoom image with scale.

Made with: HTML

View Code

Zoom Image

Duotone Calendar

6.08.2017

Duotone image with SVG filter.

Made with: HTML

View Code

Duotone Calendar

Scrolling Half By Half

6.08.2017

Scrolling half by half in pure CSS.

Made with: HTML,CSS

View Code

Scrolling Half By Half

Pure Css3 Checkboxes With Fontawesome

6.08.2017

Pure CSS3 checkboxes with FontAwesome and transitions.

Made with: HTML,CSS (SCSS)

View Code

Pure Css3 Checkboxes With Fontawesome

Responsive Css Vertical Slider With Thumbnails

5.08.2017

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

Responsive Css Vertical Slider With Thumbnails

Animated Weather Icons

5.08.2017

Animated weather icons in HTML, SVG and CSS.

Made with: HTML,CSS

View Code

Animated Weather Icons

Css Perspective

5.08.2017

Made with: HTML,CSS (SCSS)

View Code

Css Perspective

Sliding Diagonals Background Effect

4.08.2017

An animated background under the content.

Made with: HTML,CSS

View Code

Sliding Diagonals Background Effect

Flexbox Image Slider

3.08.2017

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

Made with: HTML

View Code

Flexbox Image Slider

Vue Time Comparison

3.08.2017

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

Vue Time Comparison

Flexbox Image Slider

3.08.2017

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

Made with: HTML,CSS (SCSS),JS

View Code

Flexbox Image Slider

Morphing Tab Button With List

3.08.2017

Morphing button with a dropdown list beneath it.

Made with: HTML

View Code

Morphing Tab Button With List