Front-End Design Elements
October 26, 2017 ยท View on GitHub
Curated list of Front-End Design Elements
Table of contents
Contents
Background
- interactive mosaic background: Intercative mosaic background.
- blurred background : Small text box will be blurred while background remains same.
- parallax scrolling : Background will be in parallax.
- connect three : Connected points following mouse movements.
- gravity points : Pixels will chase you on mouse click.
- animated background gradient : Changes colour automatically.
- floating cloud : Clouds moving in background.
- Particle trails : Growing random particle movement from the center.
- Teleportation : Hypnotic effect causing background effect.
Text
- cloudy text : Text will be made of clouds.
- moving masked background : Text mask background movement on mouse movement.
- CSS text shadow : Provides text shadow using CSS.
- Glitch effect : Provides retro gitch look to text.
- Hover effects on the title : Great CTA hover effect
- 3D font : Convers font to 3D on button click.
- HI : Moving HI typeface.
Clocks
- QLOCKTWO : Present time is indicated using texts ligthing up.
- Working clock : Clock with both text and hands.
- Countdown clock : Flip countdown clock.
- Mother flippin clock : Text clock with awesome design.
- Rotate clock : Rotate clock made using only css.
- Waterclock : Materalize clock with water like effects.
- Powered clock : CSS variable powered clock.
NavBar
- Responsive Parallax Navbar Logo - Bootstrap : Decreasing header size as you scroll down.
- Navbar Transition on Scroll : Navbar transition occurs when scrolled.
- Bootstrap Navbar with Logo Centered Above : Navbar with stylish logo centered above.
- Bootstrap Navbar Toggle Show/Hide : Hides the navbar on a button click.
- Navigation button : Sub-menus which help in quick navigation.
Footer
- Sticky Footer : Footer always stays at the bottom.
- Header/Footer Parallax Effect : Parallax effect on both header and footer.
- CSS "Always on the bottom" Footer : Footer not fixed to the viewport while always on bottom.
- Responsive CSS Sticky Footer with a touch of jQuery : Footer always stay at the bottom but responsive.
- Sticky Footer Magic : Simple CSS sticky footer.
Icons
- Font Awesome Colored - Brand And Social Icons : Colored social icons with awesome animations.
- Rotating Icon Buttons : Icon buttons rotates when pointer is on it.
- Social media hover icons with pop-up titles : Pop-up titles appear when hovered over social media icons.
- Social Icons : Large social media icons with animations.
Menu
- iOS style sliding menu : Menu appears from lefthand side of the screen.
- Gooey Menu : Stylish menu appears when clicked on button.
- Pull Menu - Menu Interaction Concept : Menu which is pulled down to view.
- Touch device jelly menu concept : Menu with awesome jelly like effect.
Sidebar
- Elastic SVG Sidebar Material Design : Sidebar with elastic effect when pulled.
- Sidebar slide-in-out effect : Awesome slide in-out effect when clicked on button.
- Fixed width sidebar responsive layout : Sidebar with fixed width and content with responsive width.
- Offcanvas sidebar menu with a twist : Sidebar menu which appears in a rotating manner.
- Secret Project : Materialize based sidebar.
Cards
- Material Design - Responsive card :Responsive cards with description when clicked on button.
- Google Now Inspired Flip Cards : Awesome google now styled flipping cards.
- Material Design Cards : Simple looking cards with various size options.
- Flip - card memory game. : Cards flip like those in the memory games.
Signup
- Sign Up : Awesome sign up page.
- Login and Signup
Hover Effects
- Material Design Click Effect : Buttons light-up when clicked.
- Info on Hover : When hovered over give more info about the word/img/element.
- Layered Button : Button transforms in a 3-d layered structure when hovered over.
- Ratings : The emoji changes mood based on the rating given.
- Boder Transformation : The borders transforms when hovered
- List Hover : Hover over lists to make it stand out from the rest.
- Sliding the Element : Slide the Button/Element for its functionality.
License
To the extent possible under law, Gautham Santhosh has waived all copyright and related or neighboring rights to this work.