Entrar Ainda não tem acesso?
3
respostas

[Dúvida] Adicionando gradiente na cor da borda...

Referente ao curso React: estilize componentes com Styled Components e manipule arquivos estáticos, no capítulo Componentes iniciais e fontes e atividade Desafio: input estilizado

por Vinícius Silva Santos
| 152.1k xp | 9 posts
Auxiliar Financeiro Administrativo

Ao tentar adicionar um gradiente na cor da borda percebi que o border-color não aceita gradientes. Busquei soluções na internet e descobri que para adicionar um gradiente na borda teria que utilizar a propriedade border-image. Porém, ao utilizar a border-image me deparei com outro problema, o border image não tem compatibilidade com o border-radius e não me permitiu arredondar as bordas...

const StyledInput = styled.input`
  width: 566px;
  height: 56px;
  padding: 12px 16px;
  border: 5px solid transparent;
  border-image: linear-gradient(to right, #C98CF1 4.16%, #A482EB 48%, #7B78E5 96.76%);
  border-image-slice: 1;
  border-radius: 1rem;
  box-sizing: border-box;
  background: transparent;
  color: #D9D9D9;
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
`

Input with border-image and border-radius

Tentei contornar essa situação utilizando uma div envolta do input para tentar usar a propriedade border-radius mas esse foi o resultado:

const StyledSearch = styled.div`
  position: relative;
  width: 566px;
  height: 56px;
  display: inline-block;
  border-radius: 1rem;
  overflow: hidden;
`

const StyledInput = styled.input`
  width: 100%;
  height: 100%;
  ...
`

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Toda sugestão de como contornar isso é bem vinda!

3 respostas
por Renan Cezar Wuicik
| 3166.9k xp | 6165 posts
Instrutor Suporte Educacional Start By Alura

Olá Vinícius! Tudo bem contigo?

Você está no caminho certo para desenvolver essa feature.

Se você quiser compartilhar seu projeto comigo, é só colocar ele no Github e me mandar o link, assim eu posso fazer o download e testar algumas soluções por aqui para lhe auxiliar se você quiser.

Era isso, abraços e bons estudos.

por Vinícius Silva Santos
| 152.1k xp | 9 posts
Auxiliar Financeiro Administrativo

Bom dia amigo, acabei deixando por isso mesmo pra dar prosseguindo ao curso, mas vou lhe deixar o meu repositório pra você dar uma olhada se for do seu interesse... Repo: https://github.com/viniciussis/Space_App live: https://space-app-sooty.vercel.app/

por Renan Cezar Wuicik
| 3166.9k xp | 6165 posts
Instrutor Suporte Educacional Start By Alura

Olá Vinícius! Tudo ok contigo?

Eu estava testando aqui algumas ideias, e a tarefa se provou de certa forma um pouco trabalhosa, então buscando por soluções, encontrei esse artigo com várias soluções incríveis para resolver parte do problema:

E se quiser uma dica eu sugiro que crie um componente span estilizado e renderize ele dentro do map, isso funciona, mas tem algumas limitações. O melhor resultado que consegui foi esse:

import styled from "styled-components"
import tags from "./tags.json"

const StyledPara = styled.p`
  color: white;
  display: inline-flex;
  font-size: 1.25rem;
  gap: 0.75rem;
  align-items: center;
`;

const StyledTag = styled.button`
  border: 2px solid ${props => props.$selected ? '#A482EB' : "transparent"};
  background-color: #d9d9d932;
  border-radius: 0.5rem;
  font-size: 1.5rem;
  padding: 0.35rem 0.75rem;
  transition: 0.5s;
  cursor: pointer;
  background: transparent;
  padding: 0.5rem 1rem;
  background-image: linear-gradient(90deg, white, white),
    linear-gradient(90deg, hsl(289, 65%, 64%), hsl(226, 78%, 67%));
  background-clip: padding-box, border-box;
  background-origin: border-box;
  border-radius: 1.75rem;
`;

const StyledLabel = styled.span`
  background-image: linear-gradient(
    90deg,
    hsl(289, 65%, 64%),
    hsl(226, 78%, 67%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.5rem;
`;

const Tags = ({ tagSelected, onSelectingTag }) => {
  return (
    <StyledPara>Busque por tags:
      {tags.map(tag =>
        <StyledTag
          $selected={tagSelected.id === tag.id}
          onClick={() => onSelectingTag(tag)}
          key={tag.id}
        >
          <StyledLabel>{tag.titulo}</StyledLabel>
        </StyledTag>
      )}
    </StyledPara>
  )
}

export default Tags;

O problema é que quando clicamos em uma tag ela não fica muito destacada, mas isso deixo de desafio!

Era isso, infelizmente nem sempre podemos seguir a risca o design do Figma, e esse caso é um deles. Então, só para contextualizar, é importante entender que as propriedades border-image e border-radius não são compatíveis entre si. Dessa forma, para aplicar o botão com a borda arredondada e usando degradê, não é impossível, mas também não é tão simples. A leitura do artigo que passei acima pode ajudar muito, portanto recomendo fortemente a leitura dele.

Se precisar conte com o fórum!

Abraços e bons estudos.