Search
Search Code
Search Code by entering your search text above.
css
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 ..

3:47 am, February 23, 2024
php errors
error Warning: getimagesize(uploads/583517f49099a.jpg): failed to open stream: No such file or directory in SimpleImage.php on line 1198

i think this error is just caused by a missing file. But there should be some kind of error checking here to not crash the whole site just due to a missing image file. this error is quite hard to fin..

7:07 am, April 11, 2023
html
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.   

4:26 am, March 27, 2023
image formatting
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; ..

4:32 am, November 9, 2022
php functions
get file name from path name in php

returns the file name from a full url or path in php, using basename function. 

1:03 am, September 30, 2022
images
Video Placeholder Image HTML

a quick image embed for a common video placeholder image size made by this amazing placeholder site

3:44 am, September 5, 2022
javascript
Twitter Post Fetcher v18.0.4 - javascript twitter feed fetcher

A few queries showing how to get latest tweets and post likes using the Twitter Post Fetcher v18.0.4 script.

12:42 am, August 31, 2022
css filters
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

4:40 am, August 16, 2022
html
using figcaption and figure for your images

So i usually add images in a <p> tag with just an <img> tag and then <br> and the image caption, but there is actually a tag for this that i should get used to using. The <figcapt..

12:40 am, June 24, 2022
javascript
Twitter Post Fetcher Script

Uses javascript to fetch a twitter feed from a user screen name. Totally stylable alternative to using the twitter embed code. Your Welcome... 

12:43 am, May 3, 2022
Images
Auto Changing Image URL

Here is a picsum url that you can use to generate image sizes, just change the numbers in the url to change its generated size.  Some examples of the sizes you can use are below. 

1:31 am, May 1, 2022
html
Footer Design and Redesign

I never usually look this far down on the site, but its a bit average... Lets fix it!   Some simple changes Just a few elements added and moved around a bit. Added another row to the f..

12:31 am, April 1, 2022
images
center image preview with lightbox and caption

I just wanted a thumbnail or preview of the image, where if clicked it would load into a lightbox, but the preview just shows the center of whatever image is added to it.  Note: I just picked ra..

2:54 am, January 12, 2022
javascript
Slick Slider Carousel with Custom Next and Prev Buttons

I had a slider the other day where i needed to attach some detached buttons, so added the following click events to control the next and previous events on the slider.  Note the class names: sli..

4:52 am, December 6, 2021
php functions
Spam IP Database and delete button

The Background and Reason for the SPAM IP Database and Delete I actually wrote up half of this article and was still testing the function and lost the whole post, which will teach me for adding it st..

12:24 pm, November 22, 2021
css
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..

8:21 am, November 11, 2021
php
php get file and save it

gets a file from a url and saves it to your local server

10:57 pm, November 4, 2021
php
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..

5:02 am, October 8, 2021
sections
responsive three box section with tabular data or table data

here is a section in foundation with 3 hero boxes with images on top, and then a title and some tabular (is that the same as table?) data in each box, so could be good for some kinda products and then..

5:50 am, October 1, 2021
images
document placeholder for a4 in portrait

a nice document placeholder image with dropshadow and transparency

2:19 am, September 29, 2021
images
landscape image document placeholder

A nice landscape image of a blank presentation format, in landscape mode with drop shadow.

2:10 am, September 29, 2021
html
test image url that always changes unsplash placeholder

good if you are doing a test site and need some changing images for test placeholders, and they are nice looking images as well. you can just use this image tag link and specify the size required.&nb..

3:05 am, September 20, 2021
css
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 ..

5:56 am, September 13, 2021
javascript
twitter json feed testing

just testing using the Twitter Post Fetcher script, seems to be working well.

9:33 am, September 10, 2021
css
using filter grayscale to make an image dark

lets make this image grayscale using a css filter

11:39 pm, September 2, 2021
javascript
center mode slick zoom testing

update : this is a tricky one to get working! I have done a lot of testing on this one, and got a demo working from a combination of the following links. the demo is still not 100% styled, but its..

5:17 am, August 10, 2021
php
extract youtube image from video url

showing how you can get the image wallpaper in different sizes from a youtube video I used to have this tool a while ago, it just passes the video id and extracts the images and also can produce the ..

3:52 am, July 31, 2021
site documentation
for auto filled fields, need to change the text and background colours

