background preloader

Les propriétés CSS :nth-child et :first-child

Les propriétés CSS :nth-child et :first-child
Afin de styliser en CSS une liste d’éléments, que ce soit pour la navigation de votre site web ou pour une liste dans vos contenus, vous pouvez utiliser un « ID » différent pour chacun de vos items. Cependant, cela aura comme inconvénient de vous créer plusieurs lignes de codes qui auraient pu être évitées à l’aide de différentes propriétés telles que :nth-child, :nth-of-type, :first-child et :last-child. Ces propriétés sont également très utiles lorsque vous avez une liste avec énormément d’éléments. Voici un article illustrant à merveille l’utilisation de chacune de ces propriétés CSS dans différents contextes afin d’avoir un contrôle absolu sur vos listes HTML. L’article suivant a été écrit par Chris Coyier du site web CSS-Tricks.com Sélectionner seulement le 5e élément Si vous devez sélectionner seulement le 1er élément de la liste, vous pouvez utiliser ceci li:first-child ou tout simplement li:nth-child(1). Tout sélectionner sauf les cinq premiers Sélectionner seulement les cinq premiers

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...) 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 Opera 10.5 l'a implémentée directement sans préfixe, puis suite à sa finalisation, l'ont fait également Safari 5.0, Chrome 5.0, Firefox 4.0 et Internet Explorer 9.

Ombres avancées avec CSS3 et box-shadow CSS3 c’est pour l’aspect vendeur du nom, car au final on va aussi et surtout bénéficier du service de pseudo éléments (:after et :before) qui sont prévus depuis CSS2.1. Les visuels que vous voyez sur la page de démonstration ne sont composés qu’avec des propriétés CSS sur une seule et unique <div> (pour chaque bloc). Chez moi le meilleur rendu est sous Firefox, notamment pour la dernière ombre qui est un peu osée (au passage il semblerait que la propriété opacity ne fonctionne pas sur les pseudo-éléments). Dans cette démonstration nous allons utiliser des propriétés avancées de CSS2.1 (:before et :after) qui sont des pseudo-éléments. Des pseudo-éléments permettent de construire un élément dans la structure de votre document (DOM) sans vraiment en construire un… ok, ça commence bien pour l’explication. Pseudo-éléments :after et :before Ainsi tous les liens porteurs de l’attribut hreflang se verront agrémentés d’un « (en) », dans le cas d’un lien anglais par exemple :Mon lien (en) Bogues

[PHP] Afficher les articles d’un flux RSS « Tony Archambeau Les flux RSS sont utiles pour suivre l'actualité d'un site web. Sachant qu'ils contiennent les informations liés aux articles d'un site, il peut se révéler pratique d'extraire le contenu d'un flux RSS pour en afficher une liste des articles avec un lien vers ceux-ci. L'objectif de cet article consiste à créer un simple code PHP qui sert d'agrégateur RSS. ElePHPant Prérequis Il faut avoir quelques notions avec le langage de programmation PHP et avoir un hébergement qui prend en compte PHP 5. Code PHP Le code PHP, qui ne fait que 8 lignes, est visible ci-dessous. <? Démonstration Dans un premier temps ce code extrait les informations du flux RSS et convertit le document XML en un objet. A l'intérieur de la boucle foreach, il y a il ne reste plus qu'à afficher les informations souhaités. Personnaliser Il est possible d'utiliser plus d'informations si celles-ci sont disponibles dans le flux RSS. Amélioration supplémentaire Il est possible d'améliorer le code présenté sur cet article.

CSS Overflow Module Level 3 Abstract CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. This module contains the features of CSS relating to new mechanisms of overflow handling in visual media (e.g., screen or paper). In interactive media, it describes features that allow the overflow from a fixed size container to be handled by pagination (displaying one page at a time). Status of this document This is a public copy of the editors' draft. The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. This document was produced by the CSS Working Group (part of the Style Activity). This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. The following features are at risk: … Table of contents 1. In CSS Level 1 [CSS1], placing more content than would fit inside an element with a specified size was generally an authoring error. 2. overflow 2.1. The

CSS Grid Layout Abstract This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a flexible or fixed predefined layout grid. CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. Status of this document This is a public copy of the editors’ draft. The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. This document was produced by the CSS Working Group (part of the Style Activity). This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. Table of Contents 1 Introduction and Overview Grid layout contains features targeted at web application authors. 1.1 Background and Motivation The capabilities of grid layout address these problems. 1.2 Adapting Layouts to Available Space In grid layout

