Crie um ícone de joaninha com CSS e um único elemento divReviltec

É possível construir uma quantidade surpreendente de gráficos apenas com CSS. Vamos criar um ícone fofo de joaninha com apenas um único elemento div!

Como ser criativo com um único div

Antes de começarmos, você precisará de algumas habilidades em CSS. O principal problema com elementos únicos reside no fato de que estamos limitados ao número de “blocos de construção” que podemos usar. Felizmente, existem alguns truques:

Pseudoelementos

Pseudoelementos (também chamados de conteúdo gerado) não existem na própria marcação do documento (o DOM), mas são criados pelo CSS. Eles oferecem a possibilidade de adicionar ao seu elemento padrão dois outros que podem (mais ou menos) usar as mesmas propriedades.

Por exemplo, pegue esta marcação:

1	class="square">

Em seguida, aplique as seguintes regras de estilo:

.square {
    position: relative;
    background: blue;
    width: 50px;
    height: 50px;
}
.square::before {
    position: absolute;
    left: -50px;  
    content: '';
    height: 50px;
    width: 50px;
    display: block;
    background: green;
}
.square::after {
    position: absolute;
    left: 50px;
    content: '';
    height: 50px;
    width: 50px;
    display: block;
    background: red;  
}

Então vamos lá: um único div, mas três blocos de construção:

Os dois pontos duplos (::), em oposição a dois pontos simples, é a sintaxe CSS3. Ele diferencia pseudo elementos de pseudo seletorescomo :hover.

Uma coisa a observar é que os pseudoelementos serão exibidos no topo do elemento padrão, a menos que você dê a eles um valor menor z-index valor do que o pai. Os navegadores os interpretam como se estivessem localizados dentro de o elemento padrão. Se fôssemos representar os pseudoelementos com marcação real, o código ficaria assim:

1	class="square">
2	class="before">
3	class="after">
4

Sombras de caixa

Se os pseudoelementos sozinhos não fornecem blocos suficientes para construir seu ícone, você também pode usar sombras de caixa. Esta técnica permitirá que você crie tantos clones como você quiser. Vejamos um exemplo com um círculo:

.circle {
    position: relative;
    background: blue;
    width: 50px;
    height: 50px;
    border-radius:50%;
    box-shadow: -110px 0 0 -20px purple,
                -60px 0 0 -10px red,
                80px 0 0 10px green,
                180px 0 0 20px orange;
}

Como você pode ver, as sombras da caixa permitem reduzir ou aumentar o tamanho de sua forma inicial e colocá-la onde quiser.

O detalhe da propriedade box-shadow: 80px 5px 1px 10px green pode ser dividido da seguinte forma:

80px offset-x Isso permite que você posicione sua sombra ao longo do eixo x, tomando como origem o centro de sua forma original
5px offset-y Isso permite que você posicione sua sombra ao longo do eixo y, tomando como origem o centro de sua forma original
1px blur-radius Quanto maior esse valor, maior o desfoque, então a sombra fica maior e mais clara
10px spread-radius Valores positivos farão com que a sombra se expanda e cresça, valores negativos farão com que a sombra encolha
verde color A cor da sua forma 🙂

A primeira sombra definida sempre aparecerá acima das sombras subsequentes.

O inset value também nos dá várias possibilidades:

.ball {
    position: relative;
    background: blue;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: inset 20px 0 0 -10px yellow,
                inset -20px 0 0 -10px red;
}

Gradientes

Assim como as sombras, os gradientes CSS podem ser combinados e colocados de forma independente. Usar gradientes para criar formas é um pouco mais complicado do que as propriedades anteriores, então vamos focar em um exemplo “simples”.

Neste exemplo, criaremos quatro círculos diferentes usando gradientes radiais e os distribuiremos dentro do elemento pai.

.background {
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 10%,transparent 10%,transparent 100%),
                radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 30%,transparent 32%,transparent 100%),
                radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 50%,transparent 52%,transparent 100%),
                radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 60%,transparent 62%,transparent 100%);
    background-color: red;
    background-repeat: no-repeat;
    background-position: 0px 0px, 50px 0px, 50px 50px, 0px 50px;
    background-size: 50px 50px;
    width: 100px;
    height: 100px;
    position: relative;
}

