CSS Archives - Copier coller https://www.copier-coller.com/css/ Des tutos wordpress pour les nuls !!! Sat, 31 Dec 2022 00:12:51 +0000 fr-FR hourly 1 https://wordpress.org/?v=6.1.7 https://www.copier-coller.com/wp-content/uploads/2018/03/cropped-copier-coller_06_favicon-32x32.png CSS Archives - Copier coller https://www.copier-coller.com/css/ 32 32 Créer une ombre verticale https://www.copier-coller.com/creer-une-ombre-verticale/ https://www.copier-coller.com/creer-une-ombre-verticale/#comments Sun, 11 Apr 2021 02:17:09 +0000 https://www.copier-coller.com/?p=6262 Ici le but est de créer une ombre sur les coins, pour donner l’impression qu’on a devant soi la page d’un livre. Sur le net, vous trouverez une foule d’exemples pour des ombres horizontales. En revanche pas grand chose sur des ombres verticales. Voici donc un exemple. Il doit y avoir une façon plus simple, [...]

The post Créer une ombre verticale appeared first on Copier coller.

]]> Comment créer un box shadow vertical sur un élement ?

Ici le but est de créer une ombre sur les coins, pour donner l’impression qu’on a devant soi la page d’un livre. Sur le net, vous trouverez une foule d’exemples pour des ombres horizontales. En revanche pas grand chose sur des ombres verticales. Voici donc un exemple. Il doit y avoir une façon plus simple, mais c’est déjà une approche :

Sur un conteneur parent, on crée deux pseudo-éléments  ::after et ::before. Ce sont deux lignes d’1px auxquelles on applique l’ombre et que l’on va lentement tourner (rotate) jusqu’à former un X derrière le conteneur.

Si on cible ces deux lignes via l’inspecteur, on voit bien qu’elles forment une croix. L’extrémité haute de la première va créer l’ombre du coin supérieur droit du conteneur.. et l’extrémité basse de la seconde va créer l’ombre du coin inférieur droit.

C’est un peu alambiqué mais ca fonctionne. La seule contrainte, c’est qu’il faut ensuite jouer sur les hauteurs et placements des deux lignes pour que ca passe en mobile/tablette

Voici l’exemple:

See the Pen
Vertical Curved Shadow by blindDev (@yuyazz)
on CodePen.

The post Créer une ombre verticale appeared first on Copier coller.

]]> https://www.copier-coller.com/creer-une-ombre-verticale/feed/ 1 counter css https://www.copier-coller.com/counter-css/ https://www.copier-coller.com/counter-css/#comments Sat, 10 Apr 2021 18:24:04 +0000 https://www.copier-coller.com/?p=6252 Voici une fonctionnalité bien pratique pour créer ses listes dynamiques sans avoir à passer par des pseudos éléments avec images. On commence par créer une instance du compteur avec l’attribut counter-reset sur la liste. On annule le style par défaut avec le list-style-type:none. Dans mon exemple, je ne me sert pas de ce code par [...]

The post counter css appeared first on Copier coller.

]]> Comment créer des listes numérotées rien qu’en css

Voici une fonctionnalité bien pratique pour créer ses listes dynamiques sans avoir à passer par des pseudos éléments avec images.

Créer une instance du compteur

On commence par créer une instance du compteur avec l’attribut counter-reset sur la liste.
On annule le style par défaut avec le list-style-type:none.

ol { 
counter-reset: li; 
list-style-type: none; 
}

Dans mon exemple, je ne me sert pas de ce code par défaut, et ca marche très bien.

Incrémenter ses items

Sur l’item du menu, on incrémente le compteur li, avec counter-increment: li; Puis en utilisant un pseudo element, on précise l’élément à incrémenter, ici nos items de menu « li »  : content: counter(li); De cette façon, à chaque nouveau « li », on aura notre numéro qui va s’afficher.

See the Pen
Counters CSS by blindDev (@yuyazz)
on CodePen.

Vous trouverez différentes manière de faire sur le web, à vous de trouver celle qui conviendra à votre site !

Et voici pour finir un cas pratique: pour expliquer le fonctionnement d’une fonctionnalité sur un site, on veut afficher la procédure à suivre sans que ca prenne trop de place. On crée donc un accordéon, un lien ou une div, sur lequel on clique pour dérouler les étapes à suivre. Ici au lieu d’une simple liste, on numérote chaque étape pour plus de clarté.

See the Pen
content:counter(li) by blindDev (@yuyazz)
on CodePen.

The post counter css appeared first on Copier coller.

]]> https://www.copier-coller.com/counter-css/feed/ 1 Créer une Step Progress Bar https://www.copier-coller.com/creer-une-step-progress-bar/ https://www.copier-coller.com/creer-une-step-progress-bar/#respond Sat, 10 Apr 2021 17:26:08 +0000 https://www.copier-coller.com/?p=6243 Ce genre de design est surtout visible sur les sites e-commerce ou les formulaires multi-étapes. On affiche des numéros, au clic sur un bouton on passe à l’étape suivante. Les numéros permettent de voir où l’on se situe. Voici donc un exemple simple, les numéros sont grisés par défaut (opacity;0.5) et au clic s’affichent à [...]

The post Créer une Step Progress Bar appeared first on Copier coller.

]]> Comment créer une « step progress bar » ou barre de progression par étape

Ce genre de design est surtout visible sur les sites e-commerce ou les formulaires multi-étapes. On affiche des numéros, au clic sur un bouton on passe à l’étape suivante. Les numéros permettent de voir où l’on se situe.

Une progression en 4 étapes

Voici donc un exemple simple, les numéros sont grisés par défaut (opacity;0.5) et au clic s’affichent à pleine opacité (opacity:1). Les div sont également cachées, positionnées en absolute, et la suivante remplace la précédente. Ici on peut passer de la 1ère à la dernière position et inversement.

See the Pen
Tab list by blindDev (@yuyazz)
on CodePen.

Une progression en 3 étapes

Et voici un exemple similaire en 3 étapes seulement

See the Pen
Simple Jquery – Css Step Process by blindDev (@yuyazz)
on CodePen.

The post Créer une Step Progress Bar appeared first on Copier coller.

]]> https://www.copier-coller.com/creer-une-step-progress-bar/feed/ 0 Appliquer un effet au survol des liens https://www.copier-coller.com/appliquer-un-effet-au-survol-des-liens/ https://www.copier-coller.com/appliquer-un-effet-au-survol-des-liens/#comments Sat, 10 Apr 2021 16:38:46 +0000 https://www.copier-coller.com/?p=6239 De plus en plus de sites utilisent cette technique de surlignement des liens, parfois débordant sur le mot lui même. Au survol, le surlignage recouvre tout ou partie du lien. Voici quelques exemples de surlignement et d’effets au survol : On utilise ici les propriétés css background-image, linear-gradient et transition. Pour le dernier, quelques propriétés [...]

The post Appliquer un effet au survol des liens appeared first on Copier coller.

]]> Comment créer une petite animation sur le surlignement des liens ?

De plus en plus de sites utilisent cette technique de surlignement des liens, parfois débordant sur le mot lui même. Au survol, le surlignage recouvre tout ou partie du lien.

Voici quelques exemples de surlignement et d’effets au survol : On utilise ici les propriétés css background-image, linear-gradient et transition. Pour le dernier, quelques propriétés peu utilisées et méconnues : text-decoration-color, text-decoration-thickness;

See the Pen
Highlight simple hover effet by blindDev (@yuyazz)
on CodePen.

The post Appliquer un effet au survol des liens appeared first on Copier coller.

]]> https://www.copier-coller.com/appliquer-un-effet-au-survol-des-liens/feed/ 1 Utiliser la propriété shape outside en css https://www.copier-coller.com/utiliser-la-propriete-shape-outside-en-css/ https://www.copier-coller.com/utiliser-la-propriete-shape-outside-en-css/#comments Sun, 31 May 2020 09:03:29 +0000 https://www.copier-coller.com/?p=6170 Si l’on se réfère à la page référence, « La propriété shape-outside définit une forme (qui peut ne pas être un rectangle) autour de laquelle le contenu en ligne devra « s’écouler ». Cette propriété permet donc de contourner un élément en épousant sa forme. On peut utiliser une valeur avec un mot clé Une valeur [...]

The post Utiliser la propriété shape outside en css appeared first on Copier coller.

]]> Comment utiliser la propriété shape outside

Si l’on se réfère à la page référence, « La propriété shape-outside définit une forme (qui peut ne pas être un rectangle) autour de laquelle le contenu en ligne devra « s’écouler ». Cette propriété permet donc de contourner un élément en épousant sa forme. On peut utiliser une valeur avec un mot clé

shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

Une valeur utilisant une fonction :

/* Valeurs utilisant une fonction */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
shape-outside: linear-gradient(45deg, rgba(255,255,255,0) 150px, red 150px);

Une valeur de type url :

/* Valeur de type <url> */
shape-outside: url(image.png);

Ou enfin une valeur du type gradient :


/* Valeur de type <gradient> */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

Mise en forme et pratique

L’utilisation de cette propriété n’est pas forcément simple. Ca l’est si l’on utilise une structure vraiment basique, comme suggéré sur la page css trick.

.element {  
  float: left;
  shape-outside: circle(50%);
  width: 200px;
  height: 200px;
}

Voici un exemple d’application :

Le principe est ici assez simple :

On prend une image. A l’origine celle-ci est carrée et fait 200px sur 200px. Je lui applique un border radius de 50% pour lui donner une apparence de cercle.

A la suite je place du texte dans une balise paragraphe.

J’applique un float à l’image, et la propriété shape-outside: circle(50%); Sans le border-radius, vous n’obtiendrez pas l’effet de contour. Le texte sera accolé à l’image. Grâce au border-radius, l’image apparaît arrondie et l’effet du shape-outside est nettement visible.

Utiliser shape-outside en imbriquant les éléments

