11 Segredos sobre CSS que você não deve perder

11 Segredos sobre CSS que você não deve perder
Author

Eshna Verma

Last updated November 2, 2016


  • 673 Views

Todo desenvolvedor da Web precisa de uma bolsa de truques para ter uma vantagem nesse negócio competitivo. Conhecer alguns segredos pode ajudar a consolidar sua reputação na programação da web, pois você pode obter efeitos de design que um desenvolvedor web típico não pode. Abaixo estão 11 segredos sobre CSS que você não deve perder se você deseja aprimorar suas habilidades de programação web:

1. Criando Transições sem Usar Animações JavaScript ou CSS

O uso de JavaScript de animações CSS pode ser um exagero em alguns efeitos de transição simples. Por exemplo, para fazer com que uma imagem pareça crescer de um pequeno ponto para uma imagem em tamanho normal, você pode usar várias transições semelhantes, diferenciadas por sua altura e largura. Muitas transições podem ser exibidas em poucos segundos para criar uma exibição semelhante a animação, sem ter que usar o JavaScript mais complicado de animações CSS. A maioria dos navegadores suporta esse recurso, exceto o Internet Explorer.

2. Rolando o elemento bem como o fundo

Muitos especialistas em CSS estão familiarizados com duas opções principais de rolagem: rolagem e correção. Com a opção de rolagem, você pode rolar a página. Por outro lado, se a página não puder ser rolada, a opção fixa estará em vigor. No entanto, alguns desenvolvedores não sabem sobre uma terceira alternativa recém-introduzida, local de anexação de plano de fundo. Sob essa nova opção, agora é possível rolar o elemento e o plano de fundo para criar ótimos efeitos visuais. No momento, a maioria dos navegadores suporta esse recurso CSS, incluindo o Opera, o Internet Explorer, o Safari e até o Google Chrome.

3. Posicionamento de conteúdo, preenchimento e Fronteiras

Basicamente, esse processo envolve o uso do recurso de dimensionamento de caixa do CSS. Geralmente, há duas alternativas, a opção de caixa de conteúdo padrão e a alternativa da caixa de borda. Se você optar por usar a alternativa de caixa de conteúdo, o preenchimento e a borda serão posicionados fora de uma largura e altura especificadas. Em suma, o tamanho da caixa de conteúdo não incluirá o cartão ou o preenchimento. Por outro lado, se você optar por usar a alternativa de caixa de cartão, o tamanho da caixa especificado também incluirá o preenchimento e a área de cobertura. O conhecimento dessa diferença pode ajudar você, como desenvolvedor web, a ter maior precisão ao posicionar vários elementos em uma página da web.

4. Criando conteúdo de largura fixa enquanto mantém o fluido de fundo

Esse segredo permite que os desenvolvedores da Web configurem páginas da Web de uma maneira que mantenha o conteúdo dentro de uma largura fixa enquanto o plano de fundo permanece livre para se ajustar à largura da janela do navegador. O fundo pode ser estilizado em diferentes configurações de exibição. Por outro lado, o conteúdo é colocado em um invólucro com largura fixa. Esse ótimo efeito pode ser alcançado usando a opção “margin auto”, que é capaz de explorar o espaço disponível em uma página do navegador usando medidas de porcentagem em vez de valores fixos absolutos. Uma ótima maneira de usar esse recurso é dedicar 50% da largura total ao conteúdo e permitir que o plano de fundo dinâmico ocupe de 50% a 100% do espaço do navegador, dependendo do tamanho da janela.

5. Alinhamento de texto em navegadores sem o recurso de hifenização

Alguns navegadores não têm recurso de hifenização para texto, o que geralmente resulta em texto ilegível quando o recurso de alinhamento justificado é usado na codificação CSS. Felizmente, alguns navegadores têm um recurso de hifenização automática. Para aqueles que não têm hifenização, é melhor evitar o uso de texto; o que torna o texto mais legível.

6. Diferenciação entre criança, irmão e outros elementos

CSS tem várias designações de caracteres para diferenciar entre diferentes elementos. A maioria das pessoas está familiarizada com o asterisco (*), que é usado para selecionar todos os elementos. No entanto, também é importante saber como selecionar outras categorias de elementos ao usar CSS. Por exemplo, o sinal de mais (+) pode ser usado para escolher o próximo elemento irmão enquanto o “~” pode ser usado para selecionar todos os elementos irmãos.

7. Aplicando Sombras a Bolhas de Fala de Pseudo-Elementos

Pseudo-elementos podem ser usados ​​para criar balões de fala. De fato, você também pode aplicar uma sombra ao balão de fala. O problema é que ele parecerá incomum e seu primeiro instinto será livrar-se dele por completo. Então, como você cria uma boa sombra em torno das bolhas do discurso do pseudo-elemento? É bem simples; tudo o que é necessário é usar os efeitos de filtro CSS, que adicionam automaticamente uma sombra decente às bolhas de fala.

8. Animando pseudo-elementos

