Cor do anel de vento de cauda
Este artigo abordará o processo de criação de cores de anel Tailwind e fornecerá informações sobre as práticas recomendadas para o uso eficaz de cores de anel em seu design da web com exemplos .
As cores do anel Tailwind são usadas para adicionar uma borda ao redor de um elemento, semelhante à propriedade border no CSS tradicional.
No entanto, as cores dos anéis são projetadas para serem mais flexíveis e personalizáveis do que as bordas tradicionais.
Você pode criar bordas parcialmente transparentes ou com vários níveis de espessura.
Índice-
Classes de cores de anel de vento de cauda
Existem várias classes de utilitários disponíveis para personalizar a cor dos anéis no Tailwind CSS .
| Aulas | Visão geral |
| herança de anel | A cor do elemento pai é usada como a cor do anel. |
| anel transparente | Esta classe é usada para definir a cor do anel ao redor de um elemento como transparente. |
| anel de corrente | Usado para definir a cor do anel ao redor de um elemento para a cor do texto atual. |
| anel preto | Nesse caso, a cor do anel ao redor de um elemento é preta. |
| anel branco | A cor do anel é definida como branco. |
| anel-cinza-50 | A cor do anel é especificada como um tom de cinza. |
| ring-red-50 | Usando esta classe, a cor do anel é definida como um tom de vermelho. |
| anel-azul-50 | Um tom de azul é usado como a cor do anel. |
| anel-índigo-50 | Esta classe é usada para definir a cor do anel como um tom de índigo. |
| anel-roxo-50 | Esta classe aplica uma cor de anel como um tom de roxo. |
| anel-verde-50 | Aplica uma cor de anel que é um tom de verde. |
| anel-amarelo-50 | Um tom de amarelo é usado como a cor do anel. |
| anel-rosa-50 | Ao usar esta classe, a cor do anel é especificada como um tom de rosa. |
| ring-slate-50 | A cor do anel é definida como um tom de ardósia. |
| anel neutro-50 | Usado para definir a cor do anel como um tom neutro. |
| anel-fúcsia-50 | Esta classe é usada para definir a cor do anel como um tom de fúcsia . |
| anel-âmbar-50 | A cor do anel é especificada como um tom de âmbar. |
| anel-laranja-50 | Um tom de laranja é definido como a cor do anel. |
| anel-pedra-50 | Usando esta classe, a cor do anel é especificada como um tom de pedra. |
| anel-rosa-50 | A cor do anel é definida como um tom de rosa. |
| anel-violeta-50 | Ao usar esta classe, a cor do anel é especificada como um tom de violeta. |
| anel-zinco-50 | A cor do anel é especificada como um tom de zinco usando esta classe. |
| ring-lime-50 | Ao usar esta classe, a cor do anel é definida como um tom de limão. |
| anel-esmeralda-50 | Aplica uma cor de anel que é um tom de cor esmeralda. |
| ring-teal-50 | Usando esta classe, a cor aplicada ao anel é um tom de azul-petróleo. |
| anel-ciano-50 | Um tom de ciano é usado como a cor do anel. |
| ring-sky-50 | A cor do anel é especificada como um tom da cor do céu. |
Obs : Os valores das cores podem ser alterados conforme sua necessidade de 50.100-900. O incremento deve ser 100, após 100.
Sintaxe
<element class="ring-blue-500">...</element >
Lembre-se : as classes de cores do anel precisam ser usadas juntamente com as classes de largura do anel , caso contrário, não haverá efeito.
Vamos explorar a propriedade de cor do anel Tailwind através de um exemplo que faz uso de algumas classes:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="my-2 font-semibold"Ring Color class in Tailwind CSS
class="grid grid-cols-4 gap-4 p-2 font-medium"
class="ring-2 ring-red-600 bg-rose-300
w-full h-10 rounded-md"
ring-red-600
class="ring-2 ring-black bg-amber-300
w-full h-10 rounded-md"
ring-black
class="ring-2 ring-indigo-700 bg-sky-300
w-full h-10 rounded-md"
ring-indigo-700
class="ring-2 ring-teal-800 bg-emerald-300
w-full h-10 rounded-md"
ring-teal-800
Mais algumas classes de cores de anel Tailwind foram usadas no exemplo abaixo:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="my-2 font-semibold"Ring Color class in Tailwind CSS
class="grid grid-cols-4 gap-4 p-2 font-medium"
class="ring-2 ring-inherit bg-red-400
w-full h-10 rounded-md"
ring-inherit
class="ring-2 ring-purple-700 bg-lime-300
w-full h-10 rounded-md"
ring-purple-700
class="ring-2 ring-rose-500 bg-slate-300
w-full h-10 rounded-md"
ring-rose-500
class="ring-2 ring-current bg-orange-300
w-full h-10 rounded-md"
ring-current
O exemplo a seguir ilustra o utilitário de cor do anel usando algumas de suas classes:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="my-2 font-semibold"Ring Color class in Tailwind CSS
class="grid grid-cols-4 gap-4 p-2 font-medium"
class="ring-2 ring-transparent bg-fuchsia-400
w-full h-10 rounded-md"
ring-transparent
class="ring-2 ring-zinc-500 bg-white
w-full h-10 rounded-md"
ring-zinc-500
class="ring-2 ring-fuchsia-500 bg-gray-300
w-full h-10 rounded-md"
ring-fuchsia-500
class="ring-2 ring-cyan-500 bg-yellow-400
w-full h-10 rounded-md"
ring-cyan-500
Práticas recomendadas de cores de anel de vento de cauda
As cores do anel Tailwind podem ser uma ótima maneira de adicionar interesse visual ao seu design da web, é importante usá-las criteriosamente.
Aqui estão algumas práticas recomendadas a serem lembradas:
- As cores dos anéis podem ser uma ótima maneira de chamar a atenção do usuário para elementos importantes, como botões ou chamadas para ação.
- Embora as cores dos anéis possam ser uma ótima maneira de adicionar interesse visual, é importante não exagerar. Muitas cores de anel podem fazer com que seu design pareça confuso e opressor.
- Ao escolher uma cor de anel, é importante considerar sua paleta de cores geral. Escolha cores que complementem seu esquema de cores existente e que ajudem a reforçar a identidade de sua marca.
- Para criar um design coeso, é importante usar as cores dos anéis de forma consistente em todo o site. Por exemplo, você pode usar uma cor de anel específica para todos os seus botões ou frases de chamariz.
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
