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..
A CSS and HTML Only Carousel Slider
Why is it that sliders and carousels need a bunch of javascript and other css files to get them working? I have seen so many complex sliders with a lot of javascript and libraries that may not even b..
Overview full width section in Poppins font with light gray background using foundation
Quick overview full width section code. Lightgray and teal colours on white background.
Bootstrap 4.2 Kitchen Sink
Here is the full (almost full) collection of bootstrap elements in this kitchen sink code for bootstrap. Thanks to ycohio for this useful reference.
Create a modal with only CSS
and HTML... What is Create a modal with only CSS? Usually when creating a modal you need to use a javascript library or some javascript to show and hide and create the modal element. The following ..
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..
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..
Animate Stuff with Animate.css
What is Animate.css? Its a css only animation library, just add the css and the classes and your animation needs should be good to go. Preview a preview of Animate.css What can i use this fo..
Toast Messages and Notifications Standalone Library no JQuery - notify.js
What is notify.js? This is a small standalone javascript library that allows you to attach toast type messages that appear in the top right corner of your display with selected messages. Previ..
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. ..
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..
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..
Deep Links to highlight and share text on any page
Deep Links allows you to highlight text on the page, and will generate a URL hash to allow that text highlight to be shared to another browser. Example Link: Link 1 Just highlight some of the ..
Rounded Card Design with Shadow Palette
What is it? a nice rounded card design with a hero image on top, description text, hero title, more links and a shared by text area. Preview a preview of Rounded Card Design with Shadow Palet..
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..
WCAG Responsive Accessible Menu Dropdown Library
What is WCAG Responsive Accessible Menu? Here we have a javascript library with css and html that produces a responsive and mobile compatible dropdown navigation system. When the screen size goes int..
Slider Show - a standalone object and image slider
What is Slider Show ? Slider Show is a standalone image carousel and slider. You can add text and images into each item and the number of the slide, and it will switch between them. This library..
Micro Modal a tiny animated light accessible modal script
What is Micro Modal? Micro Modal is a Tiny, dependency-free javascript library for creating accessible modal dialogs The aim of this library is to make modal dialogs accessible and easy to include i..
Easy Cookie Consent Modal Popup Window
A lightweight & gdpr compliant cookie consent plugin written in plain javascript. An "all-in-one" solution which also allows you to write your cookie policy inside it without t..
Neumorphic Analog Clock
Here is a working Neumorphic Analog Clock from here. Gif Example:
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..
Amazing Stripe Website Gradient Animation
What is it? An animated background using javascript html and css to achieve. What can i use this for? You could use is on the background in your website, or maybe on a hero type image. ..
Punica pure CSS Framework
Punica CSS is a clean, lightweight, responsive, modern and fully customizable (even class names) pure CSS Framework based on SASS/SCSS with multi-theme support. What is Punica? Pu..
Lightbox for Bootstrap 5
A pure JavaScript Bootstrap 5 lightbox that supports images, galleries, YouTube, Vimeo, and Instagram—built around Bootstrap's Modal and Carousel plugins. Have you been using Lightbox for ..
Nighttime Flows Animated SVG Background
What is Nighttime Flows Animated SVG Background This is an animated SVG which is generated by this other pen here that generates a random SVG, when clicked it mentions to check the menu for the SVG b..
Animated Success Button with Confetti
What is Animated Success Button with Confetti? This is a success button, well an action button that has a loading function as well as a success message and confetti when clicked, all contained within..
Project Management Dashboard UI Elements
Very slick Project management dashboard, showing some amazing UI Elements. Features Dark and Light Mode Listing Modes, in grid vs list Client Messages Popout section This is all in pure h..
checkbox groups with icons that highlight when checked
Here we have a nice way to layout some checkboxes in group format, giving each checkbox an icon and also a title. A nice form layout for checkboxes. Also would be good for touch input. &..
Neumorphic UI Element Examples
Here is a very slick example of Neumorphic ui elements, with some active examples. Credits Codepen, Maria M. Muñoz
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.
Animated Tab Bar
A very stylish and animated tab bar navigation with reveal text once the icon is clicked. Demo of Menu Items being Activated Credits Designed by: Hoang NguyenAuthor: abxlfazlOriginal image:..
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..
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..
CSS & Javascript implementation for multiselect html control
Description this multiselect html control allows the user to click on the dropdown and select multiple items out of this list. there is also a control that allows selection of all the items in the ..
Animated Parallax 404 Error Page
Found this awesome animated 404 error page on codepen the other day, crazily awesome animations on this one, just reload the demo page and you can see the animation as it loads in as well.
Random Quote
