Forum | Derniers tutoriels de développement web
 

CSS Exemples


Syntaxe CSS

Le sélecteur d'élément
Le sélecteur de id
Le sélecteur de classe (pour tous les éléments)
Le sélecteur de classe (pour seulement <p> éléments)
Regroupement des sélecteurs

Syntaxe CSS expliqué


CSS Fond

Définissez la couleur d'une page d'arrière - plan
Définissez la couleur des différents éléments d'arrière - plan
Définir une image comme arrière - plan d'une page
Comment répéter une image de fond seulement horizontalement
Comment positionner une image d'arrière - plan
Une image de fond fixe (cette image ne défile pas avec le reste de la page)
Toutes les propriétés d'arrière - plan dans une déclaration
Avancée exemple d'arrière - plan

Propriétés d'arrière - plan expliqué


CSS Borders

Régler la largeur des quatre frontières
Régler la largeur de la bordure supérieure
Régler la largeur de la bordure inférieure
Régler la largeur de la bordure gauche
Régler la largeur de la bordure droite
Définir le style des quatre frontières
Définir le style de la bordure supérieure
Définir le style de la bordure inférieure
Définir le style de la bordure gauche
Définir le style de la bordure droite
Définissez la couleur des quatre frontières
Définissez la couleur de la bordure supérieure
Réglez la couleur de la bordure inférieure
Définissez la couleur de la bordure gauche
Définissez la couleur de la bordure droite
Toutes les propriétés de la frontière dans une déclaration
Définir des frontières différentes de chaque côté
Toutes les propriétés de bordure supérieure dans une déclaration
Toutes les propriétés de bordure de fond dans une déclaration
Toutes les propriétés de bordure gauche dans une déclaration
Toutes les propriétés de bordure droite dans une déclaration

Propriétés frontalières expliquées


Marges CSS

Spécifiez des marges différentes pour chaque côté d'un élément
Laissez la marge gauche est héritée de l'élément parent
La propriété marge de sténographie
Définir la marge d'auto pour centrer l'élément dans son récipient

Propriétés de marge expliqué


CSS Rembourrage

Réglez le rembourrage gauche d'un élément
Réglez le droit de rembourrage d'un élément
Réglez le rembourrage supérieur d'un élément
Réglez le rembourrage de fond d'un élément
Toutes les propriétés de remplissage dans une déclaration

Propriétés Padding expliquées


CSS texte

Définir la couleur du texte des différents éléments
Aligner le texte
Supprimez la ligne sous Liens
Décorez le texte
Contrôler les lettres dans un texte
retrait du texte
Spécifiez l'espace entre les caractères
Spécifiez l'espace entre les lignes
Définissez le sens du texte d'un élément
Augmenter l'espace blanc entre les mots
Désactiver l' habillage du texte à l' intérieur d' un élément
L' alignement vertical d'une image à l' intérieur du texte

Les propriétés de texte expliquées


CSS Fonts

Définir la police d'un texte
Définissez la taille de la police
Définissez la taille de la police dans px
Définissez la taille de la police dans em
Définissez la taille de la police en pour cent et em
Définir le style de la police
Définir la variante de la police
Réglez l'audace de la police
Toutes les propriétés de la police dans une déclaration

Propriétés de la police a expliqué


CSS Liens

Ajouter des couleurs différentes pour visiter / liens unvisited
L' utilisation de text-decoration sur les liens
Spécifiez une couleur de fond pour les liens
Ajouter d' autres styles à des hyperliens
Avancé - Créer des boîtes de liaison
Avancé - Créer des boîtes de liaison avec les frontières

Lien propriétés expliquées


Listes de CSS

Tous les différents marqueurs d'élément de liste dans les listes
Définir une image comme marqueur list-item
Positionnez le marqueur list-item
Toutes les propriétés de la liste dans une déclaration
Listes de style avec des couleurs
Pleine largeur liste bordée

Liste des propriétés expliquées


Tableaux CSS

Spécifiez une bordure noire pour table, éléments th et td
Utilisation de border-collapse
Frontière unique autour de la table
Spécifiez la largeur et la hauteur d'une table
Réglez l'alignement horizontal du contenu (text-align)
Réglez l'alignement vertical du contenu (vertical-align)
Spécifiez le rembourrage pour e et td éléments
diviseurs horizontaux
Table Hoverable
tables à rayures
Spécifiez la couleur des bordures de tableau
Réglez la position de la légende du tableau
Tableau Responsive
Créer une table de fantaisie

Propriétés du tableau expliqué


CSS Model Box

Spécifiez un élément avec une largeur totale de 250px

Modèle Box expliqué


CSS Outline

Tracez une ligne autour d' un élément (contour)
Définir le style d'un contour
Définissez la couleur d'un contour
Définissez la largeur d'un contour

