background preloader

HTML/CSS

Facebook Twitter

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. 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.

CSS3 – Créer un slideshow automatique et contrôlable

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. 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.

CSS3 – Effet de feuilles superposées

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.

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.

HTML5 : l’élément progress, avancement d’une tâche - Veille technologique

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. 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.

Un système de notation en quelques lignes de CSS

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. 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.

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

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. 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.

Du Retina et HD pour votre site web : image-set, picture et srcset

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.

Custom Checkboxes in full CSS3 - Soft effect. Animation on vertical nav menu - CodePen. CSS3 – Effet parallaxe (sans JavaScript) - CSS / CSS3. 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 ?

HTML5 est enfin officialisé, l'avenir du web ouvert n'est pas assuré pour autant - InterfacesRiches.fr

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 !