Dans le deuxième exemple, on utilise le même principe, sauf que l’image est à l’intérieur d’une div, ainsi que le texte. Rien ne change ici, on cible également l’image et on applique le même css. L’effet fonctionne aussi. La difficulté survient lorsqu’on essaye d’utiliser cette propriété avec une mise en page en flex-box. L’effet ne marche plus et il faut donc bien réfléchir à la structure de ses blocs pour l’utiliser;

Utilisation avancée de la propriété shape-outside

Consultez ces deux références pour en savoir plus

css-trick et chromaticq 

The post Utiliser la propriété shape outside en css appeared first on Copier coller.

]]> https://www.copier-coller.com/utiliser-la-propriete-shape-outside-en-css/feed/ 1 Créer un conteneur enfant plus large que le conteneur parent https://www.copier-coller.com/creer-un-conteneur-enfant-plus-large-que-le-conteneur-parent/ https://www.copier-coller.com/creer-un-conteneur-enfant-plus-large-que-le-conteneur-parent/#respond Fri, 15 May 2020 20:08:14 +0000 https://www.copier-coller.com/?p=6152 Voici un CodePen dans lequel je teste différentes solutions souvent citées sur stackoverflow. Le but est de faire en sorte que la div enfant déborde et prenne toute la largeur de l’écran. See the Pen Full Width Containers in Limited Width Parents by blogob (@yuyazz) on CodePen. La solution la plus pratique est la deuxième [...]

The post Créer un conteneur enfant plus large que le conteneur parent appeared first on Copier coller.

]]> Comment faire en sorte que le conteneur enfant déborde de son parent ?

Voici un CodePen dans lequel je teste différentes solutions souvent citées sur stackoverflow. Le but est de faire en sorte que la div enfant déborde et prenne toute la largeur de l’écran.

See the Pen
Full Width Containers in Limited Width Parents by blogob (@yuyazz)
on CodePen.

La meilleur solution

La solution la plus pratique est la deuxième dans mon exemple :

margin: 0 -100%;
  padding: 0 100%;

En appliquant ces valeurs à la div que l’on veut étendre, la mise en page est respectée au redimensionnement de la fenêtre. Il n’y donc rien de plus à faire pour le responsive. Tous les autres exemples requièrent l’application de media queries, et aussi la nécessité de définir une largeur pour le bloc intérieur.

The post Créer un conteneur enfant plus large que le conteneur parent appeared first on Copier coller.

]]> https://www.copier-coller.com/creer-un-conteneur-enfant-plus-large-que-le-conteneur-parent/feed/ 0 Un footer widgetisé et conditionnel https://www.copier-coller.com/un-footer-widgetise-et-conditionnel/ https://www.copier-coller.com/un-footer-widgetise-et-conditionnel/#respond Mon, 02 Mar 2020 18:00:50 +0000 https://www.copier-coller.com/?p=5948 Ce mémo est une adaptation de l’article posté par l’agence Themetry. A peu près tous les sites ont un footer disposant de blocs de contenu : des sous menus, des liens, un logo, un calendrier ou tout autre élément décoratif. C’est particulièrement vrai sur les thèmes premium des CMS tels que wordpress. Des sidebar ou [...]

The post Un footer widgetisé et conditionnel appeared first on Copier coller.

]]> Comment disposer les widget du footer de façon optimale ?

Ce mémo est une adaptation de l’article posté par l’agence Themetry.

A peu près tous les sites ont un footer disposant de blocs de contenu : des sous menus, des liens, un logo, un calendrier ou tout autre élément décoratif. C’est particulièrement vrai sur les thèmes premium des CMS tels que wordpress. Des sidebar ou « emplacement de widgets » sont crées en backoffice pour le footer et l’utilisateur n’a plus qu’à y insérer les widgets de son choix.

Bien occuper l’espace

Une des difficultés lorsque l’on crée soi même un thème, c’est de faire en sorte que ces widgets normalement répartis sur 4 colonnes maximum, soient toujours bien affichés, quelque soit le nombre de sidebar utilisés.

Par exemple, si on en utilise 4, ils se répartissent avec chacun 25 % de l’espace disponible.

Avec 3 sidebar seulement, ils occupent chacun 33.33% de l’espace. A deux, 50% et avec une seule sidebar, le widget occupe tout l’espace.

Cela permet d’éviter des espaces vides ou des décalages visuellement dérangeants.

Si votre thème wordpress ne dispose pas d’emplacements de widgets

