Front-End Design Elements

Curated list of Front-End Design Elements

Table of contents

• Background
• Text
• Clocks
• NavBar
• Footer
• Icons
• Menu
• SideBar
• Cards
• SignUp
• Hover Effects

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.