Search Input Animation

29.03.2015

Search input animation (pure css, without svg). Added variables for width, height and border-width, so now you can easily change overall dimensions of this search input. This demo have only one problem - no input autofocus after opening click.

Made with: HTML,CSS (SCSS)

View Code

Search Input Animation

Bootstrap Buttons

28.03.2015

Bootstrap button custom styles with SCSS. Style guide for custom projects.

Made with: HTML,CSS (SCSS),JS

View Code

Bootstrap Buttons

Fancy Blockquote Style

28.03.2015

Made with: HTML,CSS (SCSS)

View Code

Fancy Blockquote Style

Fly-Out Nav

27.03.2015

Made with: HTML,CSS (SCSS)

View Code

Fly-Out Nav

Star Rating For Email

26.03.2015

A star rating system that works in email clients (including Gmail!) Hovering over the stars fills in the correct amount. Each star is an anchor tag which can then be linked to different rating URLs (ex: http://www.example.com?rating=5).

Made with: HTML,CSS

View Code

Star Rating For Email

Battery Charging Animation With Liquid

25.03.2015

Made with: HTML,CSS (SCSS)

View Code

Battery Charging Animation With Liquid

Css Flowchart

25.03.2015

Pure CSS flowchart.

Made with: HTML,CSS

View Code

Css Flowchart

React Vertical Timeline

24.03.2015

Made with:

View Code

React Vertical Timeline

8 Bit Spinner

23.03.2015

Pixelated circular loader with box-shadow.

Made with: HTML (Haml),CSS

View Code

8 Bit Spinner

Input Type=Range #99

21.03.2015

Customized range slider with HTML, CSS and JS.

Made with: HTML,CSS (SCSS),JavaScript

View Code

Input Type=Range #99

Responsive Css Chat

21.03.2015

Made with: HTML,CSS

View Code

Responsive Css Chat

Stylish Social Buttons

20.03.2015

A few cool social buttons with smooth animations.

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

View Code

Stylish Social Buttons

Audio Player

20.03.2015

Made with: HTML,CSS,JS

View Code

Audio Player

Fully Responsive Css3 Sidebar Menu

19.03.2015

A fully responsive sidebar menu without any need of JavaScript and using less than 200 lines of functional CSS code.

Made with: HTML,CSS (Less)

View Code

Fully Responsive Css3 Sidebar Menu

Input Type=Range #98

19.03.2015

Range slider #98 in HTML, CSS, JS by Ana Tudor.

Made with: HTML,CSS (SCSS),JavaScript

View Code

Input Type=Range #98

Star Trek Lcars-Style Ghost Buttons

19.03.2015

These buttons are inspired by the computer interface seen in Star Trek with a bit of added transition effects on hover. The left and right values define the numerator and denominator of the border radius for the transition effects.

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

View Code

Star Trek Lcars-Style Ghost Buttons

Jumpy Book Shelf

19.03.2015

This animation is purely an easter egg. We try and put in a little unexpected fun wherever we can when designing our products. This was part of the Helix Cup web app we just launched where one of the experience tenants was simply: ‘fun’. The books were used on a downloadable resource panel, but if you happen to move your mouse over them, they will jump!

Made with: HTML,CSS (SCSS)

View Code

Jumpy Book Shelf

Css Radial Menu

18.03.2015

Hover the burger to expand radial menu. Only CSS with transitions and transfroms. The radial menu system is responsive according to the viewport height/width.

Made with: HTML,CSS

View Code

Css Radial Menu

Google Now Inspired Flip Cards

17.03.2015

Google Now style info cards with CSS card flip animation and jQuery.

Made with: HTML,CSS (SCSS),JS

View Code

Google Now Inspired Flip Cards

Input Type=Range #96

17.03.2015

Range slider #96 in HTML, CSS, JS by Ana Tudor.

Made with: HTML,CSS (SCSS),JavaScript

View Code

Input Type=Range #96