Comment migrer son site WordPress avec le script DBSR | Grégoire Noyelle Dans ce dernier tutoriel sur le sujet nous verrons comment migrer un site d’un emplacement A à un emplacement B avec le script DBSR. Pour les deux les versions peuvent être en ligne ou en local. La seule chose à respecter est de copier les bonnes URL. Mise au point importante Attention, merci de vous référer à cet autre article sur les bases de la migration WordPress. Lancer le script pour migrer WordPress Après avoir effectué les transferts du dossier WordPress et de la base de données (comme décrits dans l’article sur bases de la migration WordPress, nous allons lancer le script. Placer le fichier script D’abord téléchargez le script DBSR et installez le à la racine de votre site après avoir extrait le contenu de l’archive .zip.Attention à bien supprimer le dossier du script après la migration. Vous lancerez ensuite le script en utilisant l’URL: L’URL nom-de-mon-site devra être remplacée. Vérifier les réglages de la base de données WordPress

Test géographique des états unis | Jeux d'éducation Test géographique Ce jeu est des quiz pour les connaisseurs des Etats-unis! Il existe un mode "étude" et un mode "quiz". Dans le mode étude, on te montre la carte de l'Amérique, et tu vois les noms des différents états. Dans le mode "quiz", l'ordinateur te donnera des noms d'états, et c'est à toi de les placer correctement sur la carte. Notez le jeu : Test géographique Les autres jeux de la catégorie Jeux d'éducation : Apprendre en jouant, c'est facile et c'est ludique! Juste ou faux Ce petit jeu en ligne va tester votre culture générale et votre capacité de réfléchir et d'observer dans un petit quizz. Jeu de math Pour tous ceux qui veulent s'entrainer dans les math et voir si ils savent multiplier vite et juste, ce jeu en ligne est parfait! De 1 à 10 Savez-vous compter de 1 à 10? La somme des chiffres Le but de ce jeu de chiffres est d'éliminer tous les chiffres de la zone de jeu. Vitesse de frappe Est ce que vous savez bien taper au clavier? Jouez au piano Jeu de chiffre Jeu de géographie

Change All WordPress Site URLs in the MySQL Database via phpMyAdmin – Stanhub Moving a WordPress website to a new domain, host or just a different directory scares many people. There are a lot of ways you can do this. Some people prefer to process the migration manually, others prefer to use a plugin as there are quite a few available. Whether you are using a plugin or not, it often happens that after the migration process you are still encountering URLs through your website, pointing to the old WordPress location. You can easily modify all WP site URLs in the MySQL database tables through phpMyAdmin. 1) Log into your phpMyAdmin profile 2) Select the database you would like to edit 3) Run the following SQL queries: Note: Don’t forget to change ‘ and ‘ in the snippet above. Please bear in mind this is not a complete guide on how to move a WordPress website to a new domain/host. If you have any questions or concerns, please do not hesitate to let me know.

Tuto : animation sans Flash avec HTML 5 et CSS 3 | Web y es-tu ? – Le Blog : Conseils et outils pratiques sur le monde impitoyable du web. Ce billet est une traduction réalisée par mes soins de Flashless animation : un très bon article de Rachel Nabors sur 24ways.org (merci Julien). Abordable et très instructif dès les premiers paragraphes, cet article est juste génial pour découvrir l’animation sans Flash et sans JavaScript. MAJ : Si les animations sont figées chez vous, passez la souris dessus et cliquez sur le bouton « rerun » pour la rejouer une fois ou sur « edit on Codepen » pour la voir fonctionner en boucle. Attention : Utilisateurs d’Internet Explorer 9 et précédent, votre charmant navigateur ne prenant pas en charge la propriété animation de CSS3, vous ne pourrez pas apprécier nos exemples animés (et quelque part, c’est bien fait pour vous, depuis le temps qu’on vous dit de changer de crèmerie…) ——————– Quand je suis arrivée dans le monde du webdesign il y a quatre ans, la première chose que je voulais faire était d’animer un dessin dans le navigateur. Les choses sont différentes maintenant. Le cycle de marche

CSS Débutant : cours et tutoriels sur les feuilles de style CSS 1,2 et 3 Web Font Specimen

Related: