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

  • Comment concevoir des dispositions riches en cartes avec une interface utilisateur sémantique
    Comment concevoir des dispositions riches en cartes avec une interface utilisateur sémantique
    Cet article montre la création de dispositions Web réactives à l'aide du composant de carte de l'interface utilisateur sémantique. Nous allons créer un album d'image et un widget de recette, présentant la flexibilité du design basé sur les cartes. La conception basée sur la carte est un modèle répandu dans le web moderne D
    tutoriel CSS . interface Web 365 2025-02-21 12:29:10
  • 8 astuces intelligentes avec les fonctions CSS
    8 astuces intelligentes avec les fonctions CSS
    La puissance du CSS est bien au-delà de l'imagination de nombreux développeurs Web. Au fil du temps, la langue de feuille de style est devenue de plus en plus puissante, apportant des fonctions au navigateur qui nécessitaient à l'origine JavaScript. Cet article présentera huit conseils de fonction CSS intelligents qui ne nécessitent aucun javascript. Points importants Les fonctions CSS peuvent être utilisées pour créer divers effets et fonctions tels que les info-bulleurs, les titres de vignettes, les comptoirs et les effets en verre givrés sans JavaScript. La fonction calc () peut être utilisée pour créer des systèmes de grille plus intelligents et l'alignement des éléments de position fixe, offrant une plus grande flexibilité et précision dans la conception. Les fonctions CSS permettent également
    tutoriel CSS . interface Web 575 2025-02-21 12:25:13
  • Une introduction aux bases des boutons CSS modernes
    Une introduction aux bases des boutons CSS modernes
    Conception de bouton Web: Trois styles et implémentation CSS Cet article a été mis à jour le 9 juillet 2016 et a remplacé la balise par tag pour se conformer aux meilleures pratiques d'accessibilité moderne. Si vous travaillez sur des boutons, restez toujours à l'étiquette. Les boutons sont l'un des composants les plus importants de n'importe quelle page Web, et ils ont de nombreux états et fonctions différents, qui doivent tous être égalés correctement avec les décisions de conception précédentes. Dans cet article, nous présenterons trois concepts de conception de bouton, ainsi que le code CSS et les outils pour aider les nouveaux développeurs à créer leurs propres boutons. Avant de plonger dans divers concepts de conception de bouton, nous devons passer en revue certaines connaissances de base des boutons CSS. Si vous ne savez pas quels composants CSS changent, comprenez l'interface utilisateur et le matériel aplatissant
    tutoriel CSS . interface Web 352 2025-02-21 12:04:16
  • 20 outils inspirants et gratuits pour un meilleur appariement de polices
    20 outils inspirants et gratuits pour un meilleur appariement de polices
    Typographie Web Mastery: A Guide to Perfect Font Pailing Le choix de la bonne appariement de polices est crucial pour toute conception Web réussie. Cet article fournit un guide complet pour maîtriser la typographie Web, offrant une multitude de ressources en ligne et de PRAC
    tutoriel CSS . interface Web 810 2025-02-21 11:29:10
  • Tiles de SitePoint & # x27; Une étude de cas dans les composants, le thème et la flexion
    Tiles de SitePoint & # x27; Une étude de cas dans les composants, le thème et la flexion
    Note de l'éditeur: Peu de temps après la publication de cet article, la page d'accueil de SitePoint a été redessinée. Désolé, Kitty! En tant que contributeur de longue date à SitePoint, j'ai toujours trouvé la conception du titre de leurs articles très attrayante. Le titre contient toutes les informations nécessaires à l'article: titre, auteur, date, catégorie et même les mesures communautaires (nombre de commentaires et de goûts). Je pense qu'il est intéressant de construire un tel composant à partir d'une perspective HTML ou CSS. Dans cet article, nous construirons ce composant étape par étape pour s'efforcer d'être le meilleur: accessible, maintenable, thématique et révocal. Points clés Approche de contenu axée sur le contenu: met l'accent sur les balises HTML, les styles CSS et facultatif
    tutoriel CSS . interface Web 638 2025-02-21 11:05:38
  • CSS en ligne dans Jekyll
    CSS en ligne dans Jekyll
    Principaux à retenir Le CSS en ligne dans Jekyll peut être un outil précieux pour les sites avec CSS suffisamment petit, car il vous permet d'envoyer tous les styles dans le premier aller-retour au serveur, éliminant le besoin d'une feuille de style externe. Ceci est particulièrement efficace pour le délit
    tutoriel CSS . interface Web 113 2025-02-21 10:57:09
  • Astuce rapide: ajoutez des favicons rapidement et facilement à votre HTML
    Astuce rapide: ajoutez des favicons rapidement et facilement à votre HTML
    Les icônes de site Web (FAVICON) rendent votre site Web plus raffiné et plus facile à reconnaître. En tant que clients de bureau, des systèmes d'exploitation et des appareils mobiles permettent aux utilisateurs d'épingler des sites Web couramment utilisés pour un accès facile, l'importance des icônes de site Web devient de plus en plus importante. Il est crucial de s'assurer que les meilleures icônes sont affichées lorsque le site Web est fixé n'importe où. Cependant, la gestion des icônes du site Web n'est souvent pas une tâche facile. En raison de la fragmentation des systèmes d'exploitation mobiles et de bureau et des navigateurs, ce sera un processus lent et fastidieux pour fournir les meilleures icônes pour chaque appareil. Selon le niveau de compatibilité dont vous avez besoin, vous devrez peut-être gérer plus de 30 ressources. Heureusement, le service de site Web Real Favicon Generator peut résoudre ce problème. Le site Web fournit des conseils étape par étape,
    tutoriel CSS . interface Web 283 2025-02-21 10:06:10
  • Le Guide PostCSS pour améliorer les sélecteurs et les requêtes multimédias
    Le Guide PostCSS pour améliorer les sélecteurs et les requêtes multimédias
    Points de base POSTCSS propose une variété de plug-ins qui fournissent des polyfills pour les dernières fonctionnalités CSS, permettant aux développeurs d'essayer de nouvelles fonctionnalités même si elles manquent de support approfondi de navigateur. Le plug-in PostCSS nichet implémente les règles de style qui nichent en fonction de la proposition de module imbriqué W3C, présente un nouveau sélecteur imbriqué et fait référence au sélecteur parent. Le plug-in PostCSS-Custom-Selectors permet de définir des sélecteurs en double dans les variables, de réduire la duplication de code et d'améliorer la maintenance du code. Les plugins PostCSS-Custom-Media et PostCSS-Media-Minmax améliorent les requêtes multimédias pour les rendre plus faciles
    tutoriel CSS . interface Web 267 2025-02-21 10:05:09
  • Présentation de la propriété CSS Text-Align-Last
    Présentation de la propriété CSS Text-Align-Last
    CSS Text-Align-Last Property Détails: parfaitement aligné la dernière ligne de texte Les subtilités déterminent souvent le succès ou l'échec de l'expérience utilisateur. Des détails tels que les ombres de texte et l'espacement des éléments peuvent affecter la vue globale du site Web. La propriété Text-Align-Last est créée pour cela, qui peut contrôler avec précision l'alignement de la dernière ligne du bloc de texte ou la ligne précédente de la nouvelle ligne forcée, en particulier lors de l'alignement du texte aux deux extrémités. Cet article explorera des aspects approfondis de l'attribut texte-alignement, y compris les valeurs disponibles, la prise en charge du navigateur et le comportement spécifique du navigateur. Utilisation et valeurs disponibles L'utilisation de la propriété Text-Align-Last est très simple. L'extrait de code suivant à droite à droite la dernière ligne de texte
    tutoriel CSS . interface Web 574 2025-02-21 10:00:17
  • Présentation de la disposition de la grille CSS
    Présentation de la disposition de la grille CSS
    Disposition de la grille CSS: construire une disposition de site Web puissante et flexible Points de base Les dispositions de grille CSS offrent un moyen plus puissant et flexible de créer des dispositions de site Web complexes sans utiliser de propriétés telles que en ligne et en flotteur ou une feuille de style de système de grille séparée. Actuellement, seuls IE 10 et Edge prennent en charge les dispositions de grille CSS, mais il peut être activé via des drapeaux spécifiques dans Chrome et Firefox ou en utilisant du polyfill. Les dispositions de grille CSS définissent la disposition des éléments sur une page Web en utilisant des unités de mesure, des lignes, des pistes, des cellules et des régions appelées "FR". CSS GRI
    tutoriel CSS . interface Web 155 2025-02-21 09:35:09
  • Activer les fonctionnalités CSS à venir avec PostCSS
    Activer les fonctionnalités CSS à venir avec PostCSS
    Suivant l'article précédent "Guide PostCSS: sélecteurs améliorés et requête multimédia", cet article explorera plus de plug-ins PostCSS qui étendent la fonctionnalité CSS. L'article précédent se concentre sur l'amélioration de la structure des feuilles de style en étendant les sélecteurs et les requêtes multimédias, tandis que cet article se concentrera sur la façon d'implémenter de nouvelles propriétés et valeurs dans la spécification à venir. Les plugins décrits dans cet article implémentent différentes fonctions qui peuvent être utilisées efficacement ensemble ou individuellement en fonction de vos besoins. Commençons par mon plugin préféré. Points clés Le plugin PostCSS peut être utilisé pour implémenter de nouvelles propriétés et valeurs dans la prochaine spécification CSS, étendant efficacement les fonctionnalités de CSS. Ces plugins peuvent être utilisés ensemble ou individuellement en fonction des besoins du développeur. POSTCSS permet aux développeurs de parcourir
    tutoriel CSS . interface Web 898 2025-02-21 09:30:11
  • Développement frontal dans un monde de l'Internet des objets
    Développement frontal dans un monde de l'Internet des objets
    Le Web réactif est confronté à un nouveau défi: l'Internet des objets (IoT). La prolifération de divers appareils IoT - des minuscules affichages de framboise PI aux montres intelligentes et aux assistants vocaux - demande un Web qui reste accessible et utilisable à cette étendue
    tutoriel CSS . interface Web 696 2025-02-21 09:18:13
  • Astuce rapide: comment les marges Z-Index et Auto fonctionnent dans Flexbox
    Astuce rapide: comment les marges Z-Index et Auto fonctionnent dans Flexbox
    Flexbox est largement utilisé pour résoudre des problèmes de mise en page communs tels que les pieds de page collants et les colonnes de contour. En plus de ces fonctionnalités, il offre d'autres fonctionnalités pratiques moins populaires. Explorons deux d'entre eux! Points clés Flexbox permet à l'attribut Z-Index d'être appliqué à des éléments non positionnés (tels que les projets Flex) même si l'attribut de position du projet Flex est défini sur statique. Cela peut être utilisé pour contrôler l'ordre d'empilement des éléments. Les marges automatiques dans Flexbox peuvent être utilisées pour implémenter l'alignement personnalisé des éléments Flex le long de la broche. Ils absorbent l'espace supplémentaire et repoussent les projets adjacents, permettant un modèle d'interface utilisateur unique. Bien que visuellement
    tutoriel CSS . interface Web 840 2025-02-21 09:11:12
  • Masquer dans le navigateur avec CSS et SVG
    Masquer dans le navigateur avec CSS et SVG
    Le masquage est une technique qui vous permet d'afficher des parties sélectionnées d'un élément ou d'une image à l'écran tout en cachant le reste. Les développeurs Web peuvent utiliser cette technique dans le navigateur via la propriété Mask et l'élément SVG Mask. Ces fonctionnalités vous permettent
    tutoriel CSS . interface Web 789 2025-02-21 09:09:12
  • Effets du filtre CSS: flou, niveaux de gris, luminosité et plus dans CSS!
    Effets du filtre CSS: flou, niveaux de gris, luminosité et plus dans CSS!
    Filtres CSS: un guide complet de la manipulation de l'image Exemples d'effets du filtre CSS. Les filtres CSS, qui font initialement partie de la spécification SVG, offrent un moyen puissant et convivial pour manipuler le rendu d'image. Ces filtres, désormais intégrés dans
    tutoriel CSS . interface Web 138 2025-02-21 08:59:13

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