All posts in HTML, CSS & SVG
Enhancing User Experience With CSS Animations
With CSS and JS progress, implementing animations on websites has never been easier. But how do we make sure that our CSS animations and transitions will be meaningful to our users? That they will not be just some annoying “in-your-face” eye candy? That they will not trigger motion sickness and cause accessibility issues to some?
You will find here a transcript with CSS codepen and video examples and LOT of resources to dig further in specific topics. I also published the PDF version of the slides at the end of the article.
Fun places to learn CSS Layout – Part 2: Grid Layout
Grid Layout is an amazing set of CSS properties that will let you specify a grid layout system for you site with rows, columns and place your content accordingly. Pretty cool, right?
The syntax might be a little bit complex to learn if you come from good old floats, so here are some fun games, cheatsheets, visual playgrounds, generators and tutorials to help you learn and master everything you need to know about Grid Layout. Enjoy!
Portfolio Rework: Animation, Micro interaction & SVG
Stéphanie reworked her Portfolio and blog in 2018. I (Geoffrey) personally worked on the coding part, but also on the animation and micro-interaction part. And that’s what I want to write about today. Animation can be considered as part of a visual identity. Let’s go through the different little animations and their specificities. I want to share with you some tips, things I learnt before and practiced while creating those interactions, to inspire you.
Fun places to learn CSS Layout – Part 1: Flexbox
This content is 7 years old. Remember that the following content might be outdated.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 …
On codrops : Login and Registration Form with HTML5 and CSS3
This content is 12 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 …