Search
Animated Triangles on Canvas JS HTML
Cool looking triangles animation using just canvas and js. Explanation of Code The code starts with the statement 'use strict'; which enables strict mode, a way to introduce better error..
CSS Drop Filter Shadow Creator
This page generates a nice css drop filter shadow with lots of options to change the shadow width and height and other various useful drop shadow settings. What does it do? It generates code l..
Create a button with CSS, HTML and Center it!
A nice quick video on how to create a button with css and center it. Going from a blank html page into a div element with a button in it and then centering the button and giving it some life wi..
Magical Text Effect
Add some sparkles to your text. Add some stars and rainbow colour effects to your text, source linked below.
Make your site look like windows 7
How can i make my website look like Windows 7? You can just add the Windows 7 CSS Framework to your site, and it will look like windows 7. Well almost like it, you will also have to add some custom c..
Using the selection selector to change the default highlight color
What is the selection pseudo selector? You can target this pseudo element to change the highlight color of selected text within the element. What can i use the selection pseudo selector for? You ca..
Radial Glow under cursor on box hover over effect
What is Radial Glow under cursor on box hover over effect? This code will allow the targeted boxes to have a radial glow effect on mouse over, so when you move your pointer over the box or element th..
Using a filter drop shadow for transparent images
Filter Drop Shadow vs Box Shadow in CSS with examples Filter Drop Shadow in CSS The filter drop-shadow CSS property is used to add a drop shadow to an element. The drop-shadow is applied to the elem..
button animations hover and fill animation
Why would i want to use animations on my buttons? Button animations can be used for a variety of reasons. They can be used to add aesthetic appeal to a website or web application, or to provide a vis..
Front-End Checklist
The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your website / HTML page to production. If you want to check your project for the best practi..
Silky Smooth Image Zoom and Lightbox
What is Silky Smooth Image Zoom and Lightbox? This is a nice and small javascript library that adds a image zoom or lightbox effect to your images, with no need for JQuery or any other scripts. ..
CSS Typing Effect using just CSS
Here is a typing animation, the only issue with this one is you need to add in the number of steps depending on the amount of characters in your string. So the text in the class typing-demo wil..
simple.css a nice simple and stylish framework replacement
What is simple.css? Simple CSS is a framework that you can just drop into your site, and it styles the actual html elements, so no class names are required for this out of the box, just add the scrip..
Add an Animated Gradient Border to any Element with CSS
Here is kinda a cool border gradient animated effect, spinning the background element using the rotate keyframes animation.
Lightweight and powerful image lightbox and previewer script
Lightweight and powerful javascript image preview plug-in, silky animation allows you to elegantly preview the images in your website. Out of the box, you don't need extra configuration (by default) o..
zoomist.js: Library for easy Image Zoom & Pan
What is zoomist.js? zoomist is a javascript library that adds some nice zoom controls to your selected image. Rather than popping out the image in a modal or some other kind of overlay it adds contro..
Menu items with reveal swipe hover effect
Here is a nice scrolling animated reveal effect on mouse over for menu items. Preview
Atropos Stunning touch-friendly 3D parallax hover effects
Atropos Atropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects. Preview Features Touch Friendly: Atro..
A Collection of Button Hover Over Effects
What is it? A Large collection of buttons with hover over animations and styles. What can i use this for? You can use these to make the buttons on your website or web project more animated Concl..
Add hovering text to your href links
What is it? Here we have a script that adds a Click Me Text above your links when they are hovered over or active. What can i use this for? Showing some additional information when your links..
Sun Reflection CSS and HTML Only
What is Sun Reflection CSS and HTML Only? This is a sun with an animated reflection done using css and html only What can i use this for? This could be modified to add some interest to a logo, or o..
Glass Effect using backdrop filter element in css
shows how you can add a frosted glass effect to your element using the backdrop-filter: blur(5px) i think the issue with backdrop filter is that is is not supported by a few browsers. Checking..
Sea Waves Ripple Effects 3D in HTML, CSS and Javascript
An example using three js to create some 3D waves simulation, its like looking at a lava lamp. Or one of those games from 10 years ago...
Ken Burns effect - pure css
a ken burns image effect with slow zoom in animations, you kind of look at this one and go, is that image actually moving, and yes, yes it is...
Shiny Button Animation
This makes your button flash a bit to bring some attention to it. Runs an animation with overflow set to hidden on the button to achieve this. You can play around with the background on the :be..
CSS Waves Footer Styling or Hero Element
CSS and HTML only version of CSS Waves
Pure CSS Background Element not on Body
this is a re-usable version of the animated css background element, so you can add this somewhere else rather than the body tag on your page.
Pure CSS Gradient Background Animation
this animated background element can give your project a bit more life, with a nive subtle background gradient changing effect that cycles slowly between the selected colours.
Glassmorphism Creative Cloud App Redesign
A full ui for Creative Cloud redesigned in html css and javascript, amazing work by Aysenur Turk. It even has responsive views, dark and light mode, and the tabs are functional.
Profile Card Hover Effect
Nice zoom and move effect on profile mouse over.
CSS Goey footer red blotched gloopy footer animation
Here we have an interesting animation added to the bottom of the footer area making it look kinda like its on fire, or paint glooping up from it. Nice effect, not sure where i would use this one, but ..
Text Morphing Animation SVG
Here is a nice text animation that could be used for a title, or home animated element. From the Author This pen cleverly utilizes SVG filters to create a "Morphing Text" effect. Essentially..
Scroll Trigger Parallax Clouds Snow
Another example of smooth animations using GSAP and Scroll Trigger. Good for scroll page animations. I cant get this one working correctly in the demo code, you will need to check out the pen ..
Card Hover Interaction Examples
Do you have boxes on your home page that need some new interactions.. Well go no further than these shiney boxes! :) Thanks to Ryan Mulligan for this code pen. Slightly tweaked and compiled t..
Animation Buttons - satisfying neumorphic animation designs
Some very nice examples of button animations using the neumorphic style of design. Check out the original codepen here.
Slide on Mouse Hover Over Effect
a very funky mouse in and out transition to the link. hmm this breaks my demo, i will have to investigate this. So anyway i like this effect, but its not that useful to have all of your H1 l..
Random Quote
