Search
Search Code
CSS 4 box custom grid row - New Version - July 2025
I fixed this one a little bit so that the boxes actually fit within the element width, as before they were kinda sticking out abit too much. Old Version.
Striped Background Gradients in CSS + HTML
Testing out Stacked Linear Gradient background to create striped gradients in CSS and HTML.
Changing the Background in CSS
Some of the properties of using a CSS background on a div, how to set the background color, opacity and also using an image as a background with CSS. ⌚Timestamps🏹 0:15 CSS Backgroun..
modal no libs just js and css
modal with no js libs just css html and a bit of js... yay?
Making an image responsive using css using background cover
the following css will make an image display 100% its size and keep its aspect ratio if the screen size or element size gets smaller than the containing image. you should be able to drag the edge of t..
CSSnowflakes simple snowflakes non-JS snowflakes for your website
i like this one as its a nice and simple copy and paste effect that just covers the whole site and does not get in the way of other things like some other scripts i have come across.
HTML How to CENTRE Text Easy! - Quick HTML and CSS Tutorial
How to center text in html, there is a few options i discuss here and probably more that i missed out. Codepen: https://codepen.io/kruxor/pen/poMOVYe
css html vertical center
seems to break this layout... there must be a better way...
css cursor types testing
testing all (most) of the available css cursor types, you can mouse over to test how the cursors react depending on your browser type and operating system. refs https://developer.mozilla.org/e..
CSS Object Fit for Image fill rather than using background image on a div
CSS Object Fit can crop off the sides of an image, while also preserving its aspect ratio, and then fill in the space to fit any size. Object Fit You can use: object-fit: With the following ..
flip card animation 3d front and back css html
3d flipping card with front and back content and animation
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 css layout stack on mobile 1024 lower
4 box css grid that stacks on 1024 and lower res displays. Here is a demo of the code
select something with custom data attribute css
selecting something by its custom data attribute and value in css
can you set all image heights to match with css no stretching
Short Answer: Yes with object-fit: cover; on the css of the image properties. object-fit: cover; You might also need: object-position: right bottom; ..
cookie consent quick install script js html css vanilla
Found this super slick looking cookie consent script here, looks awesome, and its easy to install (i hope). https://github.com/orestbida/cookieconsent CDN Links https://cdn.jsdelivr.net/gh/or..
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..
CSS Filter Generator from Hex Code Usage Example
quick example of how to apply a css filter to change logo or image color using this tool
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..
using the :user-valid CSS pseudo-class
It seems this is currently only working in firefox. Here is a test of the code in firefox, you can see if you add a "valid" email address it will add a border and a green tick.
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..
highlight a button with an animation css
While i was downloading the latest AdoptJDK i noticed this button, and thought it was a nice effect. I wondered how hard it would be to replicate this. Copy the link html Check each class..
hide the first h3 tag on the page with css
in case you want to target the first item on a page and hide it or change it with css.
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 ..
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 ..
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..
how to bundle css files together using windows or mac
so i was wondering how to do this the other day using some modern end tools, and i found this way just do it straight from mac or windows. lets say i have these css files main.css style.css..
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:
hide the third row in a table with css
just wondered how hard it is to hide the third column in a table with css, rather than deleting it in the html here is the test table cell 1a cell 2a cell 3a cell 4a cell 5a cell 1b ..
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..
Scroll down indicator css javascript and html
I have seen these a couple of times, indictating to the user that there is further content down the page, and they should scroll to view it. Then as you scroll down the indicator dissapears. So we w..
target last item css with :last-of-type
the :last-of-type selector allows you to select the last item of that type in the target container. in the following example i can target the last <p> tag and make the text bold and red.
target first item css with :first-of-type
the :first-of-type selector allows you to select the 1st item of that type in the target container. in the following example i can target the 1st <p> tag and make the text bold.
target 1st td in a table with css
this css will allow you to target the 1st td in a table
css responsive max and min targets @media
showing how you can target elements within a max and min screen width demo:
check box highlight text area css
i just wanted to be able to highlight a text field if a certain check box was checked on a form in this demo below, if you click on the check1 checkbox it will give you an alert saying if the box is ..
css double page document preview with shadow
two div elements that look like blank documents with drop shadows
Creating a chart about charts.css with charts.css from the command line
Creating a chart about charts.css with charts.css from the command line: BASH ( echo "<table class='charts-css bar show-labels show-heading'>" echo "&l..
adding background blur to an image using css fill screen
I had noticed this cool looking effect used on places like google, and other sites that display portrait images, i think i saw it on the google home as well or maybe google photos. Its basicall..
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.
css slow zoom in animation
give a bit of extra interest to otherwise static images
using the last-of-type css selector to remove a border from the last item in a list
i find using the last-of-type css selector quite useful when there is a list or re-occuring items and the last one has to be slightly different from the other ones. This allows me to target the..
my default text shadow css
just a quick copy and paste for easy text shadow that fits in most places
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.
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.
make an image white with css using filter brightness and invert
If you have an icon or something with transparency this can be useful if you dont want to have to edit the image and create another copy of it you can apply the filter brightness and invert. You can ..
CSS Grid Frame Work
8 Dec 2020 Yes i dont have an cool names for it, I just wanted something fairly light that can replace the bootstrap and foundation grid and basic components that i use so often, some of these framew..
css prefers-color-scheme example
This uses the @media and prefers-color-scheme to check which one you have as a setting in your browser
using attr in css to get content from html
im not sure (yet) how this would be useful, but it shows that you can get title attribute content from a div with css
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 ..
using linear gradient background on text css
If you want to have a background gradient on your foreground text you can use this css. I think currently this only works on webkit enabled browsers, but it looks pretty cool.
setting up css variables in your stylesheet
Using css variables at the start of your stylesheet can make things down the road much easier to change. You can also use it for more complex variables like drop shadow settings as shown below. ..
generating all css colours with php?
I was looking at doing this just to generate all css colours, i think the only issue is there is a lot! You can do this with rgb(0,0,0) all the way up to rgb(255,255,255) how many seperate colours is..
css font style italic
i had a request to make some font italic the other day, and for some reason i could not remember the css for it. It's font-style: italic; I should know that! I guess italic fonts annoy me a bi..
create a rainbow background using css linear gradient
just incase one gradient is not enough for you we can also use it to create a rainbow background gradient
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. ..
using css linear gradient for background overlays
a few examples using css linear gradient for the background
center something with css not using flex
This is how you can center something in another element if you dont want to use the flex method. You will need the relative position on the outer element, and the absolute on the center one unl..
Custom 12 Grid using CSS Grid
For a while i have been using frameworks for their easy grid systems, like foundation and bootstrap. I guess this is a bit lazy and very bloated as you are loading the full css library and using about..
target data attribute with css
you can add a data attribite and target it with css using the following demo
keyframe animations css
moving a background with css keyframes
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.
Bootstrap Card Formatting HTML and CSS - Header and Footer
just a bootstrap card format with header and footer elements, makes a piece of content neat easily
Move any element with css offsets
Make any element moveable without moving other items around by making it position: relative;
CSS Improve Compatibility with Browser Fallbacks
when using css variables to increase compatibility you should also include a normal color as a default.
using scroll-behavior: smooth css
This is a nice example of smooth scroll using just css. You can add it to the page by adding it to the html element html { scroll-behavior: smooth; } for this demo I will add some padding to ..
using a css grid area template
here we can specify areas for the grid. using grid-template-areas. once the areas are defined we can add the items into each area with grid-area: header in each element Use grid-area Without Creatin..
CSS Grid - Basic Columns
Here is a basic demo showing the usage for css grid columns. You just need to add the display:grid property and then add the grid-template-columns: adding the size of each column, adding a value for e..
flex shorthand css
flex can be short handed under the flex property. For example, flex: 2 0 20px; will set the item to flex-grow: 2;, flex-shrink: 0;, and flex-basis: 20px;. The following class examples both do the sa..
Making an image responsive using css
the following css will make an image display 100% its size and keep its aspect ratio if the screen size or element size gets smaller than the containing image. you should be able to drag the edge of t..
Applied Accessibility - Screen reader only css
This is how a screen reader only css markup can be added. The content will still be available to screen reader clients.
Using nth-child css to hide list items or repeated elements
Lets say that i have a list like this: <div class='my-awesome-list'><div class='a-list-item'>yay im a list item</div><div class='a-list-item'>yay im a list item</div><..
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.
jqueryui includes css and js
these ones are useful as well for including jquery ui JQueryUI 1.12.1 <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> JQueryUI 1.12.1 min..
simple dropdown multi level navigation ul li css
updated to work standalone and not effect other list elements on the page
simple dropdown navigation ul li css
demo .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 16..
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..
animate css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> animate.css
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 ..
css grid for layouts with no rows
I had a look at this recently, but my previous example still used rows for a grid, which apparently is not the correct way of using css grids. I think the issue (I had) with css grid is it seems co..
css grid for responsive layouts and how to use it - 12 col layout
Note: Added version 2 of this with no rows for the grid css grid for layouts with no rows Update: 12 Nov 2024 - Fixed code and embed as is was linking to some broken and weird iframe. Grid should wor..
recreate marquee element using css
as the marquee element has been removed from html5 (which is probably a good thing) its now unsupported, but you can use css and keyframes to recreate it. Yay.. CSS Marquee Demo Some Marquee ..
more complex responsive tables css
i did a simple version of this before here but now im going to make it a bit more complicated and functional. table { width: 100%; border-collapse: collapse; } tr:nth-of-type(odd) { ..
remove border glow css from textarea on select
how to remove the glow around a text area when selected or in focus using css. Text Area Highlight Here is what it looks like just to show you where the textarea is while editing, but can look m..
transform rotate an element in css
good if you need to rotate elements using css code <div class='abox rotated'></div> <style> .abox { background:pink; height:150px; width:150px; margin:50px auto 0; }..
transform rotate a hexagon in css
if you ever needed a hexagon in css here is how you can do it.
target internet explorer with css and html
target all internet explorer versions with this <!--[if IE]> <link rel="stylesheet" type="text/css" href="all-ie-only.css" /> <![endif]--> target ie 10 and 11 p { col..
darken background image using css
darken a background image using css only useful if you have overlay text or just want to add a nicer effect to an image, i usually find that adding this to an image with the text over the top makes it..
simple dropin wordpress dropdown navigation css
this is good if you just want to drop in some css and get a dropdown navigation back using the default wordpress nav example of the default styles code (css) /* Menu Dropdown */ .nav ul { l..
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..
stack a table using css responsive
this can be useful for fitting tables into smaller screens, usually add this to a media query. #tableid td { display: table-row; width:100%; display:block; } and with a screen size added @me..
Random Quote
james clear
