Hoje em dia, existem diversas linguagens de programação diferentes. Ao aprender especificamente sobre certa área, é importante entender propriedades, e o significado da linguagem em si. Nesse artigo, vamos aprender o que é Overflow CSS, e vamos ver sobre a linguagem em si.
- Como transferir WhatsApp do Android para iPhone
- Quem são os maiores influenciadores digitais do Brasil?
O que é Overflow CSS?
O overflow é uma propriedade do CSS utilizada para tratar conteúdos que ultrapassam os limites de um elemento.
O objetivo do overflow CSS é fazer com que conteúdos muito grandes possam caber dentro de uma página através do uso de barras de rolagem. A propriedade overflow possui quatro valores possíveis que veremos a seguir.
visible
Esse é o valor padrão da propriedade overflow, e mostra todo conteúdo que for colocado dentro do elemento, ainda que ultrapasse o tamanho definido.
hidden
O valor hidden é utilizado quando queremos esconder a parte de um elemento para que ele não passe do tamanho determinado. Geralmente é utilizado junto das propriedades width e height.
scroll
O valor scroll tem o mesmo comportamento do hidden, ocultando o conteúdo no limite do tamanho definido, porém, ele adiciona também uma barra de rolagem, permitindo acesso ao restante do conteúdo.
É importante saber que o valor scroll adicionará barras de rolagem ainda que elas não sejam necessárias. Esse comportamento pode ser visto no exemplo abaixo, que mostra uma barra vertical necessária e uma horizontal desnecessária.
auto
O valor auto, por sua vez, tem o mesmo comportamento do scroll: a única mudança é que o scroll só será adicionado caso seja necessário. Agora que entendemos sobre o que é o Overflow CSS, e suas propriedades, vamos ver algumas formas de uso.
Formas de uso do Overflow CSS
A propriedade overflow CSS pode ser utilizada de três formas diferentes que veremos.
overflow
Essa é a forma padrão, utilizada para aplicar o efeito tanto na horizontal, quanto na vertical:
overflow-x
Essa forma é utilizada para aplicar o overflow apenas na horizontal. Ao fazer isso, a parte vertical assumirá por padrão o valor auto.
overflow-y
Essa forma é utilizada para aplicar o overflow apenas na vertical. Ao fazer isso, a parte horizontal assumirá por padrão o valor auto.
Overflow-x e Overflow-y simplificados
Também é possível replicar o comportamento de overflow-x e overflow-y de forma simplificada utilizando o overflow CSS. Para isso, basta informar 2 valores, o primeiro valor equivale ao overflow-x, já o segundo, equivale ao overflow-y.
Agora que aprendemos especificamente sobre o overflox CSS, vamos ver abaixo sobre a linguagem em si.
O que é CSS?
CSS é chamado de linguagem Cascading Style Sheet e é usado para estilizar elementos escritos em uma linguagem de marcação como HTML. O CSS separa o conteúdo da representação visual do site.
Utilizando o CSS é possível alterar a cor do texto e do fundo, fonte e espaçamento entre parágrafos. Também pode criar tabelas, usar variações de layouts, ajustar imagens para suas respectivas telas e assim por diante.
CSS foi desenvolvido pelo W3C (World Wide Web Consortium) em 1996, por uma razão bem simples. O HTML não foi projetado para ter tags que ajudariam a formatar a página. Você deveria apenas escrever a marcação para o site.
Tags como <font> foram introduzidas na versão 3.2 do HTML e causaram muitos problemas para os desenvolvedores. Como os sites tinham diferentes fontes, cores e estilos, era um processo longo, doloroso e caro para reescrever o código. Assim, o CSS foi criado pelo W3C para resolver este problema.
A relação entre HTML e CSS é bem forte. Como o HTML é uma linguagem de marcação (o alicerce de um site) e o CSS é focado no estilo (toda a estética de um site), eles andam juntos.
CSS não é tecnicamente uma necessidade, mas provavelmente você não gostaria de olhar para um site que usa apenas HTML, pois isso pareceria completamente abandonado.
No inicio da Internet, apenas o HTML era utilizado na elaboração das páginas Web, com o tempo e a necessidade de mais alternativas de formatação dessas páginas, foram criadas novas tags e atributos de estilo no HTML para que ele pudesse atender essas necessidades de layout.
O CSS é uma ferramenta muito potente que possibilita criar diversas funcionalidades ao invés de usar JavaScript ou outra linguagem mais pesada. Se usado com moderação, CSS pode viabilizar uma ótima experiência ao desenvolvedor e usuários das páginas web.
Com o Cascading Style Sheets é possível criar animações complexas, criar efeitos com uso de parallax, que faz parecer que a imagem de fundo tem uma profundidade diferente um dos outros.
Agora diga para nós, você conseguiu entender o que é o overflow CSS em si? Teve dúvidas? Diga para nós nos comentários abaixo.