Dans notre fichier functions.php, il faut repérer le hook add_action( ‘widgets_init’, …) qui contient en principe une ou plusieurs déclarations de sidebar. Ajoutez-y les 4 emplacements dédiés au footer.

	register_sidebar( array(
		'name'          => esc_html__( 'Footer 1', 'votre_text_domain' ),
		'id'            => 'footer-1',
		'description'   => esc_html__( 'Add widgets here for the first footer column.', 'votre_text_domain' ),
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
	register_sidebar( array(
		'name'          => esc_html__( 'Footer 2', 'votre_text_domain' ),
		'id'            => 'footer-2',
		'description'   => esc_html__( 'Add widgets here for the second footer column.', 'votre_text_domain' ),
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
	register_sidebar( array(
		'name'          => esc_html__( 'Footer 3', 'votre_text_domain' ),
		'id'            => 'footer-3',
		'description'   => esc_html__( 'Add widgets here for the third footer column', 'votre_text_domain' ),
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );

  register_sidebar( array(
    'name'          => esc_html__( 'Footer area four', 'votre_text_domain' ),
    'id'            => 'footer-4',
    'description'   => esc_html__( 'Add widgets here for the third footer column', 'votre_text_domain' ),
	'before_widget' => '<section id="%1$s" class="widget %2$s">',
	'after_widget'  => '</section>',
	'before_title'  => '<h2 class="widget-title">',
	'after_title'   => '</h2>',
  ));

Dans le fichier footer.php, il faut ensuite placer nos sidebar avec des conditions. Tout le bloc est inclus dans une condition, et chaque bloc également. Ceci permet justement un affichage optimal, en fonction du nombre de sidebar utilisés.

<footer id="colophon" class="site-footer">
		<div class="site-info">
	<?php if ( is_active_sidebar( 'footer-1' ) || is_active_sidebar( 'footer-2' ) || is_active_sidebar( 'footer-3' ) || is_active_sidebar( 'footer-4' ) ) : ?>
			<div class="footer-widgets flex-container">
				<?php if ( is_active_sidebar( 'footer-1' ) ) : ?>
					<div class="footer-widget-area">
						<?php dynamic_sidebar( 'footer-1' ); ?>
					</div>
				<?php endif; ?>
				<?php if ( is_active_sidebar( 'footer-2' ) ) : ?>
					<div class="footer-widget-area">
						<?php dynamic_sidebar( 'footer-2' ); ?>
					</div>
				<?php endif; ?>
				<?php if ( is_active_sidebar( 'footer-3' ) ) : ?>
					<div class="footer-widget-area">
						<?php dynamic_sidebar( 'footer-3' ); ?>
					</div>
				<?php endif; ?>
				<?php if ( is_active_sidebar( 'footer-4' ) ) : ?>
					<div class="footer-widget-area">
						<?php dynamic_sidebar( 'footer-4' ); ?>
					</div>
				<?php endif; ?>
			</div><!-- .footer-widgets -->
		<?php endif; ?>
		</div><!-- .site-info -->
	</footer><!-- #colophon -->

La magie se situe au niveau du css.

Utiliser Flexbox

.footer-widgets {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-flow: column wrap;
           flex-flow: column wrap;
  }

.footer-widget-area {
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    padding:10px
}

@media (min-width:992px){
  .footer-widgets {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
  }

.footer-widget-area {
    width: 25%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    padding:10px
}
}

Ces quelques lignes de codes suffisent à répartir les widgets parfaitement quelque soit le nombre de sidebar utilisés.

Utiliser les siblings

Un autre système plus complexe mais intéressant à étuder et imaginé André luis puis Léa Verou utilise le système de « parentalité » des éléments.

si un div est le premier enfant et le dernier enfant (c’est-à-dire .footer-widget-area:nth-child(1):nth-last-child(1)), on peut supposer que c’est le seul enfant du parent donc il prend toute la largeur disponible.

Si un div est le premier enfant et l’avant-dernier enfant (c.-à-d. .footer-widget-area:nth-child(1):nth-last-child(2)), on peut supposer qu’il y a deux colonnes, donc chaque élément prend 50% de la largeur disponible.

Etc…

.footer-widget-area {
	border: 1px solid #000; /* For better visualization, not necessary */
	float: left;
}

/* One column */
.footer-widget-area:nth-child(1):nth-last-child(1) {
	float: none; /* No need for one column to float */
	width: 100%; /* Not necessary, but better illustrates technique */
}

/* Two columns */
.footer-widget-area:nth-child(1):nth-last-child(2),
.footer-widget-area:nth-child(2):nth-last-child(1) {
	width: 50%;
}

/* Three columns */
.footer-widget-area:nth-child(1):nth-last-child(3),
.footer-widget-area:nth-child(2):nth-last-child(2),
.footer-widget-area:nth-child(3):nth-last-child(1) {
	width: 33.3333%;
}

 

Voici le résultat avec un exemple statique :

Vous pouvez l’ouvrir dans codepen pour l’éditer, et notamment supprimer des blocs « footer-widget-area » pour voir le résultat.

See the Pen
Conditionnal Footer Widget Display by yuyazz (@yuyazz)
on CodePen.

N’hésitez pas, si vous avez des idées d’amélioration ou des corrections à apporter à ce tuto !

The post Un footer widgetisé et conditionnel appeared first on Copier coller.

]]> https://www.copier-coller.com/un-footer-widgetise-et-conditionnel/feed/ 0 Une page web oblique https://www.copier-coller.com/une-page-web-oblique/ https://www.copier-coller.com/une-page-web-oblique/#respond Sun, 01 Mar 2020 18:00:36 +0000 https://www.copier-coller.com/?p=5915 Voici un exemple de page oblique crée uniquement en html/css. C’est le genre de design que l’on voit souvent sur des images, portfolio ou présentation de thèmes. Rarement codées puisque très difficiles à maintenir, notamment le côté responsive qui est impossible à réaliser, ca reste néanmoins un exercice intéressant. Le rendu en tout cas est [...]

The post Une page web oblique appeared first on Copier coller.

]]> Comment créer une page html oblique ?

Voici un exemple de page oblique crée uniquement en html/css. C’est le genre de design que l’on voit souvent sur des images, portfolio ou présentation de thèmes. Rarement codées puisque très difficiles à maintenir, notamment le côté responsive qui est impossible à réaliser, ca reste néanmoins un exercice intéressant. Le rendu en tout cas est impressionnant. Je pars ici de l’exemple de bouton imaginé par l’auteur de ce codepen: https://codepen.io/Stockin/pen/mzydLz*/

Cliquez sur « Edit on CodePen » pour voir le résultat. Le fonction rotate, skew et translate font tout le travail, et elles s’activent dans l’exemple au delà de 1200px.

See the Pen
Oblik Web Page pure css by yuyazz (@yuyazz)
on CodePen.

N’hésitez pas, si vous avez des idées d’amélioration ou des corrections à apporter à ce tuto !

The post Une page web oblique appeared first on Copier coller.

]]> https://www.copier-coller.com/une-page-web-oblique/feed/ 0 Flex, un exemple de grille https://www.copier-coller.com/flex-un-exemple-de-grille/ https://www.copier-coller.com/flex-un-exemple-de-grille/#respond Fri, 28 Feb 2020 06:27:06 +0000 https://www.copier-coller.com/?p=5911 Voici un exemple de grille flex, trouvée sur le CodePen de Ruslan Pivovarov. Reprenant la logique bootstrap, elle comporte la base d’une disposition en 12 colonnes et permet de structurer sa page très facilement. Pour l’utiliser, il faut se servir du « container » pour englober son contenu. A l’intérieur on glisse autant de row que nécessaire. [...]

