background preloader

HTML/CSS

Facebook Twitter

Clippy — CSS clip-path maker. UI Movement - The best UI design inspiration, every day. Completely CSS: Custom checkboxes, radio buttons and select boxes. Typically, forms are the most uninteresting, uninviting and inaccessible parts of the web.

Completely CSS: Custom checkboxes, radio buttons and select boxes

This is mainly due to the complexities that come with styling form elements, and overriding browser defaults. With a little extra markup, our form elements can be styled in almost any way, and be as accessible as we choose to make them - no JavaScript required. Note: The following tutorial is intended for beginners; if you want to get straight to the point, head to the demo and check out my codepen. Checkboxes and radio buttons First of all, let’s lay out our HTML. So if you have ever worked with form elements before, you will be familiar with most of our markup - but maybe not in this order. Now that our structure is laid out, we can start styling our checkboxes/radio buttons.

Hamburgers by Jonathan Suh. Table of Contents Usage Using Hamburgers for your site is easy (well, that was my intention anyway).

Hamburgers by Jonathan Suh

Sass .scss source files are available if you use Sass as your CSS precompiler. It’s customizable and modular. Hamburgers is available via npm, yarn and Bower.npm install hamburgers yarn get hamburgers bower install css-hamburgers Also available as a Ruby gem to use within your Rails application—see below for more information. Animated Letters. Ashin bogyoke nang maung tekkatho sawbwa binnya In the following effects we also use mo.js for additional animations: thakin zeya sanda duwa sao.

Animated Letters

Inspiration for Text Styles and Hover Effects. Material Design'ish Hover & Click Effect. CodyHouse. Tutoriel Vidéo HTML-CSS Animer l'icône hamburger. Aujourd'hui nous allons apprendre à animer l'icône hamburger, cette fameuse icône composée de 3 traits horizontaux qui est de plus en plus incontournable.

Tutoriel Vidéo HTML-CSS Animer l'icône hamburger

Au niveau du code HTML on va essayer de rester le plus simple possible en évitant au maximum les éléments inutiles Malheureusement, on sera tout de même obligé de rajouter un élément vide à l'intérieur de notre élément pour créer les 3 petits traits. L'élément .menu-icon permettra de définir la zone cliquable mais aussi de mettre un fond si besoin. L'icône en CSS Notre but est donc de transformer cette <span> en 3 petit traits. Ensuite on va utiliser les pseudos éléments ::before et ::after afin de créer la barre au dessus et en dessous. Et hop le tour est joué il nous reste plus qu'à animer De l'icône vers la croix On veut maintenant transformer notre icône en croix lorsque la classe de notre élément devient .is-opened.

Bordures animées On va commencer par créer un cercle que l'on place dans notre élément .menu-icon Et voila ! A Complete Guide to Flexbox. Background The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").

A Complete Guide to Flexbox

CSS3 Flexbox Layout module. Vous connaissez certainement le modèle de boîte classique en CSS et ses dispositions de type “block” ou “inline”, sachez que Flexbox CSS3 a été conçu pour étendre ce périmètre en introduisant un nouveau modèle de boîte distinct, que l’on appellera “le Modèle de boîte flexible”.

CSS3 Flexbox Layout module

En février 2016 est sorti mon livre entièrement dédié à Flexbox. Il se nomme "CSS3 Flexbox : plongez dans les CSS modernes" et je vous recommande bien évidemment sa lecture afin de comprendre tous les rouages de ce positionnement révolutionnaire, et d'en maîtriser tous les aspects. Au sein de ce schéma, on ne raisonne plus en “block” ou “inline”, ni même en float ou autres types de boîtes “classiques” CSS, mais en “Modèle de boîte flexible”, dont les quatre possibilités principales sont : Note : ce tutoriel a été initialement rédigé en octobre 2010.

Il a subi une refonte intégrale en décembre 2014 pour se mettre à jour. Une grille responsive avec CSS3 Flexbox et LESS (ou Sass) Ce tutoriel a pour but de présenter dans les détails une technique de conception de grille de mise en forme responsive à l’aide du positionnement CSS3 Flexbox Layout, actuellement parfaitement adapté à ce genre de fonctions en attendant une meilleure implémentation de Grid Layout.

Une grille responsive avec CSS3 Flexbox et LESS (ou Sass)

En février 2016 est sorti mon livre entièrement dédié à Flexbox. Il se nomme "CSS3 Flexbox : plongez dans les CSS modernes" et je vous recommande bien évidemment sa lecture afin de comprendre tous les rouages de ce positionnement révolutionnaire, et d'en maîtriser tous les aspects. Le concept de grille produite permettra de gérer les espaces inter-colonnes (gouttières), les décalages (“offsets”), les différentes tailles d’écran et d’être automatisable. Le tout en un minimum de code et un maximum de propreté HTML.

Voir le résultat final en ligne Le fondement : Flexbox Layout Les bases de la grille .container-grid-4 { }.container-grid-4 > * { } Ébauche de grille en flexbox Gérer la gouttière Bonus : “à la Une” Canvas Sine Wave. La Typographie.