Tag: CSS
-
Gradient text gaps with CSS
I was reading an article recently that had some really nice graphic design examples. One piece that stood out was a poster that had a continuous gradient that filled the gaps between words in a block a text. I wondered if it could be achieved dynamically in CSS. Below is my result. Note that this…
-
Blur gradient with CSS
The other day I came across a design on Layers that used a blur fade over an image as a backdrop for text in a card. It reminded me of a similar thing I attempted a couple years ago in CSS but wasn’t able to get working. I decided to have another go at it…
-
First blog redesign in 8 years, sort of
If you a reading this on purplesquirrels.com.au then you might not see any difference. If you are on benfoster.com.au then you will be seeing the new site. It’s hard to believe that the last redesign of my blog was all the way back in 2014. I made a few tweaks back in 2019, but for…
-
Recreating the Apple Watch UI using a hexagonal grid
Building on the hexagonal grid from earlier, I have added a little JavaScript and have created an effect similar to the Apple Watch home screen UI. Below is a video of it in action, I am using IE11 (metro version) on a Surface Pro 2 which I found to be the most performant for this…
-
CSS Diamond grid
Following on from the last post I decided to play a bit more with the hexagonal grid and created a diamond grid. It works similar to the last grid except it uses squares rotated 45 degrees, so it is basically a regular grid tipped on its side with even-odd number alternating rows. Here is a…
-
CSS Hexagonal packed grid
Most grids are square packed – that is each cell is stacked like a block which is great, but if you are after something slightly different maybe you should try a hexagonally packed grid. I will show you how to create a hexagonally packed grid using only CSS. But first, here is the difference between…
-
A LESS mixin for a transition with a prefixed transition-property
The most common mixin you will find in LESS for CSS3 transitions is something like the following: The proplem with this is that if you want to transition a property that requires a prefix such as transform: You will end up with: This is not what you want, you need to have the transition-property prefixed…
-
Slide transition effects with CSS
Here are some slide transition experiments I created using CSS. View Demo You can view the source of the demos to see how they were made. They have all been tested and work in all the latest browsers – Chrome, Firefox, IE 10+. There are 6 in total: Card fall Card fall forward Carousel 3D…
-
Melbourne train map in CSS
About three weeks ago I was showing my team at work the london CSS tube map and I jokingly put forward the challenge for the first person to make the Melbourne map in CSS gets a dollar. But after looking at the map properly I realised that it actually wouldn’t be that hard – far…
-
Hover shine effect with pure CSS
This is a simple example of a mouse-over shine effect I created using purely CSS. It uses a CSS generated element and CSS3 transitions to animate the effect. See the comments in the markup below for further explanation of how it works. Live demo: Click Me Simple HTML markup: [cc lang=”html”] Click Me [/cc] And…