Articles pour les mots-clés ‘CSS3’

CSS3 Flexbox – Plongez dans les CSS modernes

Lire l'article 3

Le 18 février dernier est sorti le dernier bouquin de Raphaël Goetter sur un aspect cette fois très précis de CSS : Flexible Box Layout Module (alias Flexbox). L’objet de ce bouquin est de démystifier le module en tentant une explication point par point, et surtout en plongeant le lecteur dans des cas concrets.

Livre – CSS3 Pratique du Design Web

Lire l'article 9

Le livre de Raphaël Goetter, CSS2 Pratique du Webdesign est toujours une référence dans le domaine de l’intégration web en France et a bénéficié de plusieurs éditions. Cette année c’est une version toute nouvelle nous présentant CSS3 qui voit le jour grâce à un duo de choc.

Les ressources du Web #13

Lire l'article 2

Cette fois je vous propose exceptionnellement quelques ressources Swift, tout en faisant la part belle aux ressources habituelles en design, CSS et Inspiration. Une petite ressource en photographie et trois autres en « relax » viennent agrémenter la sélection de cette édition.

Créer une animation de neige ou de particules en CSS3

Lire l'article 8

Je vous propose aujourd’hui une animation de particules dans un tuto qui affichera une chute de neige en boucle. Il existe souvent une foule de solutions pour ce genre d’animation. Je vous présente une solution en CSS3 en utilisant la propriété animation et les séquences de keyframes.

Litmus – Un service pour tester vos e-mails

Lire l'article 2

Je parle ici de tester les e-mails que vous concevez en HTML et CSS (si on peut encore appeler ça du CSS), vous savez ce monde cruel où la mise en page tableau est reine et où les moteur de rendu régressent ? Dans ce fabuleux monde, le service Litmus vous propose un outil de test bien pratique.

Effet d’animation CSS3 sur menu vertical

Lire l'article 15

On m’a demandé une vingtaine de fois comment reproduire l’effet d’animation assez simple de mes menus sur la barre latérale de ce blog (si le design actuel est toujours le même d’ici à ce que vous lisiez cet article). Du coup je prends un peu de temps pour vous faire un mini tutoriel et vous expliquer le principe !

Les compteurs en CSS

Lire l'article 7

CSS depuis sa version 2.1 propose un système de compteur relativement méconnu du fait d’une compatibilité relativement récente sur IE. D’autant plus que certains défendront la position suivante : CSS n’est pas fait pour cela, il faut utiliser JavaScript. Soit ! Mais sachez que ça existe. Petite introduction !

Une taille de police en fonction de la largeur d’écran

Lire l'article 53

J’ai souvent eu l’occasion à travers mes divers projets Web mobile (responsive), d’avoir à réduire la taille des polices de titre car même un simple mot ne passait pas en largeur. Pour éviter d’avoir une césure sur chaque mot du titre, le plus simple était de s’autoriser une réduction approximative du corps. (approximative… façon de parler). Je vous propose des solutions relative.

CSS3 – Effet de feuilles superposées

Lire l'article 20

Il y a quelques jours de cela je répondais à un petit tweet d’un confrère pour donner une astuce sur la création d’un effet graphique de feuilles superposées en CSS3. Le défi était de ne pas multiplier les éléments HTML pour réaliser cet effet. C’est chose faite. Jetons un œil sur la technique utilisée.

Un Nth-child en CSS 2 compatible depuis IE7

Lire l'article 11

Utiliser CSS3 c’est bien, mais pas suffisant. Il ne s’agit pas d’un nouveau langage de style, mais bien d’ajouts à CSS2.1. Il serait donc prématuré de vouloir se jeter sur CSS3 sans maitriser son petit frère.

CSS3 – Effet parallaxe (sans JavaScript)

Lire l'article 122

Retour des tutoriels CSS avec quelque chose d’un peu original pour cet article : un effet parallaxe uniquement en CSS3.
C’est à la suite de l’article de Simon Kern sur Alsacréations que m’est venue l’envie de tenter d’utiliser CSS pour reproduire cet effet initialement conçu avec JavaScript.

Les transitions en CSS3 – Mouseover et Mouseout sans JavaScript

Lire l'article 7

Manière un peu originale d’aborder les transitions, j’ai lu un article en anglais il n’y a pas longtemps qui proposait d’étudier les transitions sur l’événement hover en CSS.
Par défaut, la transition sur cet événement comme on a l’habitude de l’utiliser nous propose des effets équivalents au «mouseover» comme

Différence entre pseudo-élément et pseudo-classe

Lire l'article 12

Petit sujet de vocabulaire aujourd’hui pour soulever un problème de différenciation entre la pseudo-classe et le pseudo-élément en CSS.
On a souvent tendance à confondre les deux en se disant que dans les deux cas on place un : (deux-points) devant.
Confusion justifiée, voyons donc comment les distinguer.