CreativeJuiz - Du jus, des fruits, du fun !
Quand veille technologique et veille graphique font bon ménage !

Désolé pour ce titre d’article un peu décalé. Le sujet n’en reste pas moins sérieux.
Dans le monde des frameworks nous avons ceux qui font tout, ceux qui servent de « reset » ou encore de « kickstarter ». Knacss en fait pas mal, et vous laisse suffisamment de liberté pour faire le reste.

On va parler un peu mise en page et typographie aujourd’hui, avec une traduction de l’article de David Storey (en) sur le contrôle des césures grâce aux apports de CSS level 4. Rien de complètement utilisable encore, mais l’article me semblait suffisamment intéressant.

CSS depuis sa version 2.1 propose un système de compteur relativement méconnu du fait d’une compatibilité relativement ressente 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 !

Retina, ou la haute définition de manière plus générale pour les images de nos sites web pose un problème relatif. En effet depuis la sortie du premier Mac Book Pro à écran Retina (et avant pour certain), la question qui revient le plus souvent est : doit-on boycotter Retina, ou au contraire y accorder de l’importance ?

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.

Afficher 5 étoiles les unes à côté des autres, puis les faire se colorer en fonction de la note que vous souhaitez donner à une création, une vidéo, un article,… C’est parfois prise de tête, sprites CSS et autres systèmes de masque. Je vous propose plus simple !

Projet initié par Geoffrey Dorne et Julien Dorra, Responsive Museum Week présente un défi intéressant : proposer des feuilles de styles utilisateur afin d’améliorer les sites Internet de nos musées pour les rendre responsive. C’est à vous de proposer ces styles après une retouche de l’existant.

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.

C’est une chose qui peut paraître très simple à faire, mais sur laquelle beaucoup de personnes se sont cassés les dents.
Aujourd’hui encore je trouve des solutions en JavaScript qui permettent d’attribuer une marge à gauche de l’élément ul pour centrer les li qu’il contient.