Details And Summary

15.05.2018

HTML frequently asked questions layout.

Made with: HTML,CSS (PostCSS)

View Code

Details And Summary

Responsive Web Page Split Screen

15.05.2018

Responsive web page with a "Split Screen" style by using only CSS. Made with HTML <details> and <summary>. Try it in small screen.

Made with: HTML,CSS

View Code

Responsive Web Page Split Screen

Html Details And Summary

15.05.2018

Simple frequently asked questions template.

Made with: HTML,CSS,JavaScript

View Code

Html Details And Summary

<Details> And <Summary>

15.05.2018

Simple example with HTML details and sammary.

Made with: HTML (Haml),CSS (Sass)

View Code

<Details> And <Summary>

Radial Gradient Spotlight Effect

15.05.2018

This pen shows how CSS radial gradients can be used to create a focusable spotlight effect.

Made with: HTML

View Code

Radial Gradient Spotlight Effect

Radial Gradient Spotlight Effect

15.05.2018

This example shows how CSS radial gradients can be used to create a focusable spotlight effect.

Made with: HTML,CSS,JS (Babel)

View Code

Radial Gradient Spotlight Effect

Menu Effect

15.05.2018

Reverse text color menu effects.

Made with: HTML,CSS

View Code

Menu Effect

Photorealistic Pure Css Mobile Phone

14.05.2018

Pure CSS mobile phone, based on iPhone X mockup. Everything is made by CSS, no SVG, no base64.

Made with: HTML,CSS (Stylus)

View Code

Photorealistic Pure Css Mobile Phone

<Details> And <Summary>

14.05.2018

Quick and dirty sketch of details accordion.

Made with: HTML (Haml),CSS (Sass),JavaScript (Babel)

View Code

<Details> And <Summary>

Breadcrumbs & Tabs

14.05.2018

A fusion between breadcrumbs & tabs creates a new kind of Rolodex-like navigation. Built with clip-path to cut out tabs and inset box-shadow to create depth.

Made with: HTML,CSS,JS

View Code

Breadcrumbs & Tabs

Bucket List Destinations

14.05.2018

Yet another example with HTML details and summary tags.

Made with: HTML,CSS (SCSS)

View Code

Bucket List Destinations

Digital Monopoly Properties

14.05.2018

Idea for using the details and summary tags.

Made with: HTML,CSS

View Code

Digital Monopoly Properties

A Detailed Summary Of Life

14.05.2018

A detailed summary of life with <details> & <summary>.

Made with: HTML,CSS (SCSS)

View Code

A Detailed Summary Of Life

Gracefully-Degrading <Details> Accordion

14.05.2018

The details element provides a very easy and accessible implementation of the accordion, one of the most common UI components. The problem is that the default functionality is anything but smooth. Here I've tried to solve this issue with a nice ES6 class which expands the element's functionality without breaking accessibility.

Made with: HTML,CSS (SCSS),JavaScript

View Code

Gracefully-Degrading <Details> Accordion

Same Height Cards

13.05.2018

Same height cards with CSS flexbox and hover effect.

Made with: HTML,CSS

View Code

Same Height Cards

Dashboardcode Multiselect Plugin For Bootstrap 5

13.05.2018

BsMultiselect is "multiselect input" plugin that reuses your Bootstrap 4 theme and doesn't bring its own css (unless you would like to add it).

Made with: HTML,CSS,JS

View Code

Dashboardcode Multiselect Plugin For Bootstrap 5

Flexbox Cards

13.05.2018

Same height cards with hover effect.

Made with: HTML,CSS

View Code

Flexbox Cards

Tic Tac Toe

13.05.2018

Made with: HTML,CSS,JS (Babel)

View Code

Tic Tac Toe

One Element Css Spinners

13.05.2018

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

View Code

One Element Css Spinners

Css 3D Flip Cards

12.05.2018

CSS 3D diagonal flip cards.

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

View Code

Css 3D Flip Cards