Forem: Marina

Dev challenge - Algorithms

Marina — Mon, 24 Jun 2024 00:47:34 +0000

This is a submission for DEV Computer Science Challenge v24.06.12: One Byte Explainer.

Explainer

Algorithms are like a list with the necessary step-by-step instructions to solve a problem in the best way. It's like a good cake recipe, in which you can't bake it without first adding the ingredients

Additional Context

Simple concept, but fundamental to all code

Estruturas de estilização CSS -pt.2

Marina — Fri, 21 Jun 2024 18:08:42 +0000

Prefácio

Sobre as aulas que tive a respeito das estruturas CSS (QUE TEM ANOTAÇÕES SEM FIM!!), ficou faltando apenas comentar a respeito das estruturas de fontes, textos e algumas configurações sobre sombras, mas não vou me aprofundar.

PS: É muito clichê trazer conteúdo de estudo e ainda mais sobre desenvolvimento web que está tão sobrecarregado ultimamente?

Fontes

Quais tipos de fontes utilizamos?

Serif: Fontes serifadas
sans-serif: Sem serifa
monospace: Letras com largura fixa
hadwriting: Manuscritas, com aparência a caligrafia humana
fantasy: Fontes decorativas

Configurações de fonte

font-family: Determina quais serão as fontes que o elemento deve ter
font-size: Determina o tamanho da fonte
fonte-weight: Espessura da fonte
font-style: Estilo da fonte (italic, oblique, normal, bold)
font-variant: Maiúscula e minúscula
font-stretch: Estreitamento do texto
line-height: Altura da linha

Fontes importadas / personalizadas

@font-face: Fonte personalizada
@import: Importar fontes externas

Google fonts contém uma vasta galeria de fontes personalizadas

Textos

text-alingn: Alinhar os textos em um elemento
text-ident: Recuo na linha
letter-spacing: Espaçamento entre cada caractere
word-spacing: Espaçamento entre cada palavra

text-transform: Definir quais caracteres vão estar em maiúsculo ou minúsculo:

capitalize: Primeira letra maiúscula
uppercase: Todo o texto em maiúsculo
lowercase: Tudo minúsculo

text-decoration: Adiciona ou apaga linhas:

none, underline, line-through, overline
line, style, color, thikness

white-space: Arruma os espaços em branco:

normal: Os espaços são combinados em apenas 1 quebra de linha ignorada
nowrap: Sem quebra de linha e espaço
pre: Preserva o espaço em branco
pre-line: Sem espaço, permite quebra de linha
pre-wrap: Espaços preservados com quebra de linha
break-spaces: Quebra os espaços para a próxima linha

word-break: Definem o quanto o texto deve ter uma quebra de linha

normal
break-all/keep-all

writing-mode: Define a orientação do texto

horizontal-tb
vertical-rl
vertical-lr

Sombras

box-shadow: Sombra em caixa
drop-shadow (filter): Sombra em PNG
text-shadow: Sombra no texto

opacity: Transparência variando de 0 a 1

Estruturas de estilização de página CSS

Marina — Thu, 20 Jun 2024 22:06:22 +0000

Estilização CSS:

Ferramentas que moldam o conteúdo da página

Width: largura } auto/ initial
heigt: altura } min/ max
inherit: mantém a medida já definida
margin: top/ left/ right/ bottom
padding: espaço do conteúdo interno com o externo
box sizing: retorna o elemento aos tamanhos pré-definidos

Cores no CSS

RGB: Valores entre 0 e 255 para definir os tons de vermelho, verde e azul, separados por virgula. Exemplo:

#rgb{
   color: rgb(250, 30, 70);
}

O valor 250 representa o red,30 representa o green, e 70 o blue, que no caso resultaria em algo parecido como:

RGBA: Muito semelhante ao RGB, mas se adiciona o fator transparência que varia entre 0 e 1;
HEX: Hexadecimal definidas entre 0 e 9, e A até F, onde F é o valor mais alto, seguindo um padrão parecido do rgb. Exemplo:

00FF00 -> Verde
FF0000 -> Vermelho
0000FF -> Azul

#hex{
  color: #03BB76;
}

Resultaria em algo como:

HSL (hue, saturation, lightness): definindo a cor através na sua matiz (0 vermelho, 120 verde, 240 azul), saturação (0% tom de cinza, 100% cor total), luminosidade (0% preto, 100% branco) - Existe também o HSLA, que conta com o fator alpha (0 a 1) para medir o nível de transparência. Exemplo:

