CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web. Material Design Colors - Red. Center and crop images with a single line of CSS. CSS3 – Effet parallaxe (sans JavaScript) - CSS / CSS3 | Creative Juiz. 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. L’article zoom sur l’effet parallaxe de Simon est bien conçu, je vous invite à le lire si vous préférez l’utilisation de jQuery, ou si vous souhaitez découvrir une alternative ou un complément à ce tutoriel.
J’en profite pour remercier Simon qui m’a autorisé à reprendre son design ainsi que la base du code qu’il a conçu pour l’article sur Alsacréations. Démonstration Place à l’explication ! Concept Pour réaliser cet effet il nous faut plusieurs éléments qui vont nous permettre de simuler différents plans. Lorsque un tel effet est mis en place sur un site web, il l’est souvent pour offrir une transition originale entre deux vues, un peut comme lors d’un diaporama pour passer d’une slide à l’autre. <! CSS3 – Créer un slideshow automatique et contrôlable.
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. Ce tutoriel ne s’adresse pas aux débutants, il vous faudra un minimum de connaissances techniques pour vous y retrouver dans les tronçons de code qui vont suivre. Cependant, le code commenté reste – je l’espère – accessible. Avant propos La page de démonstration du slideshow full CSS3 vous propose des fichiers sources en téléchargement, profitez-en, notamment si vous souhaitez récupérer les images.
Les codes CSS fournis ici sont légèrement différents de ceux fournis dans l’archive zippée téléchargeable. Les codes CSS3 présents sur ce tutoriel ne tiennent pas compte des préfixes parfois nécessaires (-webkit-, -moz-, -ms-, -o-) pour une question de gain de place dans le code. Les défauts des versions précédentes. CSS3 – Effet de feuilles superposées. 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. Tweet et réponse L’idée me semblait intéressante, voici ma proposition visible sur dabblet et correspondant au mieux à l’image fournie par Daniel :Effet de feuilles superposées Comment faire ? Nous allons voir plusieurs exemples pour réaliser deux effets similaires. Démonstration Pour réaliser le premier effet, utilisons un code HTML simple correspondant à un bloc de citation : <blockquote><p>C'est en forgeant qu'on devient forgeron</p></blockquote> Ce code suffit amplement pour notre affaire. N’oubliez pas que ce code CSS n’est pas préfixé (-webkit-, -moz-, etc.) et qu’il convient de le faire pour les propriétés CSS3 (ici box-shadow, transform-origin et transform).
Aller plus loin. HTML5 : l’élément progress, avancement d’une tâche - Veille technologique. L’élément progress en HTML5 permet de visualiser l’avancement d’une tâche. C’est un élément encore assez méconnu mais qui peut être pratique dans quelques cas où vous avez besoin de permettre à l’utilisateur de visualiser une évolution ou un stade précis dans un processus. Voyons comment l’intégrer et styler cet élément. Quelques exemples d’utilisation Avant de nous lancer dans du code, voici quelques idées ou exemples d’intégration d’un tel élément dans votre code.
Progression dans le remplissage d’un formulaire,Progression dans le remplissage d’un profil utilisateur,Progression du chargement d’un fichier,Niveau d’avancement de votre refonte/construction de site web,État de complétion d’une tâche, quelle qu’elle soit. Le W3C définit cet élément comme : […] représentant l’état d’avancement d’une tâche. […] L’utilisation pour quelque chose qui ne définit qu’une jauge est inappropriée. À quoi ressemble progress ? Faisons simple et utilisons ce morceau de code. Amusez-vous bien ! Compatibilité. Un système de notation en quelques lignes de CSS. 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 ! Nous allons faire ça en HTML et CSS, juste pour le fun, ça vous dit ? Voir la démonstration Un bout de HTML Nous allons simplement créer un groupe de lien dans une div, mais le principe est assez semblable quelle que soit votre structure.
<div class="rating"><! Les commentaires sont là pour conserver l’indentation et éviter le white-space. On commence par un petit problème : on doit inverser le sens des étoiles (liens), la première permet de donner 5 étoiles (meilleure note), la dernière 1 étoile (moins bonne note), mais vous allez comprendre ensuite pourquoi. Une portion de CSS Donnons quelques styles de base à notre système d’étoiles. transition c’est pour la petite touche d’animation en CSS3, mais c’est optionnel. Le code CSS final : Une taille de police en fonction de la largeur d’écran. 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 à la rescousse Il existe une unité encore peu connue car prise en charge par nos navigateurs depuis peu de temps, il s’agit des unités relative au viewport. Pour résumer, nous allons proposer un corps de texte qui dépend de la largeur de la fenêtre du navigateur. Très bien, mais que représente une unité de vw, par exemple ? Prenons un exemple plus parlant. Mon corps de texte aura un équivalent de 10% de la largeur de mon viewport, à savoir la largeur de la fenêtre de votre navigateur. Il vous faudra donc recharger la page sur la page de démonstration à chaque redimensionnement de la fenêtre du navigateur. Du Retina et HD pour votre site web : image-set, picture et srcset. 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 ? Je fais partie des gens indécis sur la question, et du coup cette position me va très bien pour écrire cet article, car j’en attends vos réactions. Pour moi la HD, comme la 3D, fait partie de l’avenir de l’image, que ce soit au ciné, la télévision ou un écran d’ordinateur. C’est comme le son multicanal (plus connu sous le nom de son surround), aujourd’hui ça vous ferait bizarre d’aller au cinéma avec un son mono. Et bien pour la HD c’est pareil, dans quelques années nous ne pourrons plus nous en passer. C’est ce qui me fait dire qu’accorder un minimum d’importance à la HD sur le Web (ici Retina) n’est pas une option. Je ne dis pas que cette liste est exhaustive. Enjoy ! Custom Checkboxes in full CSS3 - Soft effect.
Animation on vertical nav menu - CodePen. CSS3 – Effet parallaxe (sans JavaScript) - CSS / CSS3 | Creative Juiz. CSS3 Generator. CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web. Une collection de boutons HTML/CSS design avec effets de hover animés. HTML5 est enfin officialisé, l'avenir du web ouvert n'est pas assuré pour autant - InterfacesRiches.fr. Saviez-vous que le web avait fêté ses 25 ans en août dernier ?
C’est en effet le 19 août 1989 que Tim Berners-Lee a publié le code source du World Wide Web (cf. Web @ 25). Durant cette période le web a connu de nombreuses évolutions, notamment au niveau des technologies utilisées pour afficher des contenus et services (20 ans d’évolution des IHM web), la dernière en date étant la publication des recommandations officielles de la dernière version du langage HTML : Open Web Platform Milestone Achieved with HTML5 Recommendation. Concrètement, cela veut dire que l’organisme de standardisation du web recommande aux éditeurs de navigateurs, de contenus et services en ligne, et plus généralement aux développeurs du monde entier d’utiliser les spécifications de HTML5.
Non-standardisation de l’internet mobile : Apple est à la fois le problème et la solution Tout le monde milite pour les standards, surtout les leurs !