background preloader

Apprendre les mises en page CSS

Apprendre les mises en page CSS

http://fr.learnlayout.com/

Related:  HTML - CSS - PHPHTML et CSSTUTORIELSCSS3CSS/CSS3

PHP: La bonne manière Il existe énormément d’informations obsolètes sur la toile à propos de PHP, ce qui conduit les nouveaux utilisateurs de PHP à prendre de mauvaises habitudes, propageant de mauvaises pratiques et du code peu sûr. PHP: La bonne manière est une référence concise et facile à lire à propos des conventions d’écriture les plus connues sur le PHP, des liens sur les tutoriaux faisant autorité sur le web et des pratiques que les contributeurs de ce document considèrent comme meilleures à l’heure actuelle. Il n’existe pas une seule et unique façon d’utiliser PHP. Ce site web a pour but d’amener les nouveaux développeurs PHP sur des sujets qu’ils n’auraient pas pu découvrir avant qu’il ne soit trop tard, et vise à donner aux professionnels chevronnés des idées neuves sur ces sujets qu’ils ont pu traiter pendant des années sans s’être penchés dessus. Ce document n’est pas figé et sera amené à être mis à jour avec des informations utiles et des exemples au fur et à mesure qu’ils seront disponibles. <?

Le 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 :) Compatibilité Commençons par une excellente nouvelle : le modèle de rendu tabulaire en CSS est finalisé depuis suffisamment longtemps pour être compatible avec tous les navigateurs actuels et leurs générations précédentes. Il faut remonter aux antiques versions d’Internet Explorer 7 et précédentes pour trouver des navigateurs qui ne supportent pas ce schéma de positionnement. Le pouvoir des feuilles de style utilisateur - Web designer & intégrateur Alors que je parcourais nonchalamment ma timeline Facebook, le statut d’un de mes contacts m’a interpellé : Hmm, je sens que ça va vite me gaver cette nouveauté Facebook qui consiste à mettre des suggestions de pages (de la pub quoi) au milieu de ma timeline… En effet, la Suggestion de Page Facebook s’insère dans votre timeline mais prend malicieusement, peu ou prou, la même forme que les publications de vos amis. Et tout d’un coup, l’idée de masquer ces satanées publicités à l’aide d’une feuille de style utilisateur me traverse l’esprit !

Les transitions et animations CSS Introduction Depuis toujours, les concepteurs web ont tenté de styler et de dynamiser des pages HTML terriblement monotones. À la fin des années 90, un simple effet de survol ne peut pas être réalisé facilement : l’utilisation de JavaScript est inévitable, mais impose de connaître la programmation. L’arrivée des pseudo-classes dynamiques au sein de CSS (:hover, :focus, :active…) a alors facilité l’opération et permis de s’affranchir de scripts souvent lourds. Créer une grille CSS responsive Les grilles CSS, à quoi ça sert ? La plupart des sites Internet ont un gabarit « générique ». Par exemple, un blog va avoir un corps et une barre latérale. Une grille CSS va vous permettre de gérer ce gabarit très facilement. L’idée c’est de partager votre site en un nombre défini de colonnes.

Comprendre le poids des règles CSS Certain d’entre vous ont peut être encore quelques soucis à comprendre les spécificités des css, spécialement avec les « pas si nouveaux » sélecteur CSS3. Légende : X-0-0 : représente les sélecteurs de type ID, illustrés par les requins.0-Y-0 : représente les sélecteurs de type class, attribut, pseudo-class , illustrés par les poissons0-0-Z : représente les sélecteurs de type balises, pseudo-élément, illustrés par Plankton.* : le sélecteur universel n’a pas de valeur+,>,~ : sont des combinateurs ils offrent plus de spécificités sur les sélecteurs, mais n’augmentent pas la valeurs. 21 outils et générateurs CSS Les générateurs et outils CSS sont de plus en plus nombreux sur la toile, et facilitent la tâche des développeurs web en leur faisant gagner un gain de temps considérable, en particulier ceux qui génèrent du CSS3. Voici une liste non exhaustive de 21 ressources CSS à connaître et à tester dès maintenant ! 1. Bear CSS Bear CSS est un service qui permet de générer une feuille de style à partir d’un code HTML en prenant en compte les éléments et le balisage de la structure du document (id et classes CSS).

Termes et définitions CSS Voici une liste rapide des termes CSS communément employés, un aide-mémoire pratique, une révision utile, et pour ceux qui commencent à apprendre CSS une bonne façon de baliser le chemin Par Louis Lazaris Voici une liste rapide des termes CSS communément employés, et ce qu'ils à quoi ils correspondent dans le code. Rien de bien nouveau pour les développeurs expérimentés, mais une bonne révision à tout le moins. Table des matières : Commentaires - Ensemble de règles - Bloc de déclaration - Déclaration - Propriété - Valeur - Sélecteur - Sélecteur/Élément - Sélecteur/Classe - Sélecteur/ID - Sélecteur universel - Sélecteur/Attribut - Pseudo-classes - Pseudo-éléments - Combinateur - Règle-at - Instruction - Identifiant - Mot-clé Un commentaire n'a aucun effet sur l'affichage de la page, il sert à l'auteur du code et à ses lecteurs ou collaborateurs éventuels.

Méthode Daisy : les CSS feuille à feuille Bienvenue chez vous ! C’est le bazar, n’est-ce pas, dans votre code CSS ? Le CSS ? C’est une vraie galère dès qu’on doit y revenir, dès qu’on repasse derrière quelqu’un d’autre et même quand on doit replonger dans son propre code après longtemps... et ce n’est vraiment pas aisé de coder à plusieurs mains, en équipe.

Une vidéo d'arrière-plan sur toute la page en HTML et CSS Ce tutoriel a été initialement publié en anglais par Florent Verschelde sous l'intitulé Full page video background with HTML and CSS. Quelques adaptations ont été apportées par rapport au tutoriel original. Je voulais implémenter une vidéo d'arrière-plan occupant toute une page : avec l'élément HTML 5 <video>, utilisant tout le viewport et recouvrant le viewport (pas de bandes noires). Afin de recouvrir pleinement le viewport avec la vidéo, on pourrait utiliser JavaScript, mesurer le viewport, puis dimensionner et positionner en conséquence la vidéo.

Combinateurs et pseudo-classes CSS Nous poursuivons notre introduction aux basiques de CSS avec un article sur les combinateurs et les pseudo-classes. La maîtrise de cette syntaxe vous permettra d'être plus efficaces et d'améliorer la structure de votre code. Comme leur nom le suggère, les combinateurs aident à combiner différents sélecteurs pour former de nouveaux sélecteurs, plus spécifiques. Il existe quatre types de combinateurs ciblant les relations parent/enfants et frères existant entre les éléments.

Related:  WEB