for some reason bootstrap or the browser is doing this to auto filled fields.  according to my searching there is a pseudo class added to auto filled fields CSS input:-webkit-autofill { col..

12:11 am, June 17, 2021
site documentation
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..

12:10 am, June 11, 2021
css
make your images look non squished when not using image backgrounds v2

this is a working version of this post, for some reason that image was deleted I think due to a content upgrade.  Basically this uses the object-fit: cover; to make images not stretch when they ..

6:22 am, June 4, 2021
css
backdrop-filter: blur(10px);

just testing this filter

11:34 pm, May 25, 2021
css
allow a title to be in the foreground while still having a before overlay for the background

i came across this issue recently, where a title was within an element and it needed to have a background overlay while still allowing the title to be on top of the overlay.  I found the fix was..

2:03 am, May 11, 2021
javascript
fancybox image popout easy

just in case you want to easily apply a modal or pop out effect to your images when they cant be displayed full size on the page.  related: https://kruxor.com/view/code/3gNUD/inline-fancybox-m..

4:12 am, May 10, 2021
javascript
Slick Slider Carousel with Fade Transition

here is a working example of slick carousel with a fade transition between elements rather than a slide transition

5:01 am, April 21, 2021
html
a page with two images

a page with two images for testing

7:03 am, April 4, 2021
python
python extract images into an array from a url

this should extract all images from a url into an array using python python from bs4 import BeautifulSoupfrom urllib.request import urlopenurl = "https://www.kruxor.com/view/code/LOveX/"page = urlop..

6:56 am, April 4, 2021
css
adding a background image to the titles of the dark mode card on this page

Just wanted to see what it would look like if i added some kinda image to the background of the titles. Side Note: i wonder if its a bad idea to add images that are uploaded to imgur rather than to t..

6:00 am, March 26, 2021
css
blur the background image while keeping the foreground normal

this one uses the ::before element to add a background and apply the blur filter to it, while allowing the foreground content to still be non blurry

5:28 am, March 26, 2021
css
background image greyscale filter while foreground is still in colour

i had an issue the other day using a css filter which was causing all items within the element to also have that filter. using the ::before psudo class solves this issue

4:58 am, March 26, 2021
css
zoom background of element when active

I just wanted to see if something like this zoom was possible but just using the background image and leaving the foreground content in the element with no zoom.  https://kruxor.com/view/code/kM..

4:53 am, March 19, 2021
javascript
replacement slider for ken wheeler's slick carousel tiny slider 2 [testing]

I have been looking for a little while for a replacement for the now classic and a bit depreciated, ken wheeler's slick carousel. After a bit of looking around i think the best replacement, is a non ..

5:23 am, March 17, 2021
css
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..

5:23 am, February 19, 2021
javascript
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..

4:00 am, February 15, 2021
css
css slow zoom in animation

give a bit of extra interest to otherwise static images

2:57 am, February 10, 2021
html
Aligning Images in TinyMCE or Floating them left and right (code)

Here is the code for this page Aligning Images in TinyMCE or Floating them left and right  

5:32 am, February 8, 2021
site bugs
change images to upload file also to imgur [reported]

may also create a seperate db to store imgur image links? can update the source_link in the current images to link to the imgur version. I remember i did this a while ago but cant remember the code ..

8:48 am, January 23, 2021
css
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 ..

5:16 am, December 22, 2020
jquery
add a jquery date picker to your text box

This JQuery UI Date picker is good if you want to add a nice dropdown date selector to your input box, rather than having to type in the date manually. Requires: JQuery  JQuery UI Documen..

12:56 am, December 22, 2020
css
background image on 3 boxes not scaling correctly fix

So i had this weird task the other day, where there was three boxes with a background image set. When the screen changed size the image would go out of wack. The fix?  Pixels rather than Perce..

1:43 am, December 11, 2020
webdev
fixing the website footer and making it less ugly

Here i show you in a couple of steps how to make the footer on this site look nicer, while actually doing it. Here is what the footer currently looks like. Yep pretty average looking. Lets add a ..

3:43 am, June 6, 2020
css
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.

11:07 pm, June 2, 2020
linux
Find Disk Space Usage using DU

The easiest way to check the space used in a directory in linux is this command: du -h This will do the current directory and all its sub directories. if you want to see a specific one type this d..

11:30 pm, April 28, 2020
javascript
Using the rest operator to pass in a variable amount of arguments

If you don't know how many parameters you will need in your function you can use the rest operator to pass them in. ...

5:49 am, October 1, 2019
css
keyframe animations css

moving a background with css keyframes

12:27 am, August 6, 2019
css
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..

2:26 am, July 3, 2019
css
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.

1:37 am, July 2, 2019
css
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..

12:14 am, July 2, 2019
css
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..

12:03 am, July 2, 2019
css
Drop Down Menu Swapping Left align to Right

this is useful if you have a nav that hits the right side of the screen and you want it to open on the left rather than the right side. you can see on the very right drop down item opens with its item..

5:36 am, June 26, 2019
asp
asp classic get a url and display it

gets a url and displays it using XMLHTTP

12:08 am, March 20, 2019
css
image Checkbox Replacement for Forms

Some sites like to be a bit tricky and have some complicated form checkbox replacement which is not all that hard, just can be a bit annoying as you have to extract the images for this to work. Demo ..

12:28 am, January 18, 2019
core
Core - File Structure

Core works on the following directory structure: //class//class/extends//css//db//images//import//inc//lib//pages//templates/ all of the core structure is fairly self explanitory core.class.php can..

11:38 pm, December 13, 2018
core
Core Class - Basic Core Structure

A Core class that can be used as a base for all content types and uses the extend classes to define the database variables. So basically you can set up core class and then create sub extend classes to..

11:33 pm, December 13, 2018
html
favicon code meta tag

if you want to link a png as a favicon

4:01 am, October 17, 2018
php
convert all images into base64 encoded

if you have a bunch of html with inline image links this will convert them into base64 images inline. <?php $html = "my html string with multiple image tags..."; $dom = new DOMD..

6:20 am, August 31, 2018
js
change the window title

 This is a pretty easy one liner But we can make it a bit more complex with jquery and add a counter It is questionable that crawlers and bots will see this so may be bad for SEO. document.t..

6:20 am, August 31, 2018
js
Slick Slider Carousel

Edit: Sorry this page was broken for a bit, its fixed now with working examples! 😛 Nice and simple slider / carousel

6:20 am, August 31, 2018
js
load google sheet data into json string with jquery

Just discovered this the other day, you can actually export google sheets data into json format and load it directly into your site, how good is that. A free mini basic database! Initially i was lo..

6:20 am, August 31, 2018
js
parallax js scroll testing

Update: the demo on this one seems a bit broken, i have to fix it! :) you can view a working demo here: https://codepen.io/kruxor/pen/PpGLRG This is one that i had a demo of on codepen, and then code..

