six box grid css html custom no gap

re-usable four box grid with no gap, plus stack on responsive 1024px

four box grid css html custom

re-usable four box grid with gap calculations

4 box custom grid with responsive

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

make clickable element with clickable class open link in new window

makes an element with a link into a clickable element. This finds the 1st a tag in the target element and then opens the link in a _blank tab. Then if you have an element that you want to be clickabl..

Boots Widget change from widget to cat head and click function

Moving this from the widget area to the bottom, to make it less obvious but still there if needed.   

Flickity - autoPlay with Loop

Flickity slider with auto play

pulse map dots

bunch of pulsing dots for a map or image. allows overlaying of clickable dots on an image, you can change the colors with the css below.  modified from here: e.g: 

subscribe to newsletter section example

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..

floating message box on bottom right of screen with close button

A floating fixed message box on the bottom right hand side of the screen with a close button. 

set a css grid to auto to make it stack on mobile

to make a grid stack when the screen size gets smaller you need to set the grid items to auto when it gets to the desired screen size.  In this example once the screen size gets to 1024px or les..

truncate text with line clamp allow a certain number of lines

This shows how you can truncate text to a certain number of lines using the css property line-clamp.   -webkit-line-clamp: 3;  line-clamp:3;

add a button to an existing link using :after css

Adding a button style to an existing link using :after and css. Preview

bouncing loader animation in css

uses css and keyframes animation to create a nice and smooth bouncing loader

html and css hoizontal simple timeline section in foundation

a horizontal simple timeline section example done in foundation grid with some custom styles. This also uses the Lato Font quick install! So Quick!..  :P Also works on responsive and mobile dev..

Slick Slider Showing Multiple Items at a time

Just wanted to test some review type items showing more than one on slick, Seems to work well.  This shows two items at a time, but you can show as many as you like. Could be good for a testimo..

add a toggle with jquery and change the class

With this code I just wanted a quick bit of inline code that could add a toggle to an element or multiple and also switch its class to make it show that the item is toggled on or off.  Here is t..

Using CSS Grid instead of Float's for a 3 column simple list

I have been in the habit of just using float:left and then width 31% with margin 1% for list items, and it seems to work fine usually.  But i thought i probably should update the defaults in by ..

button zoom effect with expanding background

Just playing around with zoom and background size effects on a promo button, if you change the background to 110% and then zoom to 1.1 you can see how the background appears to zoom out while the butt..

set a cookie on click and then check if the cookie is set and dont show that message again

this script shows a message, and if the message is closed it will set a cookie to not show that message again for 1 day.  The cookie in this example is set to expire in a day, so then if you com..

using css counter-increment to add numbering to elements

i just found this element in css where you can add numbering to elements, very handy to add counters and things.  This uses the counter-increment: section; in the main element and then adds the ..

timeline class and function

this is a class extend that generates a timeline based on structured data and order's the items by year decending. this code will not work out of the box as it has other requirements, but it is a goo..

change selected color on input elements css

this can be useful if you are using darker form elements and they happen to have white on white text, so you can target the :focus on the input. here is the text input before the colour change, the c..

button with separated chevron

I have come across this kind of button format a few times now in various designs and the html and css for it is a bit different to normal button formats I have found.  Chevron Detached Button Ex..

vertically align text within a fixed height div using flex

this can be used to make text align nicely while still keeping the same layout. the example below shows how you can set the height of the containing element and still have the text aligned center to ..

white space break word css

controlling the white space of an element with break word, this can be handy if you need to fit something into a fix but the item has no spaces, otherwise usually by default this will overflow out of ..

CSS Drawing - Beach Scene

i did this one a while ago, cantr even remember it just appeared when i searched in google.  here is an animated version, check the bottom for the css version of this:  

404 Error Page Codepen

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

right align something in its element

easily align a block or inline block item to the right in its outer element

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..

jquery toggle menu testing

using jquery toggle to show and hide the sub menu's

hero widget header - creates a nice looking hero item from a target uid and class

this creates a "nice" looking hero widget, just wanted to create something that looked decent and had an attached background image, surprizingly annoying to link items together. For some reason i kee..

backdrop-filter: blur(10px);

just testing this filter

rounded click me button with icon

just a rounded button with a font awesome icon

slick carousel jump to a slide on element hover

jumps to a specific slider on hover over on an element this is working now, here is the example, mouse over the buttons to see the slide change. trying to add this: Javascript $( selector ).mous..

animated rings expanding with delay ripple water effects

just testing this one

box hover over effects using pulsate animation

Bit of a different box hover over effect. Just using the pulse animation.

box shadow example(s) - drop shadow

I realised just now, that i dont have a box shadow example! How does that happen, its one of those css elements that i just use so much that i guess i forgot about it.  Related Pages: https:/..

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.  

animate and zoom six elements on a timer [addClass, removeClass, setTimeout]

