List Code
Video different sources on screen sizes video embed html responsive
showing how you can switch video sources depending on the screen width
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..
Instant colour fill with HTML Canvas
Nice site with coloring images art and no ad's. Nice to just draw and color. https://www.kidzfun.art/ Demo is at https://shaneosullivan.github.io/example-canvas-fill/ , code is at..
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 ..
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. ..
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..
section with image to the right text to the left gradient
section with image to the right and text to the left, can be a block on a landing page, easy find and replace the section names with new names to create new class section items. Preview - Full ..
Two Clickable Logo Promo Box Section Foundation
Just a quick clickable two box section with some logos and radial backgrounds, foundation for grid and responsive action. Quick demo:
Inline Contact Form Formatting
Responsive inline contact form generic block, replace with your form code and submit, google recapture etc. Usually used on home page or near footer of page. Stacks the form on mobile screens. ..
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.
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..
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..
Responsive Friendly Subscribe to our Newsletter Section
Just a nice quick section layout for a newsletter subscribe button and text. You could add this to a home page or just before the footer section of a page. Its also done in foundation gr..
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. ..
Draw a Circle in CSS
Sometimes you need to go back to the basics. Here we have two nice circle's drawn with css. You can see how we do this below. How do you draw a circle with css? Add a div element with the cl..
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..
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..
Floating Modal Message Fixed on the Bottom of the Screen
What is title? With the floating fixed modal code you can attach a message for your website users on the bottom right hand side of the screen. This message will stay over the top of the content due ..
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..
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..
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..
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..
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..
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..
Create a checkerboard background pattern with CSS
How can you create a diamond checker board background in css and html? One way to create a diamond checkerboard background in CSS and HTML is to use the CSS3 property of "background-size." This prope..
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 ..
Animated Button Border when Active
What is it? A button with a top and bottom border, when you mouse over it the border extends to the width of the button. Preview a preview of Animated Button Border when Active What can i use this..
create a border with top triangle in css
Here is a quick css and html code that gives you an element with a triangle on the top left border. Looks a bit like a callout box. Preview
Single Element CSS Spinners
What is it? Single Element CSS Spinners is a collection of loading animations made in css only, so no need for images or svg or any additional items, just one element added to you html and styled in ..
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..
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..
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..
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. ..
Random Quote
