Articles pour les mots-clés ‘CSS3’

J’ai commencé à apprendre le CSS en jouant avec des flottants et tentant de positionner des éléments en absolute et relative tout en espérant arriver à peu près au résultat escompté dans le navigateur. Pour mettre en page nos sites web nous avons aujourd’hui la chance d’avoir de nouveaux outils à notre disposition : Flexbox et Grid Layout.

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.

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.

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.

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.

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.

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 !

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 !

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.

Vous connaissez ou avez certainement entendu parler du plugin payant CSShat, pour Photoshop, qui permet de créer une feuille de styles à partir d’un PSD ?
Si l’idée vous séduit, regardez plutôt du côté de CSS3ps.com qui vous permet de transformer votre PSD en styles CSS3.

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.

Si vous suivez le compte @NoupeMag sur Twitter (ça marche aussi pour mon compte), vous avez certainement vu passer mon slideshow en CSS3 datant de l’an dernier.
Ce n’était pas ma première tentative de slideshow comme le présentent ces premier et second travaux datant de mai 2010.

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.

Il y a quelques temps déjà, Lea Verou proposait d’utiliser la propriété max-height afin d’effectuer des animations sur un élément sans toucher à la propriété height. Avec une petite adaptation, il est possible de créer un menu déroulant au survol avec un petit délai créé grâce à la propriété CSS 3 transition.

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.

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

Ces dernières semaines, j’ai tenté de trouver de nouvelles méthodes pour faciliter la tâche dans l’intégration de certains éléments précis d’un site Web. Je me suis également essayé a des choses plus poussées, comme le remplacement du JS d’un slideshow par du CSS.

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.