Do CYMK ao RGB - A arte de transformar Design em Developer

Uma breve explicação do que vi no mundo Front-end, quando me deparei na minha transição de Designer Gráfico para desenvolvedor Front-end

Transcript

2. QUEM SOU Front-end figuarnieri.github.io figuarnieri
3. Do CYMK ao RGB A arte de transformar Design em Developer
4. A grande dificuldade do Designer e do Front-end é fazer um layout intuitivo, rápido e bonito para o usuário (em uma sprint de 3 dias )
5. Não existe métodos fáceis para resolver problemas difíceis. -Descartes, René
6. Porque se tornar um designer e Front- end ao mesmo tempo sendo que ambos são complexos?
7. ↘ Legal ↘ Bem Loko ↘ Empolgante
8. Algumas dicas para facilitar a transformar um arte do Photoshop, em renderização no browser
9. O que faz isso ser tão legal, bem loko, empolgante sempre começa com o CSS ♥ #CSSnaVeia
10. CSS Shapes
11. CSS Shapes ↘ clip-path ↘ shape-outside ↘ shape-margin Propriedade que serve para cortar elementos com CSS
12. Z-Index Propriedade CSS que serve para posicionar o eixo z de um elemento
13. Blend Mode ↘ mix-blend-mode ↘ background-blend-mode
14. Background Gradient ↘ linear-gradient ↘ radial-gradient ↘ conic-gradient
15. Transform ↘ translate ↘ scale ↘ rotate ↘ skew ↘ perspective
16. Box Shadow ↘ inset
17. Icon Font ↘ Font Awesome ↘ Fontello
18. Filter CSS ↘ blur ↘ brightness ↘ contrast ↘ drop-shadow ↘ grayscale ↘ hue-rotate ↘ invert ↘ opacity ↘ saturate ↘ sepia
19. Variable Fonts ↘ Weight (wght) ↘ Width (wdth) ↘ Slant (slnt) ↘ Optical Size (opsz) ↘ Italics (ital) ↘ Grade (GRAD)
20. Algumas estatísticas 100% Front-ends fazem roda de oração pedindo para Deus que tudo isso rode no IE. 53 1 Foram o número de propostas que recebi no LinkedIn para trabalhar como Front-end É a quantidade de pessoas que podem mudar sua carreira profissional
21. ↘ Mustafa Kurtuldu - @Mustafa_x ↘ Sarah Drasner - @sarah_edo ↘ Brad Frost - @brad_frost ↘ Luke Wroblewski - @lukew Siga nas Redes Sociais ↘ A List Apart - @alistapart ↘ Codrops - @codrops ↘ CSS-Tricks - @css ↘ Google Design - @GoogleDesign ↘ Alda Rocha - @mjcoffeeholick ↘ Zeh Fernandes - @zehf ↘ Eduardo Shiota - @shiota ↘ Raphael Fabeni - @raphaelfabeni Inglês Português Empresas
22. ↘ https://css-tricks.com/clipping -masking-css/ ↘ https://hacks.mozilla.org/2018/09/make -your-web-layouts-bust-out-of-the-rectangle-with-the-firefox-shape-path-editor/ ↘ https://developers.google.com/web/fundamentals/design -and-ux/typography/variable -fonts/ ↘ https://www.cssmatic.com/box -shadow ↘ https://developer.mozilla.org/pt -BR/docs/Web/CSS/transform ↘ https://developer.mozilla.org/pt -BR/docs/Web/Guide/CSS/Understanding_z_index ↘ https://css-tricks.com/basics -css-blend-modes/ ↘ https://css-tricks.com/almanac/properties/f/filter/ ↘ https://fontawesome.com/ ↘ http://fontello.com/ ↘ https://v-fonts.com/ ↘ https://css-tricks.com/almanac/properties/b/background -blend-mode/ Referências
23. Obrigado ;)