Tag CSS

Tag CSS RSS 2.0 Feed

Responsive embedded D3 SVG

The most D3 examples that I can find are not responsive embedded SVG. I guess the main reason for that is not to confuse the reader of a tutorial with stuff outside of D3. With the help of How to Scale SVG from Amelia Bellamy-Royds I would like to show on a minimal D3 example how to make the resulting SVG responsive.

Continue reading ...

CSS conflict between Bootstrap 4 and Prism

Bootstrap 4.0.0-alpha.5 is styling the class .tag and this leads to a CSS conflict with the Prism syntax highlighter. Here my fix to solve this conflict.

Continue reading ...

Upgrade from Bootstrap version 3 to 4

Bootstrap 4.0.0 seems to be released soon. My small blog is mostly based on plain Bootstrap with a few color changes. I will try to upgrade from Bootstrap 3.3.6 to version v4.0.0-alpha.5. This post will just document the changes that I have noticed while upgrading.

Continue reading ...

Greenprint - A Prism syntax highlighting theme

I have started the development of my own Prism theme. I was mostly inspired by the awesome Prism theme of Mozilla Developer Network. I thought it would be difficult, but in general it is just defining some colors. The theme is also used by blog.

Continue reading ...

CSS blur overlay

Unfortunately it is not possible to create a real blur overlay with CSS for all browsers at the moment. Only webkit has the backdrop-filter. But all other browsers mostly support a blur filter. This will not really work like a overlay, more like a filter that will be propagated bottom-up. In other words, the filter works only for a hole element or not. It's impossible to have something like a div overlay element that blurs only a part of an image like the backdrop-filter.

Continue reading ...

CSS background transitions with image sprites

You will start thinking about image sprites, if you see that your website has too many requests just because of some background images. An image sprite can combine many single requests from a browser to the server into one request. We just have to combine our background images into one single image and use the CSS property background-position. It's just getting complicated if you have a transition on the background.

Continue reading ...

Bootstrap responsive embed aspect ratio

Bootstrap responsive embed can be very helpful to show responsive PDF files or videos. But it supports only the aspect ration 16by9 and 4by3. But what about other aspect rations? For example 210by297 would be interesting to embed a A4 paper.

Continue reading ...

CSS conflict between WordPress Twenty Fifteen and embedded Github Gists

5 minutes ago I have written a post with a Github Gist. You can embed Gists like this in your posts

<script src="https://gist.github.com/GordonLesti/8822532.js"></script>

But the gist has looked like this

before

Continue reading ...