CSS Practice: Pseudo-Namespaces in Complex Projects · Jens O CSS Practice: Pseudo-Namespaces in Complex Projects Jens O. Meiert, March 21, 2007 (↻ August 16, 2013). This entry has been written by Jens the Web Developer. Working in complex projects or in projects that don’t provide a good overview of forthcoming page types and elements may require a defensive strategy for writing CSS. This namespace concept is only roughly similar to that in XML. Examples for CSS Pseudo-Namespaces Special icons for certain links mean an artificial example yet a good start: Assume you want to equip certain links (for example those for file types or for actions) with different icons. This is fine (though you could cultivate that with an additional file class, for example). You can of course address this issue with context dependent formatting (a.doc vs. div.doc), which is usually an advisable thing. A “pseudo-namespace” might help, for example: The nf- prefix is of course arbitrary, in this case meaning “namespace [for] format”. .nf-doc {} .nf-pdf {} .nf-ppt {} Read More
Box-shadow, one of CSS3′s best new features Home / CSS3 Previews / Box-shadow, one of CSS3’s best new features The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset. Browser support is growing of late with Mozilla (Firefox), Webkit (Safari/Chrome/Konqueror), Opera and the IE9 Platform Preview all offering a decent implementation of the spec, although Mozilla and Webkit still require their respective -moz- and -webkit- prefixes (note Mozilla Firefox 4.0+ no longer requires the -moz- prefix). Here’s a basic example: Firefox, Safari/Chrome, Opera and IE9 users should see a grey fading shadow under this box. In theory, the code for this is straightforward: But for the moment, as with many other ‘experimental’ CSS3 properties, you’ll need to use the following prefixes to support Mozilla and Webkit: How it Works The Syntax: box-shadow: none | [ , ]* = inset? Examples: Creating a basic drop shadow Layering multiple shadows Example:
Introduction au CSS3 - Partie 5: Les multiples colonnes Le CSS3 présente un nouveau module connu, à juste titre, en tant que mise en page en multi-colonnes. Il permet de spécifier en combien de colonnes le texte doit être divisé et comment celles-ci doivent apparaître. Comme d'habitude, des exemples peuvent être trouvés ci-dessous : Voir la page d'exemples Actuellement, cette propriété est disponible sur Firefox et Safari 3. Il y a quatre propriétés qui se rapportent à la mise en page de multiples colonnes en CSS3, permettant de définir le nombre de colonnes, la largeur, l'espace entre chaque colonne et une bordure entre chacune d'elles : column-count column-width column-gap column-rule Actuellement, un préfixe propre au navigateur est également nécessaire pour définir comment Safari et Firefox doivent afficher la propriété. Dans certain cas, vous voudriez peut-être qu'un élément enjambe plus d'une colonne (un titre, une table ou une image par exemple). Tous mes remerciements à Bovino pour sa relecture.
Géolocalisation en HTML5 Tutoriel issu de ma présentation à la KiwiParty 2011. La géolocalisation fait partie des API gravitant autour de HTML5 (Geolocation API Specification) et des nouvelles fonctionnalités introduites par la mobilité. Ses usages sont nombreux et souvent corrélés avec des bases de données de renseignements géographiques : Plans/cartes, calculs de position et d'itinéraires Renseignements locaux en mobilité (points d'intérêts proches) Résultats contextualisés sur les moteurs de recherche Méta-informations jointes aux photos/vidéos De quelles informations a-t-on besoin pour se géolocaliser ? Dans l'espace, trois coordonnées sont nécessaires : Une quatrième coordonnée peut être prise en compte pour les puristes : le temps. L'API donne aussi accès lorsqu'il y a déplacement à la vitesse et à la direction (en ° par rapport au nord géographique). De quels moyens dispose un navigateur pour se géolocaliser ? Disponibilité de l'API ? L'API repose sur l'objet geolocation membre de navigator. Confidentialité <!
Nouvelles balises et nouveaux éléments en HTML5 Internet a beaucoup changé depuis la sortie du HTML 4.01 en 1999. Aujourd’hui, de nombreux éléments et balises provenant du HTML 4.01 sont obsolètes, très rarement utilisé ou pire, mal utilisé. Pour la plupart d’entre eux, ces éléments et balises ont été ré-écris en HTML5. Pour une utilisation d’internet plus simple et plus riche, le HTML5 a inclus de nouveaux éléments, de nouvelles balises pour améliorer la structure de vos documents, dessiner, ajouter des médias … I. Le HTML5 offre de nouvelles balises pour améliorer la hiérarchisation et la structuration de votre document. II. III. VI. V. La liste des balises suivantes appartenant au HTML 4.01 à été retiré du HTML5. How to Create a Beautiful Icon with CSS3 Today, I'd like to show you a neat trick. We'll create a document icon with pure CSS3. Even better, this effect will only require a single HTML element. The Game Plan Create a square boxRound the edgesUse pseudo elements to create a curled cornerCreate the illusion of text with a striped gradient Let's get started! Step 1: Create a Box We'll begin by adding our single HTML element: an anchor tag. Let's set the somewhat arbitrary dimensions for our icon. Note that, above, we're setting a positioning context in order to work with pseudo elements shortly. Next, let's add some shine using CSS box shadows. So Far, We Have: Step 2: Rounded Corners Next, we need to create a rounded corner effect. By passing four values, we can specify the top, right, bottom, and left radii, accordingly. Which Gives Us... Step 3: One Curled Corner To create the illusion of a curled corner, we'll use generated content, or pseudo elements. First, add content :before our icon. Tada! Step 4: Adding Lines We're Finished!
» Les nouvelles balises sémantiques de l’HTML5 Qu’est-ce que l’HTML5? Comme la plupart des programmes, OS et autre, l’HTML est amené à évoluer au cours du temps pour continuer à satisfaire les besoins des programmeurs. L’HTML5 est donc la prochaine version de l’HTML, mais pas seulement. En réalité, sous la dénomination d’HTML5 se cache les évolutions de l’HTML, la CSS3 (future version de la CSS) et de nombreuses API javascript en plus. Dans cet article, je vais vous présenter les nouvelles balises sémantiques que l’HTML5 va ajouter. Sémantique, késako? La sémantique, c’est ce qui permet à l’ordinateur de mieux comprendre à quoi correspond le contenu des balises. Les nouvelles balises sémantiques Comme vous pouvez le devinez, l’HTML5 rajoute de nombreuses balises sémantique car leur utilité se fait de plus en plus ressentir. <section> vous permettra de définir une section/partie de votre page. Maintenant que vous connaissez toutes ces balises, vous devriez être capable de faire un site qui respecte la sémantique.
Introduction à l’HTML5 Cet article est destiné aux débutants en HTML5, et à tous ceux qui souhaitent en savoir un peu plus sur cette nouvelle technologie qui agite le web et le monde mobile. Si vous vous intéressez aux technologies du web, vous avez probablement déjà entendu parler de l’HTML5 aux cours des dernières années. Cette introduction va vous donner un premier aperçu de ce qui se cache derrière le terme HTML5, vous présentera le contexte dans lequel évolue cette technologie, et nous verrons un bon nombre de nouvelles fonctionnalités qu’il apporte. Sommaire : L’HTML5 c’est quoi ? L’HTML5 n’est pas… Tout d’abord, je suis convaincu que parmi vous certains se disent : L’HTML5, c’est un nouveau langage ? Ou encore : Je débute, j’ai envie d’apprendre l’HTML5 directement, ça a l’air mieux que l’HTML d’avant. Voire : Pfff, moi qui venait d’apprendre l’HTML, je vais devoir tout réapprendre… Il est grand temps de clarifier les choses : L’HTML5 n’est pas un nouveau langage. L’HTML5 est… Le W3C et le WHATWG On y arrive !
Introduction au CSS3 Cette introduction est destinée à ceux qui souhaitent avoir un aperçu global de ce qu’apporte le CSS3. Vous y découvrirez un ensemble conséquent de nouveautés, comment utiliser les préfixes propriétaires afin d’en tirer profit dès maintenant et nous discuterons du caractère non-critique de son utilisation. Il s’agit de la suite logique de l’Introduction à l’HTML5, mais elle peut être lue indépendamment. Sommaire Le CSS3 c’est quoi ? Le CSS3 est le nom employé pour caractériser l’ensemble des nouveautés depuis le CSS2.1. Mais le CSS3 c’est également un ensemble de nouveaux sélecteurs, de nouvelles manières de spécifier les couleurs, une détection des caractéristiques de l’appareil de l’utilisateur, des calculs dans les feuilles de style, des SVG en arrière plan… bref, le CSS3 est un généreux enrichissement des feuilles de style qui, en plus d’être profitable à l’utilisateur, l’est au développeur également ! Exemple pratique : Les bordures arrondies Et vous vous dites : Avec pour CSS : Non. à
HTML5-CSS3.fr - Tutoriels, exemples et démos HTML5 et CSS3 Trouver son code couleur HTML ! Les couleurs avec du CSS sont les mêmes que celles avec un code HTML. Pour faire référence à d'autres couleurs, vous devrez utiliser le code hexadécimal. C'est bien sûr un peu moins parlant mais universel. Vous pouvez choisir votre couleur en cliquant ici : <-- Cliquer ici Il existe des couleurs nommées normalisées : Les 16 couleurs de fondamentales ont un nom parlant (en anglais) normalisé : elles sont reconnus par tous les navigateurs : Il est possible d'avoir l'ensemble des couleurs de l'arc en ciel :) avec une sa valeur hexadecimal : Couleur HTML et CSS En CSS, est bien pratique de mettre en forme un contenu et le définir une seule fois dans sa feuille de style. color: Gestion de la couleur du texte letter-spacing: Espace entre les lettres text-align: Alignement d'un texte text-decoration: Habiblement d'un texte A savoir : Dans ce chapitre, la notion d'héritage est appliquée. Couleur d'un texte ou une phrase en CSS Espace entre les lettres
Les préfixes vendeurs en CSS Afin de permettre le développement progressif et l'implémentation des modules CSS, les éditeurs de navigateurs (vendors) ont la possibilité d'introduire le support de propriétés spécifiques. Cette manière d'opérer est recommandée par le W3C depuis CSS 2.1 et valable pour les versions suivantes. Ces "propriétés propriétaires" doivent être préfixées d'un tiret et d'un code correspondant au moteur les exploitant : -o- pour Opera -moz- pour Gecko (Mozilla) -webkit- pour Webkit (Chrome, Safari, Android...) -ms- pour Microsoft (Internet Explorer) -khtml- pour KHTML (Konqueror) Le tout doit être suivi du nom de la propriété souhaitée ou anticipée. Ainsi, la fameuse propriété border-radius destinée à arrondir les angles des boîtes sans utiliser d'images ou de techniques alternatives s'est vue introduite par : -moz-border-radius sous Gecko (2.0 à 3.6) -webkit-border-radius sous WebKit Quelques inconvénients font surface : Recommandation d'usage courant
Un slider en CSS3 uniquement - Design et programmation web2 - Dji Ce slider est uniquement fait en CSS/HTML et sans javascript. Cela est possible grâce aux animations CSS et à la pseudo-class :target Démo simple Le code HTML Pour permettre le slide entre les images (ou les pages si on veut), on utilise bien la transition en CSS3 mais également la pseudo-class :target pour demander à notre ID de faire le transition <html><head> ... Les "a" sont à l'interieur de chaque "div" afin de permettre de donner un état au "a" quand il est la page courante Le code CSS Une variante avec un zoom en plus Le principe reste exactement le meme mais sur une autre div.