Pour illustrer le style transition-timing-function: nous avon fait un exercice. linear ease ease-in ease-out ease-in-out steps(3,start) steps(3,end) transition-timing-function: cubic-bezier(0.505, -0.560, 0.495, 1.465) transition-timing-function:cubic-bezier(0.000, 3, 1.000, -1) transition-timing-function: cubic-bezier(1.000, 0.960, 0.000, 0.615) transition-timing-function: cubic-bezier(1.000, 0.010, 0.000, 1.000) transition-timing-function: cubic-bezier(0.000, 1.020, 0.995, 1.440) Pour générer une transition en une courbe de bezier nous avons…
Catégorie : CSS
Transition css
Transition css 2D Nous voyons aujourd’hui les transition, en css. Les transitions CSS vous permettent de modifier les valeurs de propriété en douceur (d’une valeur à une autre), sur une durée donnée. Pour créer un effet de transition, vous devez spécifier deux choses: la propriété CSS à laquelle vous voulez ajouter un effet la durée…
Bootstrap avec sass
Pour transférer un site fait avec Bootstrap sur l’éditeur et utiliser SASS Télécharger Source files sur bootstrap ici Prendre dedans le dossier scss et le placer dans notre dossier WWW et le renommer: bootstrap-sass. Dans ce dossier renommer les fichiers, avec _ , ceux qui ne l’on pas(3 fichiers bootstrap…). Dans WWW créer un autre dossier scss et…
Framework
Un framework est un ensemble d’outils et de composants logiciels organisés conformément à un plan d’architecture et des patterns, l’ensemble formant ou promouvant un « squelette » de programme. Il est souvent fourni sous la forme d’une bibliothèque logicielle, et accompagné du plan de l’architecture cible du framework. Bootstrap Est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments…
SASS
Sass (Syntactically Awesome Stylesheets) est un langage de génération de feuilles de style Le site: http://sass-lang.com/ Les feuilles de style CSS ne sont au fond que de longues listes de règles, chacune consistant en un sélecteur et quelques styles à appliquer. Pour lire ce nouveau langage il nous faut télécharger RUBY; les utilisateurs de Mac ont CodeKit qui est un vrai bonheur. Dans Visual studio…
Evaluation php!
Pour mettre en pratique ce que nous avons appris, une petite évaluation…. Il nous a demandé de créer un site et de le mettre en ligne, suivant une source. Cette réalisation est faite en inclusion. Le travail final: La mise en page n’est pas tout à fait terminé…..donc les code seront mit ultérieurement. Création:…
Galerie d’images
Nous allons créer un galerie d’image pour appliquer ce que nous avons vue précédemment. Dans un premier temps nous créons la page en statique, ainsi que la mise en page. Créons également le dossier images, pour les vignettes et les images. Ce qui nous donne: Après nous remanions le tous, quelques dossiers renommés,…
Flex box et responsive.
Nous rentrons dans le concret! Voici l’exercice: Format mobil: Son css: @import url(« https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300i,700|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i »); *, ::before, ::after { box-sizing: border-box; } figure { margin: 0; } img { max-width: 100%; } body { line-height: 1.5; font-family: « Open Sans », sans-serif; color: black; } h1, h2, h3, h4, h5, h6 { font-family: « Open Sans Condensed », sans-serif; line-height: 1;…
Flex box
Voila, nous attaquons les « flex-box ». Mise en page beaucoup plus simple que les flottant. Les codes: dispay: flex; (place les blocs horizontalement) flex-wrap: wrap; (passe à la ligne, aussi pour les colonnes) no-wrap; wrap-reverse; flex-direction: (désigne l’axe principal) row; row-reverse; column; column-reverse; justify-content: …
Rentrée et révisions
Révision 11 page de css axée sur les flottants. Plus un peu de responsive. Après 768 px. Après 1200 px. Le code css.