set of six elements that i wanted to highlight using a simple setTimeout and the addClass and removeClass  this also involves some css changes to get this working i would also like in the fut..

style page numbers [fixed]

need to style the page numbers. https://kruxor.com/list-table/search_links/  Before: After: Dark Mode Light Mode  

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..

test page for the custom css 12 grid used on this site

This is my testing page for the grid used on this site, it shows elements and other things for use on the grid and other general formatting.

nice webkit scrollbars (scroll bar, web kit, nice)

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..

using jquery appear for checking if an element is visible on screen

Yes.. sometimes i like using jquery as well, as it can make things so easy! :) Here is a quick demo using the JQuery Appear plugin so make an element change if it on or off screen.  Plugin Link..

css perspective and transform css properties testing

i wanted to see what i could do using the perspective and transform css properties. i dont really get how the perspective one works, but you can tweak it so it doesent look too weird.  with the ..

hero box with title sub title logos and call to action buttons

Here is a basic hero box section that contains: Title Sub Title 6 Logos (could replace with carousel logos) 2 call to action buttons I think it can be made more responsive, by replacing the..

scroll to top html css and js

add a button to your website that allows scrolling to the top of the page css add scroll behavior smooth to your html, to allow the page to scroll nicely rather than just jumping to the top, in supp..

adding pulsating dots to your css ul li list

get rid of those boring dots in your list and add some pulsation! See the Pen Pulsate your <ul><li> list item dots! by Luke (@kruxor) on CodePen.

css using perspective for transforms

just playing around with the perspective and transforms, it does weird and annoying things to the margins. I was interested in how this page worked, so i thought i would try and deconstruct it a bit. ..

simple linear gradient overlay for an image to make it darker or lighter

i use this one often if i have a background image and some text over the top, you can darken or lighten the linear gradient values to match the text content and make it readable.

target data attribute with css

you can add a data attribite and target it with css using the following demo

using transform scale in css to zoom on hover over

using a css transform will not effect other elements that surround it, so when you mouse over this div (or press it on your phone/tablet) it should scale to 1.5 times its original size.

using flexbox to align elements in a row

flexbox is so good at aligning elements, yes i used to use float left and then percentages and overflow auto or hidden the surrounding div, but now with flex you can just do something like this.

Viewport width and height calculations

Rather than using px and em you can also use the vw and vmin to resize elements which depend on the width and height of the display.

Using Flexbox rather than Floats

So i was still using float left for a bunch of elements i was working on the other day, sometimes it's hard to drop old techniques. What are the actual benefits of using flexbox rather than float lef..

hide and show elements with js using getElementById and style.display

css :active pseudo-class usage

The :active selector is a CSS pseudo-class. It represents an element that is being activated by the user when they are interacting with a button or link.

truncate string using jquery

.test { padding:10px;border:1px solid #999;border-radius: 3px; } so lets say we had the following string on the page and we needed to make it a bit shorter for some reason. like if you dont have co..

scrollbar replacement simplebar

a nice and simple scroll bar replacement code <link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" /> <script src="https://unpkg.com/simplebar@latest/dist/..

do something later with settimeout or loop with setinterval

setTimeout This one will run a certain time after the document loads. So if i want to execute something 5 seconds (or so) after the page loads i would do this. You will need to check your console..

random string generator guid

a nice easy one to generate a random string. i use this one to stop items from caching or you could use it as a guid. var nocache = Math.random().toString(36).substring(2, 15) + Math.random().toStr..

make clickable element with clickable class

makes an element with a link into a clickable element

css grid sidebar main content fluid layout with fallback

this is a continuation from the original post with added fallback for older browsers that do no support the grid elements yet. I have tested this fallback in IE11 and it seems to work well, if you wa..

bootstrap styled buttons

Just in-case you would like the shiny (flat/rounded) blue buttons from bootstrap without all the css. Example Button add the class btn and btn-primary to your link An Example Primary Button (bt..

css grid sidebar main content fluid layout

I was playing around with css grid the other day and i found a nice (and easy) way to do a standard left sidebar and fluid main content area. this is rather than floating the sidebar and then setting ..

transitions and the easy way to apply them

Would you like your element to transition nicely? well you can do it in about 1 line of css. .transition { transition: all 2s; } This is the one I usually use, as its not too slow. transitio..

click through an overlay element pointer events

This one is usefull if you have an element overlapping another element and you want the one underneath to be clickable, like positioning an image over the top of a slider with controls underneath it. ..

flex align center vertical horizontal

lets say you have a box within another box, like so: .box { height:500px; width:500px; background:#CCC; } .another-box { height:50px; width:50px; background:#999; } ..

css accordion basics

can we create an accordion with out using jquery ui? I think yes, it will be basic but also keeping it simple it probably a good idea. tried adding transitions to make the divs showing a bit smooth..