3-CSS

Prévia do material em texto

<p>Tópicos gerais em CSS</p><p>0. Diferença entre os seletoes (~), (.), (+), (*), (espaço), etc</p><p>https://techbrij.com/css-selector-adjacent-child-sibling</p><p>0. Pseudo elementos em CSS</p><p>https://www.devmedia.com.br/css-conheca-os-pseudo-elementos/38183</p><p>https://www.youtube.com/watch?v=vMlrcOVr7po</p><p>0. Diferença entre pseudo elemento e pseudo classe</p><p>https://klauslaube.com.br/2012/09/05/pseudo-classes-e-os-pseudo-elementos.html#:~:text=Quando%20bater%20aquela%20d%C3%BAvida%20sobre,sem%C3%A2nticos%2C%20use%20pseudo%2Delementos.</p><p>0. Propriedade background shorthand</p><p>https://developer.mozilla.org/pt-BR/docs/Web/CSS/Shorthand_properties</p><p>0. Como setar a direção do transform (transform origin)</p><p>https://stackoverflow.com/questions/40712915/how-can-scale-in-positive-x-direction-only</p><p>https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin</p><p>0. Colocando imagem no background de uma tag</p><p>https://stackoverflow.com/questions/2504071/how-do-i-combine-a-background-image-and-css3-gradient-on-the-same-element</p><p>0. Deixando a imagem fixa no fundo com o background attatchment</p><p>https://css-tricks.com/almanac/properties/b/background-attachment/</p><p>0. Entendendo todos os parâmentros da propriedade linear-gradient()</p><p>https://blog.betrybe.com/css/css-gradient/</p><p>0. Entendendo positions absolute, relative, fixed, sticky etc.</p><p>https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/</p><p>0. Causas dos principais problemas com z-index</p><p>https://www.freecodecamp.org/news/4-reasons-your-z-index-isnt-working-and-how-to-fix-it-coder-coder-6bc05f103e6c/</p><p>0. Contexto de empilhamento no DOM com z-index</p><p>https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context</p><p>0. Align items e justify content no display flex, align contente e align self</p><p>https://developer.mozilla.org/pt-BR/docs/Learn/CSS/CSS_layout/Flexbox</p><p>https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox</p><p>https://codepen.io/origamid/pen/pPePeb</p><p>https://cursos.alura.com.br/forum/topico-align-content-76862</p><p>0. Criando um triângulo no CSS</p><p>https://css-tricks.com/snippets/css/css-triangle/</p><p>0. Como centralizar um objeto inline-block, text-align pois o objeto é tratado como texto</p><p>https://stackoverflow.com/questions/19076919/marginauto-doesnt-work-on-inline-block-elements#:~:text=Why%20'display%3A%20inline%2Dblock,margin%20is%20set%20to%20zero.</p><p>0. O que é um SVG e como adicionar um no meu CSS</p><p>https://rockcontent.com/br/blog/svg/</p><p>https://willianjusten.com.br/a-estrutura-do-svg</p><p>0. Livro sobre SVG</p><p>https://github.com/jonitrythall/svgpocketguide/blob/master/svgpocketguide-ptbr.md</p><p>0. Propriedade overflow</p><p>https://www.w3schools.com/css/css_overflow.asp</p><p>0. Utilizando o steps( ) dentro da propriedade Animation, e os parâmetros jump-start, jump-end, jump-none, jump-both</p><p>https://desenvolvimentoparaweb.com/css/jumps-steps-css-web-animation/</p><p>0. Estilizando bordas em css</p><p>https://www.youtube.com/watch?v=lvKK2fs6h4I</p><p>0. Hierarquia de estilização no CSS</p><p>https://medium.com/jaguaribetech/efeito-cascata-no-css-c55bda0a2ed4</p><p>0. Diferença entre :active e :focus, e o uso do tabindex para navegar pelo teclado</p><p>https://thisthat.dev/active-vs-focus/</p><p>0. Introdução ao Grid -layout, display: grid, grid-column, grid-row, grid-template-column, grid-template-row, grid-auto-row, grid-auto-colum: minmax(), gap, z-index.</p><p>https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout</p><p>0. Uso da palavra span no display grid</p><p>https://www.youtube.com/watch?v=-66-ctvXHGY</p><p>https://www.youtube.com/watch?v=EiNiSFIPIQE</p><p>0. Alinhamentos com display grid: align-content, justify-content, align-items, justify-items, align-self, justify-self</p><p>https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout</p><p>0. Maiores diferenças entre display grid e display flex</p><p>https://www.freecodecamp.org/news/the-main-differences-between-flexbox-and-css-grid-667c03461d2b/</p><p>https://www.wearediagram.com/blog/css-grid-vs.-flexbox-definitions-and-differences#:~:text=Flexbox%20is%20a%20one%2Ddimensional,smaller%20layouts%2C%20such%20as%20components.</p><p>https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout</p><p>0. Diferença entre min-width e max-width no dsign responsivo, (min para mobile first e max para desktop first)</p><p>https://nikitahl.com/difference-between-min-width-vs-max-width</p><p>0. Diferença entre @media screen , @media only screen</p><p>https://stackoverflow.com/questions/8549529/what-is-the-difference-between-screen-and-only-screen-in-media-queries</p><p>0. Porque não escrever o conteúdo das tags em uppercase</p><p>https://medium.com/@mandy.michael/why-you-shouldnt-write-your-content-in-uppercase-instead-use-css-b03ac2c65b99</p><p>0. Propriedade White-space e como podemos utilizar para determinar como o texto vai quebrar os espaços em branco no nosso container</p><p>https://css-tricks.com/almanac/properties/w/whitespace/</p><p>0. Estilizando barra de rolagem</p><p>https://blog.elvessousa.com.br/post/barras-rolagem</p><p>0. Utilizando line-height sem unidade</p><p>https://developer.mozilla.org/en-US/docs/Web/CSS/line-height</p><p>0. Explicando como a ordem dos valores em uma propriedade transform faz diferença (ex: transform: rotate() translate())</p><p>https://codepen.io/bali_balo/post/chaining-transforms</p><p>0. Background-clip</p><p>https://css-tricks.com/almanac/properties/b/background-clip/</p><p>0. Explicando rem e em e definindo a raiz para 62,5% de 16px (padrão do navegador), assim valores como 1.6 é igual a 16px e tals.</p><p>https://www.youtube.com/watch?v=cnuZKcGLxiQ</p><p>https://pingback.com/papodedev/css-rem-vs-em-vs-px-qual-usar</p><p>https://medium.com/@sascha.wolff/dont-use-rem-em-for-paddings-margins-and-more-94e19026b000</p><p>0. Criando efeito de um span dentro de um input deslizar para cima dele sem usar JS, apenas com CSS e pseudoclasse :placeholder-shown</p><p>https://stackoverflow.com/questions/16952526/detect-if-an-input-has-text-in-it-using-css-on-a-page-i-am-visiting-and-do-no</p><p>0. Clip-path no css</p><p>https://www.youtube.com/watch?v=Q-7bVgZQsjk</p><p>0. Alguns efeitos legais no CSS ao usar delay negativo por exemplo</p><p>https://css-tricks.com/css-animation-tricks/#:~:text=A%20negative%20animation%20delay%20starts,needs%20changing%20is%20the%20timing.</p><p>0. Prefers-color-scheme no medie queries do CSS</p><p>https://www.youtube.com/watch?v=uzlPTSD_YKU</p><p>0. Valor attr( ) para coletar valores de propriedades personalizadas em tags html e inseri-las dentro do content em after:: ou before:: pseudo-elementos</p><p>https://www.youtube.com/watch?v=XU2MxPWbvGM</p><p>https://css-tricks.com/css-attr-function-got-nothin-custom-properties/</p><p>0. Perspective( ), transform: perspective( ), perspective-origin e transform-style</p><p>https://css-tricks.com/almanac/properties/p/perspective/</p><p>https://css-tricks.com/how-css-perspective-works/</p><p>0. Custom CSS reset</p><p>https://www.joshwcomeau.com/css/custom-css-reset/</p><p>0. Diferença entre mxins e herança em SASS</p><p>https://stackoverflow.com/questions/44498297/in-sass-whats-the-difference-between-the-mixin-and-extend-directives</p><p>https://kirillibrahim.medium.com/sass-mixin-vs-extend-ac4dfb9892c4</p><p>https://medium.com/stories-from-the-keen/when-to-use-extends-vs-mixins-in-sass-b09d55abd53</p><p>0. Diferença entre @import @use e @forward</p><p>https://dev.to/mr_ali3n/use-forward-in-sass-2bab</p><p>0. Node sass e Dart sass</p><p>https://itnext.io/the-css-preprocessor-dilemma-node-sass-or-dart-sass-32a0a096572</p><p>https://dev.to/ccreusat/migrating-from-node-sass-to-sass-dart-sass-with-npm-3g3c</p><p>0. Comparando @functions com @mixins em sass</p><p>https://stackoverflow.com/questions/31239831/function-v-s-mixin-in-sass-lang-which-one-to-use#:~:text=Functions%20are%20useful%20specifically%20because,might%20have%20to%20use%20both.</p><p>https://dev.to/keinchy/sass--function-mixin-placeholder-extend-18g6</p><p>0. Word-wrap, word-break, overflow-wrap</p><p>https://stackoverflow.com/questions/17259916/difference-between-overflow-wrap-and-word-break</p><p>0. Algumas metodologias para escrever CSS de uma forma mais limpa e modular</p><p>https://www.webfx.com/blog/web-design/css-methodologies/</p><p>https://tableless.com.br/oocss-smacss-bem-dry-css-afinal-como-escrever-css/</p><p>0. Metodologia BEM para nomenclatura de classes e organização de pastas de CSS</p><p>https://en.bem.info/methodology/quick-start/</p><p>0. Metodologia SMACSS para nomenclatura de classes e organização de pastas CSS</p><p>http://smacss.com/</p>