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 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
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 ferramenta e depois usá-la pode...
Gostaria de cercar um número em um círculo como nesta imagem: Isso é possível e como é
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 o resultado final seja...
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;...
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 30 pixels, apareceria...
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...
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...
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 e começa no meio de cada lado do elemento, resultando em...
É 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...
Como você desenha um círculo usando HTML5 e CSS3? Também é possível inserir texto
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...
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...
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...
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 é o fundo do...
Estou tentando criar uma forma como na imagem abaixo com uma borda inclinada em apenas um lado (por exemplo, o lado inferior) enquanto as outras bordas permanecem retas. Tentei usar o método de borda (o código é fornecido abaixo), mas as dimensões da minha forma são dinâmicas e, portanto, não...
Acabei de descobrir um truque de CSS bacana. Confira o violino ... .tooltiptail { display: block; border-color: #ffffff #a0c7ff #ffffff #ffffff; border-style: solid; border-width: 20px; width: 0px; height: 0px; } .anothertail { background-image: