List Code
Magical Text Effect
Add some sparkles to your text. Add some stars and rainbow colour effects to your text, source linked below.
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..
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. ..
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..
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..
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..
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..
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..
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.
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. ..
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:
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 ..
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..
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..
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..
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. ..
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 ..
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..
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..
Video different sources on screen sizes video embed html responsive
showing how you can switch video sources depending on the screen width
Falling Stars CSS Animation
falling stars css animation See the Pen Falling Stars by Prasenjit Nayak (@StarKnightt) on CodePen.
Random Quote
