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

Illustrator and the messy export of SVG symbols (for the moment)

Illustrator and the messy export of SVG symbols (for the moment)

This content is 4 years old. Remember that the following content might be outdated.In her beautiful article “Structuring, Grouping, and Referencing in SVG – The <g>, <use>, <defs> and <symbol> Elements” Sara Soueidan wrote about the SVG <symbol> element. To put it short (but you really SHOULD read the article) you can use <symbol> to group elements together and be able to re-use them later in your SVG. It looked like it works exactly like Illustrator symbols work so I …Continue reading

On codrops : Login and Registration Form with HTML5 and CSS3

This content is 6 years old. Remember that the following content might be outdated.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 …Continue reading