Propriétés Outline expliquées


CSS Dimension

Régler la hauteur et la largeur d'un élément
Régler la largeur maximale d'un élément
Régler la hauteur et la largeur des différents éléments
Réglez la hauteur et la largeur d'une image en utilisant pour cent
Régler la largeur minimum et maximum la largeur d'un élément
Set min-height et max-hauteur d'un élément

Propriétés Dimension expliqué


CSS Display

Comment cacher un élément (visibility:hidden)
Comment ne pas afficher un élément (display:none)
Comment afficher un élément de niveau bloc comme un élément inline
Comment afficher un élément en ligne comme un élément de niveau bloc
Comment utiliser CSS avec JavaScript pour afficher le contenu caché

Afficher les propriétés expliquées


CSS Positionnement

Positionner un élément par rapport à la fenêtre du navigateur
Positionner un élément par rapport à sa position normale ,
Positionner un élément avec une valeur absolue
Eléments de chevauchement
Définir la forme d'un élément
Comment créer une barre de défilement lorsque le contenu d'un élément est trop gros pour tenir
Comment configurer le navigateur pour gérer automatiquement le débordement
Réglez le bord supérieur d'une image en utilisant une valeur de pixel
Fixer le bord inférieur d'une image en utilisant une valeur de pixel
Fixer le bord gauche d'une image en utilisant une valeur de pixel
Réglez le bord droit d'une image en utilisant une valeur de pixel
Changer le curseur Position d' image texte (coin supérieur gauche)
Texte de l' image de la position (en haut à droite)
Texte de l' image Position (coin en bas à gauche)
Texte de l' image de la position (en bas à droite)
Texte de l' image de la position (centrée)

Propriétés de positionnement expliquées


CSS Floating

Une utilisation simple de la propriété float
Une image avec la frontière et des marges qui flotte vers la droite dans un paragraphe
Une image avec une légende qui flotte à la droite
Laissez la première lettre d'un paragraphe float à la gauche
Créer une galerie d'image avec la propriété float
Mise hors tension de flotteur ( en utilisant la propriété claire)
Création d' un menu horizontal
Création d' une page d' accueil sans tables

Propriétés Float expliqué


CSS Alignement Elements

Centre alignant avec une marge
Gauche / Droite alignement avec la position
Gauche / Droite alignement avec la position - solution Crossbrowser
Gauche / Droite alignement avec flotteur
Gauche / Droite alignement avec flotteur - solution Crossbrowser

Aligner les propriétés expliquées


CSS Combinators

sélecteur Descendant
Sélecteur d'enfant
Sélecteur de Sibling Adjacent
Général Sibling sélecteur

Sélecteurs de Combinator expliqué


CSS Generated Content

Insérez l'URL entre parenthèses après chaque lien avec la propriété contenu
Numérotation des sections et sous-sections avec "Section 1", "1.1", "1.2" , etc.
Spécifiez les guillemets avec la propriété citations


CSS pseudo-classes

Ajouter des couleurs différentes à un lien hypertexte
Ajouter d' autres styles à des hyperliens
Utilisation de: focus
:first-child - correspond au premier élément de p
:first-child - correspondent au premier élément i dans tous les éléments p
:first-child - Match tous les éléments i dans tous les éléments p premier enfant
Utilisez de :lang

Les pseudo-classes expliquées


CSS pseudo-éléments

Faire la première lettre spéciale dans un texte
Faire la première ligne spéciale dans un texte
Faire la première lettre et première spéciale de ligne
Utilisation: avant d'insérer du contenu avant un élément
Utilisation: après pour insérer un contenu après un élément

Les pseudo-éléments expliqués


Bars CSS Navigation

Barre de navigation verticale entièrement style
Entièrement style barre de navigation horizontale

Les barres de navigation expliquées


CSS Dropdowns

texte dropdown
Menu déroulant
Menu déroulant aligné à droite
Image dropdown
Barre de navigation Dropdown

dropdowns expliqué


CSS infobulles

infobulle droit
infobulle gauche
Top infobulle
infobulle Bottom
Tooltip avec la flèche
infobulle Animated

infobulles expliqué


Galerie CSS Image

Galerie d'images
Galerie d'images Responsive

Galerie d'images expliqué


CSS image Opacité

Création d' images transparentes - mouseover effet
Création d' une boîte transparente avec le texte sur une image de fond

L' image d' opacité expliqué


Sprites CSS Image

Un sprite d'image
Une image sprite - une liste de navigation
Un sprite d'image avec effet de survol

Sprites d'image expliqués


CSS Attribut sélecteurs

