Como o layout das páginas está se tornando cada vez mais difícil, os desenvolvedores precisam de acesso a mais unidades de medições para incorporar design. Além do interesse habitual, EM e REM, e pixels, há unidades mais recentes de medição VW e VW, tanto VMIN quanto Vmax relacionadas a eles, fornecendo maneiras mais poderosas para criar design adaptativoQue muitas vezes pode ajudar a abandonar o uso de pontos de transição @media.
Nós vamos além do interesse
Unidades de medição tradicionais CSS criam os seguintes problemas no Web Design:
- Unidade de porcentagem de medição nem sempre funciona, conforme esperado. Os desenvolvedores precisam se lembrar dos depósitos externos, definindo as dimensões dos elementos. Você não deve usar uma medida de porcentagem de medição para definir a altura do elemento do corpo. Gravando Font-Tamanho: 50% Especifica o tamanho do texto igual a metade do tamanho padrão e não estabelece a dependência entre o tamanho do texto e o tamanho do elemento que contém.
- É quase impossível criar as figuras da forma perfeita para diferentes tamanhos da janela do navegador. É muito difícil garantir que o elemento seja perfeitamente quadrado e ao mesmo tempo adaptativo.
Unidades de medição VW e VH amplamente resolvem todos esses problemas.
Apoiando proporções ideais
Usando unidades de medição VW e VH, é muito fácil criar figuras perfeitas em páginas da web. Essas unidades podem ser usadas para definir as dimensões de quase todos propriedades CSS.. Portanto, se você precisar criar um elemento que, com qualquer janela do navegador, leva 20% de sua largura e permanece quadrada, você precisa especificar os mesmos valores das propriedades de largura e altura usando a unidade de medição VW:
Div.twentysquare (fundo: # 999 ; Largura: 20VW; Altura: 20VW; )
Veja a demonstração deste exemplo abaixo, vá para o link e tente alterar o tamanho da unidade de visualização para ver a alteração no tamanho das figuras.
Usando o mesmo método, você pode criar facilmente um retângulo cuja altura é o dobro quanto a largura com qualquer tamanho da janela do navegador:
Div.networect (largura: 20vw; altura: 40vw;)
Defina um banner A proporção de tamanho perfeito é muito simples com o seguinte código CSS:
Div.goldenrect (largura: 100VW; altura: 61 .8VW; fundo: vermelho;)
Para a dimensão ideal de texto em um bloco adaptativo, envolva-se em todo o volume fornecido, você só precisa definir o tamanho da fonte nas unidades de medição VW.
Tradução - djurka.
Do autor: Retângulo dentro de retângulos: é assim que nossas páginas da Web sempre foram construídas. Tentamos libertar-se dessas restrições por um longo tempo usando CSS para criar figuras geométricas, mas esses números nunca afetaram o conteúdo que está dentro dos elementos decorados, ou sobre como outros elementos estão localizados na página relativamente decorados.
A nova especificação CSS para os números altera a posição atual das coisas. Apresentado pela Adobe em meados de 2012, visa dar designers da Web a capacidade de alterar o fluxo de conteúdo dentro e em torno de números relativamente complexos - algo que não poderíamos ter alcançado antes, mesmo usando o JavaScript.
Por exemplo, preste atenção em como o texto flui redondo fotos no seguinte design. Sem números, o texto teria uma forma retangular - jogando uma recepção refinada que levanta o design para o próximo nível.
Observe como o texto leva uma forma arredondada ao longo das bordas da placa neste exemplo. Usando figuras CSS, podemos criar um design similar e para uma página da web.
Vamos analisar como as figuras funcionam e como você pode começar a usá-las.
Suporte ao navegador
As figuras de CSS ainda são suportadas apenas no WebKit Nightly e Chrome Canary, mas seu módulo de nível 1 atingiu o status da recomendação candidata, portanto, as propriedades e a sintaxe definidas na especificação são bastante estáveis. Levará um pouco de tempo até que o resto dos navegadores comece a mantê-los. Este nível é concentrado nessas propriedades das figuras que alteram o fluxo de conteúdo ao redor da figura. Em particular, concentra-se na propriedade de forma exterior e associada a ele.
Em combinação com outras capacidades recentes, como aparar e sobreposição de máscara, filtros CSS e cobrança e mesclagem, os números do CSS nos permitirão criar um design requintado mais complexo sem ter que recorrer a editores gráficos, como o Photoshop e o InDesign.
Os futuros Níveis de CSS Os números também prestarão atenção ao design do conteúdo dentro das figuras. Por exemplo, hoje, basta simplesmente criar uma figura rombica no CSS: basta transformar o elemento para 45 graus e, em seguida, virar o conteúdo dentro dele em direção opostaDe modo que está localizado na página horizontalmente. Mas o conteúdo dentro do losango não assumirá a forma apropriada e permanecerá sempre retangular. No momento em que a propriedade Shape-Inside é implementada, podemos tornar o conteúdo muito rômbico, criando uma marcação, semelhante à imagem abaixo.
Logo as figuras CSS também permitirão o texto dentro como esses diamantes em vez de aparar ou usar o estouro, o texto em si foi localizado em relação às bordas do recipiente.
Para usar figuras CSS hoje no Canary Chrome, você precisa ativar a caixa de seleção que torna as características experimentais acessíveis.
Criando CSS Figura
Você pode aplicar a figura ao elemento usando as propriedades das formas. Você passa a figura da figura na qualidade do valor. A figura de função é a parte do código onde você passa os parâmetros que definem a figura que você deseja aplicar ao item.
As figuras podem ser criadas usando uma das seguintes funções:
Cada figura é determinada por um conjunto de pontos. Algumas funções recebem pontos como parâmetros; Outros - Aceite parâmetros compensados, mas eles acabarão por extrair números no elemento como um conjunto de pontos. Analisaremos os parâmetros para cada uma dessas funções nos exemplos.
A figura também pode ser determinada a partir da imagem removendo o canal alfa. Quando a imagem é transmitida para a propriedade Shape, o navegador recupera a figura da imagem com base no valor do limiar de imagem de forma. A figura é determinada por pixels, cujo valor alfa está acima do limite especificado. A imagem deve ter a compatibilidade do COR. Se a razão fornecida por algum motivo não estiver disponível (por exemplo, ela não existe), não será aplicada nenhuma figura.
As figuras a seguir adotam as funções descritas acima como valores:
forma fora: faz com que o conteúdo desligue a forma (fora)
forma - dentro: conteúdo leva a forma da figura do interior
Você pode usar a propriedade Forma-fora em combinação com margem de forma, a fim de adicionar um travessão externa em torno da figura, que moverá o conteúdo da figura, deixando o espaço entre eles. Além disso, como e forma-fora recebe a propriedade de margem de forma, a forma-dentro recebe a propriedade de preenchimento de forma, que adiciona um recuo interno.
Usando as propriedades da figura ou função, declarando o elemento da forma, você pode fazer apenas com um código CSS de uma linha:
Elemento (forma-fora: círculo (); / * conteúdo irá lidar com o círculo definido como elemento * /)
Elemento (forma-fora: url (caminho / para / image-with-shape.png);)
Elemento (forma - fora: URL (caminho / para / imagem - com - forma. PNG);) |
Mas ... Se você aplicar este código CSS para item, a figura não será aplicada a ela se as seguintes condições não forem atendidas:
O elemento deve estar flutuando. Os futuros níveis de figuras CSS nos permitirão identificar números para elementos não flutuantes, mas não há tal possibilidade.
O elemento deve ser especificado. A altura e a largura especificadas pelo elemento serão usadas para estabelecer o sistema de coordenadas.
Como você viu nas funções acima, as figuras são determinadas por um conjunto de pontos. Como os pontos têm coordenadas, o navegador requer um sistema de coordenadas para saber onde cada ponto deve estar localizado no elemento. Assim, o exemplo funcionaria acima, se tivesse o seguinte:
Elemento (float: esquerda; altura: 10em; largura: 15em; forma fora: círculo ();)
Elemento (float: esquerda; altura: 10em; largura: 15em; forma - fora: círculo ();) |
No entanto, a tarefa de certos tamanhos não é afetada por sua capacidade de resposta (vamos falar sobre isso mais tarde). Como cada figura é definida como um conjunto de pontos localizados usando um par de coordenadas, a alteração nas coordenadas do ponto afetará a figura criada. Por exemplo, a próxima figura mostra um hexágono que pode ser criado usando a função Polygon (). A figura consiste em seis pontos. Alterar a coordenada horizontal do ponto laranja mudará a figura final e também afetará a colocação do conteúdo dentro / fora de qualquer item ao qual a figura é aplicada.
Se o elemento flutuar e for igual à borda direita, uma figura é aplicada a ela, o conteúdo à esquerda irá alterar seu local quando uma das coordenadas de laranja dentro da função Polygon () será alterada.
Figura do bloco de referência
As figuras CSS são definidas e criadas dentro do bloco de referência (caixa de referência), onde a figura é desenhada. Além da altura e largura do elemento, os componentes do modelo de bloco do elemento - caixa de margem, caixa de conteúdo, caixa de preenchimento e caixa de borda são também diretórios para determinar a figura do elemento.
Por padrão, a unidade de retorno externo (caixa de margem) é usada como referência, portanto, se o elemento ao qual você aplicar a figura já possui um travessão externa abaixo, a figura terminará na borda do retorno externo e não a fronteira. Se você quiser usar alguns outros valores de um modelo de bloco, poderá especificá-los com o recurso da figura que você passa na propriedade da figura:
forma-fora: Círculo (250px a 50% 50%) caixa de preenchimento;
forma - fora: Círculo (250px a 50% 50%) Padding - caixa; |
A palavra-chave de caixa de preenchimento nesta regra determina a aplicação da figura e a restrição na forma da caixa de preenchimento (a área da arrogância interna). A função Circle () determina o círculo, seu tamanho e colocação em relação ao item.
Definição de figuras usando funções
Vamos começar com o fato de que vamos lidar com o texto da informação da imagem circular do avatar do usuário, como para o perfil do usuário ou para o recall.
Usando formas CSS, o texto em torno da imagem do usuário é simplificado, em vez de salvar uma forma retangular..
Vamos usar a função Circle () para aplicar uma forma redonda à imagem do perfil usando a seguinte marcação:
Lorem Ipsum Dolor Sente-se Amet, Consertetur Adipisicing Elit. Harum Itaque Nam Bandite Eveniet Enim Eligendi Quae Adipisci?
Assumenda Blanditiis Voluptas Tempore Porro Quibusdam Beatae Deleniti Quod Asperiores Sapiente Dolorem Erro! Quo Nam Quasi Soluta Reprehenderit Laudantium Optio Ipsam Ducimus Conseatur Enim Fuga Quibusdam Mollitia Nesciunt Modi.
< img src = "//api.randomuser.me/0.3.2/portraits/men/7.jpg"alt \u003d "(! lang: imagem do perfil" / > !}< p > Lorem Ipsum Dolor Sente-se Amet, Consertetur Adipisicing Elit. Harum Itaque Nam Bandite Eveniet Enim Eligendi Quae Adipisci?< / p > < p > Assumenda Blanditiis Voluptas Tempore Porro Quibusdam Beatae Deleniti Quod Asperiores Sapiente Dolorem Erro! Quo Nam Quasi Soluta Reprehenderit Laudantium Optio Ipsam Ducimus Conseatur Enim Fuga Quibusdam Mollitia Nesciunt Modi.< / p > |
Você pode perguntar: "Por que não podemos aplicar raios fronteiriços para arredondamentos?" Resposta: A propriedade RADIUS Fronteira não afeta a localização do conteúdo dentro e fora do item ao qual é aplicado. Isso afeta apenas as fronteiras do elemento ou fundo. O fundo é cortado em cantos arredondados, todos. O conteúdo dentro do elemento permanecerá retangular, e o conteúdo fora do elemento também se comportará, como se o elemento permaneça retangular.
Vamos usar a propriedade Raio Fronteira para fazer a imagem redonda - aqui está o que fazemos para arredondar as imagens ou outros itens na página:
iMG (flutuador: esquerda; largura: 150px; altura: 150px; fronteira - raio: 50%; margem - direita: 15px;) |
Sem figuras CSS, o texto vê uma foto como um quadrado e conecta a figura quadrada e não.
No navegador, que não suporta formas CSS, o conteúdo em torno da imagem redonda será localizado como se não fosse redondo. É assim que será parecido em navegadores antigos. Para alterar a racionalização do conteúdo em torno de uma figura específica, use as propriedades da figura.
img (flutuador: esquerda; largura: 150px; altura: 150px; raio de fronteira: 50%; forma-fora: círculo (); margem de forma: 15px;)
img (float: esquerda; largura: 150px; altura: 150px; raio - raio: 50%; forma - fora: círculo (); forma - margem: 15px;) |
Com a ajuda deste código, o texto será capaz de "ver" a figura redonda aplicada à imagem e irá contendê-la, conforme mostrado na primeira tela Schot. (Você pode olhar para o resultado.) Nos navegadores que não suportam as figuras, ele será mostrado na segunda imagem.
Você pode usar a função Circle () em forma pura Ou transmitir parâmetros para ele. Aqui está sua sintaxe oficial:
círculo () \u003d círculo ([
Os pontos de interrogação mostram que esses parâmetros são opcionais e podem ser perdidos. Os parâmetros que você perder farão os valores padrão. Quando você usa círculo () como é, em vez de indicação direta da posição, por padrão, o centro do círculo estará no centro do item ao qual você a aplica.
Você pode definir um raio de círculo usando qualquer comprimento de comprimento (px, em, pt, etc.) Você também pode definir o raio usando os parâmetros usando o lado mais próximo ou mais distante, mas o lado mais próximo é o valor padrão, que significa que o navegador assumirá a distância do raio do centro do elemento para o lado mais próximo, mais distante usa a distância do centro para o outro lado.
forma - fora: Círculo (lado mais distante a 25% 25%); / * Determina o círculo cujo raio é igual a metade do lado mais longo localizado no ponto com 25% de 25% no sistema de coordenadas * / forma-dentro: círculo (250px em 500 px 300px); / * Determina o círculo, cujo centro está localizado em 500px horizontalmente e 300px verticalmente, com raio de 250px * /
A função de elipse () funciona, bem como círculo (), com o mesmo conjunto de valores, exceto que, em vez do parâmetro RADIUS, é preciso dois: um raio ao longo do eixo, o outro - no eixo-y.
elipse () \u003d elipse ([
A função Inset () não está diretamente relacionada a um círculo ou elipse, é usado para criar formas retangulares dentro do elemento. Como os itens são ambos retangulares, não é necessário criar retângulos. Em vez disso, a inserção () pode nos ajudar a criar retângulos com cantos arredondados, para que o conteúdo flua cantos arredondados.
A função Inset () leva de um a quatro parâmetros de deslocamento, que determinam o deslocamento em relação às bordas da unidade de referência, o que determina a localização do retângulo dentro do elemento. Os cantos arredondados são indicados exatamente da mesma maneira que o raio de fronteira, usando um dos quatro valores, em combinação com a palavra-chave.
inset () \u003d inserção (deslocamento (1,4)?)
inset () \u003d inserção (deslocamento (1, 4) [redonda< border - radius > ] ? ) |
O código a seguir criará um retângulo com cantos arredondados em um elemento flutuante.
Elemento (float: esquerda; largura: 250px; altura: 150px; forma-fora: caixa de fronteira de inserção (0px redonda 100px);)
Elemento (float: esquerda; largura: 250px; altura: 150px; forma - fora: borda de inserção (0px redonda 100px) - caixa;) |
A última característica das figuras é polígono (), que define números ambíguos mais complexos usando qualquer número de pontos. A função leva um conjunto de coordenadas de vapor, onde cada par determina a posição do ponto.
No exemplo a seguir, a imagem flutuante está localizada na borda direita, ocupando toda a altura da tela e usando as exibições da janela Exibir. Queremos o texto à ampulheta de escalada à esquerda dentro da imagem e usamos a função Polygon () para determinar a figura não padrão para a imagem.
CSS O código para a imagem acima é a seguinte:
img.right (float: à direita; Altura: 100VH; largura: Calc (100VH + 100VH / 4); Forma-fora: Polígono (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60 %, 45% 40%);)
img. Direito (flutuador: à direita; Altura: 100VH; Largura: Calc (100VH + 100VH / 4); Forma - fora: Polígono (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%);) |
Você pode definir as coordenadas dos pontos que determinam a figura em unidades de comprimento ou porcentagem, como eu. Este código dará o resultado necessário, mas como você vê, a função do valor não afeta as partes restantes da imagem fora da figura especificada. O fato é que o uso da função da figura para o elemento - se é uma imagem ou um contêiner ou algo mais - não afetará nada além da área de racionalização do conteúdo. Fundo, bordas e tudo o mais permanecerá inalterado.
Para enviar visualmente o polígono criado, precisamos "aparar" partes da imagem fora da figura. Isso nos ajudará a propriedade Clip-Path da especificação do módulo de mascaramento CSS.
A propriedade do caminho de clipe leva as mesmas funções da forma e o significado como propriedade da figura. Se darmos a mesma figura poligonal que usamos para a propriedade de forma fora, a propriedade do caminho de clipe, ele fará a parte da imagem fora da figura.
img.right (float: à direita; Altura: 100VH; largura: Calc (100VH + 100VH / 4); Forma-fora: Polígono (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60 %, 45% 40%); / * apartando imagens no contorno da figura * / Clip-caminho: polígono (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45 % 40%);)
img. Direito (flutuador: à direita; Altura: 100VH; Largura: Calc (100VH + 100VH / 4); Forma - fora: Polígono (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%); / * Aparar imagens no contorno da figura * /clip - Caminho: Polígono (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%); ) |
O resultado parece com isso:
A propriedade Clip-Path ainda é suportada junto com prefixos, isto é. Ele funcionará em Chrome com a adição de prefixo -Webkit. Você pode olhar para a demonstração.
A propriedade Clip-Path é um maravilhoso satélite para a figura da figura, pois ajuda a apresentar visualmente as formas criadas e as partes da cultura fora da figura, para que você seja muitas vezes usado para usá-los juntos.
A função polígono () também aceita opcional palavra-chave Para preencher, que pode ser diferente de zero ou paresivo. Ele define como áreas de interseção dentro do polígono vão se comportar. Confira a propriedade SVG Fill-Rule para detalhes.
Definindo uma figura usando uma imagem
Para definir a figura usando a imagem, o canal alfa deve estar presente na imagem, a partir da qual o navegador extrairá a imagem.
O valor é determinado por pixels cujo valor alfa é maior que um determinado limite. O valor do limite padrão é OK (completamente transparente) ou você pode especificá-lo diretamente usando a propriedade de limiar de imagem de forma. Assim, qualquer pixel opaco pode ser usado como parte da figura definida pela imagem.
Os números do nível futuro CSS podem permitir a alteração do uso de dados de brilho da imagem em vez de canal alfa. Se isso acontecer, o limite de imagem de forma será estendido para incluir um limiar ou para brilho ou para o canal alfa, dependendo do estado do comutador.
Usamos a seguinte imagem para determinar o elemento figura e forçar o texto a afirmar:
Claro, se você aplicou o plano de fundo para o elemento, o fundo precisará aparar fora da figura especificada. A propriedade Mask-Image (com os prefixos correspondentes) no módulo Masks pode ajudar nisso, uma vez que a propriedade Clip-Path não aceita o valor do canal alfa como um valor. O resultado parece com isso:
Se você criar figuras complexas, poderá ser conveniente definir a figura usando a imagem. Isso permitirá o uso do canal de imagem alfa no Photoshop, em vez de definir pontos manualmente.
Você também será conveniente usar a imagem em vez da função da figura quando você tem muitos elementos flutuantes ou exceções de weolate dentro do elemento - porque este momento Não há possibilidade de declarar várias figuras para um elemento. Mas se a imagem contiver várias áreas, o navegador removerá essas áreas e os usará.
CSS figuras em design responsivo
Os números CSS podem vêm para um design responsivo? A especificação atual para a forma-fora inclui este momento, porque permite definir o tamanho do elemento ou em porcentagem ou em unidades de comprimento e os pontos que definem a figura (os parâmetros da função de figura) também podem ser especificados como uma porcentagem. Isso significa que um elemento com uma determinada forma pode ser totalmente responsivo, bem como qualquer elemento flutuante com dimensões especificadas em porcentagem.
A propriedade de forma dentro ainda não é responsiva, mas é porque foi deslocada para um módulo Nível 2. Muitas de suas restrições atuais irão para o próximo nível.
Ferramentas para criar figuras
A criação de figuras complexas usando funções pode ser uma tarefa demorada, especialmente se você criar uma figura com uma pluralidade de pontos e coordenadas usando polígono (). Felizmente, a equipe da plataforma Web Adobe está trabalhando na produção de ferramentas interativas para tornar este processo muito mais fácil. O Bear Travis criou uma coleção de ferramentas para criar figuras que nos permitem criar visualmente figuras poligonais. A ferramenta gera a função da figura. Pode ser útil, mas tem suas limitações se você for criar uma figura com base em uma imagem específica, porque a ferramenta não fornece essa oportunidade.
Uma ferramenta mais avançada e interativa foi desenvolvida pela plataforma da Adobe Web. A ferramenta foi lançada recentemente como uma extensão para o editor livre de colchetes. Ele permite que você visualize e edite as formas no navegador e tenha a capacidade de visualização on-line, que atualiza os valores da forma na tabela de estilo quando você as altera na página. Dá um visual instantâneo comentários Suas alterações, permitindo que você veja como as figuras interagem com outros elementos na página.
Editando uma figura poligonal na direção do navegador usando o modo de visualização entre parênteses. Entrada de tela feita Razvan Caliman.
Esta ferramenta se tornará indispensável, pois facilita a criação, edição e desdém de figuras. Razvan Caliman, que explica como ligar para o editor de forma entre parênteses e começar a usá-lo.
Futuro: exceções CSS
A especificação CSS das figuras foi uma especificação dedicada às figuras e exceções CSS, mas foi dividida. Enquanto a figura CSS especifica as propriedades de forma interior e externa, exceção CSS definem propriedades que causam conteúdo para contender elementos não flutuantes, por exemplo, tendo posicionamento absoluto. Eles possibilitam fortalecer toda a figura com o conteúdo de lados diferentes, conforme mostrado na imagem abaixo.
No futuro, as exceções CSS permitirão que o conteúdo contenda tal figura como um corte, como mostrado na revenda da revista. O cobre também pode ser redondo, e o texto também vai tocá-lo..
Novo nível de figuras
A atual especificação do CSS das figuras é apenas o primeiro passo. Logo, novas oportunidades nos darão mais controles. É necessário criar e fortalecer o conteúdo, por isso será mais fácil para nós virar layouts em um design vivo com a ajuda de apenas algumas linhas de código. Até o momento, os editores de especificação estão focados na conclusão da forma fora, e você pode ver o suporte de figuras CSS grande quantidade navegadores até o final de 2014.
Você pode usar os números hoje como parte da estratégia de melhoria progressiva, sabendo que eles têm uma substituição aceitável em navegadores não apoiados. Recentemente, comecei a aplicá-los no meu site e a substituição parece bastante aceitável. Para um design mais complexo, você pode usar um script para verificar o suporte do navegador e fornecer qualquer substituição se não houver suporte. Você também pode usar os testes Modernizr usando este script para verificar se a propriedade Forma-fora é mantida ou baixar sua própria montagem que inclui este teste.
As figuras CSS nos permitem criar outra ponte entre impressão e web design. Exemplos neste artigo são simples, mas devem lhe dar a base para criar um projeto comparável a uma revista ou cartaz, sem se preocupar se você pode recriá-lo na tela. Para que você estudei - de marcas não retangulares à animação de figuras - agora o tempo de experimentos.
Vlad Merzehevich
Em sites, os triângulos são aplicados de forma todos e fechados como parte dos elementos de design, por exemplo, eles servem como um ponteiro para algum objeto, direcionando a atenção do leitor para o lugar certo. Além disso, triângulos realizam funções decorativas, fazendo blocos onde são usados, mais elegantes e modernos. Na Fig. 1 mostra um exemplo de usar um triângulo no design.
FIG. 1. Triângulos em Web Design
Faça diretamente um triângulo ferramentas CSS. É impossível, então dois métodos permitem adicionar à borda e transformar.
Usando a fronteira.
Embora as fronteiras criadas através da propriedade fronteiriça não estejam diretamente relacionadas a triângulos, é a borda ser usada para isso com mais frequência. Se você definir a largura zero e a altura do elemento, bem como instalar uma borda suficientemente espessa, veremos um conjunto de quatro triângulos (Fig. 2). Para clareza, os limites de todos os lados são definidos cores diferentes.
FIG. 2. Adicionando fronteira ao item
Deixando apenas a fronteira desejada, e o resto fazendo transparente, recebemos o triângulo da cor desejada (Fig. 3).
FIG. 3. Elemento com fronteiras transparentes
O exemplo 1 mostra a adição de um triângulo ao bloco através de um pseudo-elemento :: depois.
Exemplo 1. Bloco com Triângulo
Para elementos absolutamente posicionados, a largura e a altura zero não são necessárias.
Devido à combinação de fronteiras, você pode obter mais quatro tipos de triângulos, que, em combinação com já mencionado, nos dá oito opções. Sua aparência e código exigido são mostrados na tabela. 1.
| Visualizar | Estilo |
|---|---|
| fronteira: 20px sólido transparente; Fronteira: 20px verde sólido; | |
| fronteira: 20px sólido transparente; Fronteira-direita: 20px verde sólido; | |
| fronteira: 20px sólido transparente; Fundo de fronteira: 20px verde sólido; | |
| fronteira: 20px sólido transparente; Fronteira-esquerda: 20px verde sólido; | |
| fronteira: 20px sólido transparente; Fronteira: 20px verde sólido; Fronteira-direita: 20px verde sólido; | |
| fronteira: 20px sólido transparente; Fronteira-direita: 20px verde sólido; Fundo de fronteira: 20px verde sólido; | |
| fronteira: 20px sólido transparente; Fundo de fronteira: 20px verde sólido; Fronteira-esquerda: 20px verde sólido; | |
| fronteira: 20px sólido transparente; Fronteira-esquerda: 20px verde sólido; Fronteira: 20px verde sólido; |
Da tabela, pode-se ser visto que os limites invisíveis ocupam um lugar, considere-o quando os itens de posicionamento. Estilo, também, é necessário adicionar zero largura e altura ou usar a propriedade Position, como foi feito no Exemplo 1.
O triângulo pode ser feito por outra forma, se você definir uma espessura diferente dos limites. Então, o código para criar um bloco mostrado na Fig. 4 é dado no Exemplo 2.
FIG. 4. Triângulo agudo.
Exemplo 2. Um triângulo afiado
Com a fronteira, obtemos triângulos coloridos sólidos, para criar um quadro mostrado na Fig. 5 Tem que ir na astúcia e impor um elemento em cima de outro com um pouco de deslocamento. Mais uma vez, os elementos pseudo nos ajudarão: antes e: após (Exemplo 3).
FIG. 5. Quadro com canto
Exemplo 3. Sobreposição Triângulos
Devido ao fato de que aplicamos um único elemento em cima de outro, este método é adequado apenas para preenchimento monótono e não é adequado para gradientes ou imagens de fundo.
Uso de transformação
Com a ajuda da transformação, podemos girar o elemento quadrado em 45 ° e obter um losango a partir dele. Este não é um triângulo como tal, então precisamos deixar a parte saliente para nós, e o resto do esconder-se após outro elemento (Exemplo 4).
Exemplo 3. Transformação.
O resultado deste exemplo é mostrado na Fig. 6.
FIG. 6. Triângulo com sombra
Gerador CSS3 on-line para criar efeitos gráficos íngremes e obter seu código CSS. Você pode mudar separadamente estilos para diferentes estados, como: pairar: ativo, etc. Suas mãos recebem uma interface para criar sombras complexas, gradientes, efeitos 3D, efeitos com texto e muito mais. O projeto tem seus próprios efeitos de galeria dos quais você pode iniciar seu desenvolvimento. Uma característica distintiva do projeto é que você pode obter estilos para elemento separado.Por exemplo, para uma sombra ou gradiente.
Quando você entra no site pela primeira vez, nos oferecemos para criar um espaço em branco para o campo de entrada, botões, bloquear ou selecionar um padrão pronto da galeria do projeto. Vamos começar com algo simples, por exemplo, da galeria de figuras geométricas. Escolha a partir da galeria sinal yin-yang e clique em "Obtenha o código" no canto superior direito:
Será mostrado css prontos para o desenvolvimento atual, bem como um exemplo de html Código. A galeria do projeto tem ainda mais de 20 espaços em branco para várias figuras CSS e, claro, você pode criar o seu próprio.
Passo por seção da galeria que vemos os botões, campos de texto, Efeitos diretamente para o texto, as figuras e conjuntos acima mencionados de gradientes. Nós jogamos com os efeitos do texto:
site - Wow é 3D!
Deve notar que o CSS gerado é surpreendentemente muito limpo e legível, o que é muito satisfeito. Vamos olhar para algum tipo de botão fofo:
botão legal do site.
Recursos adicionais incluem salvar sua condição no navegador localstorage. Se você acidentalmente fechou a guia, a próxima vez que for para o site, todas as suas alterações permanecerão com você.
Ao usar fontes não padrão com Google Fonts. As gozarss os adiciona automaticamente como um exemplo de HTML. No meu caso, para o texto e os botões que se parece com isso:
O Final CSS é bastante volumoso, então eu trago apenas no final do artigo:
Yin-yang (
Flutuar: esquerda;
Largura: 96px;
Altura: 48px;
Posição: Relativo;
Fronteira: 2px sólido # F81;
Largura de borda inferior: 50px;
-Webkit-border-raio: 100%;
Raio de fronteira: 100%;
Cor: RGBA (0,0,1);
-O-Texto-Overflow: clipe;
Texto-Overflow: clip;
-Webkit-Transform: Rotatez (-45DEG) Scalex (1) ScaleZ (1) ScaleZ (1);
Transformar: Rotatez (-45DEG) Scalex (1) ScaleZ (1) ScaleZ (1);
Origem de transformação: 50% 50% 0;
Yin-Yang :: antes (
Largura: 12px;
Altura: 12px;
Posição: Absoluto;
Contente: "";
Topo: 50%;
Esquerda: 0;
Fronteira: 18px sólido # F81;
-Webkit-border-raio: 100%;
Raio de fronteira: 100%;
Fonte: normal normal 100% / normal Arial, Helvetica, Sans-Serif;
Cor: RGBA (0,0,1);
-O-Texto-Overflow: clipe;
Texto-Overflow: clip;
Antecedentes: RGBA (255,255,255,1);
Sombra de texto: nenhuma;
-Webkit-transform-origem: 50% 50% 0;
Origem de transformação: 50% 50% 0;
}
Yin-Yang :: Depois (
Largura: 12px;
Altura: 12px;
Posição: Absoluto;
Contente: "";
Topo: 50%;
Esquerda: 50%;
Borda: RGBA sólida 18px (255,255,25,1);
-Webkit-border-raio: 100%;
Raio de fronteira: 100%;
Fonte: normal normal 100% / normal Arial, Helvetica, Sans-Serif;
Cor: RGBA (0,0,1);
-O-Texto-Overflow: clipe;
Texto-Overflow: clip;
Fundo: # F81;
Sombra de texto: nenhuma;
-Webkit-Transform: Scalex (1) ScaleZ (1) ScaleZ (1);
Transformar: Scalex (1) Scaley (1) ScaleZ (1);
-Webkit-transform-origem: 50% 50% 0;
Origem de transformação: 50% 50% 0;
}
Desfrute-CSS-3DText (
Cursor: Ponteiro;
Borda: nenhuma;
Fonte: normal normal normal 72px / normal "passero um", Helvetica, Sans-Serif;
Cor: RGBA (255,255,255,1);
Alinhamento de texto: centro;
-O-Texto-Overflow: clipe;
Texto-Overflow: clip;
Text-Shadow: 0 1px 0 RGB (204.204444), 0 2px 0 RGB (201,201,201), 0 3px 0 RGB (187.187.187), 0 4px 0 RGB (185,185,185), 0 5px 0 RGB (170.170.170), 0 6PX 1PX RGBA (0 0,00.0980392), 0 0 5px RGBA (0,0,0 0,0980392), 0 1PX 3PX RGBA (0,0,0 0,0,298039), 0 3PX 5PX RGBA (0,0,0,0, 0,2), 0 5px 10px rgba (0.0.0.0.247059), 0 10px 10px RGBA (0.0.0.0.2), 0 20px 20px RGBA (0.0.0.0.14902);
-Webkit-transition: todos os 300ms cúbicos-bezier (0,42, 0, 0,58, 1);
-moz-transição: todos os 300ms cúbicos-bezier (0,42, 0, 0,58, 1);
-O-transição: todos os 300ms cúbicos-bezier (0,42, 0, 0,58, 1);
Transição: Todos os 300ms cúbicos-bezier (0,42, 0, 0,58, 1);
-Webkit-Transform: Scalex (1) ScaleZ (1) ScaleZ (1);
Transformar: Scalex (1) Scaley (1) ScaleZ (1);
-Webkit-transform-origem: 50% 50% 0;
Origem de transformação: 50% 50% 0;
}
Desfrute-CSS-3DText: pairar (
Cor: RGBA (169,214,169,1);
Texto-Shadow: 0 1px 0 RGBA (255,255,25,1), 0 2PX 0 RGBA (255,252,58,25,1), 0 3PX 0 RGBA (255,25,25,1,28,22,25 , 2,1,25,25,2,2,2,28,2), 0 5px 0 RGBA (255.255,255, 1), 0 6px 1px RGBA (0,0,0 0,0980392), 0 0 5px RGBA (0,0,0 0,09803922), 0 1PX 3PX RGBA (0,0,0 0,0,0 0,98039), 0 3PX 5PX RGBA (0,0,0,0 0,0,0), 0 - 5px 10px RGBA (0,0,0 0,0.247059), 0 -7px 10px RGBA (0,0,0,0,0,0,0,0), 0 -15px 20px RGBA (0,0, 0,0.14902);
-Webkit-transition: todos os 200 ms cúbicos-bezier (0,42, 0, 0,58, 1) 10ms;
-Moz-transição: todos os 200 ms cúbicos-bezier (0,42, 0, 0,58, 1) 10ms;
-O-transição: todos os 200 ms cúbicos-bezier (0,42, 0, 0,58, 1) 10ms;
Transição: Todos os 200ms Cubic-Bezier (0,42, 0, 0,58, 1) 10ms;
}
Botão de feedback (
Exibir: bloco inline;
Flutuar: esquerda;
Posição: Relativo;
Cursor: Ponteiro;
Margem: 0 2% 0 0;
Preenchimento: 12px 22px;
Estouro: oculto;
Borda: nenhuma;
Fonte: Normal Normal Bold 1.6em / Normal "Sincipate", Helvetica, Sans-Serif;
Cor: # ECF0F1;
-O-Texto-Overflow: clipe;
Texto-Overflow: clip;
-Webkit-
Background-origem: caixa de preenchimento;
Background-clip: caixa de fronteira;
Plano de fundo: Auto Auto;
-Webkit-box-sombra: 0 10px 0 0 RGBA (178,49,49,1);
Caixa-sombra: 0 10px 0 0 RGBA (178,49,49,1);
Text-Shadow: 0 0 0 RGB (196,80,78), 1px 1px 0 RGB (196,80,78), 2px 2px 0 RGB (196,80,78), 3PX 3PX 0 RGB (196,80,78 ), 4px 4px 0 RGB (196,80,78), 5px 5px 0 RGB (196,80,78), 6px 6px 0 RGB (196,80,78), 7px 7px 0 RGB (196,80,78), 8px 8px 0 RGB (196,80,78), 9PX 9PX 0 RGB (196,80,78), 10px 10px 0 RGB (196,80,78), 11px 11px 0 RGB (196,80,78), 12px 12px 0 RGB (196,80,78), 13px 13px 0 RGB (196,80,78), 14px 14px 0 RGB (196,80,78), 15px 15px 0 RGB (196,80,78), 16px 16px 0 RGB (196,80,78), 17px 17px 0 RGB (196,80,78), 18px 18px 0 RGB (196,80,78), 19px 19px 0 RGB (196,80,78), 20px 20px 0 RGB (196 80,78), 21px 21px 0 RGB (196,80,78), 22px 22px 0 RGB (196,80,78), 23px 23px 0 RGB (196,80,78), 24PX 24PX 0 RGB (196,80, 78) , 25px 25px 0 RGB (196,80,78), 26px 26px 0 RGB (196,80,78), 27px 27px 0 RGB (196,80,78), 28px 28px 0 RGB (196,80,78), 29px 29px 0 RGB (196.80.78), 30px 30px 0 RGB (196,80,78), 31px 31px 0 RGB (196,80,78), 32px 32px 0 RGB (196,80,78), 33px 33px 0 RGB ( 196,80,78), 34px 34px 0 RGB (196,80,78 ), 35px 35px 0 RGB (196,80,78), 36px 36px 0 RGB (196,80,78), 37px 37px 0 RGB (196,80,78), 38px 38px 0 RGB (196,80,78), 39px 39px 0 RGB (196,80,78), 40px 40px 0 RGB (196,80,78), 41px 41px 0 RGB (196,80,78), 42px 42px 0 RGB (196,80,78), 43px 43px 0 RGB (196,80,78), 44px 44px 0 RGB (196,80,78), 45px 45px 0 RGB (196,80,78), 46px 46px 0 RGB (196,80,78), 47px 47px 0 RGB (196.80.78), 48px 48px 0 RGB (196,80,78), 1px 1px 0 RGBA (196.80,78.6.9.980392), 2 px 2px 0 RGBA (196.80,78,9 0,9,960784), 3px 3px 0 RGBA (196.80,78.0.941176), 4px 4px 0 RGBA (196.80,78,0.921569), 5px 5px 0 RGBA (196.80,78,09,901961), 6px 6px 0 RGBA (196.80.78 0.882353), 7px 7px 0 RGBA (196.80,78.0.862745), 8px 8px 0 RGBA (196.80,78,078,43137), 9px 9px 0 RGBA (196.80,78,9 0 RGBA (196.80), 10px 10px 0 RGBA (196.80,78, 0,8), 11px 11px 0 RGBA (196.80,78,0780392), 12px 12px 0 RGBA (196.80,78,0760784), 13px 13px 0 RGBA (196,80,78,0,0,0,0,0,0, 14px 0 RGBA (196.80,78.78,0721569), 15px 15px 0 RGBA (196.80,78,0701961), 16px 16px 0 RGBA ( 196,80,78,0. .682353), 17px 17px 0 RGBA (196,80,78,90,0658824), 18px 18px 0 RGBA (196,80,78,0,0639216), 19px 19px 0 RGBA (196,80,78,90,0619608 ), 20px 20px 0 RGBA (196,80,78.0.6), 21px 21px 0 RGBA (196.80,78,0 580392), 22px 22px 0 RGBA (196.80,78,07,78,07784), 23px 23px 0 RGBA (196.80,78,0,0,541176), 24px 24px 0 RGBA (196.80,78,0521569), 25px 25px 0 RGBA (196.80,78.0498039), 26px 26px 0 RGBA (196.80,78.0478431), 27px 27px 0 RGBA (196, 80,78.0.458824), 28px 28px 0 RGBA (196.80,78,99,939216), 29px 29px 0 RGBA (196.80,78.0. 419608), 30px 30px 0 RGBA (196.80,78.0.4), 31px 0 RGBA (196,80,78.0.380392), 32px 32px 0 RGBA (196.80,78.0360784), 33px 33px 0 RGBA (196,80, 78.0.341176), 34px 34px 0 RGBA (196,80,78.0317647), 35px 35px 0 RGBA (196.80,78.6.9.98039), 36px 0 RGBA (196.80,78,0,278431) 37px 37px 0 RGBA (196.80,78.0.258824), 38px 38px 0 RGBA (196,80,78 0,239216), 39px 39px 0 RGBA (196.80.78 0,219608), 40 px 40px 0 RGBA (196, 80,78,0.2), 41px 41px 0 rgba (196.80,78,0,080392), 42px 42px 0 rgba (196,80,78,0.156863), 43px 43px 0 rgba (196.80,78,0,7255), 44px 44px 0 rgba (196,80,78 , 017647), 45px 45px 0 RGBA (196.80,78,99,980392), 46px 46px 0 RGBA (196.80,78.0784314), 47px 47px 0 RGBA (196.80, 78.0788235), 48px 48px 0 RGBA (196.80,78 , 0,792157), 50px 50px 0 RGBA (196,80,78,0);
-Webkit-Transform: Scalex (1) ScaleZ (1) ScaleZ (1);
Transformar: Scalex (1) Scaley (1) ScaleZ (1);
-Webkit-transform-origem: 50% 50% 0;
Origem de transformação: 50% 50% 0;
}
Botão de feedback: pairar (
Alinhamento de texto: centro;
Fundo: -Webkit-linear-gradiente (-90Deg, # CE6161 0, # EF6664 100%);
Fundo: -Moz-linear-gradiente (180Deg, # CE6161 0, # EF6664 100%);
Fundo: gradiente linear (180Deg, # CE6161 0, # EF6664 100%);
Posição de fundo: 50% 50%;
Background-origem: caixa de preenchimento;
-Webkit-background-clip: border-box;
Background-clip: caixa de fronteira;
-Webkit-background-size: Auto Auto;
Plano de fundo: Auto Auto;
}
Botão de feedback: ativo (
Top: 5px;
Fundo: -Webkit-linear-gradiente (-90Deg, # FF8583 0, # FF5350 100%);
Fundo: -Moz-linear-gradiente (180Deg, # FF8583 0, # FF5350 100%);
Fundo: gradiente linear (180DEG, # FF8583 0, # FF5350 100%);
Posição de fundo: 50% 50%;
-Webkit-background-Origem: caixa de preenchimento;
Background-origem: caixa de preenchimento;
-Webkit-background-clip: border-box;
Background-clip: caixa de fronteira;
-Webkit-background-size: Auto Auto;
Plano de fundo: Auto Auto;
-Webkit-box-Shadow: 0 5px 0 0 RGBA (178,49,49,1);
Box-Shadow: 0 5px 0 0 RGBA (178,49,49,1);
