Css Gradient Rounded Borders

9.04.2018

This example shows how CSS gradients can be applied to a rounded border.

Made with: HTML,CSS

View Code

Css Gradient Rounded Borders

Flipping Credit Card

8.04.2018

Flipping credit card centered using frexbox and 3d transformation.

Made with: HTML,CSS

View Code

Flipping Credit Card

One Page Scroll

8.04.2018

One page scroll. Not a single line of JavaScript!

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

View Code

One Page Scroll

Pure Css Rating

7.04.2018

Pure CSS rating via CSS custom properties as API.

Made with: HTML,CSS

View Code

Pure Css Rating

Horizontal Cards - Bootstrap 4

5.04.2018

Horizontal Bootstrap cards with carousel.

Made with: HTML,CSS,JS

View Code

Horizontal Cards - Bootstrap 4

Simple 3d Text Effect

5.04.2018

Skewed and rotated text.

Made with: HTML,CSS (SCSS)

View Code

Simple 3d Text Effect

Double Triangle

5.04.2018

Text cards with double triangles.

Made with: HTML,CSS (SCSS)

View Code

Double Triangle

Css / Svg Blobby Background

4.04.2018

Playing with SVG filters and masks, CSS for animation.

Made with: HTML,CSS (SCSS)

View Code

Css / Svg Blobby Background

Pac-Man Css Pagination

3.04.2018

Pure CSS Pac-Man pagination with animation on hover.

Made with: HTML,CSS

View Code

Pac-Man Css Pagination

Loader #11

2.04.2018

Cool loader in HTML and CSS.

Made with: HTML,CSS (SCSS)

View Code

Loader #11

Pacman Concept

2.04.2018

Made with: JavaScript (Babel)

View Code

Pacman Concept

Ionic Material Cards

2.04.2018

Ionic Material cards with Bootstrap.

Made with: HTML,CSS

View Code

Ionic Material Cards

"Draw In" Text Effect With Decovar

2.04.2018

Creating a "draw in" text effect with Decovar variable fonts. This uses a special version of Decovar that has a couple of letters set up to "draw in". No JS, Canvas or SVG required, this demo uses HTML, CSS and variable fonts.

Made with: HTML,CSS (SCSS)

View Code

"Draw In" Text Effect With Decovar

Css-Js Multi-Level Accordion

1.04.2018

A multi-level CSS and JS (jQuery) accordion. This has the feature to pre-open a list group on initial page load, by simply adding the is-open class to the list item that has has-children class. HTML and CSS are written using the BEM syntax.

Made with: HTML,CSS (SCSS),JS

View Code

Css-Js Multi-Level Accordion

Like Button

1.04.2018

Like button with animation in jQuery.

Made with: HTML,CSS,JS

View Code

Like Button

Css Slider

29.03.2018

CSS only slide gallery.

Made with: HTML,CSS

View Code

Css Slider

Sudoku With Material Design

28.03.2018

Pure JS and CSS Sudoku with material design.

Made with: HTML,CSS,JS

View Code

Sudoku With Material Design

Simple Pure Css Tabs

28.03.2018

You only need CSS.

Made with: HTML,CSS (SCSS)

View Code

Simple Pure Css Tabs

Flippy Cards

28.03.2018

Simple HTML and CSS flippy cards.

Made with: HTML,CSS (SCSS)

View Code

Flippy Cards

Animated Gradient Button

28.03.2018

Pure CSS call to action button with an animated background.

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

View Code

Animated Gradient Button