Cuisine et Web

Recettes pour cuisiniers ou Web Dev en herbes

Articles et bouts de codes sur le devellopement Web coté visiteur. CSS - HTML - JavaScript

Flex, ajuster le nombre d'élements par lignes. CSS

Rédigé par G.Cyrille Aucun commentaire
Classé dans : Tutoriels, WebDev Mots clés : flex, column, pattern

Le vent en poupe, flex est partout dans nos feuilles de styles et dans les frameworks CSS.

Cette propriété reste parfois mystérieuse et magique pour certains.

Une question revient souvent, comment je fais des lignes avec X colonnes et des marges entre chaque?

Voici un petit tutoriel pour débutant, en guise d'article, nécessitant un minimum de connaissances en Flexbox.

Lire la suite de Flex, ajuster le nombre d'élements par lignes. CSS

Une grille d'hexagones qui s'imbriquent.

Rédigé par G.Cyrille 2 commentaires
Classé dans : Tutoriels, WebDev Mots clés : flex, float, shape-outside, SVG

le modéle de boite en flex donne une hauteur de référence aux enfants sans qu'il soit nécessaire de la déclaré dans la feuille de styles pour s'en servir. et c'est plutôt une bonne chose si l'on est dans un cas où cette hauteur varie selon le contenu ou la largeur de l'écran.

Lire la suite de Une grille d'hexagones qui s'imbriquent.

float et shape-outside.

Rédigé par G.Cyrille Aucun commentaire
Classé dans : CSS, WebDev Mots clés : float, shape-outside, gif, png, SVG, gradient

Float et shape-outside

Si float a beaucoup été utilisé pour créer des colonnes, choses auxquelles il n'etait pas vraiment destiné à l'origine, il a aujourd'hui shape-outside qui complete joliement son utilité premiere. définition sur Mozilla.org.

float permet d'ancrer à gauche ou à droite un élement en le retirant du flux naturel de la page. les contenus des élements suivant vont couler autour . Cette boite ainsi ancré se delimite par un rectangle de taille adaptée au contenu. c'est ce que shape-outside permet de modifier.

Lire la suite de float et shape-outside.

Un diaporama en fondu. start/stop

Rédigé par G.Cyrille 1 commentaire
Classé dans : CSS, HTML, WebDev Mots clés : animation, slider, CSS var()

Un exemple de ce que l'on peut faire sans javascript en détournant l'usage habituel d'élément de formulaire pour que le visiteur puisse inter agir avec le diaporama en stoppant l'animation et afficher l'une des 3 images.

Voici un slider, relativement simple, de trois images qui passe de l'une à l'autre en fondu.

D'un côté une animation qui se déroule indéfiniment que l'on peut mettre en pause, et de l'autre, des inputs de type radio et leurs labels pour afficher telle ou telle image en stoppant l'animation.

MAJ en fin d'article: un exemple avec var() CSS pour faciliter l'ajout ou le retrait d'une image à ce diaporama.

Lire la suite de Un diaporama en fondu. start/stop

Fausses colonnes avec inline-block et linear gradient

Rédigé par G.Cyrille Aucun commentaire
Classé dans : CSS, WebDev Mots clés : inline-block, linear-gradient

! Article en partie obsolète en ce qui concerne IE.

Non, il n'y a pas de soluce universelle pour simuler des colonnes et aligner leurs contenus respectifs, mais des tas, En voici une pour le souvenir.

Aujourd'hui, nous avons flex et grid, en passe de devenir universels, mais il reste de nombreux appareils en services (tablette,télephone,..), des navigateurs obsolétes ou exotiques (ex:TV connectées), il y a aussi les applis de courriels. Les vielles méthodes restent des alternatives utiles. .

Lire la suite de Fausses colonnes avec inline-block et linear gradient

Rideau coulissant en CSS (ouverture/fermeture)

Rédigé par G.Cyrille Aucun commentaire
Classé dans : CSS, WebDev Mots clés : linear-gradient, transform, transition, background-size

Reproduction simpliste d'une scéne de théatre avec le rideau qui s'ouvre et se ferme.

Au théatre Ce soir !

Lire la suite de Rideau coulissant en CSS (ouverture/fermeture)

Bouton CSS3 , avec ou sans images.

Rédigé par G.Cyrille Aucun commentaire
Classé dans : CSS, WebDev Mots clés : box-shadow, border-radius, transform, text-shadow, skew()

Peut-on reproduire un élément de design uniquement via CSS ?

L'image issue d'un fichier psd, source: dribble

exemple en image

Possible ou pas ?

Lire la suite de Bouton CSS3 , avec ou sans images.