Expérimentation front-end CSS, HTML, JS, SVG.

Mon petit laboratoire d’expériences CSS, HTML, JS, SVG. Il y a des démonstrations, des animations, des snippets utiles pouvant être réutilisés, vous pouvez éditer les exemples dans Codepen pour comprendre comment ils fonctionnent et pouvoir les adapter pour vos propres projets.

Hamburger menu pure CSS

Menu hamburger généralement utilisé pour la version mobile d’un site. Il peut aussi être utilisé sur site pour desktop, apportant un aspect minimaliste à l’UI du site. L’avantage de ce menu hamburger est qu’il n’utilise absolument pas de Javascript, mais uniquement du CSS et du HTML. Il fonctionne même sans CSS. Grâce aux balises HTML details et summary et la propriété open de details.

See the Pen Pure CSS Hamburger Menu – No JS by alticreation (@alticreation) on CodePen.

Effet reveal en Vanilla JS

C’est un effet intéressant pour amener du dynamisme à des pages web statiques. Attention à ne pas en abuser. La façon dont ce module est développé permet de l’implémenter rapidement et facilement sur vos pages HTML en modifiant uniquement le HTML et en utilisant la même fonction en pure Javascript à travers tout le site web.

See the Pen Revealing text effect CSS/JS by alticreation (@alticreation) on CodePen.

Texte SVG animé

See the Pen Text animation with Snap SVG by alticreation (@alticreation) on CodePen.

Effet hover bouton pure CSS

See the Pen Pure Css Button Hover effect by alticreation (@alticreation) on CodePen.

See the Pen Minimalist Pure CSS DropDown Responsive Menu by alticreation (@alticreation) on CodePen.

Logo Design Motion Pure CSS

See the Pen Pure css logo animation by alticreation (@alticreation) on CodePen.

Custom List Marker in CSS

See the Pen Custom List Marker with CSS by alticreation (@alticreation) on CodePen.

Plus d’expérimentations Front-End

https://codepen.io/alticreation