Para entender esta demonstração, você deve imaginar uma grade no elemento. Cada célula da grade seria um gradiente diferente. Nesse caso, as células têm 50px por 50px (background-size: 50px 50px;). Eu os espalhei deliberadamente dentro do elemento, mas esteja ciente de que eles também podem ser sobrepostos. Cada célula pode ser colocada em um eixo x e y separado, com origem no canto superior esquerdo do elemento base (background-position: 0px 0px, 50px 0px, 50px 50px, 0px 50px;).

A propriedade Gradient em detalhes: background: radial-gradient(ellipse at center, rgba(0, 0, 0, 1)

ellipse forma: Pode ser círculo ou elipse, neste exemplo ambos fazem as mesmas coisas.
at center posição: Também pode ser expressa como background-position(center = 50% 50%).
rgba(0, 0, 0, 1) 10% cor e limite: Aumente o valor limite para ampliar o círculo.
transparent 10% cor e limite: Este valor limite define o fim da sua cor anterior. Especifique um limite ligeiramente superior ao limite anterior para permitir arestas mais suaves.
transparent 100% cor e limite: O gradiente será então transparente de 10 a 100%.

Para ajudar na criação de gradientes CSS, você pode usar um gerador como o Gradient Editor da Collorzilla.

Agora que vimos como criar o máximo de blocos de construção a partir de um único div, vamos construir nossa joaninha!

Como criar um ícone com um único div

Passo 1: O corpo

Aqui vem a única linha HTML deste tutorial:

1	class="ladybug">

Para permitir que nosso ícone seja facilmente redimensionável, usaremos unidades de medida flexíveis; em e %. Graças a isso, você poderá redimensionar como desejar, simplesmente alterando o tamanho da fonte do elemento. Todos os navegadores modernos oferecem suporte ao CSS que estamos usando, portanto, permitirei que você altere os prefixos do fornecedor, dependendo de suas necessidades.

Começaremos dando forma e cor ao corpo da nossa joaninha:

.ladybug {
    position: relative;
    font-size: 60px;
    width: 1.8em;
    height: 2em;
    border-radius: 50%;
    background-color: #E11;
}

Agora vamos aplicar os pontos no corpo usando o radial-gradient propriedade.

.ladybug {
    position: relative;
    font-size: 60px;
    width: 1.8em;
    height: 2em;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 30%,transparent 33%,transparent 100%),
        radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 50%,transparent 55%,transparent 100%),
        radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 50%,transparent 55%,transparent 100%),
        radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 40%,transparent 43%,transparent 100%),
        radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 40%,transparent 43%,transparent 100%),
        radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 45%,transparent 50%,transparent 100%),
        radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 45%,transparent 50%,transparent 100%);    background-color: #E11;
    background-repeat: no-repeat;
    background-position: 0.66em 0.2em,0.3em 0.6em,1em 0.6em,0.9em 1.1em,0.4em 1.1em,1.1em 1.5em,0.2em 1.5em;
    background-size: 0.5em 0.5em;
}

Excelente trabalho – terminamos com o corpo por enquanto.

Passo 2: A cabeça

Esta parte é a mais rápida. Vamos desenhar um meio círculo preto e colocá-lo em cima do corpo. Para isso usaremos o pseudo elemento ::before.

.ladybug::before {
    content: '';
    position: absolute;
    display: block;
    height: 0.5em;
    width: 1.2em;
    top: -0.24em;
    background: black;
    left: 0.3em;
    border-radius: 50% 50% 0% 0% / 100% 100% 0 0;
}

Etapa 3: Os olhos

Aqui vamos criar olhos usando o pseudo elemento ::after e o CSS box-shadow propriedade. Começamos criando nosso círculo básico (a pupila) depois vamos “clonar” esse elemento para criar o branco do olho, o contorno e o outro olho.

.ladybug::after {
    content: '';
    position: absolute;
    display: block;
    height: 0.1em;
    width: 0.1em;
    background: black;
    top: -0.1em;
    left: 0.5em;
    border-radius: 50%;
    box-shadow: 0 0 0 0.1em white,0em 0 0 0.13em black,0.7em 0 0 0 black,0.7em 0 0 0.1em white,0.7em 0 0 0.13em black;
}

Passo 4: As pernas

Você deve estar pensando “temos um elemento sobrando”. Não se preocupe, vamos reutilizar a mesma caixa de sombra usada para os olhos.