The post Flex, un exemple de grille appeared first on Copier coller.

]]> Créer une grille à partir de la propriété display: flex

Voici un exemple de grille flex, trouvée sur le CodePen de Ruslan Pivovarov.

Reprenant la logique bootstrap, elle comporte la base d’une disposition en 12 colonnes et permet de structurer sa page très facilement. Pour l’utiliser, il faut se servir du « container » pour englober son contenu. A l’intérieur on glisse autant de row que nécessaire. Et dans celles-ci, on glisse nos colonnes en se servant des classes flex-col-xs, flex-col-sm, flex-col-md, et flex-col-lg. Ce code peut être modifié, amélioré et on peut y ajouter toutes les autres classes utiles de bootstrap pour en faire son propre framework css de base !

.flex-container {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 1em;
}
@media (min-width: 540px) {
  .flex-container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .flex-container {
    max-width: 768px;
  }
}
@media (min-width: 992px) {
  .flex-container {
    max-width: 992px;
  }
}
@media (min-width: 1200px) {
  .flex-container {
    max-width: 1200px;
  }
}

.flex-row {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
}

.flex-row--align-v-center {
  align-items: center;
}

.flex-row--align-v-bottom {
  align-items: flex-end;
}

.flex-row--align-h-center {
  justify-content: center;
}

.flex-row--align-h-right {
  justify-content: flex-end;
}

.flex-row--reverse {
  flex-direction: row-reverse;
}

.flex-col-xs-1,
.flex-col-sm-1,
.flex-col-md-1,
.flex-col-lg-1 {
  box-sizing: border-box;
  padding: 1em;
  width: 100%;
}

@media (min-width: 540px) {
  .flex-col-xs-1 {
    max-width: calc(100% * (1 / 12));
    width: calc(100% * (1 / 12));
  }
}

@media (min-width: 768px) {
  .flex-col-sm-1 {
    max-width: calc(100% * (1 / 12));
    width: calc(100% * (1 / 12));
  }
}

@media (min-width: 992px) {
  .flex-col-md-1 {
    max-width: calc(100% * (1 / 12));
    width: calc(100% * (1 / 12));
  }
}

@media (min-width: 1200px) {
  .flex-col-lg-1 {
    max-width: calc(100% * (1 / 12));
    width: calc(100% * (1 / 12));
  }
}

.flex-col-xs-2,
.flex-col-sm-2,
.flex-col-md-2,
.flex-col-lg-2 {
  box-sizing: border-box;
  padding: 1em;
  width: 100%;
}

@media (min-width: 540px) {
  .flex-col-xs-2 {
    max-width: calc(100% * (2 / 12));
    width: calc(100% * (2 / 12));
  }
}

@media (min-width: 768px) {
  .flex-col-sm-2 {
    max-width: calc(100% * (2 / 12));
    width: calc(100% * (2 / 12));
  }
}

