localisation actuelle:Maison > Articles techniques > programmation quotidienne > connaissance CSS

  • ATOZ CSS Astuce rapide: texte d'espace réservé
    ATOZ CSS Astuce rapide: texte d'espace réservé
    Cet article fait partie de la série ATOZ CSS. Vous pouvez trouver d'autres entrées pour la série ici. Vous pouvez afficher le texte intégral et les captures d'écran de ses pseudo-éléments vidéo correspondants. Bienvenue dans notre série Atoz CSS! Dans cette série, j'explorerai diverses valeurs (et propriétés) de CSS qui commencent par différentes lettres dans l'alphabet. Nous savons que parfois les captures d'écran ne suffisent pas, donc dans cet article, nous avons ajouté un nouveau conseil sur l'espace réservé de style. P signifie texte d'espace réservé Pseudo-éléments: avant et: après sont parfaits pour construire des fonctionnalités de conception complexes sans gâcher les étiquettes avec des éléments non sémantiques. Autres pseudo-éléments tels que: première ligne et: fi
    tutoriel CSS . interface Web 838 2025-02-20 11:29:09
  • Angles inclinés dans le sass
    Angles inclinés dans le sass
    Cet article explore la création d'angles inclinés dans CSS à l'aide de SASS, offrant une solution sophistiquée qui évite les limites d'autres méthodes. Au lieu d'utiliser des images codées Base64, des pseudo-éléments asymétriques ou la bibliothèque des bords angulaires, cette approche
    tutoriel CSS . interface Web 718 2025-02-20 10:59:10
  • Comment centrer verticalement le texte et les icônes dans CSS
    Comment centrer verticalement le texte et les icônes dans CSS
    Cet article introduira une variété de méthodes de centrage horizontales et verticales CSS qui étaient autrefois difficiles mais qui sont désormais faciles à mettre en œuvre. Nous couvrirons le centrage horizontal et vertical à l'aide de Flexbox et de positionnement plus transformations. Dans un autre article, nous couvrirons également la façon d'utiliser la grille CSS pour un centrage horizontal et vertical. Résumé des points clés Utilisez Flexbox pour centrer verticalement le texte et les icônes: convertissez les conteneurs dans des conteneurs Flex et utilisez des éléments justifiés et alignant les éléments enfants centrés. La combinaison de la position et de la transformation peut atteindre un centrage vertical, en particulier pour les éléments très variables. Cela se fait en créant un contexte de positionnement et en ajustant la position de l'élément par rapport à son conteneur.
    tutoriel CSS . interface Web 797 2025-02-20 10:50:11
  • ATOZ CSS Astuce rapide: flottants et éléments clairs et centrés
    ATOZ CSS Astuce rapide: flottants et éléments clairs et centrés
    SITEPOINT Premium Adhip Exclusive: Complete ATZ: CSS Series Tutorials! Chargement du joueur… Bienvenue à nos tutoriels de la série AToz CSS! Dans cette série de tutoriels, nous explorerons diverses valeurs (et propriétés) de CSS qui commencent par différentes lettres dans l'alphabet. Dans cet article, j'ai ajouté un astuce / cours rapide sur les attributs de flotteur et de clairs et diverses méthodes de centrage des éléments. F signifie flotteur et clair Floating est utile si vous souhaitez déplacer des éléments vers la gauche ou la droite de la page, mais malheureusement, vous ne pouvez pas utiliser Float: Centre pour centrer l'élément. N'est-ce pas très gênant? Ne vous inquiétez pas, voici les méthodes de centrage de divers éléments. Conseils 1
    tutoriel CSS . interface Web 1034 2025-02-20 10:34:11
  • Rendre les formulaires amusants avec Flexbox
    Rendre les formulaires amusants avec Flexbox
    Utilisation de Flexbox pour une conception de formulaire HTML élégante et réactive Avantages clés de Flexbox dans la conception de la forme: CSS Flexbox propose une approche rationalisée à la disposition du formulaire HTML, résolvant des défis communs comme l'ordre de champ d'étiquettes incohérent et l'alignement
    tutoriel CSS . interface Web 344 2025-02-20 10:20:11
  • ATOZ CSS Screencast: Unicode Range et @ FONT-FACE
    ATOZ CSS Screencast: Unicode Range et @ FONT-FACE
    Résumé des points clés La règle CSS @ FONT-FACE permet d'utiliser des polices personnalisées dans la conception Web, améliorant ainsi les performances et améliorant la typographie. Assurez-vous de tester ces polices personnalisées sur différents systèmes d'exploitation et navigateurs pour vous assurer qu'ils apparaissent correctement. La propriété Unicode-Range de CSS peut être utilisée pour limiter la plage de caractères des applications de police personnalisées. Ceci est particulièrement utile pour ajouter des caractères ou des symboles spéciaux directement à la balise, ou en utilisant des polices spéciales pour des caractères spécifiques. En utilisant la propriété Unicode-Range, vous pouvez améliorer les performances de la page Web en vous assurant que seuls les caractères nécessaires sont téléchargés et utilisés, réduisant ainsi la quantité de données qui doivent être chargées. Cependant, il convient de noter que tous les navigateurs ne soutiennent pas cela
    tutoriel CSS . interface Web 1123 2025-02-20 10:12:09
  • Il est temps d'être honnête à propos des techniques de remplacement d'image
    Il est temps d'être honnête à propos des techniques de remplacement d'image
    Principaux à retenir Les techniques de remplacement d'images, autrefois populaires pour transmettre du contenu textuel sous une forme artistique tout en maintenant l'accessibilité, sont désormais souvent critiquées en raison de la disponibilité d'outils modernes tels que des polices personnalisées et de puissants outils CSS.
    tutoriel CSS . interface Web 503 2025-02-20 09:06:09
  • ATOZ CSS: Création de design réactif avec les requêtes multimédias
    ATOZ CSS: Création de design réactif avec les requêtes multimédias
    Points clés Évitez d'utiliser des points d'arrêt spécifiques à l'appareil lors de la création de conceptions réactives. Au lieu de cela, définissez les principaux points d'arrêt et les points de réglage fins secondaires qui sont approximativement de la taille de la plupart des téléphones, tablettes et périphériques de bureau / ordinateur portable. Utilisez EM ou REM comme unités de point d'arrêt, plutôt que des pixels, pour une meilleure évolutivité. Cela vous aidera si l'utilisateur à l'échelle de la page ou augmente la taille du texte. Les requêtes MEDIA CSS sont un outil puissant pour créer des conceptions réactives. Ils vous permettent d'appliquer différents styles à différents appareils avec différentes tailles d'écran. Cependant, évitez de les utiliser pour localiser des appareils spécifiques, car cela peut entraîner un cauchemar de maintenance. Au lieu de cela, concentrez-vous sur la création de conceptions réactives qui fonctionnent pour toutes les tailles d'écran. Cet article est atoz cs
    tutoriel CSS . interface Web 833 2025-02-20 08:47:10
  • ATOZ CSS Screencast: le Rotatey CSS se transforme
    ATOZ CSS Screencast: le Rotatey CSS se transforme
    Ce didacticiel explore la transformation Rotatey de CSS, permettant des rotations 3D autour de l'axe des y, parfaites pour des effets tels que les flips de carte. Nous couvrirons également le style transform: Preserve-3D pour un rendu 3D approprié et la perspective et les propriétés d'origine perspective
    tutoriel CSS . interface Web 549 2025-02-20 08:40:09
  • ATOZ CSS Astuce rapide: en utilisant le volant et la hauteur
    ATOZ CSS Astuce rapide: en utilisant le volant et la hauteur
    Cet article fait partie de la série ATOZ CSS. Vous pouvez trouver d'autres entrées dans cette série ici: Voir la série complète Voir l'enregistrement vidéo et texte complet des effets de survol Bienvenue dans notre série Atoz CSS! Dans cette série, je vais commencer par des lettres dans l'alphabet et explorer différentes valeurs (et propriétés) CSS. Nous savons que parfois les captures d'écran ne suffisent pas, et dans ce post, nous avons ajouté un nouveau conseil pour vous sur les effets de la volonté. H signifie volant et hauteur En ce qui concerne l'effet de survol, j'ai déjà introduit beaucoup dans la vidéo sur la lettre H, donc je ne vais pas entrer dans les détails ici. Cependant, vous pouvez appliquer des animations sympas à l'état de survol. Recherchez "CSS Hover Effets sur Google
    tutoriel CSS . interface Web 347 2025-02-20 08:36:10
  • Atoz CSS Screencast: la classe Pseudo survole
    Atoz CSS Screencast: la classe Pseudo survole
    Points de base : Pseudo-classe de survol est un outil pratique pour fournir des commentaires visuels lorsque la souris est survenue sur les liens et les boutons. Il peut être conçu de diverses manières, comme changer la couleur, la taille ou l'orientation d'un élément. Cependant, sa fiabilité sur les dispositifs tactiles n'est pas cohérente et ne doit pas être utilisée pour masquer les informations critiques. D'autres pseudo-classes peuvent être utilisées pour styliser différents états de liens, tels que: visités pour les liens dans l'historique du navigateur d'utilisateurs,: actif pour les liens cliqués, et: Focus pour les liens actuellement en vigueur sur le clavier. Ceux-ci peuvent être combinés dans une feuille de style de réinitialisation pour définir les valeurs par défaut du projet. La pseudo-classe de survol peut également être utilisée pour créer des menus déroulants dans la navigation principale du site Web. Cela implique de planer sur le dessus
    tutoriel CSS . interface Web 714 2025-02-20 08:33:09
  • ATOZ CSS Astuce rapide: utilisant des veuves et des pauses de ligne
    ATOZ CSS Astuce rapide: utilisant des veuves et des pauses de ligne
    Points clés Évitez d'utiliser la balise pour forcer l'enveloppement des lignes, car cela entraînera une apparence de texte incohérente à différentes tailles d'écran. CSS est recommandé pour contrôler l'espacement et les pauses de ligne, ce qui offre un meilleur contrôle et une meilleure flexibilité. Utilisez l'attribut d'affichage pour afficher ou masquer les nouvelles lignes. Affichage du réglage: aucun ne produira une rupture de ligne, tandis que l'affichage: Block produira une pause de ligne. En conjonction avec les requêtes multimédias, les ruptures de ligne peuvent être activées ou désactivées sous des tailles d'écran spécifiques. Pour éviter les lignes de veuve (mots simples à la fin d'un paragraphe ou d'un titre), utilisez des caractères d'espace de rétractation () entre les deux derniers mots. Cela garantit que les deux derniers mots sont traités comme un mot, créant un plus beau effet de rupture de ligne.
    tutoriel CSS . interface Web 969 2025-02-20 08:30:10
  • L'état des éléments d'entrée HTML5
    L'état des éléments d'entrée HTML5
    Cet article explore les défis de l'utilisation des champs d'entrée HTML5 natifs pour les dates et les nombres dans différents endroits, en se concentrant sur les incohérences du navigateur dans la manipulation des paramètres régionaux et l'expérience utilisateur. Le projet de l'auteur, impliquant plusieurs CO européens
    tutoriel CSS . interface Web 574 2025-02-20 08:29:09
  • ATOZ CSS Screencast: CSS Pseudo Elements
    ATOZ CSS Screencast: CSS Pseudo Elements
    Points de base Les pseudo-éléments CSS sont des éléments de la page qui ne sont pas présents dans le code HTML, et ils peuvent être exploités à l'aide de tout style CSS appliqué à d'autres éléments. Le: avant et: après les pseudo-éléments dans CSS peut être utilisé pour générer du contenu de la page, y compris le texte, les images, les valeurs d'attribut et les compteurs. Ils peuvent également être utilisés pour créer des formes complexes avec un marquage minimal. Divers pseudo-éléments dans CSS incluent: première ligne ,: premier lettre ,: sélection ,: avant, et: après. Ceux-ci peuvent être utilisés pour styliser des parties spécifiques d'un élément, insérer du contenu avant et après le contenu d'un élément, et styliser la première lettre ou la première ligne d'un élément de niveau bloc, etc. Explication vidéo (chargement
    tutoriel CSS . interface Web 379 2025-02-20 08:26:10
  • ATOZ CSS: Différence entre traduire et position relative
    ATOZ CSS: Différence entre traduire et position relative
    Principaux à retenir La principale différence entre la position CSS: relative et transformée: tradlate () réside dans la façon dont ils affectent la disposition d'autres éléments. Position: relatif modifie la position de l'élément dans le flux de documents, affectant potentiellement d'autres éléments
    tutoriel CSS . interface Web 538 2025-02-20 08:23:14

Recommandations d'outils

Code de contact du formulaire de message d'entreprise jQuery

Le code de contact du formulaire de message d'entreprise jQuery est un formulaire de message d'entreprise simple et pratique et le code de la page d'introduction contactez-nous.

Effets de lecture de boîte à musique HTML5 MP3

L'effet spécial de lecture de boîte à musique HTML5 MP3 est un lecteur de musique MP3 basé sur HTML5 + CSS3 pour créer de jolies émoticônes de boîte à musique et cliquer sur le bouton de commutation.

Effets spéciaux du menu de navigation d'animation de particules cool HTML5

L'effet de menu de navigation d'animation de particules cool HTML5 est un effet spécial qui change de couleur lorsque le menu de navigation est survolé par la souris.

Code d'édition par glisser-déposer du formulaire visuel jQuery

Le code d'édition par glisser-déposer du formulaire visuel jQuery est un formulaire visuel basé sur jQuery et le framework bootstrap.

Modèle Web de fournisseur de fruits et légumes biologiques Bootstrap5

Un modèle Web de fournisseur de fruits et légumes biologiques-Bootstrap5
Modèle d'amorçage
2023-02-03

Modèle de page Web réactive de gestion d'arrière-plan d'informations de données multifonctionnelles Bootstrap3-Novus

Modèle de page Web réactive de gestion d'arrière-plan d'informations de données multifonctionnelles Bootstrap3-Novus
modèle de back-end
2023-02-02

Modèle de page Web de plate-forme de services de ressources immobilières Bootstrap5

Modèle de page Web de plate-forme de services de ressources immobilières Bootstrap5
Modèle d'amorçage
2023-02-02

Modèle Web d'informations de CV simples Bootstrap4

Modèle Web d'informations de CV simples Bootstrap4
Modèle d'amorçage
2023-02-02

Matériau vectoriel d'éléments d'été mignons (EPS+PNG)

Il s'agit d'un joli matériau vectoriel d'éléments d'été, comprenant le soleil, un chapeau de soleil, un cocotier, un bikini, un avion, une pastèque, une crème glacée, une boisson fraîche, une bouée, des tongs, un ananas, une conque, une coquille, une étoile de mer, un crabe. , Citrons, crème solaire, lunettes de soleil, etc., le matériel est fourni aux formats EPS et PNG, y compris des aperçus JPG.
Matériau PNG
2024-05-09

Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG)