Sélectionne tous les <a> éléments avec un attribut cible
Sélectionne tous les <a> éléments avec un target = "_ blank"
Sélectionne tous les éléments avec un attribut title qui contient une liste séparée par des espaces de mots, dont l'un est "fleur"
Sélectionne tous les éléments avec une valeur d'attribut de classe qui commence par "top" (doit être le mot entier)
Sélectionne tous les éléments avec une valeur d'attribut de classe qui commence par "top" (ne doit pas être le mot entier)
Sélectionne tous les éléments avec une valeur d'attribut de classe qui se termine par "test"
Sélectionne tous les éléments avec une valeur d'attribut de classe qui contient "te"

Les sélecteurs d' attribut expliqué


CSS Forms

Champ de saisie pleine largeur
Champ d'entrée rembourrée
Champ de saisie Bordé
Bottom champ de saisie bordered
Champs d'entrée de couleur
Champs de saisie ciblés
Champs de saisie focalisés 2
Entrée avec l' icône / image
Animated entrée de recherche
Textareas coiffants
Styling menus de sélection
Styling touches d'entrée

Formulaires expliqués


Compteurs CSS

Créer un compteur
Compteurs imbriqués 1
Compteurs imbriqués 2

Compteurs expliqués


CSS3 coins arrondis

Ajouter des coins arrondis aux éléments
Autour de chaque coin séparément
Créer coins elliptiques

Coins arrondis CSS3 expliqués


CSS3 frontaliers Images

Créer une bordure d'image autour d' un élément, en utilisant le mot - clé rond
Créer une bordure d'image autour d' un élément, en utilisant le mot - clé extensible
Image frontière - valeurs de tranches différentes

Images frontalières CSS3 expliqué


CSS3 Fond

Ajouter plusieurs images de fond pour un élément
Indiquez la taille d'une image d'arrière - plan
Échelle d' une image d'arrière - plan en utilisant «contenir» et «couverture»
Définir les tailles de plusieurs images d'arrière - plan
Full-size image de fond (remplir complètement la zone de contenu)
Utilisez background-origin pour spécifier où l'image de fond est positionné
Utilisez background-clip pour spécifier la zone de peinture de l'arrière - plan

Milieux CSS3 expliqué


CSS3 Dégradés

Dégradé linéaire - haut en bas
Dégradé linéaire - de gauche à droite
Dégradé linéaire - diagonal
Dégradé linéaire - avec un angle spécifié
Linear Gradient - avec de multiples arrêts de couleurs
Linear Gradient - couleur d'un arc en ciel + texte
Dégradé linéaire - avec transparence
Dégradé linéaire - un gradient linéaire de répétition
Dégradé radial - arrêts de couleur espacés
Gradient Radial - arrêts de couleurs différemment espacés
Dégradé radial - ensemble forme
Dégradé radial - différents mots - clés de taille
Dégradé radial - un dégradé radial répétitif

Gradients CSS3 expliqué


CSS3 Effets d' ombre

Simple effet d'ombre
Ajouter une couleur à l'ombre
Ajouter un effet de flou à l'ombre
Le texte blanc avec une ombre noire
Un néon rouge lueur ombre
Un néon rouge et bleu lueur ombre
Le texte blanc avec le noir, le bleu et l' ombre darkblue
Ajouter un box-shadow simple à un élément
Ajoutez de la couleur à la boîte-ombre
Ajoutez de la couleur et l' effet de flou à la boîte-ombre
Créer des cartes de type papier (texte)
Créer des cartes de type papier (images polaroid)

CSS3 effets d'ombre expliqués


CSS3 Text

Précisez comment caché, le contenu débordé devrait être signalée à l'utilisateur
Comment afficher le contenu débordé lorsque planer sur l'élément
Laisser les mots longs pour pouvoir être brisé et enveloppent sur la ligne suivante
Spécifier les règles de la ligne de rupture

Texte CSS3 expliqué


CSS3 Fonts

Utilisez vos polices "propres" en @font-face règle
Utilisez vos polices "propres" en @font-face règle (gras)

Polices CSS3 expliqué


CSS3 2D Transforms

translate() - déplacer un élément de sa position actuelle
rotate() - tourner un élément dans le sens horaire
rotate() - tourner un élément anti-horaire
scale() - augmenter un élément
scale() - diminuer un élément
skewX() - biaise un élément le long de l'axe X.
skewY() - biaise un élément le long de l'axe Y.
skew() - biaise le long d' un élément X et l' axe Y
matrix() - faire tourner, l' échelle, déplacer, et l' inclinaison d' un élément

CSS3 2D transforme expliqué


CSS3 3D Transforms

rotateX() - tourner un élément autour de son axe X à un degré donné
rotateY() - tourner un élément autour de son axe Y à un degré donné
rotateZ() - tourner un élément autour de son axe Z à un degré donné

CSS3 3D transforme expliqué


CSS3 Transitions