@media (min-width: 992px) {
  .flex-col-md-2 {
    max-width: calc(100% * (2 / 12));
    width: calc(100% * (2 / 12));
  }
}

@media (min-width: 1200px) {
  .flex-col-lg-2 {
    max-width: calc(100% * (2 / 12));
    width: calc(100% * (2 / 12));
  }
}

.flex-col-xs-3,
.flex-col-sm-3,
.flex-col-md-3,
.flex-col-lg-3 {
  box-sizing: border-box;
  padding: 1em;
  width: 100%;
}

@media (min-width: 540px) {
  .flex-col-xs-3 {
    max-width: calc(100% * (3 / 12));
    width: calc(100% * (3 / 12));
  }
}

@media (min-width: 768px) {
  .flex-col-sm-3 {
    max-width: calc(100% * (3 / 12));
    width: calc(100% * (3 / 12));
  }
}

@media (min-width: 992px) {
  .flex-col-md-3 {
    max-width: calc(100% * (3 / 12));
    width: calc(100% * (3 / 12));
  }
}

@media (min-width: 1200px) {
  .flex-col-lg-3 {
    max-width: calc(100% * (3 / 12));
    width: calc(100% * (3 / 12));
  }
}

.flex-col-xs-4,
.flex-col-sm-4,
.flex-col-md-4,
.flex-col-lg-4 {
  box-sizing: border-box;
  padding: 1em;
  width: 100%;
}

@media (min-width: 540px) {
  .flex-col-xs-4 {
    max-width: calc(100% * (4 / 12));
    width: calc(100% * (4 / 12));
  }
}

@media (min-width: 768px) {
  .flex-col-sm-4 {
    max-width: calc(100% * (4 / 12));
    width: calc(100% * (4 / 12));
  }
}

@media (min-width: 992px) {
  .flex-col-md-4 {
    max-width: calc(100% * (4 / 12));
    width: calc(100% * (4 / 12));
  }
}

@media (min-width: 1200px) {
  .flex-col-lg-4 {
    max-width: calc(100% * (4 / 12));
    width: calc(100% * (4 / 12));
  }
}

.flex-col-xs-5,
.flex-col-sm-5,
.flex-col-md-5,
.flex-col-lg-5 {
  box-sizing: border-box;
  padding: 1em;
  width: 100%;
}

@media (min-width: 540px) {
  .flex-col-xs-5 {
    max-width: calc(100% * (5 / 12));
    width: calc(100% * (5 / 12));
  }
}

@media (min-width: 768px) {
  .flex-col-sm-5 {
    max-width: calc(100% * (5 / 12));
    width: calc(100% * (5 / 12));
  }
}

@media (min-width: 992px) {
  .flex-col-md-5 {
    max-width: calc(100% * (5 / 12));
    width: calc(100% * (5 / 12));
  }
}

@media (min-width: 1200px) {
  .flex-col-lg-5 {
    max-width: calc(100% * (5 / 12));
    width: calc(100% * (5 / 12));
  }
}

.flex-col-xs-6,
.flex-col-sm-6,
.flex-col-md-6,
.flex-col-lg-6 {
  box-sizing: border-box;
  padding: 1em;
  width: 100%;
}

@media (min-width: 540px) {
  .flex-col-xs-6 {
    max-width: calc(100% * (6 / 12));
    width: calc(100% * (6 / 12));
  }
}

@media (min-width: 768px) {
  .flex-col-sm-6 {
    max-width: calc(100% * (6 / 12));
    width: calc(100% * (6 / 12));
  }
}

@media (min-width: 992px) {
  .flex-col-md-6 {
    max-width: calc(100% * (6 / 12));
    width: calc(100% * (6 / 12));
  }
}

@media (min-width: 1200px) {
  .flex-col-lg-6 {
    max-width: calc(100% * (6 / 12));
    width: calc(100% * (6 / 12));
  }
}

.flex-col-xs-7,
.flex-col-sm-7,
.flex-col-md-7,
.flex-col-lg-7 {
  box-sizing: border-box;
  padding: 1em;
  width: 100%;
}

@media (min-width: 540px) {
  .flex-col-xs-7 {
    max-width: calc(100% * (7 / 12));
    width: calc(100% * (7 / 12));
  }
}

@media (min-width: 768px) {
  .flex-col-sm-7 {
    max-width: calc(100% * (7 / 12));
    width: calc(100% * (7 / 12));
  }
}

@media (min-width: 992px) {
  .flex-col-md-7 {
    max-width: calc(100% * (7 / 12));
    width: calc(100% * (7 / 12));
  }
}

@media (min-width: 1200px) {
  .flex-col-lg-7 {
    max-width: calc(100% * (7 / 12));
    width: calc(100% * (7 / 12));
  }
}

.flex-col-xs-8,
.flex-col-sm-8,
.flex-col-md-8,
.flex-col-lg-8 {
  box-sizing: border-box;
  padding: 1em;
  width: 100%;
}

