Search
Search Code
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 ..
using a radial gradient for background overlay
usually i just use linear gradients for my background elements but i noticed this one the other day, a radial gradient. you can actually specify multiple colours and also opacity levels to overlay a ..
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..
Remove background image php with image magic
untested research on removing background and making it transparent with php
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..
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
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
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..
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 ..
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..
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.
copy image to data uri using chrome base64 encode
Update: 26 Aug 2020 - Fixed video and original image link all should be working now in chrome. Found this one useful if you want to convert an image to base64 encode and link it directly in css or ht..
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..
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..
wordpress get template directory
Get the current theme directory, good for use in wordpress templates. <?php echo get_template_directory_uri(); ?> Usage Example To link to an image located in the theme directory <..