1	.ladybug::after {
2	content: '';
3	position: absolute;
4	display: block;
5	height: 0.1em;
6	width: 0.1em;
7	background: black;
8	top: -0.1em;
9	left: 0.5em;
10	border-radius: 50%;
11	box-shadow: 0 0 0 0.1em white,0em 0 0 0.13em black,0.7em 0 0 0 black,0.7em 0 0 0.1em white,0.7em 0 0 0.13em black,1.2em 0.5em 0 0.02em black,1.35em 1.1em 0 0.02em black,1.2em 1.65em 0 0.02em black,-0.5em 0.5em 0 0.02em black,-0.65em 1.1em 0 0.02em black,-0.5em 1.65em 0 0.02em black;
12	}

Nosso ícone de joaninha está finalmente pronto!

Passo 5: O bônus!

Na verdade, ainda não terminamos. Aqui está o código CSS bônus para animar nossa joaninha ao passar o mouse:

1	@keyframes ladybug
2	{
3	0% {
4	background-position: 0.66em 0.2em,0.3em 0.6em,1em 0.6em,0.9em 1.1em,0.4em 1.1em,1.1em 1.5em,0.2em 1.5em;
5	}
6
7	50% {
8	background-position: 0.66em 0.8em,0.66em 0.8em,0.66em 0.8em,0.66em 0.8em,0.66em 0.8em,0.66em 0.8em,0.66em 0.8em;
9	}
10
11	100% {
12	background-position: 0.66em 0.2em,0.3em 0.6em,1em 0.6em,0.9em 1.1em,0.4em 1.1em,1.1em 1.5em,0.2em 1.5em;
13	}
14	}
15
16	.ladybug:hover {
17	animation: ladybug 1s;
18	}

Começamos definindo alguns quadros-chave que nomeamos ladybug. Em seguida, acionamos esses quadros-chave em ação no estado de foco do nosso ícone. Cada um dos quadros-chave altera a posição de fundo das manchas de nossa joaninha

Resultado final

Aqui está um lembrete do que criamos:

Conclusão

Através deste tutorial, espero ter mostrado o potencial do CSS e o que é possível com um único elemento HTML. É sempre aconselhável considerar o suporte do navegador para as propriedades CSS discutidas neste tutorial, certificando-se de que elas sejam degradadas normalmente.

Mais inspiração

Relacionado

Posted by admin

Tagged with

1	.square {
2	position: relative;
3	background: blue;
4	width: 50px;
5	height: 50px;
6	}
7	.square::before {
8	position: absolute;
9	left: -50px;
10	content: '';
11	height: 50px;
12	width: 50px;
13	display: block;
14	background: green;
15	}
16	.square::after {
17	position: absolute;
18	left: 50px;
19	content: '';
20	height: 50px;
21	width: 50px;
22	display: block;
23	background: red;
24	}

1	.circle {
2	position: relative;
3	background: blue;
4	width: 50px;
5	height: 50px;
6	border-radius:50%;
7	box-shadow: -110px 0 0 -20px purple,
8	-60px 0 0 -10px red,
9	80px 0 0 10px green,
10	180px 0 0 20px orange;
11	}

1	.ball {
2	position: relative;
3	background: blue;
4	width: 50px;
5	height: 50px;
6	border-radius: 50%;
7	box-shadow: inset 20px 0 0 -10px yellow,
8	inset -20px 0 0 -10px red;
9	}

1	.background {
2	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 10%,transparent 10%,transparent 100%),
3	radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 30%,transparent 32%,transparent 100%),
4	radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 50%,transparent 52%,transparent 100%),
5	radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 60%,transparent 62%,transparent 100%);
6	background-color: red;
7	background-repeat: no-repeat;
8	background-position: 0px 0px, 50px 0px, 50px 50px, 0px 50px;
9	background-size: 50px 50px;
10	width: 100px;
11	height: 100px;
12	position: relative;
13	}

1	.ladybug {
2	position: relative;
3	font-size: 60px;
4	width: 1.8em;
5	height: 2em;
6	border-radius: 50%;
7	background-color: #E11;
8	}

1	.ladybug::before {
2	content: '';
3	position: absolute;
4	display: block;
5	height: 0.5em;
6	width: 1.2em;
7	top: -0.24em;
8	background: black;
9	left: 0.3em;
10	border-radius: 50% 50% 0% 0% / 100% 100% 0 0;
11	}