Search
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 ..
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...
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..
logo tickers marquee slow scrolling
logo tickers with a slide animation
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..
css slow zoom in animation
give a bit of extra interest to otherwise static images
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..
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.
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
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.
Add a post date to your custom wordpress post listing
this is an example using: get_the_date: this one gets the post date the_excerpt: which gets the .. excerpt or summary text from the post and get_the_post_thumbnail_url which gets the image from th..
using css linear gradient for background overlays
a few examples using css linear gradient for the background
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..
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.
cycle color using background
I found this the other day (well today actually) and i wanted to see how it worked. background-image: -webkit-linear-gradient(left,#D68AB0 0%,#D8CE5D 25%,#6BD85D 50%,#5DB9D8 75%,#D85DCB 100%); ..
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..
design nice block header
I saw this the other day and thought the color scheme looked quite nice. Ill see if i can replicate it here. @import url('https://fonts.googleapis.com/css?family=Raleway:300'); .mid-header { ..
