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. ..
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.
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. ..
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..
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 ..
display items in a css grid
So i removed bootstrap and now the items in my post header look like this: and this: this was using the row and col format in bootstrap we can switch this to a css grid quite easily using..
Truncate your Text with CSS
If you have some text in a set width element you can use the following property to truncate the text with an ellipsis (...). You need is a fixed width element, and then some text that is wider than t..
Change your cursor into an Emoji Cursor or Image Cursor
You can use the following property to change the cursor on an element. The property we will be changing is cursor Preview of the Cursor States About the Cursor CSS Property The curso..
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..
Font Awesome Icons
I have been using this awesome font library for so long now that i almos overlooked it as being such a stable web developer resource for an amazing set of icons and easy to add to your project. Wha..
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..
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..
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..
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 ..
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..
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..
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..
Responsive Mobile Bootstrap 4 Animated Rounded Navbar
What is it? An Animated Bootstrap based navigation with font awesome icons What can i use this for? This navigation works on mobile and desktop browsers for a nice twist to your navigation needs.&n..
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..
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..
Login form with floating placeholder text and very animated bright submit button
Here is a login form with animation around the submit button and as you mouse over it the button glows like a crazy nut! Also notice that the placeholder text floats over the input fields and when yo..
Blob Navigation Menu Selection Animated
This seemingly innocent menu has a hidden animation in it, just click on each icon to see the change, something different and out of the box for this one.
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.
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..
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 ..
Random Quote
