Ideias mais recentes de CSS criativo, Clip-path, Efeitos de Onda e MAIS
Domine Animações CSS Avançadas, Transições e Transformações e Pratique Cada Vez Mais
Classificação: 4.4 de 565 avaliações
1 hora total
12 palestras
Todos os níveis

Domine Animações CSS Avançadas, Transições e Transformações e Pratique Cada Vez Mais

CSS - abreviação de Cascading Style Sheets - é uma linguagem de programação que você usa para transformar suas páginas HTML em sites realmente bonitos. A propriedade clip-path é o seu ingresso para transformar os layouts monótonos e quadrados tradicionalmente associados ao design responsivo em algo mais interessante. Você começará a pensar fora da caixa, literalmente, e hexágonos, estrelas e octógonos começarão a tomar forma em suas páginas da web. Uma vez que você se familiarizar com o clip-path, não há limite para as formas que você pode gerar, apenas ajustando alguns valores. Embora o foco deste artigo seja no uso de clip-path com polígonos em CSS, todas as demonstrações fornecem uma referência a um SVG inline, a fim de obter suporte adicional no Firefox. Gerar uma forma SVG responsiva recortada é trivial depois de criar uma forma responsiva com o clip-path do CSS. Vamos analisar isso em detalhes mais tarde. A propriedade clip-path facilita o recorte de formas básicas usando as palavras-chave polygon, ellipse, circle ou inset, que fazem parte do módulo de exclusão do CSS. O polígono é a forma mais flexível de todas as formas disponíveis, pois permite especificar qualquer quantidade de pontos, um pouco como um caminho SVG. Os pontos fornecidos são pares de coordenadas X e Y que podem ser de qualquer unidade (por exemplo, pixel ou baseada em porcentagem). Por ser a mais flexível, também é a mais complexa e você provavelmente vai querer usar uma ferramenta para definir seus pontos. Recortar é quando cortamos uma parte de algo. No nosso caso, é uma operação que nos permite ocultar completamente ou parcialmente elementos em uma página da web. Outros dois conceitos relacionados ao recorte que usaremos neste artigo são o caminho de recorte e a região de recorte. O caminho de recorte é o caminho que usamos para recortar um elemento, ele marca nossa região de recorte. Pode ser uma forma básica ou um caminho poligonal complexo. A região de recorte inclui toda a área contida dentro do caminho de recorte. Qualquer coisa fora da região de recorte é recortada pelos navegadores. Isso inclui não apenas planos de fundo e outros conteúdos, mas também bordas, sombras de texto e assim por diante. Além disso, os navegadores não capturam nenhum evento, como passar o mouse ou clicar fora da região de recorte de um elemento. Mesmo que nosso elemento específico agora seja não retangular, o conteúdo ao redor dos elementos flui exatamente como teria se o elemento tivesse sua forma original. Para fazer com que os elementos circundantes fluam de acordo com a forma do elemento recortado, você precisará usar a propriedade shape-outside. As formas básicas do CSS do Módulo de Formas CSS fornecem uma maneira conveniente de usar o clip-path. As diferentes formas disponíveis são polígono, círculo, elipse e inserção; inserção é para formas retangulares. Com SVG, é possível criar uma forma usando SVG e, em seguida, recortar um elemento para essa forma por meio da sintaxe de URL. Existem duas maneiras de fazer isso: com uma referência a um SVG inline (ou seja, a marcação SVG existe na própria página) ou com uma referência a um documento SVG externo. Em ambos os casos, o elemento clipPath dentro do SVG é usado para envolver o elemento que determina o caminho de recorte, seja um círculo, polígono, caminho ou outro elemento. Compare a demonstração abaixo no Firefox e em um navegador WebKit ou Blink, como o Chrome, para identificar as diferenças. Imagens quadradas implicam falta de suporte do navegador. Observação: A terceira imagem não aparece no Safari. Apesar da depuração extensiva, não consigo resolver o problema. Agradeço se você encontrar a solução e deixar um comentário. Este é um curso em vídeo repleto de exemplos de código real para download. Você poderá levar o conhecimento, bem como o código de trabalho real, para seus projetos e garantir que eles se destaquem. Design responsivo da web Crie um site responsivo usando HTML5 CSS3 desenvolvedores front-end designer de sites Desenvolvedores Html Aprenda cursos e tutoriais de desenvolvimento web como criar um site responsivo usando Html CSS Javascript Construa um site responsivo do mundo real tutorial de front-end de javascript curso de desenvolvedor front-end tutoriais de desenvolvimento front-end Aprenda cursos e tutoriais de desenvolvimento web design de site responsivo do zero 2020 Design um site de negócios responsivo completo do zero html5 + css3 design web responsivo Aprenda design web responsivo moderno com exemplo passo a passo Site Html5 CSS3 Responsivo Web Design para iniciantes Crie um site de página única do zero Ajuda e inspiração para desenvolvimento web? Além de obter uma série de projetos práticos e úteis neste curso, você também pode visitar o CSS Animation.rocks para obter mais informações e até mesmo se inscrever em um boletim semanal repleto de tutoriais, inspiração e dicas para animação na web. Não há melhor momento para aprender Animações: Você fez uma escolha inteligente porque as Animações CSS 3 são a linguagem mais popular atualmente. Isso não é exagero. Essa popularidade e crescimento significam mais empregos e oportunidades do que nunca. Obtenha acesso a suporte rápido se você ficar preso: Não há nada pior do que ficar preso dez horas em um curso e não obter a ajuda necessária para continuar. Ficar preso faz parte do processo de aprendizado. É por isso que estou aqui para responder a todas as perguntas que surgirem. Garanto que este é o curso mais atualizado e envolvente disponível, e ele vem com uma garantia de devolução do dinheiro em 30 dias. Mal posso esperar para te ver lá dentro! - John Smith (Desenvolvedor e Designer Web - Desenvolvedor Full Stack).