Le défilement horizontal vise à augmenter l’expérience utilisateur où le contenu est révélé par les côtés de la fenêtre ou du conteneur. Il peut être obtenu en cliquant et en faisant glisser une barre de défilement horizontale, en glissant latéralement sur un trackpad de bureau ou une souris trackpad, en appuyant sur les touches fléchées gauche et droite ou en glissant latéralement avec le doigt sur un écran tactile.
Catégorie : HTML + CSS
exercice 7 – hover CSS
La pseudo-classe :hover permet de spécifier l’apparence d’un élément au moment où l’utilisateur le survole avec le pointeur, sans nécessairement l’activer.
exercice 6 – animations CSS
Les animations CSS permettent de créer des transitions entre deux états de mise en forme. Une animation est décrite par deux choses : des propriétés propres à l’animation d’une part et un ensemble d’étapes (keyframes) qui indiquent l’état initial, final et éventuellement des états intermédiaires d’autre part.
créer un effet parallaxe avec HTML & CSS
vidéo = créer un parallaxe avec CSS modèles de structure html et CSS Code html du modèle <!doctype html> <html lang=« fr »> <head> <meta charset=« utf-8 »> <title>Parallax Scrolling</title> <!– la balise qui permet le responsive –> <meta name=« viewport » content=« width=device-width, initial-scale=1 » /> <!– Copier le lien Google Fonts –> <link href=« https://fonts.googleapis.com/css?family=Montserrat:200,200i,400,400i,700,700i,900,900i » rel= »stylesheet »> <!– Créer le lien […]
exercice 5 – position display
La displaypropriété spécifie le comportement d’affichage (le type de boîte de rendu) d’un élément. Consultez la documentation proposée par w3schools.com pour recenser les valeurs des propriétés possibles : 3schools.com/CSSref/pr_class_display.asp aligner la navigation sur le logo Sur la balise <header>, la propriété display: flex; place tous les conteneurs les uns à côté des autres ! […]
exercice 4 – mise en page flexbox
CSS, flux, héritage… display:flex enrichir les balises meta de la balise <head> 1. la balise <meta name= »viewport » content= »width=device-width, initial-scale=1.0″> Le Viewport désigne schématiquement la surface de la fenêtre du navigateur et est absolument indispensable dans un projet d’intégration de site web pour tablettes et smartphones, ou dans un esprit d’adaptation « Responsive Web Design ». 2. […]
exercice 3 – css, un fichier lié à la page html
CSS, un fichier lié à la page HTML Apprenez à créer votre site web avec html 5 et CSS 3 : openclassrooms.com/fr/ dossier racine A terme, votre dossier devra contenir : 1 dossier pour les images + index.html + dossier « fonts » et 1 fichier monstyle.css Créez 2 nouveaux fichiers dans Sublime Text : index.html […]
exercice 2 – créer des liens
dossier racine Veillez à créer un dossier racine pour chaque site. Dans ce dossier, on trouve : 1 dossier pour les images (nommé généralement « img ») + index.html créer des liens 1. Cliquer sur une petite image pour l’afficher en grand La balise <a href= »summer.jpg »> pointe vers la grande image tandis que la balise <img […]
exercice 1 – structure html et balises
HTML & CSS HTML, les balises Revoir les deux articles ci-dessus si besoin avant de réaliser l’exercice ! méthode 1. Créer les balises <header> <nav> <section> et <footer> qui structure le fichier index.html 2. Insérer <ul> pour visualiser une liste et créer des liens <a href> 3. Créer des balises <section> <div> […]
CSS, position relative, absolue, z-index
propriété CSS > position https://www.w3schools.com/cssref/pr_class_position.asp C’est la propriété à considérer lors de la création d’une mise en page pour laquelle les possibilités du flux ne suffisent plus ! position: relative ; Elle permet un ajustement manuel de l’élément par rapport à une position de référence (celle qu’il avait dans le flux). L’élément est alors décalé […]