Archives par mot-clé : html

Articles traitant du HTML, le langage à la base du World Wide Web.

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 →

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 – une horloge illustrée

Publié le par
Répondre

Aujourd’hui, j’ai décidé de m’attaquer à la version gloubi d’un script que j’ai également déjà créé de mon côté : l’horloge illustrée.

La version gloubi est visible ici, tandis que la création de ma propre version, faite avec jQuery, est présentée ici.

Présentation de la version gloubi

Pour commencer, on créé 10 objets de type Image() en leur attribuant à chacun l’attribut src correspondant.

c1=new Image(); c1.src="c1.gif";
c2=new Image(); c2.src="c2.gif";
c3=new Image(); c3.src="c3.gif";
c4=new Image(); c4.src="c4.gif";
c5=new Image(); c5.src="c5.gif";
c6=new Image(); c6.src="c6.gif";
c7=new Image(); c7.src="c7.gif";
c8=new Image(); c8.src="c8.gif";
c9=new Image(); c9.src="c9.gif";
c0=new Image(); c0.src="c0.gif";

Vient ensuite la fonction affiche(), permettant de changer les images, qui prend 3 paramètres en entrée : le nombre d’heures, le nombre de minutes et le nombre de seconde. Pour chacun des trois paramètres on détermine l’image à afficher pour les dizaines et les unités. Chaque image est modifiée en passant par la propriété images de l’objet document.

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 →

Les dégradés en CSS

Publié le par
Répondre

Comme sous-entendu dans un précédent gloubi tuto, il est maintenant possible avec CSS3 de créer des dégradés de couleurs.

Pour CSS, les dégradés sont considérés comme des images, et donc doivent être utilisés dans l’attribut background ou background-image d’une déclaration de style.

Il existe en CSS 3 types de dégradés :

  • les dégradés linéaires : les couleurs sont étalées le long d’un axe
  • les dégradés radiaux : les couleurs sont étalées depuis un point dans deux axes
  • les dégradés coniques : les couleurs sont étalées autour d’un cercle
Continuer la lecture →
Pages : 1 2

Le fossoyeur de sites

Publié le par
Répondre

En fouillant dans un ancien disque dur externe (un dinosaure de 500Go qui a sa propre alimentation) j’ai retrouvé mon premier « vrai » site web, créé quelques années avant ma naissance en tant que Geek Communicant.

Je pensais l’avoir définitivement perdu, sachant que le projet avait été rendu sur un CD gravé, et que j’ai changé plusieurs fois d’ordinateur depuis (sans me rappeler que j’en avais fait une sauvegarde).

Continuer la lecture →

Petit tuto pour les paranos

Publié le par
Répondre

Bon, cette période d’épidémie de virus (biologique, pas informatique) est aussi une période d’épidémie de fake news.

La dernière en date concerne le formulaire de génération d’attestation de déplacement. Cette rumeur tient au fait que le QR code généré par ce formulaire permettrait de récupérer les données présentes sur votre téléphone.

Continuer la lecture →

Comment marche le HTML ?

Publié le par
Répondre

Comme vu précédemment le HTML est un des piliers du Web. Nous allons voir ici comment ça marche.

Les balises

La base du HTML est le principe de balises. Une balise est là pour délimiter une zone. en HTML, une balise s’écrit à l’aide de chevrons; exemple: <p>.

En HTML, sauf exception, les balises fonctionnent par paire: une balise ouvrante, et une balise fermante; exemple: <p></p>.

Continuer la lecture →