Catégorie : CSS

Astuces CSS pour développeurs front-end / intégrateurs html.

[CSS] Centrer un container dans la page mais qu’il n’y ait qu’une marge à gauche

16/05/2023 / admin


page
--------------------
|   container      |
|   ---------------|
|   |              |
|   |              |

margin-left: calc(50% - (1920px / 2));

1	margin-left: calc(50% - (1920px / 2));

[CSS][LESS] Un effet d’animation pour un lien souligné dont le texte s’étend sur plusieurs lignes avec background-size

07/03/2023 / admin

Attention: Le critère du multi-lignes est très important pour ce type d’effet. Si il n’est pas pris en compte, le soulignement peut n’apparaître que sous la dernière ligne de texte du lien.

Ressources en ligne:

Animated Multiline Link Underlines with CSS par Danny Guo (CodePen)
Animated CSS underlines that wrap et A CSS-only, animated, wrapping underline using CSS background properties qui m’ont bien aidé a créer l’animation inédite ci-dessous!
10 CSS Snippets for Creating Stunning Animated Underline Text Effects

…et un effet que j’ai dû créer moi-même car il n’existait pas dans les ressources ci-dessus. La bordure sous le lien a deux couleurs: couleur lien normal et couleur lien souligné. La particularité de cet effet vient du fait qu’au survol du lien, le changement de couleur s’effectue en partant du milieu (50%) et avec deux balayages simultanés à gauche (pour atteindre 0%) et à droite (pour atteindre 100%).

.link-underline--multiline(
    @border-color-hover: red;
    @border-color: black) {
    padding: 0 0 2px 0;
    text-decoration: none;
    background-image: linear-gradient(@border-color-hover, @border-color-hover),
                      linear-gradient(@border-color, @border-color);
    background-size: 0% 1px, 100% 1px;
    background-position: 50% 100%, 50% 100%;
    background-repeat: no-repeat;
    transition: background-size .1s linear;

    &:hover {
        background-size: 100% 1px, 100% 1px;
    }
}

