Ma reconversion pro

Du bâtiment au développement web

Catégorie : CSS

Les transformations 3D

Salut, Les transformations 3D

Aujourd’hui suite et fin de la série sur les propriétés CSS avancées avec les transformations 3D. Cette fonction va utiliser plusieurs des transformations que nous avons découvertes en 2D, sauf que sur notre axe X / Y, nous allons ajouter une dimension, Z. Cela à l’air simple à dire, mais il y a quelques trucs qui sont un peu compliqués, tu verras à la fin de l’article, pourquoi j’ai mis autant de temps à l’écrire celui ci… chaud!

C’est grâce à cette dimension qu’il va être possible de donner de la profondeur et de la perspective à nos objets et notre page.

Alors n’allons pas trop vite en besogne, il n’est pas question pour le moment d’imaginer qu’on va apprendre à coder des programmes de réalité augmenté, ni des effets 3D que nous verrions avec des lunettes comme au cinéma. On en est pas encore là, en tout cas moi je n ‘en suis pas encore là…

Continue reading

 

Les animations CSS

Salut, Les animations CSS

Cette fois je pense qu’on commence à rentrer un peu plus loin dans de la programmation. Jusqu’à présent, on sait mettre un élément en forme, et le faire passer d’un état A à un état B. Les animations en CSS, vont nous permettre d’aller plus loin et de monter des petits scénarios pour rendre nos pages encore plus vivantes.

On va pouvoir découper une d’animation en plusieurs séquences successives. On en est pas encore à pouvoir bosser chez Pixar, mais il faut bien commencer par quelque chose!

Encore une fois, je n’ai jamais utilisé ce genre de propriété, donc je découvre en même temps que toi. Je me forme toujours sur Openclassrooms, je t’encourage d’ailleurs à suivre le cours qui parle des propriétés CSS avancés.

Pour une fois, introduction courte, j’ai envi de me plonger là dedans rapidement!!

Continue reading

 

Les transitions en CSS

Salut, Les transitions en CSS

J’aurais pu intituler cet article « Javascript pour les feignants » c’est d’ailleurs ce que j’avais prévu avant de changer. Les transitions en CSS sont ont été ajoutées depuis CSS3. Avant, pour faire ces types d’effets sur une page web, il fallait coder en Javascript.

Avec l’ajout de ces nouvelles propriétés, on va vraiment pouvoir aller plus loin dans l’animation de nos pages de débutant, sans avoir à écrire une seule ligne de jQuery ou de Javascript!

Je découvre ces propriétés en même temps que toi, donc je n’ai pas idée de ce qui m’attends. Je partage donc avec toi mon apprentissage en suivant le cours d’Openclassrooms, sur les propriétés CSS avancées. La seule animation que je connaisse est celle qui consiste à modifier certaines propriétés au survol en utilisant le selecteur CSS :hover. Je vais utiliser ce sélecteur pour qu’une fois sur Codepen, tu puisses voir la différence dès que tu passes ta souris au dessus de l’exemple qui t’intéresse. J’avais fait un peu le même principe dans mon précédent article sur les propriétés avancées en CSS.

Continue reading

 

Les transformations 2D

Bonjour, 

J’ai personnellement pas connu les anciennes versions de CSS, mais CSS3 apporte à priori de réelles nouveautés en terme d’animations et de possibilités pour les développeurs et les designers. Je vais donc découvrir en même temps que toi cette nouvelle fonctionnalité, Les transformations 2D. Je n’ai jamais manipulé cette propriété, mes premiers tests sont donc ceux que tu verras dans le fichier Codepen. Il va être désormais possible de modifier la position des éléments de notre page, les déplacer, les faire tourner, les déformer, etc…

On va pouvoir torturer un peu le contenu de notre pagemais il faudra veiller à ne pas le noyer dans des animations, et que l’utilisation de notre site devienne anarchique. Exemple très concret, je n’aime pas du tout l’animation des liens de la rubrique « Articles préférés » de ma page d’accueil. Elle n’apporte rien et je la trouve assez moche. C’est une animation qui est directement ajoutée avec le plugin, je vais donc chercher un moyen de la retirer.

Continue reading

 

Le Multi-colonne en CSS

Salut, le multi-colonne en css logo css3

Retour sur le CSS3 mais cette fois avec des propriétés avancées.  Ces propriétés vont nous permettre de réaliser plusieurs choses assez amusantes! La première n’est pas la plus « fun », mais vos utilisateurs vous remercieront de l’avoir employée, puisqu’il s’agit du multi-colonne. Cette propriété va nous permettre de répartir comme sur un journal, notre contenu sur plusieurs colonnes sans avoir besoin de coder quelque chose de compliqué avec des blocs distincts, qu’il va falloir positionner, etc.

Vos lecteurs ne s’en porteront donc que mieux puisqu’il est plus simple de lire sur des lignes courtes que sur des pages trop larges.

C’est parti pour la première partie des propriétés avancées en CSS!

Continue reading

 

Les dégradés en CSS

Salut,

Les dégradés en CSS est une propriété que j’avais survolé il y a quelques mois, et que j’avais besoin de mieux maîtriser. De mon point de vue de débutant, cette technique permet d’égayer une page sans ajouter d’image, sans ralentir de chargement par la même occasion. Ce n’est qu’un avis, je n’ai pas encore eu l’occasion de monter de grosse page, avec un objectif d’optimisation du chargement de la page. Nous verrons que le dégradés offres d’autres possibilités assez pratiques je trouve…

 

Continue reading

 

La propriété font-face

Salut,

Dans cet article je vais essayer d’être plus bref que l’article précédent, et surtout peut être réussir à t’éviter les allers et retours sur Codepen. J’ai enfin trouvé un plugin (qui fonctionne correctement…) et qui me permet d’écrire du code directement dans l’article. Ensuite libre à toi de le recopier dans ton éditeur ou dans ton profil codepen. Je vais donc parler de la propriété font-face, qui permet d’intégrer les polices de ton choix.

Continue reading

 

La police et ses propriétés: font-size et font-family

Dans cet article, je vais te parler des Polices et ses propriétés: font-size et font-family. La Police est, à mon sens,  une des choses les plus importantes quand on fait un site web.  Et oui, de mon point de vue c’est très important de choisir de bonnes polices puisqu’elles te permettent de mettre en forme le contenu de ton site, ce que tu as à expliquer, présenter, etc. Je ne m’étendrai pas pour le moment sur des considérations de design dans ce premier article sur le sujet.  J’ai des livres à lire la dessus donc j’y reviendrai plus tard…

Continue reading

 

La propriété CSS Color

La propriété color permet de modifier la couleur des textes que l’on aura à ajouter dans les futurs pages web que l’on fera.

Nous avons  3 moyens de désigner des couleurs:

  • les noms de couleur,
  • la notation hexadécimale,
  • la notation rgb.

Continue reading

 

Introduction au CSS

Le CSS est un langage vraiment vaste, puisqu’il existe de nombreuses propriétés, et complexe parce que les possibilités de création sont immenses. Oui c’est un peu pompeux comme introduction mais, tu vas voir au fil des articles sur le CSS, qu’on peux vraiment faire autre chose que de mettre du texte en rouge. Il est l’heure de créer un fichier .css et de l’ouvrir dans ton éditeur de texte.

Continue reading

 

© 2019 Ma reconversion pro

Theme by Anders NorenUp ↑