- Read more: 131 CSS Cards Collections: Free Code + Demos
131 CSS Cards Collections: Free Code + Demos
In the evolving landscape of web design, CSS Cards stand out as a pivotal UI component, seamlessly bridging aesthetics with functionality. Often referred to as Styling Cards, Web Cards, or even Thumbnail Cards, they have become integral to modern Front-end Development. Originating from frameworks and design philosophies like Bootstrap and Material Design, CSS Cards encapsulate…
- Read more: CSS Button: download progress interaction
CSS Button: download progress interaction
Download progress interaction is developed using CSS and JavaScript. Beautiful animation is shows the status of the progress with percentage. When user clicks the button with down arrow, arrow hided and the button moved to left and shows with download icon with animation.
- Read more: Different alert messages with icons
Different alert messages with icons
Alert message developed using only css and icons are coming from font awesome. Icons and cancel buttons are animated using css.
- Read more: Spotify wrapped Text effect
Spotify wrapped Text effect
Spotify wrapped Text effect developed using only CSS. Text effects Created using HTML and CSS.
- Read more: HTML Audio Player
HTML Audio Player
This is the music player and can utilized as a play list. This can play only one at a time. Audio player is created using HTML, CSS, JS.
- Read more: All side scroll effects
All side scroll effects
This sliding demo will show how to scroll all sides. Up, down, left, right scroll effects created using CSS, HTML and JavaScript.
- Read more: Beautiful Social Card animation with Uneven background and borders
Beautiful Social Card animation with Uneven background and borders
Beautiful uneven circle/Borders around the social cards with rotating animations using only HTML and CSS. Mouse hove to see the social color in background filled with colors all around the borders.
- Read more: Section design cards with hover effect
Section design cards with hover effect
Creative card design function created using HTML, CSS and JS. Hover the card to see animation effects with beautiful animated background.
- Read more: CSS Split text with shadow
CSS Split text with shadow
Best way to show the text in beautiful shadow and with splitted text. Split text created using HTML (Pug) and CSS (Stylus). Clean code and can be used as a logo too 🙂
- Read more: Realistic 3D Photo Card Gallery
Realistic 3D Photo Card Gallery
Cool 3d photo gallery developed using HTML (Pug), CSS (Scss), JS (Babel) and Vue.Js. To see the effect, mouse hover any image and see the 3d effects when pointer is zig zagged.
- Read more: 3d Text effect using only css3
3d Text effect using only css3
This animated text effects developed using css and html. 3d effects and animations are achieved using SCSS variables. This zig zag 3d text effects will start the animation in different durations.
- Read more: Download Button with loader Animation
Download Button with loader Animation
Download button with loading animations. On click the down arrow button, the arrow will be go up and pull the screen down and once the screen down the tick icon will be shown with animation.
- Read more: CSS Grid: Magazine Layouts with Back and Next navigation options
CSS Grid: Magazine Layouts with Back and Next navigation options
The Magazine Layouts can be navigate to back and next by Clicking ‘Next’ and ‘Back’ link on the top right to see more layouts.