Search
Falling Stars CSS Animation
falling stars css animation See the Pen Falling Stars by Prasenjit Nayak (@StarKnightt) on CodePen.
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..
Transform Text into Images using SnapText JS
Note: It seems this only works on node as far as i can tell from testing and its not a scipt you can just embed into a html page. SnapText 📸 Snap a picture of HTML text Converts HTML text ..
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..
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..
Z-Index Code Front - CSS to change z-index when element is active
If you have 2 elements and they over lap and then you add a click event then it can become complex. So this script adds some z-index changing order to bring the active dot to the front. Mouse over the..
Social Header Links easy Drop in Code with Font Awesome Icons
Drop in this code in the header of your site to quickly add some social links in your header. Social Icons in Header This version uses foundation for the grid system. But you can swap this grid..
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..
Truncate Text to an amount of lines using line-clamp
In a previous post (Truncate your Text with CSS) we truncated some text into a smaller single line element, which can be good for single line items, but what if you had a paragraph or a box of text th..
Item Positioning in CSS
I was just adding the previous post on how to draw a circle in css, when i thought it might also be useful to know how to move these items around. To make more complicated layouts or drawings. ..
Magical Text Effect
Add some sparkles to your text. Add some stars and rainbow colour effects to your text, source linked below.
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.
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..
Smooth Scrolling with just CSS
Did you know that you can add smooth scrolling to your page with one line of css? So what is the magic line? scroll-behavior: smooth; Yep thats all you have to add. Lets add a demo of scro..
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..
button on focus swing animation
Creates a swing animation on focus. Use an appropriate transition to animate changes to the element. Use the :focus pseudo-class to apply an animation that uses ..
NES-style(8bit-like) CSS Framework
Make your site look retro and 8 bit like an old NEW console with NES.css Installation Add the following script to your webpage to include the nes style sheet. <link href="https://unpkg.com..
Why to use a CSS Reset?
What is a CSS Reset? A CSS reset is a statements usually at the top of your style sheet, to reset all the browser defaults so that you can start with a fresh style sheet. Why do i need a CSS R..
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..
Check Wave Click a Checkbox and Watch the Animation
What is Check Wave? Check a box and watch the wave animation. Preview a preview of Check Wave What can i use this for? I cant actually think of a use case for this animation, but it looks cool! ..
Cloudy spiral animation with CSS3
What is Cloudy spiral animation with CSS3? This is a nice animation that uses CSS3 to transform the <i> tag into an animated spiral. Preview a preview of Cloudy spiral animation with CSS3 Wh..
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. ..
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..
A tiny, modern, responsive, 12-column grid system built using CSS Grid Layout
TB Grid - A tiny, modern, responsive, 12-column grid system built using CSS Grid Layout For less than 2kb of code this can handle your grid layouts.
A fresh new and super tiny CSS Reset
A nice and small CSS reset script using newer selector tags than some of the older reset scripts. Features This new CSS reset is using the new CSS features: The global CSS reset keywords, ‘..
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..
Rough JS - Create graphics with a hand-drawn, sketchy, appearance
Rough.js is a small (<9kB gzipped) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellip..
Keen-Slider the free library agnostic touch slider
What is Keen Slider? A Image slider or image carousel, or actually content slider that works without the dependency of JQuery or anyother base library, so it can run standalone. It also works well wi..
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..
How to Center or Centre everything in a Container
Traditionally it has been quite tricky the vertically and horizontally center an item in a container or div element. This has been made quite a bit more straight forward with the grid layout and the ..
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..
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. ..
Marker JS for adding comments and overlays to images
Marker JS is great for in browser image manipulation and overlay's. Here is a codesandbox version of this code. How does Marker JS work? Just click on the image and some editor controls appear abov..
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..
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. &..
re theming the bootstrap card into something more stylish
I was thinking that i would re style the following default bootstrap card into something that looks a bit different. The bootstrap card is very functional and great for layouts but its not the best lo..
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.
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..
Card Form Design, Very Slick and Rounded
A very cool looking form design here also using vue.js. As you type in the details the animated card fills in. Also as you select each element it will show you on the demo card which one is sel..
Center Mode Carousel using GSAP
I am so excited about this carousel, it looks amazing! The 1st thing i thought when viewing this carousel, was wow, and the second thing i thought was what is GSAP. What is GSAP? Simply put, GSAP i..
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..
Contact Form with Wide Hero Image using Responsive Block CSS and HTML
About this Content Block This is a piece i did a little while ago, but i will re-create it for this post Basically what we are creating here today is a wide and padded section of a home page with ..
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.
Vanilla JS Center Mode Carousel
Here we have a sliding center mode carousel gallery made with css & vanilla js. This carousel is good if you need to keep your content up front and in the middle of the display. It can handle ima..
Random Quote
