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..
Fancy Border Radius CSS Generator Tool - spin animation keyframes
Tool to generate custom border radius. you too can create blob like objects. How to use Just generate your border radius, and then copy the following code into a new or existing element. ..
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..
Map Image with Easy Dots and Titles using only CSS
I had to quickly add some dot points with names to a map the other day, so i thought i should probably look for a jquery library for tool tips or something similar. But then i thought why not just add..
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.
Fancy up your banner image hero sections using overlay gradients
What is banner image hero sections using overlay gradients? In this code i show how you can add elements to your existing banner images to add an overlay gradient, while still leaving the inner conte..
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..
How to Center Everything or Anything with CSS
This will center vertically and horizontally inside another element. Well maybe not anything and everything, but selected elements, it will center single content in the element. Adding t..
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..
Pure CSS 3D Flipping Book with Animations
What is Pure CSS 3D Flipping Book? Pure CSS 3D Flipping Book is a pure CSS and HTML flipping book animation that you can use to display content in a virtual book format. Preview a preview of Pure C..
CSS Shake - Shake up your elements
CSS Shake is a CSS library that allows you to shake your elements using css classes. Install <link rel="stylesheet" type="text/css" href="https://csshake.surge.sh/csshake.min.css"> El..
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..
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. ..
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, ‘..
CSS animation toolkit AnimXYZ for HTML React and Vue
What is AnimXYZ? AnimXYZ helps you create, customize, and compose animations for your website. Powered by CSS variables to allow a nearly limitless number of unique animations without writing a singl..
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..
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..
The New CSS Reset
What is The New CSS Reset? I remeber the time when i used to use something like this to reset the browser CSS to nothing and then start building my styles. CSS *,html,body { margin:0; padding:0; bo..
Drop Shadow Rotation on Card Element
What is it? A Card element with a rotating drop shadow animation with colour changes. What can i use this for? You could use this animation to add some character to your own elements. Conc..
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..
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..
Neumorphic UI Element Examples
Here is a very slick example of Neumorphic ui elements, with some active examples. Credits Codepen, Maria M. Muñoz
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..
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 ..
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