#hsl{
  color: hsla(120, 100%, 50%, 1.0);
}

Essa programação resultaria em uma cor completamente verde, mas pode buscar outros tons utilizando o circulo cromático HSL.

Fundos

background-color: cor sólida do fundo
background-image: referenciar imagem no fundo
linear-gradient: degrade linear
radial-gradient: degrade circular
repeating: repetir efeito

background-size: define o tamanho do fundo do elemento, acompanhada das configurações:

auto: ajuste automático
cover: cobrir todo o espaço do elemento
contain: redimensionar o conteúdo para que apareça a imagem completa/ sem cortes
valor: Definir o tamanho da imagem dentro do elemento

Repetição background-repeat: define o eixo a qual a imagem se repete:

repeat: máximo de repetições possíveis
repeat-x: só repete no eixo x (horizontal)
repeat-y: só repete no eixo y (vertical)
space: se repete em ambos os eixos sem ser cortada com espaços
round: se repete em todas as direções sem ser cortada, apenas redimensionada
no-repeat: sem repetições

Background-position: Posicionamento das imagens de fundo
center, left, right, x%,y%

background-attachment: Como a imagem vai se comportar de acordo com a janela do navegar

fixed: não sai do lugar
scroll: ela está fixada a um objeto
local: "rola" junto ao conteúdo

background-origin: Define a área de posicionamento da imagem

padding-box: canto de origem junto ao padding
border-box: a imagem começa junto a área externa da borda
content-box: inferior ao padding, alinhada ao conteúdo do elemento

background-flip: Define se a cor do elemento cobre ou não as bordas

padding-box: alinhada ao padding
border-box: alinhada a borda
content-box: preenche a área do conteúdo
clip-text: fundo no texto (a cor tem que ser transparente)

background-bland-mode: efeitos no fundo dos elementos

Bordas

border-width: tamanho que o contorno terá
border-style: tipo do contorno
border-color: cor do contorno
border-radius: Arredonda borda

border-image

source: definir o caminho da imagem
widht: largura da imagem da borda
repeat: controlar se a imagem repete ou não
outset: distancia da borda sobre o elemento
slice: dividir em regiões

Conteúdo (imagem ou vídeo)

object-fit : Como o conteúdo de um elemento se comporta na caixa estabelecida

fill: preencher todo o espeço e distorcer
contain: não fica distorcida, mas vai se encaixar nas medidas estabelecidas
cover: preencher todo o espaço sem distorcer
none: ignora as medidas do objeto pai e usa suas medidas originais
scale-down: menor configuração de imagem sem distorcer

object-position: Centralizar a imagem

eixo x e eixo y
left, right, center, top, bottom

Estruturas de declaração de pagina em CSS

Marina — Thu, 20 Jun 2024 13:58:34 +0000

O que é o CSS

CSS é uma linguagem de estilização de paginas em estilo cascata, serve para adicionar layouts, animações, formas geométricas, filtros, contadores, entre outras configurações.

Formas de declarar o CSS

CSS inline : Adiciona o CSS utilizando o atributo style dentro das tags HTML;
CSS interno : Adicionado dentro da tag <head> da página HTML;
CSS externo : É criado um arquivo com a extensão .css com todas as regras que vão ser aplicadas e esse arquivo no HTML com a tag <link>.

<head> 
   <link rel="stylesheet"
    href="estilos.css" />
<head/>

Seletores

Tag: busca elementos por uma tag
ID(#): busca elementos através de ID
Classes(.): atributo "class"
Seletor de atributo ([atrib]): elementos com atributos específicos
Universal (*): Seleciona todos os elementos HTML

Combinadores

Combinadores unem níveis de seletores de tags a quais as configurações serão aplicadas em comum.

Descendente: tags que descendem de outra são aplicadas com um espaço entre eles. Exemplo:

div span{
    regra: CSS;
}

Filho: Todos os elementos filhos imediatos conectados com ">". Exemplo

ul > li{
   regra: CSS;
}

Irmão adjacente: O primeiro elemento que segue diretamente conectados com "+". Exemplo:

ul + li {
   regra: CSS;
} 
//Nesse caso, havendo mais que um elemento li na lista, somente o primeiro receberá a regra

Geral de irmãos: Conecta todos os elementos que tiverem sob o mesmo pai com "~". Exemplo:

p ~ span{
    regra: css;
}