4 box custom grid with responsive

simple 4 box 25% grid with a responsive break at 1024px to stack the boxes in the grid

green circle tick svg

converted into inline css and html

use an image in your list items ol ul li

replacing the default ul li list with an image prefix

svg carret right css class

svg animated line testing - shooting star right

I found this on a random site i was looking at it took me a while to extract the animation, but i found it and its working below.  There is shoot right and also shoot left, if you are that way i..

chevron right thick and pointy edges base64

finally found a svg chevron that does not cost $3, amazing...

down chevron and styles

a down chevron and the class to style it, default this is 16x16px but you can zoom it in or out easily, just change the height and width of it target with the class bi-chevron-down

animated duck on footer

Thought this was cool. How do i do it? Page Source: https://www.learninpublic.org/  Copy this section Lets see what is attached to it. So i can see from the classes its a tailwind based ..

404 Error Page Codepen

found this in my links the other day, still looks cool...

globe svg testing (broken)

nope seems not to be working, it seems you cant just copy the glyph path into a normal svg and hope for the best, oh well i tried. 

how to make a transparent logo white with css

lets say you have a logo and its dark on a black background, how annoying is that, you still want the dark background but also want to see the logo.  well with this css trick you can just make t..

add chevrons to a ul list

adding a chevron to a list item rather than the default dot and the moving one, here is the demo:

logo tickers marquee slow scrolling

logo tickers with a slide animation

add a moving chevron to your href link

this adds a right chevron that moves when the link is active demo: * note: this may not show up in light mode as the chevron is white, so would need to change the color it

github logo background png css

just the github transparent logo as a css class, yes it should probably be a svg, but here it is in all its PNG glory.

spin rotate an element on mouse over [css]

i thought it might look good to spin this element around when the mouse is over it. Added the following css to second_nav_toggle.  

mouse outline svg

chevron up

chevron down

top bar overflow issues [fixed]

So i was just browsing throught the site checking for random errors, which there are quite a lot. And noticed this one. Quite a large bug caused by overflow issues in the main header, i think this ..

make labels or badges look better

How to make these look better. The labels are used in the list items to show a small version of the category or sometimes the view count for a list item. How they look currently Dark Mode Ligh..

chevron left

chevron right

download icon svg

a simple download icon in svg format, also added button example usage so you can use the svg within the button as an icon and change the fill colour on mouse over, plus it scales nicely on mobile devi..

Making Images Retina Display Friendly

Have you ever noticed images look a bit blurry on your high res screen? Sometimes this is referred to as a "Retina" display... Its probably because the image used is exactly the pixels made for a regu..