Demo 8: Autres notions CSS/HTML importantes

Aides mémoires + ressources de la semaine

Retour sur les keyframes

(et réponse de questions sur les SVG)

Les inputs

Exemple d'input simple


x
<form id="exemple1" action="https://www.w3schools.com/action_page.php">
  <label for="input_field">Ton input ici!</label> <br>
  <input type="text" name="input_field"> <br><br>

  <input type="submit" value="Envoyer ton input">
</form>

En cliquant "envoyer", dans ce cas-ci ça nous rammène à w3schools et ça nous dit:

Screenshot

D'autres inputs

On peut faire des inputs de mot de passe...


x
<input type="password" name="mot-de-passe"> <br><br>

Et d'autres entrées!


xxxxxxxxxx
<form id="exemple1" action="https://www.w3schools.com/action_page.php">
  <label>Ta bouffe preferée?</label> <br>
  
  <input type="radio" name="fav_food" value="Pizza">
  <label for="Pizza">Pizza</label><br>
  
  <input type="radio" name="fav_food" value="laptop">
  <label for="laptop">Laptop</label><br>
  
  <input type="radio" name="fav_food" value="Spaghetti">
  <label for="Spaghetti">Spaghetti</label>
</form>

Allez voir W3Schools sur les forms pour plus d'info sur les inputs :) -> https://www.w3schools.com/tags/tag_input.asp

✨Les animations CSS✨

...mais pourquoi?

Parce qu'on peut donner vie aux éléments d'un site web!

Show off d'un devoir que mon amie et moi avons fait lors de notre passage de IFT1005 hihi

Animez tout!!!

(bougez votre souris sur le texte pour activer l'animation, sauf pour celui de background)

La couleur du texte (id: color-anim)


#color-anim {
  color: blue;
  transition: color 0.5s ease-out;
}
#color-anim:hover {
  color: hotpink;
}

La taille (id: size-anim)


xxxxxxxxxx
#size-anim {
  font-size: 14px;
  transition: font-size 0.5s ease-out;
}
#size-anim:hover {
  font-size: 36px;
}

Translation et toute transformation (id: translate-anim)


xxxxxxxxxx
#translate-anim {
    transition: transform 1s ease-in-out;
}
#translate-anim:hover {
    transform: translate(400px,0);
}

Le background (re-bonjour les keyframes!) (id: bg-anim)


/* definition de l'animation */ 
@keyframes gradientcool {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
#bg-anim {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
    /* appel de l'animation "gradientcool" */
  animation: gradientcool 5s ease infinite;
}

Okay, peut-être n'animez pas tout...

faites pas peur aux gens qui visitent votre site web

pensez à votre audience

"less is better"/vive le minimalisme

L'on verra la semaine prochaine comment balancer le tout sur un design de site web :)

Mais juste pour cette semaine....

Minidevoir de la semaine: site cool

Remise: Mardi prochain, 23h59

Nom des fichiers: devoirsitecool.html et devoirsitecool.css

Assurez-vous d'avoir vos bonnes permissions de fichiers, etc. etc. À ce stade-ci vous devriez connaître vos permissions de fichier...

C'est le moment que vous attendiez depuis le début de la session: l'opportunité de laisser votre créativité sortir!

Votre fichier devoirsitecool devrait contenir une déclaration de votre fichier devoirsitecool.css dans son <head>. Vous pouvez voir les anciennes consignes de devoirs pour voir comment inclure le css :)

Consignes générales

Faites un site web avec le plus d'animations CSS possibles. Le contenu doit avoir au moins:

Au moins 5 headers (<h1>,<h2>, etc.),
Au moins 5 <p> (cassez-vous pas la tête à écrire un texte, utilisez le générateur de texte https://loremipsum.io) Vous pouvez litéralement copier-coller le même texte et juste donner des id/classes différentes si vous voulez.
Au moins 3 liens <a> (ils peuvent être des <a href="#">, c'est a dire des liens vides qui ne mènent à nulle part mais qui sont quand même des éléments de "lien").
et au moins 5 <img> soit sorties de google, soit hostées sur https://imgur.com/upload car le correcteur (Santiago et pas Laura) ne se cassera pas la tête à aller chercher toutes vos images (assurez vous que ces dernières marchent correctement svp!!) (je vous recommande d'utiliser des gifs! https://giphy.com est une source de gif assez bonne.) Vous pouvez utiliser vos svg faits dans le minidevoir passé comme images aussi!

(Quand je dis au moins, vous pouvez effectivement faire le minimum et avoir 100%. )

Vous devez créer au moins 10 animations CSS jouant sur des propriétés différentes (par exemple la couleur du texte, la couleur de l'ombrage, etc., inspirez vous de w3schools et naviguez des librairies d'animations). Vous appliquerez ces animations à vos éléments HTML à travers des classes et id.

Si ça vous tente, vous pourrez jouer aussi avec le CSS général du site, mais ce ne sera pas vraiment évaloué et c'est vraiment juste pour si vous voulez laisser aller votre côté artsy.

On s'en fout vraiment du thème du site. Comme toujours, pas de contenu inapproprié/pas de liens sketchy :)

SEULE AUTRE CONTRAINTE: PAS DE JAVASCRIPT POUR VOS ANIMATIONS CSS ET PAS D'ANIMATIONS SVG AUTRES QUE CELLES QUE VOUS AVEZ FAITES DANS VOS SVG SI VOUS DECIDEZ DE LES INCLURE

Woah.css

Vous pouvez egalement utiliser des animations du fichier CSS suivant:


x
<link rel="stylesheet" href="https://www.joerezendes.com/projects/Woah.css/woah.css">

Vous pouvez naviguer la feuille CSS ici et vous pouvez voir un aperçu des animations ici, mais notez que vous pouvez pas copier-coller le CSS pour le coller dans votre fichier css. Vous pouvez seulement faire appel aux définitions de CSS de woah.css comme on avait fait dans le devoir 5 en html, c'est à dire en faisant des appels dans votre HTML, par exemple pour l'animation de "fedora tip", je ferais (en m'assurant d'avoir inclus la feuille CSS dans mon HTML):


xxxxxxxxxx
<div class="fedoraTip">
  animation ici
</div>

Surprennez-nous avec votre créativité! C'est le temps!