6:20 am, August 31, 2018
html
take full page screenshot screencapture using chrome dev tools

This isnt really html, but its handy ;) Here is how to take a full page screen shot using the chrome dev tools. Open dev tools in chrome and the page you want to capture the image from F12 Pr..

6:20 am, August 31, 2018
css
use an image to replace bullet in ul list

How to replace the default bullet with an image in a ul tag .widget ul, .page-content ul { list-style-image: url('images/favicon.png'); }

6:20 am, August 31, 2018
css
color cycle drop shadow - rainbow drop shadow

Just incase you are bored with a static shadow, here you can cycle through a bunch of different shadow colours. .cycle-shadow { -webkit-animation:img-cycle 3s infinite; animation:img-cycle 3s i..

6:20 am, August 31, 2018
css
filter drop shadow

using a filter drop shadow can add shadow to transparent areas of a png filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.9));

6:20 am, August 31, 2018
css
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..

6:20 am, August 31, 2018
css
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..

6:20 am, August 31, 2018
css
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..

6:20 am, August 31, 2018
css
make your images look non squished when not using image backgrounds

Update: Fixed the code, you can see it here.  i deal with a lot of sites where they have a bunch of images listed and sometimes they can end up looking a bit sqashed unless you add a div and set..

6:20 am, August 31, 2018
css
set transparent menu over background image

this is probably obvious, but i found it useful for those themes that look nice with a semi-transparent header sitting over the top of an image. I think ill do this as an external example, as its eas..

6:20 am, August 31, 2018
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote

Please dont do this! 😜


Unknown Web Developer
Random CSS Property

<display-legacy>

CSS 2 used a single-keyword syntax for the display property, requiring separate keywords for block-level and inline-level variants of the same layout mode. This page details those values.
<display-legacy> css reference