Ma reconversion pro

Du bâtiment au développement web

Étiquette : css avancé

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

 

© 2020 Ma reconversion pro

Theme by Anders NorenUp ↑