A animação de pseudo-elementos não é possível na maioria dos navegadores. No entanto, muitos navegadores que podem manipular transformações CSS podem ajudar a criar efeitos de animação em pseudo-elementos. Tudo o que é necessário para criar esse efeito é usar rotacionar transformações no contêiner de pseudoelemento e depois aplicar uma transformação de rotação inversa de magnitude similar no elemento dentro do contêiner. O contêiner do pseudoelemento também pode ser inclinado para adicionar a esse efeito de animação dramático.
 

9. Como filtrar os avisos, erros, consistências lógicas e informações durante a depuração

O comando console.log () é um recurso extremamente útil para exibir informações de depuração no console do desenvolvedor. No entanto, a informação O modo de exibição pode ser um problema, pois esse comando pode exibir cadeias de caracteres e objetos, tornando a saída muito mais difícil de interpretar. Felizmente, é possível usar outros meios para obter informações de depuração específicas sobre as páginas CSS. Por exemplo, console.warn () exibe mensagens de aviso, enquanto console.error () exibe mensagens de erro e console.info () exibe mensagens informativas. Também é possível testar se expressões lógicas dentro da codificação são verdadeiras ou falsas usando o comando console.assert ().

10. Como fazer com que as animações CSS pareçam se mover sobre um caminho

A maioria dos especialistas em CSS sabe que não é possível criar animações CSS em um caminho, como é o caso de outras formas de animação, como o SVG. No entanto, usando as transformações de rotação, você pode criar esse efeito usando CSS. O que é necessário é criar transformações que possam alterar o sistema de coordenadas, não apenas o elemento. Isso resultará no efeito desejado, pois o elemento não se moverá dentro de um espaço restrito repetidas vezes.

11. Usando a propriedade de origem em segundo plano para reduzir as demandas de edição

Muitas vezes, um desenvolvedor tem que fazer edições adicionais ao tamanho depois de ter criado todos os elementos no lugar. Por exemplo, você pode editar o plano de fundo, criar caixas de conteúdo e até adicionar conteúdo, mas depois perceber que precisa de edição adicional para a página. Infelizmente, um único ajuste geralmente faz com que outros recursos fiquem desalinhados na página, exigindo, portanto, várias edições para fazê-los aparecer como deveriam. Por exemplo, alterações na altura podem distorcer o conteúdo, causando quebras desnecessárias no texto. No entanto, usando a propriedade de origem do plano de fundo, a edição pode ser mais flexível, pois os ajustes no preenchimento da caixa de conteúdo ou nos painéis não exigiriam edição adicional do conteúdo.

Conclusão

Acima estão alguns segredos úteis que você pode usar para melhorar a qualidade do seu desenvolvimento web CSS. Essas técnicas podem ajudar na criação de efeitos que a maioria das pessoas não consideraria possíveis usando recursos CSS básicos de desenvolvimento da web. Acontece que introduzir pequenos ajustes nos procedimentos de codificação regulares, bem como usar os recursos CSS disponíveis de forma criativa, pode ajudar a criar efeitos inspiradores na página da Web.

About the Author

Eshna is a writer at Simplilearn. She has done Masters in Journalism and Mass Communication and is a Gold Medalist in the same. A voracious reader, she has penned several articles in leading national newspapers like TOI, HT and The Telegraph. She loves traveling and photography.


{{detail.h1_tag}}

{{detail.display_name}}
{{author.author_name}} {{author.author_name}}

{{author.author_name}}

{{detail.full_name}}

Published on {{detail.created_at| date}} {{detail.duration}}

  • {{detail.date}}
  • Views {{detail.downloads}}
  • {{detail.time}} {{detail.time_zone_code}}

Registrants:{{detail.downloads}}

Downloaded:{{detail.downloads}}

About the {{detail.about_title && detail.about_title != null ? detail.about_title : 'On-Demand Webinar'}}

About the {{detail.about_title && detail.about_title != null ? detail.about_title : 'Webinar'}}

Hosted By

Profile

{{author.author_name}}

{{author.author_name}}

{{author.about_author}}

About the {{detail.about_title && detail.about_title != null ? detail.about_title : 'Ebook' }}

About the {{detail.about_title && detail.about_title != null ? detail.about_title : 'Ebook' }}

View {{detail.about_title && detail.about_title != null ? detail.about_title : 'On-Demand Webinar'}}

Webcast

Register Now!

Download the {{detail.about_title && detail.about_title != null ? detail.about_title : 'Ebook'}}!

First Name*
Last Name*
Email*
Company*
Phone Number*

View {{detail.about_title && detail.about_title != null ? detail.about_title : 'On-Demand Webinar'}}

Webcast

Register Now!

{{detail.about_title && detail.about_title != null ? detail.about_title : 'Webinar'}} Expired

Download the {{detail.about_title && detail.about_title != null ? detail.about_title : 'Ebook'}}

Email
{{ queryPhoneCode }}
Phone Number

Show full article video

Name Date Place
{{classRoomData.Date}} {{classRoomData.Place}} View Details

About the Author

{{detail.author_biography}}

About the Author

{{author.about_author}}