Folio.Transitions

26.04.2019

Out of the box page & section transitions with Foliodot.

Made with: HTML

View Code

Folio.Transitions

Fully Interactive Smartphone

26.04.2019

Password is 1111 and you can change it in the settings.

Made with: HTML,CSS,JS

View Code

Fully Interactive Smartphone

Page Loaders

26.04.2019

Page loaders pure CSS.

Made with: HTML

View Code

Page Loaders

Deals Management Dashboard For Account Managers

26.04.2019

Made with: HTML,CSS (SCSS),JS

View Code

Deals Management Dashboard For Account Managers

Tab Bar Expand Button

26.04.2019

A tab bar with an expanding middle button.

Made with: HTML,CSS (SCSS),JS

View Code

Tab Bar Expand Button

Gradients Collection Preview

26.04.2019

Used CSS variables and flexbox.

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

View Code

Gradients Collection Preview

Gradients Collection Preview

26.04.2019

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

View Code

Gradients Collection Preview

Banner Animation: Video Game Images

26.04.2019

Made with: HTML,CSS

View Code

Banner Animation: Video Game Images

Quick Loader With Css Transforms, Vars & Houdini Magic

26.04.2019

Uses Houdini to animate the scaling factor --sx of the bars, so it only works in Chrome with the Experimental Web Platform features flag enabled.

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

View Code

Quick Loader With Css Transforms, Vars & Houdini Magic

User Card

25.04.2019

Simple user card with details.

Made with: HTML,CSS

View Code

User Card

Flexible, Full-Width, Justified Text Blocks

25.04.2019

Thanks to CSS Flexbox and JavaScript, this example stretches each line of a block quote the full width of its container and resizes the font accordingly. CSS Grid allows for placing end-of-line punctuation next to lines without interrupting the visual quadrangle made by the letters.

Made with: HTML,CSS,JS

View Code

Flexible, Full-Width, Justified Text Blocks

Back In Black

25.04.2019

Made with: HTML,CSS

View Code

Back In Black

Tooltips

24.04.2019

Nice top, bottom, left and right tooltips with pure CSS.

Made with: HTML

View Code

Tooltips

The More Menu

24.04.2019

Using clip-path times two to make an irregular shaped object fill out a cut-out shape in an unfold open menu effect.

Made with: HTML,CSS

View Code

The More Menu

Responsive And Two Related Carousels

24.04.2019

Vue-agile is a carousel component for Vue.js inspired by Slick. Simple, touch-friendly, written in Vue and Vanilla JS (without jQuery dependency).

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

View Code

Responsive And Two Related Carousels

Shape-Outside + Grid - Steps

24.04.2019

Made with: HTML,CSS

View Code

Shape-Outside + Grid - Steps

Css3 Animation Preloaders

23.04.2019

CSS3 animations preloaders, no JS, no images.

Made with: HTML

View Code

Css3 Animation Preloaders

Alert Accent

23.04.2019

Made with: HTML,CSS

View Code

Alert Accent

Notification Badge

23.04.2019

A notification badge to show really important emergency messages.

Made with: HTML,CSS

View Code

Notification Badge

Simple Blockquote Style

23.04.2019

Bootstrap blockquote style.

Made with: HTML,CSS (SCSS)

View Code

Simple Blockquote Style