showing how you can switch video sources depending on the screen width
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..
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..
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 ..
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. ..
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..
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 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 ..
Just a quick clickable two box section with some logos and radial backgrounds, foundation for grid and responsive action. Quick demo:
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. ..
Quick overview full width section code. Lightgray and teal colours on white background.
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..
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..
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..
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..
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..
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. ..
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..
Add some sparkles to your text. Add some stars and rainbow colour effects to your text, source linked below.
Here is the full (almost full) collection of bootstrap elements in this kitchen sink code for bootstrap. Thanks to ycohio for this useful reference.
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..
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..
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 ..
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..
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..
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..
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..
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..
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..
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..
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..
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..
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..
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..
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 ..
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..
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
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 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..
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..
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..
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..
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..
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..
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! ..
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..