Il s'agit d'un matériau vectoriel de badge de remise des diplômes rouge 2023, quatre au total, disponible aux formats AI, EPS et PNG, y compris l'aperçu JPG.
Matériau PNG
2024-02-29

Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS)

Il s'agit d'un matériau vectoriel de bannière printanière conçu avec des oiseaux chanteurs et un chariot rempli de fleurs. Il est disponible aux formats AI et EPS, y compris l'aperçu JPG.
image de bannière
2024-02-29

Matériau vectoriel de chapeau de graduation doré (EPS+PNG)

Il s'agit d'un matériau vectoriel de casquette de graduation dorée, disponible aux formats EPS et PNG, y compris l'aperçu JPG.
Matériau PNG
2024-02-27

Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure

Le modèle de site Web d'entreprise de services de nettoyage et d'entretien de décoration d'intérieur est un modèle de site Web à télécharger adapté aux sites Web promotionnels qui proposent des services de décoration, de nettoyage, d'entretien et d'autres organisations de services. Astuce : Ce modèle appelle la bibliothèque de polices Google et la page peut s'ouvrir lentement.
Modèle frontal
2024-05-09

Modèle de page de guide de CV personnel aux couleurs fraîches

Le modèle de page de guide de CV de candidature personnelle de correspondance de couleurs fraîches est un téléchargement de modèle Web de page de guide d'affichage de travail de CV de recherche d'emploi personnel adapté au style de correspondance de couleurs fraîches. Astuce : Ce modèle appelle la bibliothèque de polices Google et la page peut s'ouvrir lentement.
Modèle frontal
2024-02-29

Modèle Web de CV de travail créatif de concepteur

Le modèle Web de CV de travail créatif de concepteur est un modèle Web téléchargeable pour l'affichage de CV personnels adapté à divers postes de concepteur. Astuce : Ce modèle appelle la bibliothèque de polices Google et la page peut s'ouvrir lentement.
Modèle frontal
2024-02-28

Modèle de site Web d'entreprise de construction d'ingénierie moderne

Le modèle de site Web d'entreprise d'ingénierie et de construction moderne est un modèle de site Web téléchargeable adapté à la promotion du secteur des services d'ingénierie et de construction. Astuce : Ce modèle appelle la bibliothèque de polices Google et la page peut s'ouvrir lentement.
Modèle frontal
2024-02-28