Ma reconversion pro

Du bâtiment au développement web

Étiquette : css (page 1 of 2)

Le contenu du thème

Salut, logo-theme custom wordpress

On continue sur notre lancé dans la création d’un thème WordPress. J’avoue que la dernière fois on a pas fait grand chose mais c’était nécessaire pour la suite.

Dans ce nouvel article, nous allons découvrir comment fonctionne un thème, et donc un ou plusieurs templates. Comme tu t’en es peut-être rendu compte, le dossier wp-content dont je te parlais la dernière fois (Préparer WordPress en local), contient de nombreux fichiers dont le corps même du thème qu’on veut créer.

Nous allons explorer ce dossier et essayer de comprendre comment WordPress construit un  thème avec les briques qu’on lui donne.

Il va falloir être un minimum rigoureux dans l’organisation des fichiers puisque WordPress va chercher tel fichier ou tel autre grâce à leur nom, donc attention aussi aux noms qu’on donne…

Continue reading

 

Modifier le CSS avec Javascript

Salut,Modifier le CSS avec Javascript - logo

Le dernier article nous a permis de modifier du HTML avec du Javascript, aujourd’hui, on va voir comment modifier le CSS avec Javascript !

Une fois les éléments HTML mis en place, il n’est pas très difficile d’ajouter le CSS.

Il est aussi possible d’interroger des éléments déjà stylisés pour récupérer les valeurs de chaque propriétés . Cela peut être très utile quand on a pas accès au fichier CSS.

Pour suivre cet article, il vaut mieux être un peu à l’aise avec les techniques de récupérations d’éléments HTML, pour cela tu peux jeter un oeil sur ces articles, Javascript, les débuts dans le DOM et Créer un élément HTML en Javascript.

Continue reading

 

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

 

La pagination avec Bootstrap

Salut, La pagination avec Bootstrap

Dernier article de la longue série sur le framework de Twitter. Aujourd’hui on va voir comment mettre en place la pagination avec Bootstrap. Cette fonction va permettre à tes utilisateurs de pouvoir changer de page et de poursuivre leur navigation dans une même thématique. Tu peux retrouver un exemple de pagination dans ce blog dans l’onglet ARTICLE en bas de page. Il faudrait d’ailleurs que je prenne le temps de rechercher dans les fichiers PHP comment remplacer les textes en anglais pour les mettre en français.

Si tu me lis depuis quelques articles, je procèderais de la même façon, tous les exemples de code seront visibles depuis cet article ou depuis un projet Codepen.

Pour mettre ta pagination en place, on va encore et toujours ajouter des classes CSS, et Bootstrap s’occupe du reste!

Continue reading

 

Faire une navbar avec Bootstrap

La navigation avec Bootstrap – Partie 2Faire une navbar avec Bootstrap

Suite du tour des possibilités qu’offre le framework qui nous intéresse depuis plusieurs articles, cette fois nous allons voir comment faire une navbar avec Bootstrap.

Une navbar est un des éléments les plus importants d’une page web. C’est une des raisons qui font que tes utilisateurs visitent ton site ou le quittent. Les titres d’onglets leurs couleurs, leurs animations, son aspect général, etc doivent être choisis avec précision et susciter l’intérêt. Mais autre aspect important, la navbar doit aussi être accessible sur mobile.

Bootstrap est un framework pensé mobile first, donc le code qui suivra tiendra compte de l’aspect responsive que devra avoir une navbar. Pour cela Bootstrap a pensé à tout! Comme pour l’article précédent sur la navigation, certaines de ces fonctions auront besoin de jQuery et de Javascript pour fonctionner. N’étant pas encore formé à ces deux langages, je ne parlerai pas de ça pour le moment.

Continue reading

 

La navigation avec Bootstrap

La navigation avec Bootstrap – Partie 1

Salut, la navigation avec bootstrap

Dernier sujet sur Bootstrap, à propos de la façon de construire la navigation de ton site. Comme d’habitude, il faudra ajouter des classes particulières, et pour que certaines techniques fonctionnent il faudra ajouter du code jQrery et/ou JavaScript, choses que je ne connais pas encore. Je reviendrai donc sur l’animation de ces navigations plus tard lorsque j’aurai maîtrisé ces deux choses là.

Bootstrap propose donc plusieurs façons d’organiser et de réaliser la navigation de ta page. Chacune de ces solutions est différentes visuellement, donc à toi de savoir laquelle utiliser.

Au risque de faire un article très long, je le découpe en au moins 3 parties, peut-être même 4…

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

 

Utiliser la grille Bootstrap

Salut, utiliser la grille bootstrap

Après être resté un peu sur notre faim la semaine dernière, je vais donc te montrer comment utiliser la grille Bootstrap. Nous allons nous servir des dernières classes CSS vues, celles qui ressemble à cela: col-md-5. Si tu ne te rappelles pas comment cette balise est constituée et ce que ça signifie, tu peux jeter un oeil à mon dernier article: Le système de Grille avec Bootstrap.

Continue reading

 
« Older posts

© 2020 Ma reconversion pro

Theme by Anders NorenUp ↑