CSS Reference. Les 30 Sélecteurs CSS à Absolument Connaître. Vous connaissez les sélecteurs de base - id, class et descendant - et vous vous dites que c'est déjà bien suffisant ?
Si c'est le cas, sachez que vous vous interdisez d'accéder à un niveau de flexibilité insoupçonné. Même si beaucoup des sélecteurs mentionnés dans cet article appartiennent aux spécificités CSS3 et ne sont donc disponibles que dans les navigateurs modernes, ne passez pas à côté et essayez de les mémoriser. Commençons par les plus évidents, pour les débutants, avant de passer aux sélecteurs plus avancés. L'astérisque cible tous les éléments de la page. Beaucoup de développeurs utilisent cette astuce pour remettre à zéro les margess et les espacements. Le symbole * peut aussi être utilisé avec des sélecteurs d'enfants. Ceci cible tous les éléments enfants de la div #container.
IE6+ Firefox Chrome Safari Opera L'utilisation du symbole dièse comme sélecteur nous permet de cibler un élément par son id. Ceci est un sélecteur de classe. IE7+ Firefox Chrome Safari Opera Et voilà. Vincent De Oliveira - CSS & UI. Corriger l'alerte "Accès de Googlebot aux fichiers CSS et JS impossible" Cet été, Google a annoncé une évolution dans son algorithme de classement et demandé l’accès aux ressources CSS et JS pour son robot Googlebot.
Avec l’ouverture de ces ressources, Google comprend mieux la structuration de votre site internet. Cette alerte fait suite au souhait de Google de proposer une meilleure indexation des sites web, en prenant en compte le rendu des pages, en plus du contenu. Message d’alerte « Accès de Googlebot aux fichiers CSS et JS impossible » Pour identifier si vous êtes concernés (si vous n’avez pas reçu d’e-mail de la part de Google) : Connectez-vous sur Google Search Console (anciennement Webmaster Tools)Dans Exploration > Explorer comme Google, cliquez sur le bouton « Explorer et Afficher »Une fois le traitement de la page terminé, cliquez sur l’état de la page. Writing Good CSS. I'm always trying to learn new things.
However, more importantly, I also try to learn ways to improve the way I already do things. Writing Good CSS. Les 12 meilleurs éditeurs HTML gratuits. Qu’est-ce qu’un éditeur HTML ?
Pour créer un site web ou modifier le code d’un fichier WordPress, vous aurez probablement besoin d’un éditeur HTML. Ce sont des logiciels d’aide à la création et à la conception de pages HTML.
SVG/CSS3 Loader collection. Caractères spéciaux et entités HTML - Doc Alex. Réduisez le temps de création de vos pages avec le générateur d’effets graphiques CSSmatic. Est un tout nouveau site gratuit où les web-designers trouveront une trousse d’outils CSS d’effets graphiques des plus complètes. Très intuitive, elle leur fera gagner un temps précieux en leur permettant de ces effets et interminables et complexes qu’ils ont l’habitude de saisir manuellement pour appliquer ces effets graphiques à leurs pages web. Développés en JavaScript, ces outils permettent à l’utilisateur de créer des types d’effets percutants, de copier le code et le coller dans leur feuille de style.
Les effets graphiques disponibles sont : les dégradés, les styles des bordures, les textures avec ajout de bruit et les ombres portées. Le vous aide à créer des dégradés de couleurs multiples et d’opacités variables, dans le plus pur style Photoshop. Vous sont proposés, et vous pourrez même modifier la couleur, la luminosité ou la saturation du résultat final. L’outil vous permet de créer des bordures de blocs avec des .
Démos, tutos CSS. Générateurs CSS. HTML5. Hardboiled CSS3 Media Queries. La technique du Reset CSS. Le reset CSS est une technique qui consiste à réinitialiser à 0 la valeur de certains éléments HTML afin d'éviter une partie des différences d'affichage sur les divers navigateurs.
Avant d'aller plus loin, rappelons que l'usage de cette technique est controversé. Si vous souhaitez l'utiliser, il est recommandé d'utiliser un Reset CSS évolué, comme celui proposé par Eric Meyer, et d'éviter l'utilisation du sélecteur universel (*). Le Reset CSS classique (déconseillé) CSS Tools: Reset CSS. Le modèle tabulaire en CSS. Le modèle de construction tabulaire (HTML et CSS) compte sans aucun doute parmi les plus fascinants qui soient, après avoir été d'abord adulé puis banni vigoureusement par les intégrateurs de tous poils.
En 1998, les spécifications CSS2 étendent les historiques valeurs de la propriété display et proposent depuis belle lurette des possibilités de rendus et positionnements “tabulaires” sans pour autant interférer dans la sémantique et le bon usage des éléments HTML. Passons immédiatement à table et découvrons en détail le monde mal connu du Modèle Tabulaire en CSS… Note : Cet article est publié conjointement sur OpenWeb.eu.org et sur Alsacreations.com. En outre, certaines parties de cet article sont extraites du livre “CSS avancées, vers HTML5 et CSS3”, avec l’aimable autorisation de l’auteur :) Display, vous connaissez ? La propriété CSS Display est un puissant outil souvent mal connu et dont les possibilités réelles sont rarement utilisées.
Il faut avouer que Internet Explorer y est pour quelque chose... espérons qu'il se mette à la page, vu les horizons ouvertes par cette propriété. Les multicolonnes en CSS3. Le module de positionnement multicolonnes (ou Multi-column Layout Module en anglais) permet, comme son nom l'indique, de faire s'écouler du contenu sur plusieurs colonnes de largeurs égales, tel qu'on peut le voir dans le monde de l'imprimerie.
Encore peu usité, ce module est pourtant loin d'être en brouillon car il s'agit d'une spécification élevée au rang de Candidate Recommendation, donc stable, au sein du W3C depuis avril 2011. Compatibilité de multicolumn. Media Queries. Empêcher les flottants de dépasser de leur conteneur. Par défaut dans les navigateurs, les éléments positionnés grâce à la propriété CSS float (aussi appelés flottants, ou en anglais floats) sortent du flux de leur conteneur.
Autrement dit, les flottants «dépassent». C'est ainsi qu'on se retrouve avec des conteneurs qui font zéro pixel de hauteur, des colonnes qui passent à travers un pied de page, et autres résultats peu souhaitables. Par exemple, avec ce code HTML et CSS les «colonnes» flottantes dépasseront de leur conteneur: <div id="conteneur"><div class="colonne">AAA</div><div class="colonne">BBB</div><div class="colonne">CCC</div></div> Comment bloquer ponctuellement le dépassement des flottants? La propriété overflow La propriété CSS overflow définit comment un bloc doit se comporter lorsqu'un contenu dépasse de ce bloc. Cette propriété a aussi pour caractéristique, lorsqu'on utilise les valeurs autres que visible, de créer ce qu'on appelle un contexte de formatage de bloc.
DewTube lecteur vidéo (FLV, F4V) en Flash - Alsacréations. Intégrez des vidéos FLV et F4V (HD y compris) à vos pages web grâce à ce lecteur simple et très léger (quelques Ko !).
Toutes les vidéos peuvent être converties pour le web grâce à Riva FLV Encoder (gratuit) ou Adobe Media Encoder. DewTube est sous licence Creative Commons, son utilisation est libre et gratuite même dans un cadre professionnel ou commercial. Pour une version personnalisée professionnelle n'hésitez pas à nous contacter. Démos de lecture vidéo Utilisation Son utilisation est très simple car il suffit d'utiliser le code HTML fourni pour une animation flash, en spécifiant dans l'adresse le nom du fichier FLV ou F4V à lire. Vous pouvez placer un aperçu image au format JPG dans le même répertoire que la vidéo et portant le même nom de fichier (exemple: video.flv => video.jpg).
Générateur de code HTML Le plus simple est d'utiliser ce générateur de code XHTML, qui va produire deux versions à copier-coller selon vos besoins. Swfobject - SWFObject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file. 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.
CSS-Tricks. Internet Explorer 10 Test Drive. WebGL Bookcase. Unfortunately, either your web browser or your graphics card doesn't support WebGL. We recommend you try it again with Google Chrome. Lights. CSS3 buttons by Chad Mazzola.
30 Free CSS3 Buttons For Your Blog (new download) Buttons are one of the most important elements of your site. Plain and simple… they direct your readers from point A to B in a single click. CSS3 Gradient Buttons. Bio Cube 3D. Webmaster, Webdesigner, Référencement Freelance Formateur/Consultant Veille TIC, Webdesign, Mac. Utilisez les fleches de votre clavier pour manipuler le cube :)Cette page est un test de Webdesign 3D en CSS3 réalisée avec : rgba, -webkit-border-radius, -webkit-perspective, -webkit-transition, -webkit-transform de Webkit...Les effets de graphiques CSS3 suivants sont également utilisès : -webkit-box-shadow, -webkit-text-fill, -webkit-text-stroke, ...Elle ne fonctionne uniquement que sous Blackberry, Nokia S60, iPhone, iPad, Safari, Chrome, et plus généralement tous les navigateurs qui utilisent Webkit comme agent utilisateur. Autres Compétences - Niveau intermédiaire en prise de son, prise de vue photo/video, Photoshop, Dreamweaver, Flash, ActionScript, JS, PHP, MySQL, Scripting Shell, réseau, administration de serveur Web Linux et Mac OS X.
Install multiple versions of IE on your PC. Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8. CSS3 . Info - All you ever needed to know about CSS3. The CSS3 Test. Cascade CSS et priorité des sélecteurs. CSS signifie « feuilles de styles en cascade »... Mais au fait, la cascade, qu’est-ce que c’est, à quoi ça sert, comment cela fonctionne ?
Plongez avec nous dans la cascade sans risque de noyade ! Les styles CSS appliqués finalement à une page Web ont de multiples origines simultanées : styles utilisateurs et styles par défaut de l'agent utilisateur s'ajoutent aux différentes feuilles de styles éventuellement prévues par l'auteur, pour structurer ses CSS en modules, offrir des styles alternatifs ou styler ses documents pour différents medias. La question-clé est donc le mode de combinaison de ce large éventail de styles possibles. C'est ici qu'interviennent le fonctionnement en cascade propre aux CSS et le calcul de la priorité respective des différents sélecteurs susceptibles de viser le même élément XHTML. Styles auteur, utilisateur et agent utilisateur : 3 raisons de lâcher prise sur votre design. Le rendu final d’une page Web n’est pas le produit figé des règles de présentation fixée par son auteur : il résulte de la combinaison des 3 sources de styles de l’auteur, de l’agent utilisateur et de l’utilisateur lui-même.
Les règles de cascade CSS gèrent le rendu final d'une page Web en fonction de trois sources simultanées : les styles CSS auteur accompagnant le document, mais aussi les styles par défaut de l'agent utilisateur et les éventuels styles propres à chaque utilisateur. Dans cette combinaison, les styles par défaut du navigateur ont le poids le plus faible, tandis que ceux de l'utilisateur ont le poids le plus fort. Dans tous les cas, l'auteur devra tenir compte de ces styles par défaut du navigateur, et plus fortement encore des éventuels styles utilisateurs.
Caractères spéciaux : entités html, code ascii et raccourcis clavier. - LOREM IPSUM Generator. Comment indiquer la langue d’un contenu en HTML? Il est important sur une page web d’indiquer clairement la langue du contenu. Les informations données sur la ou les langues du contenu seront utiles pour les outils d’indexation (moteurs de recherche), les outils de traduction automatique ou encore ceux de synthèse vocale.
Par exemple, un lecteur d’écran a besoin de connaitre la langue du contenu pour pouvoir le lire correctement, quand cette langue diffère de ses paramètres par défaut. Indiquer la langue de traitement On commencera par veiller à ce que chaque page HTML ait un attribut lang sur l’élément racine, qui indique la langue principale de la page. Design et programmation web2 - Bienvenue chez Dji. La spécification HTML 4.01. Tutoriel Vidéo PHP : Créer un tchat en Ajax/PHP. Style nav. par defaut. Internet Explorer UA Style Sheets. Default style sheet for HTML 4. This appendix is informative, not normative. Comment bien déclarer l'encodage des caractères d'une page ? Introduction aux jeux de caractères. Codage des caractères. Règles pour l'accessibilité des contenus Web (WCAG) 2.0.
What is Unicode? in French. Atelier - Qu'est-ce que le balisage sémantique ? Le W3C relance le HTML, Apple participe au projet. Web Hypertext Application Technology Working Group. WebPagetest - Website Performance and Optimization Test. What you see is what you get. Type MIME. CommentCaMarche. Le Site du Zéro, site communautaire de tutoriels gratuits pour débutants : programmation, création de sites Web, Linux... Salemioche.net. Les intégristes. Le Web c’est pas en 72 dpi, coco! Polices, quelle taille choisir ? Alsacréations : Tutoriels XHTML, CSS, actualités et articles sur les standards web. Tout sur le CSS avec son tutorial, feuilles de style.
Les meilleurs cours et tutoriels (X)HTML. Tous Les Drivers. Vulgarisation-informatique. Caractères spéciaux HTML. When can I use... Support tables for HTML5, CSS3, etc. CSS2.1 User Agent Style Sheet Defaults.
CSS Design - CSS Gallery Page 2. CSS : on reprend tout à zéro ! CSS_de_zero. Cours CSS : liste des propriétés. Centre de Formation Adobe et Apple - Wiki. The W3C CSS Validation Service. CSS - Feuille de style - Cours CSS - Cascading Style Sheets. Générateur de feuilles CSS. Css.pdf (Objet application/pdf) Utiliser ou @import pour lier une feuille de styles ?