Archives de catégorie : CSS

Tutoriels et autres trucs et astuces sur le CSS, la technologie qui rend le Web joli.

Une flip card en CSS

Publié le par
Répondre

Vous avez toujours voulu savoir comment créer un effet de carte retournée (flip card en anglais) ? Cet article est ce qu’il vous faut !

Le résultat final est disponible ici.

Structure HTML

Pour commencer, attaquons nous à la structure HTML d’une carte.

Pour schématiser, une carte se décompose comme ceci : un cadre, qui contient une planche sur les faces de laquelle il y a ce que l’on veut afficher, et au survol de la souris, on fait pivoter cette planche interne.

Cela nous donne la structure HTML suivante :

<div class="card">
  <div class="card_inner">
    <div class="card_face card_back"></div>
    <div class="card_face card_front"><h2>Don't worry</h2><p>Be happy</p></div>
  </div>
</div>

La classe .card, représente le cadre, la classe .card_inner la planche et la classe .card_face les deux faces de cette planche (avec également une classe différente pour chaque face.

Continuer la lecture →

Animer les variables CSS

Publié le par
Répondre

La semaine dernière j’ai rapidement mentionné qu’il était maintenant possible d’animer les variables CSS.

L’utilité des variables CSS

Les variables CSS (également appelées « propriétes personnalisées ») permettent de stocker des valeurs spécifiques. Et ces valeurs peuvent être modifiées par des événement JS ou des pseudos classes CSS (comme par exemple :hover).

Elles se déclarent et se modifient comme ceci : --my-property: 123;, et s’utilisent comme cela : var(--my-property).

L’intéret de ces variables vient quand on a besoin de préciser un seul paramètre dans une longue déclaration (comme par exemple une position dans une déclaration de dégradé) ou alors pour indiquer une couleur qui peut être amenée à changer et qui est utilisée dans différentes classes.

Le problème de ces variables, c’est qu’il n’est pas possible de les animer. C’est là qu’intervient la at-rule @property.

Continuer la lecture →

Animer un dégradé en CSS

Publié le par
Répondre

La semaine dernière je vous ai présenté comment créer un texte en dégradé avec uniquement du CSS. Aujourd’hui je vais vous montrer comment animer ce dégradé au survol de la souris.

Le principe

L’élément sur lequel on veut placer un dégradé ne laisse voir qu’une partie de ce dégradé, et on bouge le dégradé au survol de la souris.

Continuer la lecture →

Un texte en dégradé avec CSS3

Publié le par
Répondre

Comme indiqué à la fin de mon gloubi tuto sur le texte en dégradé, il est maintenant possible d’obtenir un résultat similaire uniquement avec CSS3.

Les techniques CSS utilisées

Pour réaliser un texte en dégradé avec CSS3, on utilise deux techniques : les dégradés et le découpage d’arrière-plan (propriété CSS background-clip).

J’ai déjà présenté ces deux techniques chacune dans un article dédié :

Fusion !

Il est maintenant temps de rassembler ces deux techniques.

Continuer la lecture →

Créer un interrupteur en CSS

Publié le par
Répondre

Aujourd’hui, retour dans le monde des CSS.

Ce dont j’ai décidé de parler cette semaine est une manière de créer un interrupteur comme ci-dessous :



Le HTML

Concernant le HTML derrière cet interrupteur, c’est un input de type checkbox qui se cache dessous.

Cet input, caché en CSS, est englobé dans un label, avec un span à ses côtés. C’est le clic sur le label qui permettra de cocher/décocher la checkbox.

Continuer la lecture →

Gloubi script – un cadre clignotant

Publié le par
Répondre

Aujourd’hui, nous allons nous attaquer à un script présenté chez notre gloubi rival qui pourra vous être très utile pour mettre en avant n’importe quel contenu sur, par exemple, la magnifique page d’accueil de votre tout aussi sublime site : le cadre clignotant.

Comme pour d’autres gloubi scripts déjà présentés, il est possible maintenant d’obtenir le même effet seulement avec du CSS. Dans cet article je présenterait la solution JavaScript actuelle (avec une légère correction) puis une solution utilisant uniquement CSS.

Solution JavaScript

Le code utilisé (visible ici) est très simple. Toutes les 500 millisecondes (avec setInterval) on appelle une fonction qui vérifie la couleur de bordure de notre élément cible (via son attribut style), et selon sa valeur, cette couleur est changé (par exemple, si la bordure est bleue, elle est changée en rouge, et inversement).

Continuer la lecture →

Gloubi tuto – texte changeant de couleur

Publié le par
Répondre

Cette fois-ci encore, j’ai décidé de m’attaquer à un autre gloubi script d’effet sur texte, le texte changeant de couleur.

Une fois de plus, dû à l’évolution des technologies, plus besoin de JavaScript pour obtenir un résultat identique (ou en tout cas très proche).

Fonctionnement du script

On indique au script les couleurs (du texte et du fond) entre lesquelles faire une transition. Ces couleurs sont définies chacune par trois variables (ce qui nous fait 12 variables en tout) contenant une valeur décimale (entre 0 et 255) qui sera ensuite convertie en hexadécimal sur deux digits (entre 00 et FF) pour indiquer la couleur sous la notation #RRGGBB.

Les valeurs des différentes composantes sont progressivement incrémentées puis décrémentées entre les valeurs bornes.

Continuer la lecture →

Gloubi tuto – menu avec images réactives

Publié le par
Répondre

Nouvelle semaine, nouveau gloubi-tuto. Cette fois-ci, on s’attaque à un autre script de menu. M’enfin script… pas cette-fois. Même si sur gloubiweb cela est présenté comme un script, il s’agit en fait de CSS.

Ce menu, qui est visible sur cette page, utilise la technique des sprites CSS.

Présentation de la technique des sprites

Cette technique consiste à ne montrer qu’une petite partie d’une image plus grande, qui contient plusieurs éléments graphiques de notre mise en page, dans notre cas, tous les états des boutons de notre menu.

Pour ne montrer qu’une partie de cette image plusieurs techniques sont possibles : image dans un conteneur plus petit qui masque tout ce qui est en dehors (propriété overflow : hidden) ou encore l’utilisation de la grande image comme image de fond d’un conteneur plus petit, positionnée de manière à ne laisser voir que la partie qui nous intéresse.

C’est cette deuxième technique qui utilisée ici, en modifiant la position de l’image de fond au survol de la souris.

Le fait que l’image de fond change de position au survol de la souris est visible sur la page originale, car les liens sont légèrement surdimensionnés et laissent voir plus qu’un seul et unique « bouton ».

Continuer la lecture →

Gloubi script – texte avec un arrière-plan défilant

Publié le par
Répondre

Aujourd’hui nouveau tuto sur un gloubi script d’effet sur texte. Cette fois ci, il s’agit de texte avec arrière-plan défilant.

Principe du script

Le script original est disponible sur sa propre page sur le site de notre gloubi adversaire.

Il fonctionne selon le principe de calques : au-dessus du calque de motif, on place un autre calque où le texte fait des « trous », laissant voir ce que l’on place dessous (ici notre calque de motif).

Le calque de motif est plus grand que le calque supérieur, mais on masque ce qui est en dehors de la zone du calque supérieur. Ce calque de motif est ensuite déplacé par du code JS.

Continuer la lecture →

Gloubi tuto – menu interactif déroulant

Publié le par
Répondre

Cette semaine, attaquons-nous à un autre script de menu présenté chez notre gloubi adversaire.

Ce script est visible sur cette page, et est toujours fonctionnel dans les navigateurs modernes.

Fonctionnement

Le menu produit par ce script se présente sous la forme d’un tableau dans un tableau (je parle là des balises HTML).

<table>
    <tr>
        <td>Rubrique</td>
    </tr>
    <tr>
        <td>Liens....</td>
    </tr>
    <tr>
        <td>Rubrique</td>
    </tr>
    <tr>
        <td>Liens....</td>
    </tr>
</table>
Continuer la lecture →
Pages : 1 2