Programação css-shapes
Perguntas com a marcação «css-shapes»
As CSS-Shapes são feitas pelo uso de Cascade Styling Sheets para transformar elementos HTML em formas e imagens. As formas mais básicas incluem triângulos, quadrados e círculos, mas podem ser transformadas em formas mais avançadas, como corações, octógonos e estrelas.
Como usar CSS para envolver um número com um círculo?
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
Como crio uma lágrima em HTML?
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
Como esse CSS produz um círculo?
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
css: como desenhar um círculo com texto no meio?
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
Controlar o comprimento do traçado da borda tracejada e a distância entre os traços
É 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
Raio da borda em porcentagem (%) e pixels (px) ou em
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 desenhar um círculo na página html?
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
CSS Progress Circle [fechado]
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
Como fazer uma flecha extravagante usando CSS?
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
Texto transparente cortado do fundo
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 é …