paramètres de la zone de texte CSS

Avec le développement continu de la technologie Internet, la conception Web a également reçu de nombreux changements et mises à jour. La zone de texte est l'un des éléments les plus couramment utilisés dans la conception de sites Web. Son paramètre affecte non seulement l'apparence du site Web, mais affecte également l'expérience utilisateur et la convivialité du site Web. Cet article explique comment configurer une zone de texte CSS, y compris le style de base, la couleur d'arrière-plan, la bordure arrondie, l'ombre, la transparence et les effets d'animation de la zone de texte.

1. Style de base de la zone de texte

La zone de texte est l'un des éléments les plus largement utilisés dans la conception Web. Elle permet aux utilisateurs de saisir diverses informations, telles que des zones de recherche, des zones de message et des zones de commentaires. En CSS, nous pouvons utiliser le code suivant pour définir le style de base de la zone de texte :

input[type=text], textarea {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: none;
}

Dans le code CSS ci-dessus, nous utilisons le sélecteur input[type=text] et le sélecteur textarea pour définir le style de base de la zone de texte . Les styles spécifiques incluent la largeur, le remplissage, les marges, la bordure, la couleur de la bordure, les coins arrondis de la bordure, la couleur d'arrière-plan, la taille de la police et le redimensionnement de la zone de texte.

2. Couleur d'arrière-plan de la zone de texte

La couleur d'arrière-plan de la zone de texte peut être définie via la propriété background-color de CSS. Vous pouvez personnaliser la couleur d’arrière-plan de la zone de texte pour répondre à différents besoins de conception. Voici un exemple utilisant le gris foncé comme couleur d'arrière-plan de la zone de texte :

input[type=text], textarea {
  background-color: #333;
}

3. Bordure arrondie de la zone de texte

La bordure arrondie est un style de conception de zone de texte couramment utilisé, qui peut donner à la page un aspect plus chaleureux. et sympathique. En CSS, nous pouvons utiliser la propriété border-radius pour définir la taille arrondie de la bordure de la zone de texte. Voici un exemple :

input[type=text], textarea {
  border-radius: 10px;
}

4. Ombre de la zone de texte

L'ombre peut rendre les éléments de la page plus tridimensionnels et plus réels. Nous pouvons utiliser la propriété box-shadow pour définir l'effet d'ombre de la zone de texte. Voici un exemple :

input[type=text], textarea {
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

où le premier paramètre représente le décalage horizontal de l'ombre, le deuxième paramètre représente le décalage vertical, le troisième paramètre représente le rayon de flou et le quatrième paramètre représente la couleur et la transparence de l'ombre.

5. Transparence de la zone de texte

La transparence fait référence à l'opacité de l'élément. Nous pouvons utiliser l'attribut opacity pour utiliser la transparence dans la zone de texte. Voici un exemple :

input[type=text], textarea {
  opacity: 0.7;
}

6. Effets d'animation des zones de texte

Les effets d'animation peuvent rendre les éléments de la page Web plus accrocheurs et améliorer l'expérience utilisateur. Nous pouvons utiliser la propriété de transition CSS pour animer la zone de texte. Voici un exemple :

input[type=text], textarea {
  transition: all 0.3s ease-in-out;
}
input[type=text]:hover, textarea:hover {
  transform: scale(1.05);
}

Le code ci-dessus ajoutera un effet de grossissement à la zone de texte au survol de la souris. La première ligne de code définit l'effet de transition pour toutes les propriétés et la deuxième ligne de code ajoute un effet d'agrandissement.

Résumé :

La zone de texte est un élément couramment utilisé dans la conception Web. En utilisant CSS pour styliser la zone de texte, vous pouvez la rendre plus belle, améliorer l'expérience utilisateur et la convivialité du site Web. L'exemple de code fourni ici peut être utilisé comme référence pour les lecteurs et peut également être personnalisé pour répondre à différents besoins de conception.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!