Tutoriel : formulaire 100% CSS3 sans image et sans JavaScript Je vous invite à aller lire le tutoriel complet sur le CSS que j’ai écrit. Après avoir expliqué comment réaliser un bon formulaire HTML, pourquoi ne pas en réaliser un uniquement en CSS3 ? Les propriétés CSS3 utilisées ici sont les suivantes : border-radius pour les bords arrondisbox-shadow pour les ombres des blocscontent pour rajouter du contenu au HTMLgradient pour les dégradés des blocsrgba pour avoir des fonds transparentstext-shadow pour les ombres du texte J’utilise aussi les pseudo-classes CSS3 suivantes : :after pour rajouter du texte HTML à la suite d’un élément:last-child pour sélectionner le dernier enfant d’un élément:target pour séléctionner un élément lorsqu’une #ancre est utilisée dans l’adresse Dernière fonctionnalité utilisée : le sélecteur avancé [type=text] pour sélectionner un élément selon la valeur d’un de ses attributs HTML. Bien sûr, toutes ces nouveautés CSS3 ne marchent pas partout, mais elles fonctionnent très bien sous Firefox et Safari/Chrome (Webkit).
La transparence de couleur avec RGBa en CSS3 Le module de couleurs de CSS3 introduit la notion de transparence dans les valeurs associées à une couleur, l'écriture RGBa. Cette composante de la couleur permet de jouer sur les effets d'opacité entre les différentes couches d'éléments HTML. Contrairement à ce que l'on peut croire, le principe de la transparence RGBa est radicalement différent de la propriété opacity (également CSS3 mais assez ancienne déjà) : cette dernière est une propriété qui s'applique à l'élément dans son intégralité (ainsi qu'à tous ses descendants) tandis que RGBa est une valeur qui s'applique à une propriété de l'élément sélectionné uniquement. De ce fait, RGBa est susceptible de s'appliquer à toutes les propriétés dont la valeur peut être une couleur : background-color, color, border-color, box-shadow, text-shadow, etc. Voici une illustration du principe de transparence de la couche Alpha (RGBa) (Voir le résultat (RGBa) sur votre navigateur) : Principe de la notation RGBa <div><h1>Joli titre</h1></div>
Initiation au positionnement en CSS Pour éviter l'usage inconsidéré des tableaux de mise en page, l'utilisation correcte de chaque élément (balises div, p, h1, ul, li, etc.) ainsi que leur positionnement en CSS est dorénavant indispensable. Les éditeurs HTML visuels n'utilisent qu'une infime partie des possibilités des balises (faussement nommées "calques" en général), ce qui les rend souvent peu compatibles et peu pratiques. Cet article en deux parties explique comment positionner les éléments en CSS de façon optimale. Résumé et pense-bête. Tous les éléments (balises) HTML peuvent être positionnés, décorés, dimensionnés, ... grâce aux styles CSS. Les balises de bloc et les balises en-ligne Ce chapitre sur la structure des balises est primordial, vous devez auparavant avoir consulté le tutoriel sur les bloc/en-ligne. Voici un résumé pour les lecteurs pressés les éléments de rendu "bloc" se placent toujours l'un en dessous de l'autre par défaut (comme un retour chariot). Ancêtre, Parents, Enfants, Frères Le Flux
CSS Débutant : tutoriels sur les CSS3 Réaliser des coins arrondis Arrondir les coins est sûrement l'un des effets graphiques les plus recherchés par les webdesigners. Pour cela, on a longtemps utilisé des images avec plus ou moins de bonheur et de facilité pour obtenir l'effet recherché. Tous les navigateurs récents permettent à présent d'arrondir les coins de cadres, d'images, de tableaux etc. avec une facilité déconcertante. Créer des ombres sur les boites et du texte Ombrer des boites ou du texte sans images c'est possible ! Voici les explications, illustrées de quelques exemples, de réalisations d'ombres en CSS. Images multiples dans un même background La propriété background-image n'acceptait, en CSS 2.1, qu'une seule image. Les CSS3 permettent des background multiples, et maintenant que même Internet Explorer (version 9) l'implémente, pourquoi s'en priver ? Réaliser des fonds en dégradé sans image On peut maintenant s'en passer grâce à de nouvelles valeurs de background : linear-gradient et radial-gradient. Les Media-Queries
Sliding Image Panels with CSS3 Today we'll show you how to create some neat sliding image panels with CSS only. The idea is to use background images for the panels and animate them when clicking on a label. We'll use radio buttons with labels and target the respective panels with the general sibling selector. View demo Download source Today we’ll show you how to create some neat sliding image panels with CSS only. The beautiful images are by Joanna Kustra and they are licensed under the Attribution-NonCommercial 3.0 Unported Creative Commons License. You might as well be interested in Filter Functionality with CSS3 where we have used a similar technique for filtering elements based on their type. Please note: the result of this tutorial will only work as intended in browsers that support CSS transitions and animations. The Markup The HTML will consist of three major parts: the radio buttons and the labels, the container with the panels and their “slices” for each image, and the titles. Let’s style this baby. The CSS Demos
Buildez vos slides en HTML5 avec Deck.js Deck.js est une excellente bibliothèque JavaScript pour monter vos presentations (slides) en HTML5 . Deck.js utilise des techniques CSS3 et Javascript et presente des effets de transitions assez « smooth ». La librairie fournit des modeles de themes standard pour accélerer le développement de vos slides. Deck.js a été testé avec jQuery 1.6 + et fonctionne dans IE7 +, Chrome , FF, Safari et Opera. Exigences: 1,6 + jQuery Démo: Licence: MIT, la licence GPL
Effet Lightbox en CSS3 grâce à transition Effet Lightbox en CSS3 grâce à transition Cet article a 4 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 29 965 fois. C’est en parcourant un lien partagé par Raphaël hier dans la journée, que je me suis décidé à tripoter un petit peu de CSS et HTML pour améliorer le rendu de M. Où cela se passe-t-il ? Vous trouverez les fichiers sur l’espace de test de CreativeJuiz, précisément à cette adresse : Le HTML Le code HTML utilisé est vraiment basique. <figure tabindex="0"> <img src="images/demo1.jpg" alt="Demo" /> <figcaption>Rorschach Artefact</figcaption> </figure> <span></span> <figure tabindex="0"> <img src="images/demo2.jpg" alt="Demo" /> <figcaption>Mystic Light</figcaption> </figure> <span></span> <figure tabindex="0"> <img src="images/demo3.jpg" alt="Demo" /> <figcaption>A simple idea... Le CSS Contenteditable M. À propos de Geoffrey Laisser un commentaire
Div et CSS : une mise en page rapide et facile Tout au long de cet exercice, nous allons utiliser deux fichiers : index.html : contiendra tout notre code HTML. style_div.css : contiendra toutes les informations relatives au positionnement de nos différents blocs. Pour inclure notre CSS dans notre page HTML, rien de plus simple, il nous suffit d'insérer le code suivant entre les balises <head> et </head> : Définissons tout d'abord les propriétés de base de nos blocs. Ce petit bout de code définit simplement que pour tous les éléments de type div, le texte sera centré (text-align). Nous allons commencer par créer un modèle de page tout bête, comprenant un bandeau, une zone de contenu, et un pied de page Nous alons définir (parfaitement arbitrairement) des couleurs (uniquement pour bien se représenter les positions) ainsi que les dimensions de nos différents blocs : Bandeau : 600 x 50 px - couleur : #00CCFF Contenu : 600 x 400 px - couleur : #FFCC00 Pied de page : 600 x 50 px - couleur : #33FF99 Télécharger les codes-source de l'exemple
CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web. CSS3 Patterns Gallery Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients). Also, this gallery won’t work in Firefox 3.6 and IE10, even though they support gradients, due to a JavaScript limitation. Submission guidelines If you have a new pattern to submit, please send a pull request. Does it present a new technique? Expanding Images using HTML5's contenteditable tabindex HTML5 has a new attribute, contenteditable, which can be applied to any element which allows it to be edited directly in the browser window. Think of text input with a predefined value, but it can literally be any element. Form elements like text inputs support the :focus pseudo class, which allow us to style those elements when they are clicked upon or otherwise navigated to. Giving an element the contenteditable attribute means it also now supports the :focus pseudo class, which opens up some interesting possibilities! We'll exploit this little trick to make an expanding image (like a lightbox without the overlay) right within some content. UPDATE: Even better, you can give attributes a tabindex attribute, like you would a form element, which allow allows :focus without the editability. HTML5 Markup HTML5 has nice elements for including captioned images. <section class="image-gallery"><figure><img src="images/img-1.jpg" alt="jump, matey" /><figcaption">Jump! The Images The CSS Related