@media (min-width: 540px) {
  .flex-col-xs-8 {
    max-width: calc(100% * (8 / 12));
    width: calc(100% * (8 / 12));
  }
}

@media (min-width: 768px) {
  .flex-col-sm-8 {
    max-width: calc(100% * (8 / 12));
    width: calc(100% * (8 / 12));
  }
}

@media (min-width: 992px) {
  .flex-col-md-8 {
    max-width: calc(100% * (8 / 12));
    width: calc(100% * (8 / 12));
  }
}

@media (min-width: 1200px) {
  .flex-col-lg-8 {
    max-width: calc(100% * (8 / 12));
    width: calc(100% * (8 / 12));
  }
}

.flex-col-xs-9,
.flex-col-sm-9,
.flex-col-md-9,
.flex-col-lg-9 {
  box-sizing: border-box;
  padding: 1em;
  width: 100%;
}

@media (min-width: 540px) {
  .flex-col-xs-9 {
    max-width: calc(100% * (9 / 12));
    width: calc(100% * (9 / 12));
  }
}

@media (min-width: 768px) {
  .flex-col-sm-9 {
    max-width: calc(100% * (9 / 12));
    width: calc(100% * (9 / 12));
  }
}

@media (min-width: 992px) {
  .flex-col-md-9 {
    max-width: calc(100% * (9 / 12));
    width: calc(100% * (9 / 12));
  }
}

@media (min-width: 1200px) {
  .flex-col-lg-9 {
    max-width: calc(100% * (9 / 12));
    width: calc(100% * (9 / 12));
  }
}

.flex-col-xs-10,
.flex-col-sm-10,
.flex-col-md-10,
.flex-col-lg-10 {
  box-sizing: border-box;
  padding: 1em;
  width: 100%;
}

@media (min-width: 540px) {
  .flex-col-xs-10 {
    max-width: calc(100% * (10 / 12));
    width: calc(100% * (10 / 12));
  }
}

@media (min-width: 768px) {
  .flex-col-sm-10 {
    max-width: calc(100% * (10 / 12));
    width: calc(100% * (10 / 12));
  }
}

@media (min-width: 992px) {
  .flex-col-md-10 {
    max-width: calc(100% * (10 / 12));
    width: calc(100% * (10 / 12));
  }
}

@media (min-width: 1200px) {
  .flex-col-lg-10 {
    max-width: calc(100% * (10 / 12));
    width: calc(100% * (10 / 12));
  }
}

.flex-col-xs-11,
.flex-col-sm-11,
.flex-col-md-11,
.flex-col-lg-11 {
  box-sizing: border-box;
  padding: 1em;
  width: 100%;
}

@media (min-width: 540px) {
  .flex-col-xs-11 {
    max-width: calc(100% * (11 / 12));
    width: calc(100% * (11 / 12));
  }
}

@media (min-width: 768px) {
  .flex-col-sm-11 {
    max-width: calc(100% * (11 / 12));
    width: calc(100% * (11 / 12));
  }
}

@media (min-width: 992px) {
  .flex-col-md-11 {
    max-width: calc(100% * (11 / 12));
    width: calc(100% * (11 / 12));
  }
}

@media (min-width: 1200px) {
  .flex-col-lg-11 {
    max-width: calc(100% * (11 / 12));
    width: calc(100% * (11 / 12));
  }
}

.flex-col-xs-12,
.flex-col-sm-12,
.flex-col-md-12,
.flex-col-lg-12 {
  box-sizing: border-box;
  padding: 1em;
  width: 100%;
}

@media (min-width: 540px) {
  .flex-col-xs-12 {
    max-width: calc(100% * (12 / 12));
    width: calc(100% * (12 / 12));
  }
}

@media (min-width: 768px) {
  .flex-col-sm-12 {
    max-width: calc(100% * (12 / 12));
    width: calc(100% * (12 / 12));
  }
}

@media (min-width: 992px) {
  .flex-col-md-12 {
    max-width: calc(100% * (12 / 12));
    width: calc(100% * (12 / 12));
  }
}

@media (min-width: 1200px) {
  .flex-col-lg-12 {
    max-width: calc(100% * (12 / 12));
    width: calc(100% * (12 / 12));
  }
}

l’original est codée en scss

$device-xs: 540px;
$device-sm: 768px;
$device-md: 992px;
$device-lg: 1200px;
.flex-container {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 1em;
  @media (min-width: $device-xs) {
    max-width: $device-xs;
  }
  @media (min-width: $device-sm) {
    max-width: $device-sm;
  }
  @media (min-width: $device-md) {
    max-width: $device-md;
  }
  @media (min-width: $device-lg) {
    max-width: $device-lg;
  }
}

.flex-row {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
}

.flex-row--align-v-center {
  align-items: center;
}

.flex-row--align-v-bottom {
  align-items: flex-end;
}

.flex-row--align-h-center {
  justify-content: center;
}

.flex-row--align-h-right {
  justify-content: flex-end;
}

.flex-row--reverse {
  flex-direction: row-reverse;
}

