Pens from Sylvain Gamel https://codepen.io/sylvaingml/ en nospam@codepen.io Copyright 2024 2024-03-28T10:12:50-07:00 Table alignement - align vs CSS https://codepen.io/sylvaingml/pen/YzMQdya https://codepen.io/sylvaingml/pen/YzMQdya Sylvain Gamel

See the Code - See it Full Page - See Details

]]>
Table alignement - align vs CSS 2024-03-28T10:12:50-07:00
A Pen by Sylvain Gamel https://codepen.io/sylvaingml/pen/abxvEop https://codepen.io/sylvaingml/pen/abxvEop Sylvain Gamel

See the Code - See it Full Page - See Details

]]>
A Pen by Sylvain Gamel 2024-03-06T17:24:23-07:00
A Pen by Sylvain Gamel https://codepen.io/sylvaingml/pen/VwRGEyQ https://codepen.io/sylvaingml/pen/VwRGEyQ Sylvain Gamel

See the Code - See it Full Page - See Details

]]>
A Pen by Sylvain Gamel 2024-02-09T22:06:31-07:00
[A11y] Using proper entities impact accessibility https://codepen.io/sylvaingml/pen/wvOqPxz https://codepen.io/sylvaingml/pen/wvOqPxz Sylvain Gamel

See the Code - See it Full Page - See Details

Small example to show that HTML entities is not only a proper semantic description of your content for accessibility, but also the best way to handle internationalization and different kind of languages.

]]>
[A11y] Using proper entities impact accessibility 2024-01-26T08:40:48-07:00
[a11y] Basic accessibility examples https://codepen.io/sylvaingml/pen/MWLZmJo https://codepen.io/sylvaingml/pen/MWLZmJo Sylvain Gamel

See the Code - See it Full Page - See Details

]]>
[a11y] Basic accessibility examples 2023-12-05T10:37:16-07:00
Playing with colors https://codepen.io/sylvaingml/pen/LYqBwpJ https://codepen.io/sylvaingml/pen/LYqBwpJ Sylvain Gamel

See the Code - See it Full Page - See Details

]]>
Playing with colors 2024-01-11T17:21:20-07:00
A Pen by Sylvain Gamel https://codepen.io/sylvaingml/pen/YzBeBBg https://codepen.io/sylvaingml/pen/YzBeBBg Sylvain Gamel

See the Code - See it Full Page - See Details

]]>
A Pen by Sylvain Gamel 2023-11-20T12:52:31-07:00
[css] Playing with z-index https://codepen.io/sylvaingml/pen/LYqeyBa https://codepen.io/sylvaingml/pen/LYqeyBa Sylvain Gamel

See the Code - See it Full Page - See Details

This is a small illustration of the concept of z-stack and how positioned element automatically create their own z-stack.

]]>
[css] Playing with z-index 2023-11-17T13:47:30-07:00
[css] Layout example with combo of grid and flex https://codepen.io/sylvaingml/pen/RwvWvWR https://codepen.io/sylvaingml/pen/RwvWvWR Sylvain Gamel

See the Code - See it Full Page - See Details

]]>
[css] Layout example with combo of grid and flex 2023-10-27T08:57:29-07:00
[css] Simple layout for inner title https://codepen.io/sylvaingml/pen/ExrxzvZ https://codepen.io/sylvaingml/pen/ExrxzvZ Sylvain Gamel

See the Code - See it Full Page - See Details

This example show how you can use a 1x1 grid to position a title on top of horizontal separator for a title tag inside a list of contents.

]]>
[css] Simple layout for inner title 2023-10-23T09:53:13-07:00