.link-underline--multiline(

@border-color-hover: red;

@border-color: black) {

padding: 0 0 2px 0;

text-decoration: none;

background-image: linear-gradient(@border-color-hover, @border-color-hover),

linear-gradient(@border-color, @border-color);

background-size: 0% 1px, 100% 1px;

background-position: 50% 100%, 50% 100%;

background-repeat: no-repeat;

transition: background-size .1s linear;

&:hover {

background-size: 100% 1px, 100% 1px;

}

[CSS] Désactiver le scroll dans la page lorsqu’un élément en position absolue (de type Modale, Off-Canvas, …) est ouvert en sur-impression

21/01/2021 / admin

ATTENTION: cette solution testée fonctionnelle est plus simple à mettre en place que les solutions précédemment citées sur ce blog:

Source: Disable Scrolling on Body

// Bloquer le scroll de la page lorsqu'un élément en position absolute (off-canvas, modale...) est ouvert:
function handlePageScrollState() {
    const $_HTML = $('html');
    if ($_HTML.hasClass('is-disabled-page-scroll')) {
        $_HTML.removeClass('is-disabled-page-scroll');
    } else {
        $_HTML.addClass('is-disabled-page-scroll');
    }
}

// Bloquer le scroll de la page lorsqu'un élément en position absolute (off-canvas, modale...) est ouvert:

function handlePageScrollState() {

const $_HTML = $('html');

if ($_HTML.hasClass('is-disabled-page-scroll')) {

$_HTML.removeClass('is-disabled-page-scroll');

} else {

$_HTML.addClass('is-disabled-page-scroll');

}

.is-disabled-page-scroll {
    margin: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

.is-disabled-page-scroll {

margin: 0 !important;

height: 100% !important;

overflow: hidden !important;

}

[CSS] Des effets de fonds de couleur avec séparateur oblique avec linear-gradient

18/11/2020 / admin

dégradé de fond avec effet d’oblique sur codepen.io

/* https://cssgradient.io/ */
background: linear-gradient(170deg, transparent 0%, transparent 15%, #020024 15.1%, #020024 100%);

1 2	/* https://cssgradient.io/ */ background: linear-gradient(170deg, transparent 0%, transparent 15%, #020024 15.1%, #020024 100%);

[jQuery][CSS] Etendre le fond d’un mega menu déroulant sur toute la largeur de la fenêtre du navigateur

02/06/2020 / admin

Souvent, le fond d’un menu déroulant occupe l’espace dans la limite de l’élément .container d’une page.

La classe .nav-open sur l’élément body permet de placer un overflow-x: hidden; qui va venir empêcher l’apparition d’un scroll horizontal dans le fenêtre de votre navigateur lorsque le menu sera ouvert.

    body.nav-open {
        overflow-x: hidden;
    }
    .navigation {
        ul .level0 .submenu__container {
            &:before,
            &:after {
                position: absolute;
                z-index: 0;
                content: "";
                width: 50%;
                height: 100%;
                top: 0;
                background: #fff;
            }
            &:before {
                left: -50%;
            }
            &:after {
                right: -50%;
            }
        }
    }
}

body.nav-open {

overflow-x: hidden;

}

.navigation {

ul .level0 .submenu__container {

&:before,

&:after {

position: absolute;

z-index: 0;

content: "";

width: 50%;

height: 100%;

top: 0;

background: #fff;

}

&:before {

left: -50%;

}

&:after {

right: -50%;

}

    $(document).on('mouseenter', '.navigation', function() {
        $('body').addClass('nav-open');
    }).on('mouseleave', '.navigation', function() {
        $('body').removeClass('nav-open');
    });

$(document).on('mouseenter', '.navigation', function() {

$('body').addClass('nav-open');

}).on('mouseleave', '.navigation', function() {

$('body').removeClass('nav-open');

});

[CSS] Habiller l’élément Select de formulaire – les techniques en CSS pur

20/05/2020 / admin

https://www.filamentgroup.com/lab/select-css.html
- pure css, mais pas un vrai select: https://codepen.io/himalayasingh/pen/pxKKgd
- pareil : https://codepen.io/miniven/pen/ZJydge

Solution pour remplacer le chevron par défaut par un picto encodé en base64

Rotate an image online, clockwise or counterclockwise
Convert WebP to Base64 online – Champ « Output Format »: CSS Background Image — background-image:url(). Il peut arriver que les double quotes " (dans url("data:image/webp;base64,...");) posent problème dans certains CMS. Il suffit de les retirer. Ne pas oublier également d’ajouter un caractère ; à la fin de la ligne générée.

Code CSS à mettre en place:

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    //border: none;
    line-height: 1.3;
    padding: .6em 1.4em .5em .8em;
    //font-size: 1.4rem;
    background-color: transparent;
    background-image: url(data:image/webp;base64,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);
    background-position: right 10px top 50%;
    background-repeat: no-repeat;
    background-size: contain;
}

select {

-moz-appearance: none;

-webkit-appearance: none;

appearance: none;

//border: none;

line-height: 1.3;

padding: .6em 1.4em .5em .8em;

//font-size: 1.4rem;

background-color: transparent;

background-image: url(data:image/webp;base64,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);

background-position: right 10px top 50%;

background-repeat: no-repeat;

background-size: contain;

}

[CSS] Un mega menu horizontal incremental avec flexbox (pure CSS)

08/01/2020 / admin

Demo jsfiddle.net et code source zippé à télécharger.

Source HTML

<div class="navDesktop navDesktopType-normal">

  <h2>.navDesktop.navDesktopType-normal</h2>
  <nav id="navDesktop">
    <ul class="navDesktop-level0">
      <li>
        <a href="#">chemises & couvertures HORSEWIN</a>
        <ul class="navDesktop-level1">
          <li>
            <a href="#">chemises de box</a>
          </li>
          <li>
            <a href="#">couvertures d'écurie</a>
          </li>
          <li>
            <a href="#">couvertures d'extérieur</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">nutrition</a>
        <ul class="navDesktop-level1">
          <li>
            <a href="#">aliments complets</a>
            <ul class="navDesktop-level2">
              <li>
                <a href="#">gamme club & loisirs</a>
              </li>
              <li>
                <a href="#">gamme sport</a>
              </li>
              <li>
                <a href="#">gamme course</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">litière</a>
      </li>
    </ul>
  </nav>

</div>

<div class="navDesktop navDesktopType-incremental">

  <h2>.navDesktop.navDesktopType-incremental</h2>
  <nav id="navDesktop">
    <ul class="navDesktop-level0">
      <li>
        <a href="#">bovins</a>
        <ul class="navDesktop-level1">
          <li>
            <a href="#">alimentation & compléments</a>
            <ul class="navDesktop-level2">
              <li>
                <a href="#">matières premières</a>
                <ul class="navDesktop-level3">
                  <li>
                    <a href="#">matières premières</a>
                  </li>
                  <li>
                    <a href="#">matières grasses</a>
                  </li>
                  <li>
                    <a href="#">argiles et charbon</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#">seaux et pierres à lécher</a>
                <ul class="navDesktop-level3">
                  <li>
                    <a href="#">pierres à lécher</a>
                  </li>
                  <li>
                    <a href="#">seaux à lécher</a>
                  </li>
                  <li>
                    <a href="#">supports pour seaux et pierres</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#">bolus</a>
                <ul class="navDesktop-level3">
                  <li>
                    <a href="#">power bol</a>
                  </li>
                  <li>
                    <a href="#">bolus longue durée pressés</a>
                  </li>
                  <li>
                    <a href="#">bolus à diffusion rapide</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#">Minéraux</a>
                <ul class="navDesktop-level3">
                  <li>
                    <a href="#">Max-ME</a>
                  </li>
                  <li>
                    <a href="#">Max-MS</a>
                  </li>
                  <li>
                    <a href="#">Max-MH</a>
                  </li>
                  <li>
                    <a href="#">Maxor</a>
                  </li>
                  <li>
                    <a href="#">Formules vaches taries</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">Veaux</a>
          </li>
          <li>
            <a href="#">Pâturage</a>
          </li>
          <li>
            <a href="#">Reproduction</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">porcs</a>
      </li>
      <li>
        <a href="#">volailles</a>
      </li>
    </ul>
  </nav>

</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

<h2>.navDesktop.navDesktopType-normal</h2>

<li>

<a href="#">chemises & couvertures HORSEWIN</a>

<li>

<a href="#">chemises de box</a>

</li>

<li>

<a href="#">couvertures d'écurie</a>

</li>

<li>

<a href="#">couvertures d'extérieur</a>

</li>

</ul>

</li>

<li>

<a href="#">nutrition</a>

<li>

<a href="#">aliments complets</a>

<li>

<a href="#">gamme club & loisirs</a>

</li>

<li>

<a href="#">gamme sport</a>

</li>

<li>

<a href="#">gamme course</a>

</li>

</ul>

</li>

</ul>

</li>

<li>

<a href="#">litière</a>

</li>

</ul>

</nav>

</div>

<h2>.navDesktop.navDesktopType-incremental</h2>

<li>

<a href="#">bovins</a>

<li>

<a href="#">alimentation & compléments</a>

<li>

<a href="#">matières premières</a>

<li>

<a href="#">matières premières</a>

</li>

<li>

<a href="#">matières grasses</a>

</li>

<li>

<a href="#">argiles et charbon</a>

</li>

</ul>

</li>

<li>

<a href="#">seaux et pierres à lécher</a>

<li>

<a href="#">pierres à lécher</a>

</li>

<li>

<a href="#">seaux à lécher</a>

</li>

<li>

<a href="#">supports pour seaux et pierres</a>

</li>

</ul>

</li>

<li>

<a href="#">bolus</a>

<li>

<a href="#">power bol</a>

</li>

<li>

<a href="#">bolus longue durée pressés</a>

</li>

<li>

<a href="#">bolus à diffusion rapide</a>

</li>

</ul>

</li>

<li>

<a href="#">Minéraux</a>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

<a href="#">Maxor</a>

</li>

<li>

<a href="#">Formules vaches taries</a>

</li>

</ul>

</li>

</ul>

</li>

<li>

<a href="#">Veaux</a>

</li>

<li>

<a href="#">Pâturage</a>

</li>

<li>

<a href="#">Reproduction</a>

</li>

</ul>

</li>

<li>

<a href="#">porcs</a>

</li>

<li>

<a href="#">volailles</a>

</li>

</ul>

</nav>

</div>

Source CSS

/* reset */
ul, li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}



/* core */
.navDesktop {}

.navDesktop-level1,
.navDesktop-level2 {
  display: none;
}

.navDesktopType-normal {}
.navDesktopType-incremental {}

.navDesktop-level0 > li:hover > .navDesktop-level1,
.navDesktopType-incremental .navDesktop-level1 > li:hover > .navDesktop-level2 {
  display: flex;
}



/* layout */
.navDesktop-level0 {
  position: relative;
  display: flex;
}

.navDesktop-level1,
.navDesktopType-incremental .navDesktop-level2 {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
  width: 100%;
}

.navDesktopType-normal .navDesktop-level1,
.navDesktopType-incremental .navDesktop-level2 {
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
}



/* skin */
.navDesktopType-normal .navDesktop-level1,
.navDesktopType-incremental .navDesktop-level2 {
  max-height: 200px;
}

.navDesktop a {
  padding-right: 15px;
}

.navDesktopType-normal .navDesktop-level1,
.navDesktopType-incremental .navDesktop-level2 {
  background: #ececec;
}

.navDesktopType-normal .navDesktop-level1 > li > a,
.navDesktopType-incremental .navDesktop-level2 > li > a {
  font-size: 1.1em;
  font-weight: 700;
}

.navDesktopType-incremental .navDesktop-level1 {
  background: pink;
}

/* reset */

ul, li {

margin: 0;

padding: 0;

list-style-type: none;

}

/* core */

.navDesktop {}

.navDesktop-level1,

.navDesktop-level2 {

display: none;

}

.navDesktopType-normal {}

.navDesktopType-incremental {}

.navDesktop-level0 > li:hover > .navDesktop-level1,

.navDesktopType-incremental .navDesktop-level1 > li:hover > .navDesktop-level2 {

display: flex;

}

/* layout */

.navDesktop-level0 {

position: relative;

display: flex;

}

.navDesktop-level1,

.navDesktopType-incremental .navDesktop-level2 {

position: absolute;

z-index: 1;

left: 0;

top: 100%;

width: 100%;

}

.navDesktopType-normal .navDesktop-level1,

.navDesktopType-incremental .navDesktop-level2 {

flex-direction: column;

flex-wrap: wrap;

align-content: flex-start;

}

/* skin */

.navDesktopType-normal .navDesktop-level1,

.navDesktopType-incremental .navDesktop-level2 {

max-height: 200px;

}

.navDesktop a {

padding-right: 15px;

}

.navDesktopType-normal .navDesktop-level1,

.navDesktopType-incremental .navDesktop-level2 {

background: #ececec;

}

.navDesktopType-normal .navDesktop-level1 > li > a,

.navDesktopType-incremental .navDesktop-level2 > li > a {

font-size: 1.1em;

font-weight: 700;

}

.navDesktopType-incremental .navDesktop-level1 {

background: pink;

}

[javascript] Importer des breakpoints CSS

17/10/2019 / admin

Article de lullabot.com: Importing CSS Breakpoints Into JavaScript. Demo Codepen.

Version PDF pour la postérité.

[CSS] Alignements compliqués avec Flexbox

11/06/2019 / admin

Sources:

Flexbox: centrer tous les éléments d’une rangée sauf le dernier qui sera aligné à droite

Source: Center and right align flexbox elements.

Method #3: Flex Auto Margins & Invisible Flex Item (pseudo-element) testée et fonctionne.

ul::before {
  content:"D";
  margin: 1px auto 1px 1px;
  visibility: hidden;
  padding: 5px;
  background: #ddd;
}
li:last-child {
  margin-left: auto;
  background: #ddd;
}
ul {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
li {
  display: flex;
  margin: 1px;
  padding: 5px;
  background: #aaa;
}
p { text-align: center; margin-top: 0; }
span { background-color: aqua; }

ul::before {

content:"D";

margin: 1px auto 1px 1px;

visibility: hidden;

padding: 5px;

background: #ddd;

}

li:last-child {

margin-left: auto;

background: #ddd;

}

ul {

padding: 0;

margin: 0;

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

}

li {

display: flex;

margin: 1px;

padding: 5px;

background: #aaa;

}

p { text-align: center; margin-top: 0; }

span { background-color: aqua; }

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<p><span>true center</span></p>

<ul>

</ul>

<p><span>true center</span></p>

Articles récents

Catégories

Archives

Méta

Catégorie : CSS

[CSS] Centrer un container dans la page mais qu’il n’y ait qu’une marge à gauche

[CSS][LESS] Un effet d’animation pour un lien souligné dont le texte s’étend sur plusieurs lignes avec background-size

[CSS] Désactiver le scroll dans la page lorsqu’un élément en position absolue (de type Modale, Off-Canvas, …) est ouvert en sur-impression

[CSS] Des effets de fonds de couleur avec séparateur oblique avec linear-gradient

[jQuery][CSS] Etendre le fond d’un mega menu déroulant sur toute la largeur de la fenêtre du navigateur

[CSS] Habiller l’élément Select de formulaire – les techniques en CSS pur

Solution pour remplacer le chevron par défaut par un picto encodé en base64

[CSS] Un mega menu horizontal incremental avec flexbox (pure CSS)

Source HTML

Source CSS

[javascript] Importer des breakpoints CSS

[CSS] Alignements compliqués avec Flexbox

Flexbox: centrer tous les éléments d’une rangée sauf le dernier qui sera aligné à droite

Solution pour remplacer le chevron par défaut par un picto encodé en base64

Source HTML

Source CSS

Troubleshooting:

Flexbox: centrer tous les éléments d’une rangée sauf le dernier qui sera aligné à droite