@for $i from 1 through 12 {
  .flex-col-xs-#{$i},
  .flex-col-sm-#{$i},
  .flex-col-md-#{$i},
  .flex-col-lg-#{$i} {
    box-sizing: border-box;
    padding: 1em;
    width: 100%;
  }
  .flex-col-xs-#{$i} {
    @media (min-width: $device-xs) {
      max-width: calc(100% * (#{$i} / 12));
      width: calc(100% * (#{$i} / 12));
    }
  }
  .flex-col-sm-#{$i} {
    @media (min-width: $device-sm) {
      max-width: calc(100% * (#{$i} / 12));
      width: calc(100% * (#{$i} / 12));
    }
  }
  .flex-col-md-#{$i} {
    @media (min-width: $device-md) {
      max-width: calc(100% * (#{$i} / 12));
      width: calc(100% * (#{$i} / 12));
    }
  }
  .flex-col-lg-#{$i} {
    @media (min-width: $device-lg) {
      max-width: calc(100% * (#{$i} / 12));
      width: calc(100% * (#{$i} / 12));
    }
  }
}

The post Flex, un exemple de grille appeared first on Copier coller.

]]> https://www.copier-coller.com/flex-un-exemple-de-grille/feed/ 0 Créer un accordéon accessible pour vos infographies https://www.copier-coller.com/creer-un-accordeon-accessible-pour-vos-infographies/ https://www.copier-coller.com/creer-un-accordeon-accessible-pour-vos-infographies/#respond Wed, 26 Feb 2020 18:00:31 +0000 https://www.copier-coller.com/?p=5924 Les infographies sont partout, du bloc au site plus sérieux, et nous sommes peu nombreux à rendre cette image descriptive accessible. Pour rendre une infographie ou toute autre image complexe accessibles, une simple alternative textuelle ne suffit pas. Les infographies sont là généralement pour regrouper tout un tas d’informations de manière ludique visuelle et concise. [...]

The post Créer un accordéon accessible pour vos infographies appeared first on Copier coller.

]]> Comment rendre des infographies accessibles ?

Les infographies sont partout, du bloc au site plus sérieux, et nous sommes peu nombreux à rendre cette image descriptive accessible. Pour rendre une infographie ou toute autre image complexe accessibles, une simple alternative textuelle ne suffit pas. Les infographies sont là généralement pour regrouper tout un tas d’informations de manière ludique visuelle et concise. En terme d’accessibilité il est donc recommandé d’afficher à la suite du document un texte descriptif qui reprend toutes les informations présente dans l’image. Une façon discrète de la faire est d’utiliser un élément « accordéon ». Au clic sur le lien ou le bouton, le texte de description se déroule et se referme, ne perturbant pas la structure générale de la page.

Un accordéon non accessible, en css uniquement.

Voici un exemple d’accordéon non accessible. utilisant une checkbox pour plier/déplier le contenu.

See the Pen
Accordion only css (checkbox) by yuyazz (@yuyazz)
on CodePen.


C’est un simple « bouton » à placer sous l’infographie, qui reprendrait donc les informations présentes sur l’image. Au clic, le texte descriptif s’ouvre. On évite donc le display:none ou visiblity:hidden qui ne sont pas recommandés d’un point de vue SEO. Tous les tests menés par certains développeurs tendent à prouver que Google lit bien les éléments cachés via ces attributs, au moment du chargement de la page. Par contre, selon ces tests, et google le confirme, les éléments cachés en « display:none » ou via le jabascript sont largement moins bien considérés que les autres éléments présents sur la page.

La technique consiste donc à utiliser la notion de max-height. On joue sur la hauteur pour cacher ou dévoiler le texte.

La balise html « details »

On peut aussi utiliser la balise native <details><details> qui produit le même effet sans une ligne de code css ou js ! Malheureusement IE et Edge à l’heure actuelle ne comprennent pas cette balise !

Un accordéon accessible avec les attributs aria-hidden

Voici le même accordéon, rendu accessible via javascript. La partie html et css sont classiques,  On injecte les attributs aria-hidden:true ou false en javascript au clic sur le bouton.

Au lieu de jouer sur la notion de « checked » sur l’input checkbox, on injecte ici les classes « expanded’ ou ‘open » qui vont jouer exactement le même rôle au niveau du css.

Au niveau des balises aria, le bouton reçoit l’attribut aria-expanded= »false » ou aria-expanded= »true » en fonction du clic.

Le bloc de texte reçoit quand à lui l’attribut aria-hidden= »false » ou aria-hidden= »true » en fonction du clic.

 

See the Pen
Accessible accordion with javascript by yuyazz (@yuyazz)
on CodePen.

Autres Ressources

Vous trouverez d’autres exemples valides sur les pages suivantes:

a11y_accordions

W3C

Accessible accordion pattern

Collapsible sections

The post Créer un accordéon accessible pour vos infographies appeared first on Copier coller.

]]> https://www.copier-coller.com/creer-un-accordeon-accessible-pour-vos-infographies/feed/ 0