Cuisine et Web

Recettes pour Cuisiniers ou Web Dev en herbes

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

CSS et valeurs négatives et container querie

Rédigé par G.Cyrille 59 vue(s) 2 commentaires
Classé dans : CSS, Tutoriels, WebDev Mots clés : aucun

Chaque régles CSS applique une valeur.

Selon les regles, ces valeurs sont des listes definies en textes ou des valeurs numeriques exprimées avec une unité de mesure (px,em, cm, etc.)

Pour les régles recevant des valeurs numériques, certaines n'acceptent pas de valeur négatives et sont tout bonnement ignorées par le navigateur.

Peut-on en tirer profit?

Oui

Lire la suite de CSS et valeurs négatives et container querie

Une catégorie PluXml sur le site

Rédigé par G.Cyrille 194 vue(s) Aucun commentaire
Classé dans : Dev Blog, WebDev Mots clés : aucun

Une nouvelle catégorie dédiée au C.M.S / S.G.C. PluXml ouvre bientôt a ouvert sur le site.

Pour y accéder, cliquer sur le lien PluXml du menu principal en bandeau ou , sur mobile, dans le hamburger.

Elle va tout d'abord servir à présenter les quelques ressources que je propose pour cet outil. Plugins, script ou thèmes.

Toutes ces ressources sont déjà disponibles sur github, voir le repo.

Les premiers articles seront à propos de l'installation et l'usages de plugins que je propose.

Lire la suite de Une catégorie PluXml sur le site

Le BLOB - Editeur(s) en ligne

Rédigé par G.Cyrille 243 vue(s) 2 commentaires
Classé dans : JavaScript, Dev Blog, WebDev Mots clés : blob, editeur en ligne, javascript, web api

Voici le code d'un petit éditeur en ligne simpliste qui permet de télecharger le code que vous ecrivez

Cet éditeur n'est qu'une base et n'a aucune fonctionalité autre que d'interpréter le HTML et CSS ecrit et de télécharger ceux-ci dans le corps d'un fichier au format HTML.

C'est le BLOB qui se chargera de vous envoyez ce fichier qui n'existera qu'une fois enregistrer sur votre machine.N'ayez aucune inquiétude, ce BLOB n'est pas vivant et n'est pas non plus un virus informatique.

Si ce petit editeur est interessant, passé le temps de vos premiers tests, créations et sauvegarde, il va s'averer vite peu productif, limité et incapable de classer quoique ce soit, c'est pourquoi Vous trouverez aussi ici une multitude de liens vers des editeur en lignes, pour certains de qualités professionnelles et pour de nombreux langages: html, CSS, JavaScript, regex, PHP, react native, Angular, Vue.js, etc.

Lire la suite de Le BLOB - Editeur(s) en ligne

grid et flex, leurs differences.

Rédigé par G.Cyrille 292 vue(s) Aucun commentaire
Classé dans : Layout, Tutoriels, WebDev Mots clés : flex, grid, layout, display

Ces dernieres années les modèles de boites utilisables se sont enrichis de deux type d'affichages en grilles: flex et grid.Vous en avez déjà probablement fait usage en reprenant des exemples qui fonctionnaient pour vos besoins. Voyons leurs différences et usages dans cet article.

Aux premiers abords et en les testant avec quelques elements, les résultats semblent similaires et peuvent preter à confusion dans leur usages et limites. Pourtant l'un ne fonctionne que sur un axe , portions par portions lorsque l'autre fonctionne sur les deux axes dans un tout, comme le ferait un tableau, ils sont en fait trés différents bien qu'ayant quelques propriétes apparement similaires.L'un etant plus flexible que l'autre posant un cadre.

Lire la suite de grid et flex, leurs differences.

La pseudo classe :nth-child(Xn) , pour un motif qui se répete ... ou pas.

Rédigé par G.Cyrille 1489 vue(s) Aucun commentaire

La pseudo classe :nth-child(X) permet de cibler un élement sur une position unique.

La pseudo classe :nth-child(Xn) permet de cibler un élement se situant toutes les N positions.

Par exemple, pour cibler tout les element se trouvant en quatriéme, huitiéme, douziéme, etc.. position: :nth-child(4n){} fera le travail.

Il est alors possible de mettre en place un motif visuel répétitif (pattern en anglais).

Nous profiterons de cet article pour evoquer les autres pseudo class autour de nth-child avec une petite parenthèse sur les selecteurs de combinaisons.

Lire la suite de La pseudo classe :nth-child(Xn) , pour un motif qui se répete ... ou pas.

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

Rédigé par G.Cyrille 1120 vue(s) 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 297 vue(s) 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 165 vue(s) 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.

Une mise à jour de l'article est en cours, ce sera un pré-requis pour appréhender l'article une grille d'hexagone imbriqués en CSS..

Lire la suite de float et shape-outside.

Histoire de colonne au fil du temps (layout)

Rédigé par G.Cyrille 122 vue(s) Aucun commentaire
Classé dans : CSS, Layout, WebDev Mots clés : layout, colonne, grid, flex, float, table

Cette article va vous donner quelques exemples reprenant les vielles méthodes en comparaison sur une structure courante avec

  1. un bandeau,
  2. une colonne de navigation et le contenu à coté
  3. et un pied de page sur toute la largeur.

Nous allons recréer cette structure visuelle en passant par float, grid et l'affichage en mode table.

Lire la suite de Histoire de colonne au fil du temps (layout)

Le selecteur :is()

Rédigé par G.Cyrille 69 vue(s) Aucun commentaire
Classé dans : CSS, Tutoriels, WebDev Mots clés : :is(), :where(), :not()

:is() est un sélecteur qui deviendra vite incontournable dans vos feuilles de styles aux cotés de :where() et :not()

Gardez un oeil sur Caniuse.com pour voir où en est le support dans nos navigateur

N'oublions pas la définition officielle de cette propriété.

Lire la suite de Le selecteur :is()

Un diaporama en fondu. start/stop

Rédigé par G.Cyrille 87 vue(s) 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 60 vue(s) 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 69 vue(s) 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 61 vue(s) 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.