Perguntas com a marcação «css-shapes»

Como fazer o upload de arquivos em Stack Overflow no local : Como fazer CSS? Existem muitas formas CSS diferentes em CSS Tricks - Shapes of CSS e estou particularmente intrigado com um triângulo: #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px …

1846 css  geometry  polygon  css-shapes 

Como crio um menu parecido com este ... Link para PSD Não quero usar as imagens PSD. Eu preferiria usar ícones de alguns pacotes como FontAwesome e ter os backgrounds / css gerados em CSS. Uma versão do menu que está usando o PSD para gerar imagens da dica de …

321 css  tooltip  css-shapes 

Gostaria de cercar um número em um círculo como nesta imagem: Isso é possível e como é alcançado?

250 html  css  css-shapes 

Eu quero ter uma página da web que tenha uma palavra centralizada. Quero que essa palavra seja desenhada com uma animação, de modo que a página "escreva" da mesma maneira que gostaríamos, ou seja, começa em um ponto e desenha linhas e curvas ao longo do tempo, de modo que …

229 javascript  css  canvas  html5-canvas  css-shapes 

Como crio uma forma como essa para ser exibida em uma página da web? Eu não quero usar imagens, pois elas ficam embaçadas no dimensionamento Eu tentei com CSS : .tear { display: inline-block; transform: rotate(-30deg); border: 5px solid green; width: 50px; height: 100px; border-top-left-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; …

222 html  css  svg  css-shapes 

Este é o CSS: div { width: 0; height: 0; border: 180px solid red; border-radius: 180px; } Como ele produz o círculo abaixo? Suponha que, se a largura do retângulo for de 180 pixels e a altura de 180 pixels, apareceria assim: Depois de aplicar o raio da borda de …

206 html  css  css-shapes 

Gostaria de saber se existe uma maneira mais fácil de criar divs circulares do que o que estou fazendo agora. Atualmente, estou apenas criando uma imagem para cada tamanho diferente, mas é irritante fazer isso. Existe alguma maneira usando CSS para fazer divs que são circulares e posso especificar o …

183 html  css  geometry  css-shapes 

Encontrei este exemplo no stackoverflow: Desenhar círculo usando css sozinho O que é ótimo. Mas gostaria de saber como modificar esse exemplo para incluir texto no meio do círculo? Também encontrei o seguinte: centralizar vertical e horizontalmente o texto em círculo em CSS (como o emblema de notificação do iphone) …

156 css  css-shapes 

É possível controlar o comprimento e a distância entre os traços de borda tracejada no CSS? Este exemplo abaixo é exibido de maneira diferente entre os navegadores: div { border: dashed 4px #000; padding: 20px; display: inline-block; } <div>I have a dashed border!</div> Executar snippet de códigoOcultar resultadosExpandir snippet Grandes …

124 css  border  css-shapes 

Se eu usar um valor de pixel ou em para o raio da borda, o raio da borda será sempre um arco circular ou uma forma de pílula mesmo que o valor seja maior que o lado maior do elemento. Quando uso porcentagens , o raio da aresta é elíptico …

124 css  css-shapes 

Como você desenha um círculo usando HTML5 e CSS3? Também é possível inserir texto dentro?

116 html  css  geometry  css-shapes 

Tentativa de usar uma cor hexadecimal personalizada para meu triângulo css (borda). No entanto, uma vez que ele usa propriedades de borda, não tenho certeza de como fazer isso. Eu gostaria de evitar javascript e css3 simplesmente por causa da compatibilidade. Estou tentando fazer com que o triângulo tenha um …

114 css  border  css-shapes 

Fechadas. Esta pergunta não atende às diretrizes do Stack Overflow . Atualmente não está aceitando respostas. Quer melhorar esta questão? Atualize a pergunta para que esteja no tópico do Stack Overflow. Fechado há 5 anos . Melhore esta questão Pesquisei neste site para encontrar barras de progresso, mas as que …

112 html  css  progress-bar  progress  css-shapes 

Ok, então todos sabem que você pode fazer um triângulo usando isto: #triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } E isso produz um triângulo sólido preenchido. Mas como você faria um triângulo em forma de seta do tipo …

102 html  css  css-shapes 

Existe alguma maneira de fazer um corte de texto transparente de um efeito de fundo como o da imagem a seguir, com CSS? Seria triste perder todo o SEO precioso por causa das imagens substituindo o texto. Primeiro pensei em sombras, mas não consigo descobrir nada ... A imagem é …

90 css  svg  fonts  css-shapes