Using SVG paths with CSS clip-path
4 months ago
If you have ever tried to use an SVG path for a CSS clip-path you would have likely ran into the issue where the SVG path doesn’t correctly scale and fill the DOM element to clip it.
If you have ever tried to use an SVG path for a CSS clip-path you would have likely ran into the issue where the SVG path doesn’t correctly scale and fill the DOM element to clip it.
I recently discovered a strange issue where inserting colour stops in gradients with my colour picker was not inserting the correct color. It was slightly off, a bit darker than what was expected. I knew Chrome has recently released support for new colour spaces, could this be causing the problem? Turns out, yes. The same issue was not occurring in Firefox.
READ MORE
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 effect. Chrome was janky as hell, and Safari on the iPad doesn’t like to do things while scrolling.
READ MORE
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 live demo of the 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 square and a hexagonal packed grid:
The most common mixin you will find in LESS for CSS3 transitions is something like the following:
.transition (@prop, @time, @ease) {
-webkit-transition: @prop @time @ease;
-moz-transition: @prop @time @ease;
-ms-transition: @prop @time @ease;
-o-transition: @prop @time @ease;
transition: @prop @time @ease;
}The proplem with this is that if you want to transition a property that requires a prefix such as transform:
.transition(transform, 0.5s, ease-out)You will end up with:
-webkit-transition: transform 0.5s ease-out;
-moz-transition: transform 0.5s ease-out;
-ms-transition: transform 0.5s ease-out;
-o-transition: transform 0.5s ease-out;
transition: transform 0.5s ease-out;This is not what you want, you need to have the transition-property prefixed as well as the transition. Below is a mixin that I came up with that will solve this problem:
.transitionPrefixProp (@prop, @time, @ease) {
-webkit-transition: e("-webkit-@{prop}") @time @ease;
-moz-transition: e("-moz-@{prop}") @time @ease;
-ms-transition: e("-ms-@{prop}") @time @ease;
-o-transition: e("-o-@{prop}") @time @ease;
transition: @prop @time @ease;
}Which will output:
-webkit-transition: -webkit-transform 0.5s ease-out;
-moz-transition: -moz-transform 0.5s ease-out;
-ms-transition: -ms-transform 0.5s ease-out;
-o-transition: -o-transform 0.5s ease-out;
transition: transform 0.5s ease-out;This is kind of a brute force approach by adding all prefixes regardless of whether they are required, but it does work well.
Here are some slide transition experiments I created using CSS.
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:
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 easier than the London tube map.
And so three weeks later here it is – the map is built entirely from HTML and CSS. No images were used. It should display correctly in all the latest browsers: Firefox, Chrome and IE 10+.
PurpleSquirrels has gone responsive. I have just flicked the switch on the new PurpleSquirrels design. The new design – which I have been working on over the last few weeks – is now responsive which will make it much easier to read content on mobile devices as it adapts to smaller screens. I had been wanting to make the blog responsive for quite a while but just hadn’t been able to find the time. I contemplated adding it onto the existing design but I decided it would be more beneficial to redesign the whole blog to make it much simpler.
The previous design used a large ‘hero’ image for the first post on the home page. I have taken this idea and refined it in the new version. Now all posts get a large image on the home page and on single post pages.
Visitors using Chrome will notice the use of blurred images at the top of each page which make the blog header reflect the current post. The blurring has been done using CSS filters so no server side scripts are needed and no extra images are downloaded. Browsers that don’t support it will just see un-blurred images. I quite like the effect – blurred or not – of having every page take on it’s own personality depending on what post you are reading.
One thing I have been taking advantage of a lot lately is the use of the :before and :after pseudo elements to create non-rectangular shapes and so I wanted to include this technique in the redesign. All the angular elements such as the purple post date ribbon and the angular post image have been created using purely in CSS using pseudo elements and borders. No images required!
In fact the only images used in the blog template is the PurpleSquirrels logo (a long version and a short version). The logo is an SVG so it should appear nicely on all devices.
On the single post pages I have added next post and previous post buttons which stick to the sides of the screen. They appear as just arrows and slide out when you mouse over them. They have been created purely from CSS.
The final major change is the slide down header that appears once you scroll past the main header, this allows you to access the menu and home page without having to scroll back to the top.
I have also dropped support for IE8 and below – supporting older browsers severely restricts the use of new technologies and I believe holding on to the past just prevents the web from moving forward. If we keep supporting old browsers then where’s the incentive to upgrade, right?
I hope you like the new design. It gave me a chance to utilise some new techniques I’ve learnt, some of which I wouldn’t get a chance to use in client work.
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:
Simple HTML markup:
[cc lang=”html”]
[/cc]
And the CSS:
[cc lang=”css”]
/* normal button style */
.myButton {
width: 110px;
height: 30px;
background-color:#0099cc;
text-align: center;
color: #FFF;
position: relative;
}
/* button hover style if required */
.myButton:hover {
}
/* generated element for shine effect.
* normal state is semi-transparent
* white but with zero width. Set no
* transition here for no mouse-leave
* animations. Otherwise the effect
* will play in reverse when your mouse
* leaves the element
*/
.myButton:after {
content: “”;
position: absolute;
top: 0px;
left: 0px;
width: 0%;
height: 100%;
background-color: rgba(255,255,255,0.4);
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
/* on hover we animate the width to
* 100% and opacity to 0 so the element
* grows and fades out
*/
.myButton:hover:after {
width: 120%;
background-color: rgba(255,255,255,0);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
[/cc]