Search Input Animation
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)
Bootstrap Buttons
Bootstrap button custom styles with SCSS. Style guide for custom projects.
Made with: HTML,CSS (SCSS),JS
Star Rating For Email
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
Input Type=Range #99
Customized range slider with HTML, CSS and JS.
Made with: HTML,CSS (SCSS),JavaScript
Stylish Social Buttons
A few cool social buttons with smooth animations.
Made with: HTML (Pug),CSS (Stylus)
Fully Responsive Css3 Sidebar Menu
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)
Input Type=Range #98
Range slider #98 in HTML, CSS, JS by Ana Tudor.
Made with: HTML,CSS (SCSS),JavaScript
Star Trek Lcars-Style Ghost Buttons
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)
Jumpy Book Shelf
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)
Css Radial Menu
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
Google Now Inspired Flip Cards
Google Now style info cards with CSS card flip animation and jQuery.
Made with: HTML,CSS (SCSS),JS
Input Type=Range #96
Range slider #96 in HTML, CSS, JS by Ana Tudor.
Made with: HTML,CSS (SCSS),JavaScript