Transition - changement largeur d'un élément
Transition - changement largeur et la hauteur d'un élément
Spécifiez les courbes de vitesse différentes pour une transition
Spécifiez un délai pour un effet de transition
Ajouter une transformation à un effet de transition
Indiquez toutes les propriétés de transition dans une propriété raccourcie

Transitions CSS3 expliqué


CSS3 Animations

Liez une animation à un élément
Animation - changement background-color d'un élément
Animation - changement background-color et la position d'un élément
Retarder une animation
Exécutez l' animation 3 fois avant d'arrêter
Exécutez l' animation à jamais
Animation Exécuter dans le sens inverse
Animation Exécuter dans des cycles alternés
Courbes de vitesse pour les animations
Animations propriété raccourcie

Animations CSS3 expliqué


CSS3 Images

Image arrondi
Image Cerclé
Thumbnail image
Thumbnail image comme lien
Image Responsive
Texte de l' image (en haut à gauche)
Texte de l' image (en haut à droite)
Texte de l' image (au coin en bas à gauche)
Texte de l' image (en bas à droite)
Texte de l' image (centrée)
images Polaroid
Filtre d'image Grayscale
Advanced - image Modal avec CSS et JavaScript

CSS3 Images expliqué


CSS3 Boutons

Boutons CSS de base
Couleurs des boutons
Tailles des boutons
boutons arrondis
Colored bouton frontières
boutons Hoverable
Boutons d'ombre
boutons handicapés
Largeur de bouton
Groupes de boutons
Groupe de boutons Bordé
Bouton d' animation (Hover Effect)
Bouton d' animation (Ripple Effect)
Bouton d' animation (Enfoncé Effect)

CSS3 boutons expliqués


CSS3 Pagination

simple pagination
Pagination active et hoverable
Pagination active et hoverable Arrondi
Effet de transition Hoverable
bordé pagination
Pagination bordé Arrondi
Pagination avec un espace entre les liens
Taille du Pagination
Pagination avec un espace entre les liens
Centré pagination
Chapelure

CSS3 Pagination expliqué


CSS3 plusieurs colonnes

Créer plusieurs colonnes
Indiquez l'écart entre les colonnes
Spécifiez le style de la règle entre les colonnes
Indiquez la largeur de la règle entre les colonnes
Précisez la couleur de la règle entre les colonnes
Spécifiez la largeur, le style et la couleur de la règle entre les colonnes
Spécifiez le nombre de colonnes d' un élément devrait étendre sur
Spécifiez une proposition, la largeur optimale pour les colonnes

Plusieurs colonnes CSS3 expliqué


Interface utilisateur CSS3

Laissez un utilisateur de redimensionner la largeur d'un élément
Laissez un utilisateur de redimensionner la hauteur d'un élément
Laissez un utilisateur de redimensionner la largeur et la hauteur d'un élément
Ajouter espace entre les grandes lignes et la frontière d'un élément

Interface utilisateur CSS3 expliqué


CSS3 Box Sizing

Largeur des éléments sans box-sizing
Largeur des éléments avec box-sizing
Les éléments de formulaire + box-sizing

Boîte de CSS3 dimensionnement expliqué


CSS3 Flexbox

Flexbox avec trois éléments flexibles
Flexbox avec trois éléments flex - direction rtl
flex-direction - rangée arrière
flex-direction - colonne
flex-direction - colonne inverse
justify-contenu - flex-end
justify-contenu - Centre
justify-contenu - l' espace entre
justify-contenu - espace autour
alignez-éléments - étirement
alignez-éléments - flex-start
alignez-éléments - flex-end
alignez-éléments - Centre
alignez-éléments - de base
flex-wrap - nowrap
flex-wrap - wrap
flex-wrap - enveloppez-reverse
alignez-contenu - Centre
Commandez les éléments flexibles
Margin-right: auto;
Marge: auto; = Centrage parfait
alignez-auto sur les éléments flexibles
Spécifiez la longueur de l'élément flexible, par rapport au reste des éléments flexibles
Créer un site réactif avec FlexBox

CSS3 FlexBox expliqué


CSS3 médias Requêtes

Changer la couleur d' arrière plan à lightgreen si la fenêtre est 480px de large ou plus
Afficher un menu qui va flotter à la gauche de la page si la fenêtre est 480px de large ou plus

CSS3 questions des médias ont expliqué


CSS3 Requêtes médias - Autres exemples

La page HTML
Largeur de 520 à 699px - Appliquer une icône e - mail à chaque lien
Largeur de 700 à 1000px - Préface des liens avec un texte
Largeur ci - dessus 1001PX - Appliquer adresse e - mail aux liens
Largeur ci - dessus 1151px - Ajouter icône que nous utilisions auparavant
Utilisez la liste des liens de messagerie sur une barre latérale dans une page web

Médias CSS3 interroge exemples expliqués