background preloader

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

CSS3 – Créer un slideshow automatique et contrôlable - CSS / CSS3
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

http://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-transition

Related:  CSS3HTML5 - CSS3HTML/CSSPrincipesWeb Design

Contraste de texte automatique avec CSS Blend Modes Les Blend Modes CSS permettent de créer des effets graphiques vraiment passionnants. Une des applications pratiques les plus utiles concerne le contraste automatique entre texte et background. Par Dudley Storey. Par Dudley Storey Se lancer dans le HTML 5 Nous allons voir ensemble comment se familiariser avec les nouveautés HTML 5. Nous verrons quelques balises importantes de la prochaine version majeure du HTML. » La version 5 de HTML apporte à tous les webdesigners des outils pour simplifier le développement 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.

Pompage.net - Inline-block est-il un substitut aux floats ? Par Steven Bradley Quand vient le moment de développer la mise en page avec CSS, float fait le plus gros du travail. Nous utilisons les éléments flottants pour les blocs importants comme une zone de contenu principale ou une colonne latérale ; nous y avons aussi recours pour les blocs de moindre taille à l’intérieur de ces blocs principaux. Mais les floats sont-ils toujours le meilleur choix? Si les floats fonctionnent généralement sans problème, il peut parfois être délicat de les manipuler. Mettre une image en fond d'une page en CSS (background-color image attachment repeat position) Couleur de fond de la page Background Vous pouvez définir directement en CSS le fond d'une page HTML et meme une image. Exemple avec la balise BODY : body { background-color:: #eeeeee; font-family: Verdana, Geneva, Arial; font-size : 12px; Valeurs possibles : background-color background-image background-attachment background-repeat background-position (!)

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 Menu déroulant en CSS3 avec transition et max-height Menu déroulant en CSS3 avec transition et max-height Cet article a 3 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 52 989 fois.

Focus sur le Graal des sites responsive : Flexbox Aujourd'hui, focus sur une propriété CSS donc vous avez tous entendu parler au moins une fois : Flexbox. Vous souvenez-vous de l'époque où nous utilisions des tables à tort et a travers pour désigner nos sites ? Je pense que tout le monde parmi nous s'accorde pour dire que cette époque était une période très sombre, avec un HTML absolument pas sémantique et un CSS plein de hack pour obtenir un design convenable sur la plupart des navigateurs. Mais que dire de notre Web actuel ? Notre CSS actuel est plein d'éléments en Float, et notre HTML sémantique se retrouve plein de classes pas sémantiques du tout comme .row, .small-12 ou .columns.

Osez HTML5 et CSS3 ! HTML5, bien qu'apportant son lot de nouveautés et d'éléments, se base sur son prédécesseur HTML 4.01 dont il ne change pas radicalement au niveau de la logique et de la structure. L'article d'introduction à HTML5 de julixyde survole quelques nouveaux éléments que j'ai employés sur mon site personnel. Doctype Le Doctype HTML5 s'écrit tout simplement de la sorte : Voilà, votre document est identifié comme étant en HTML5, c'est compatible sur tous les navigateurs et il suffit à présent de nous servir des éléments inédits de cette nouvelle version. CSS3 – Effet parallaxe (sans JavaScript) - CSS / CSS3 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.

Related:  des sliders en cssblogs, graphismes codes et templatesTutorielsBoite à outils web/ intégrationchou33