Étiquette : bordure

[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;

}

[jQuery][CSS][Internet Explorer] Bug de détection de la pseudo-classe :hover ou de l’événement mouseover sur une bordure CSS

06/09/2017 / admin

Problème:

Sous IE (Internet Explorer), j’ai un menu déroulant dropdown dont la partie déroulée (les sous-niveaux) se masque involontairement lorsqu’elle est survolée au passage de la souris.

Autrement dit, IE (même les versions les plus récentes) n’est pas capable de détecter une bordure CSS comme un élément « physique ». Dans le cas de mon menu, le sous-niveau est encadré par une bordure grise de 10px d’épaisseur. Lorsqu’on navigue à la souris et qu’on fait le chemin de l’entrée « Particuliers » vers le sous-menu correspondant (cf. capture ci-dessous), le curseur traverse la bordure ce qui a pour effet une perte de focus et une disparition prématurée de la partie déroulée. (La bordure incriminée est en noir dans ma capture – lorsque le curseur de la souris passe dessus, le sous-menu disparaît).

Solution:

Ne pas utiliser la propriété CSS border pour un habillage se trouvant sur le passage de la souris. 🙂
J’ai d’abord tenté (sans succès) de remplacer la border-top par une ombre interne avec la propriété CSS box-shadow et la valeur inset.

La solution qui fonctionne consiste à utiliser un dégradé CSS (gradient). On commence par générer son dégradé via un outil en ligne comme Ultimate CSS Gradient Generator par Colorzilla.

Le code CSS généré est le suivant:

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+10,ffffff+10,ffffff+100 */
background: #000000; /* Old browsers */
background: -moz-linear-gradient(top, #000000 0%, #000000 10%, #ffffff 10%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #000000 0%,#000000 10%,#ffffff 10%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #000000 0%,#000000 10%,#ffffff 10%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+10,ffffff+10,ffffff+100 */

background: #000000; /* Old browsers */

background: -moz-linear-gradient(top, #000000 0%, #000000 10%, #ffffff 10%, #ffffff 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top, #000000 0%,#000000 10%,#ffffff 10%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom, #000000 0%,#000000 10%,#ffffff 10%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

Suivant les navigateurs qu’on souhaite supporter, on peut réduire le code à cette ligne (à condition d’utiliser un outil d’auto-prefixage CSS qui rajoute les -moz, -webkit, -o, -ms en fonction du scope de navigateurs et OS prédéfinis) :

background: linear-gradient(to bottom, #000000 0%,#000000 10%,#ffffff 10%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

1	background: linear-gradient(to bottom, #000000 0%,#000000 10%,#ffffff 10%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

Il reste ensuite à modifier cette ligne en fonction de notre besoin. Dans mon cas, remplacer par les bonnes couleurs et remplacer l’unité % par du px pour coller aux 10px de ma bordure:

background: linear-gradient(to bottom, #000000 0%,#000000 10px,#ffffff 10px,#ffffff 100%);

1	background: linear-gradient(to bottom, #000000 0%,#000000 10px,#ffffff 10px,#ffffff 100%);

[CSS] Ajouter des diviseurs verticaux de même hauteur

18/12/2015 / admin

Source : Add vertical dividers with CSS | Simulation JSFiddle

<div id="fat-menu">
  <div class="first-column">
    ..content..
  </div>
  <div class="column">
    ..content..
  </div>
  <div class="column">
    ..content..
  </div>
  <div style="clear:both;"></div>
</div>

..content..

</div>

..content..

</div>

..content..

</div>

</div>

  #fat-menu {
    /* Set position so that offsets in children are based on parent */
    position: relative;
  }

  .first-column,
  .column {
    float:left;
    width:200px;
  }

  .column {
    margin-left:30px;
  }

  .column:before {
    content:" ";
    margin:0 -15px;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #666666;
  }

#fat-menu {

/* Set position so that offsets in children are based on parent */

position: relative;

}

.first-column,

.column {

float:left;

width:200px;

}

.column {

margin-left:30px;

}

.column:before {

content:" ";

margin:0 -15px;

position: absolute;

top: 0;

bottom: 0;

width: 1px;

background: #666666;

}

Petite subtilité avec la grille Bootstrap

Les classes .col-* ont déjà la propriété position avec la valeur relative. Il faudra la surcharger avec la valeur initial.

<div class="footer-nav-columns">
  <div class="col-xs-12 col-sm-3">
  <div class="col-xs-12 col-sm-3">
  <div class="col-xs-12 col-sm-3">
  <div class="col-xs-12 col-sm-3">
</div>

</div>

  .footer-nav-columns{
    position: relative;
    padding: $grid-gutter-width 0;
    .col-xs-12{
      position: initial;
      &:not(:first-of-type):before{
        content: " ";
        margin: 0 -$grid-gutter-width / 2;
        position: absolute;
        top: 50px;
        bottom: 50px;
        width: 1px;
        background-color: $site-border-color;
      }
    }
  }

.footer-nav-columns{

position: relative;

padding: $grid-gutter-width 0;

.col-xs-12{

position: initial;

&:not(:first-of-type):before{

content: " ";

margin: 0 -$grid-gutter-width / 2;

position: absolute;

top: 50px;

bottom: 50px;

width: 1px;

background-color: $site-border-color;

}

Autre technique en utilisant une image et les backgrounds multiples de CSS3

Pour, par exemple, 3 colonnes :

  .mon-element{
    background:
      url(/media/themes/responsive/pixel.gif) repeat-y 33.33333% 0,
      url(/media/themes/responsive/pixel.gif) repeat-y 66.66666% 0;
  }

.mon-element{

background:

url(/media/themes/responsive/pixel.gif) repeat-y 33.33333% 0,

url(/media/themes/responsive/pixel.gif) repeat-y 66.66666% 0;

}

Articles récents

Catégories

Archives

Méta

Étiquette : bordure

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

[CSS] Ajouter des diviseurs verticaux de même hauteur

Petite subtilité avec la grille Bootstrap

Autre technique en utilisant une image et les backgrounds multiples de CSS3