All posts in HTML, CSS & SVG

Fun places to learn CSS Layout –  Part 1: Flexbox

Fun places to learn CSS Layout -  Part 1: Flexbox

When I started learning CSS, it was all about playing with floats and hacking things around absolute and relative positioning to kind of achieve what you wanted to do. Today we got cool new tools to create layouts: Flexbox and Grid Layout. If you forget about IE9 and older, Flexbox is supported pretty much everywhere and can be used to create flexible and stretchable layouts. For the moment Grid Layout, it is not supported everywhere, but still quite promising if you …Continue reading

Quick Tip: exporting a SVG with a pattern that works in IE/Edge from Illustrator CC 2015

Quick Tip: exporting a SVG with a pattern that works in IE/Edge from Illustrator CC 2015

TLDRN: if you need to export an SVG pattern with Illustrator (CC 2015) and want it to work in Internet Explorer and Edge, use File > Export (and not the File > Save as). Also don’t copy/paste your SVG from AI directly into your code editor.Continue reading

On codrops : Login and Registration Form with HTML5 and CSS3

With the CSS3 pseudo class :target  you can change CSS based on a targeted link < a href = “#mylink” > . I used the property to with some transitions to create a double login/scubscribe CSS3 HTML5 form. Both forms are in the HTML, the second is hidden until the users clicks a link that will target the second one. This used to be done in JavaScript but with CSS3 you can easily create the same effect in pure CSS3. …Continue reading

Top sliding navigation using CSS3 and jquery

I was recently making some experimentation with the CSS3 transition, to create a sort of sliding menu.  The main idea was to have a menu composed of 4 items life tabs, dropping from the top of the website, with a sliding animation. See the example Download the files Using CSS3 transition and background-image position My first idea was to use a sprite like technique for the different tabs : one image, half hidden, and to show the entire image on …Continue reading

Flexible tabs menu using border-image css3 property

Don’t you get tired of the almost perfect rounded corners of border-radius? Don’t you sometimes wish to be able to create more complex shapes? Usually when we want to create more complex shapes, we have to use images. The problem is the lake of flexibility. In most cases you just create the shape large enough to enclose your whole biggest item. But what happens if a day you get an even larger one? Well you re-create the image larger? Here …Continue reading