décembre 2015

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

par admin
18/12/201503/03/2016

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é… Lire la suite »[CSS] Ajouter des diviseurs verticaux de même hauteur

[CSS] Un menu déroulant avec les sélecteurs adjacents, les propriétes opacity, visibility et transition

par admin
17/12/2015

@media screen and (min-width: 768px) {
  .main-menu .level1 > li:hover > a{
    // On conserve l'aspect survolé de l'entrée de 1er niveau lorsque le curseur de la souris se trouve dans la zone du sous-menu.
    background-color: #fff;
    color: $site-font-color-darker;
  }
  .main-menu .level2{
    position: absolute;
    z-index: 1000;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s linear, visibility 0.2s linear;
  }
  .main-menu .level1 > li:hover > .level2{
    opacity: 1;
    visibility: visible;
  }
  .main-menu .collapse{
    // Bootstrap Collapse component reset (only needed for mobile devices)
    display: block;
  }
}

@media screen and (min-width: 768px) {

.main-menu .level1 > li:hover > a{

// On conserve l'aspect survolé de l'entrée de 1er niveau lorsque le curseur de la souris se trouve dans la zone du sous-menu.

background-color: #fff;

color: $site-font-color-darker;

}

.main-menu .level2{

position: absolute;

z-index: 1000;

left: 0;

width: 100%;

opacity: 0;

visibility: hidden;

transition: opacity 0.2s linear, visibility 0.2s linear;

}

.main-menu .level1 > li:hover > .level2{

opacity: 1;

visibility: visible;

}

.main-menu .collapse{

// Bootstrap Collapse component reset (only needed for mobile devices)

display: block;

}

[jQuery][Bootstrap 3][Collapse][enquire.js] En vue Mobile, dans un menu, désactiver la redirection vers la page cible au clic sur un lien de premier niveau avec les data-attributes et jQuery.

par admin
16/12/201516/12/2015

Attention : dans le code donné en exemple, vous trouverez dans certains cas des mentions à des variables de type ${repeat/entry/index}. Ce type de variables… Lire la suite »[jQuery][Bootstrap 3][Collapse][enquire.js] En vue Mobile, dans un menu, désactiver la redirection vers la page cible au clic sur un lien de premier niveau avec les data-attributes et jQuery.

[RBS Change 3.x] Dans un template de menu, ajouter une classe avec valeur incrémentée sur un élément contenu dans une boucle.

par admin
16/12/201516/12/2015

Admettons qu’on souhaite ajouter, dans une boucle, une classe de type color-x (où x correspond à une valeur qui doit s’incrémenter) sur un élément <li>… Lire la suite »[RBS Change 3.x] Dans un template de menu, ajouter une classe avec valeur incrémentée sur un élément contenu dans une boucle.

[Photoshop] Exporter ses icônes en SVG

par admin
11/12/201511/12/2015

Pompé intégralement sur : Exporter ses icônes en SVG depuis Photoshop Voici la procédure pour exporter très rapidement l’ensemble des icônes d’un PSD au format… Lire la suite »[Photoshop] Exporter ses icônes en SVG

[CSS] Styler tous les éléments de formulaires de façon sexy et uniquement avec CSS

par admin
09/12/201515/06/2016

Source : Custom Style All Your Form Elements with Pure CSS and No JavaScript Article en version PDF (pour la postérité) : Custom Style All… Lire la suite »[CSS] Styler tous les éléments de formulaires de façon sexy et uniquement avec CSS