Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Breaking Blank

208 views

Published on

Con l’introduzione e il miglioramento di alcuni strumenti come SVG filters, clipping-mask, mask-image, shapes, text module level 3 e tanti altri, i CSS si stanno avvicinando sempre più ai software per la grafica editoriale. In questa sessione scopriremo come sfruttare alcuni superpoteri di CSS per realizzare dei layout straordinari!

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Breaking Blank

  1. 1. SINDROME DA FOGLIO BIANCO
  2. 2. Carmine Alfano • UX / Frontender per Fullstack Agency • Docente UX/Html/Css/JS • Cofondatore Community DotNetCampania e Web Design Republic E-mail: info@carminealfano.it Twitter: @razzullo Facebook: Web Design Republic Chi Sono?
  3. 3. Potenzialità & Limiti dei CSS
  4. 4. Banner o Slider in cima alla pagina 3 Box a volte 4 per i designer più temerari Blocco testo in genere con background a contrasto Altra valanga di box inseriti un po’ a casaccio, magari circolari Form contatti prima del footer che fa tanto figo Footer con copyright e 3 colonne I layout di oggi sono tutti uguali…
  5. 5. Grafica editoriale oggi
  6. 6. Web Design ieri
  7. 7. Flash • UX inesistente, navigazione stile videogame muoversi all’interno di un sito era davvero un’avventura • Responsive (???) • Introduzione animata >>> Skip intro Unica nota positiva: i layout erano più creativi rispetto a oggi
  8. 8. Perché i WebSite di oggi sono monotoni? • Limiti tecnici paura di tentare • Poco tempo a disposizione / Pigrizia nella progettazione di layout fuori dagli schemi di sicuro un layout basato su righe e colonne sarà più facile da adattare in modalità responsive • Utilizzo errato e smodato di Framework CSS adattare il design agli standard del framework senza provare a cercare soluzioni alternative • Scarsa conoscenza dei nuovi strumenti introdotti da CSS3
  9. 9. Rompere gli schemi
  10. 10. brutalistwebsites.com
  11. 11. § CSS Shapes § Clip-path § Mask-image Di cosa parleremo: § CSS Blending modes § SVG Filters § Text Module
  12. 12. CSS shapes
  13. 13. CSS shapes Permettere al testo di assumere la forma di un’immagine scontornata scorrendo attorno ad essa
  14. 14. CSS shapes
  15. 15. CSS shapes .article-photo { float: left; border-radius: 100%; width: 200px; margin: 2rem; }
  16. 16. CSS shapes .article-photo { float: left; border-radius: 100%; width: 200px; margin: 2rem; shape-outside: circle(); shape-margin: 2rem; }
  17. 17. .article-photo { border-radius: 100%; width: 200px; } @media (min-width: 576px) { .article-photo { float: left; margin: 2rem; shape-outside: circle(); shape-margin: 2rem; } } CSS shapes
  18. 18. CSS shapes Per contorni più complessi è possibile usare una png trasparente come shape.
  19. 19. CSS shapes .article-cactus { … background: url(img/cactus.png); shape-outside: url(img/cactus.png); }
  20. 20. CSS shapes È anche possibile utilizzare le transition per animazioni all’hover, anche se il risultato finale non è del tutto perfetto. .article-cactus { … background: url(img/cactus.png); shape-outside: url(img/cactus.png); transition: all 1s; &:hover { background: url(img/cactus-2.png); shape-outside: url(img/cactus-2.png); } }
  21. 21. .article-cactus { background: url(img/cactus.png); transition: background ease 1s, shape-outside ease 1s; shape-outside: polygon(18px 467px, 22px 434px, 0px 364px, 0px 289px, 28px 276px, 38px 209px, 3px 164px, 0px 97px, 12px 61px, 46px 55px, 79px 54px, 95px 3px, 174px -5px, 215px 21px, 222px 51px, 244px 57px, 254px 78px, 285px 114px, 272px 180px, 242px 200px, 202px 223px, 201px 263px, 264px 295px, 256px 343px, 246px 362px, 241px 376px, 225px 435px, 237px 476px, 224px 528px, 18px 529px); &:hover { background: url(img/cactus-2.png); shape-outside: polygon(18px 467px, 22px 434px, …); } CSS shapes Per migliorare l’effetto sostituiamo la png con un poligono
  22. 22. .article-cactus { background: url(img/cactus.png); transition: background ease 1s, shape-outside ease 1s; shape-outside: polygon(18px 467px, 22px 434px, … ); clip-path: polygon(18px 467px, 22px 434px, … ); &:hover { background: url(img/cactus-2.png); shape-outside: polygon(18px 467px, 18px 400px, …); clip-path: polygon(18px 467px, 18px 400px, … ); } } CSS shapes
  23. 23. Clip-path
  24. 24. CLIPPING-MASK = CLIP-PATH clip-path 1 2 3
  25. 25. • La proprietà clip permetteva di creare solo ritagli rettangolari. • CSS3 introduce la proprietà clip-path che permette di ritagliare forme più complesse. bennettfeely.com/clippy/ clip-path
  26. 26. .main { background: url('img/desert.jpg'); transition: all ease 1s; clip-path: polygon(50% 0%, 61% 35%, …); } .main:hover { clip-path: polygon(50% 0%, 80% 10%, …); } clip-path
  27. 27. .article-photo { float: left; background: url('img/desert.jpg’); transition: all ease 1s; shape-margin: 1rem; shape-outside: polygon(50% 0%, …); clip-path: polygon(50% 0%, …); &:hover { shape-outside: polygon(50% 0%, …); clip-path: polygon(50% 0%, …); } } clip-path
  28. 28. Mask image
  29. 29. Se la proprietà clip-path rende visibile un elemento HTML attraverso un’area di ritaglio, mask (e tutte le proprietà collegate) vi sovrappone un’immagine attraverso la quale traspare l’elemento sottostante. Mask Image
  30. 30. .main { background: url('img/desert.jpg'); background-position: top; background-repeat: no-repeat; } .text { mask-image: url('img/mask.png'); mask-position: top; mask-repeat: no-repeat; } Mask Image
  31. 31. .main { background: url('img/desert.jpg'); background-position: top; background-repeat: no-repeat; } .text { mask-image: url('img/mask.png'); mask-position: top; mask-repeat: no-repeat; } Mask Image .text h1 { transform: translate(-50%, -50%); transition: all ease 1s; &:hover { transform: translate(-60%, -50%); } }
  32. 32. body { background: red; } .main { background: url('img/desert.jpg’); mask-image: linear-gradient( to top, transparent 10%, black 50%); } Mask Image
  33. 33. body { background: red; } .main { background: url('img/desert.jpg’); mask-image: radial-gradient( ellipse 90% 80% at 50% 40%, black 40%, transparent 50% ); } Mask Image
  34. 34. Mask Image +
  35. 35. body { background: red url('img/desert.jpg’); } .main { background: url('img/desert.jpg’); mask-image: url('img/mask.svg’); &:hover { mask-position: 0 -50px; } } Mask Image
  36. 36. -webkit-background-clip: text
  37. 37. h1 { background: url('img/desert.jpg'); background-size: cover; background-attachment: fixed; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } -webkit-background-clip: text
  38. 38. CSS blending modes
  39. 39. CSS blending modes Nei software di fotoritocco i metodi di fusione ci forniscono la possibilità di fondere tra loro i livelli, con modalità diverse a seconda del metodo utilizzato.
  40. 40. Metodi di fusione da CSS CSS blending modes background-blend-mode: color color-burn color-dodge darken difference exclusion hard-light hue lighten luminosity multiply normal overlay saturation screen soft-light
  41. 41. .main { background: url('img/desert.jpg'); background-color: red; background-blend-mode: multiply; } CSS blending modes
  42. 42. .main { background: url('img/desert.jpg'); background-color: red; background-blend-mode: luminosity; } CSS blending modes
  43. 43. .main { background: url('img/desert.jpg’), url('img/cactus.png’), linear-gradient(red, blue); background-blend-mode: overlay, luminosity; } CSS blending modes
  44. 44. SVG filters CSS filters
  45. 45. SVG filters CSS filters
  46. 46. SVG filters CSS filters I filtri SVG permettono di modificare le caratteristiche grafiche di un’immagine input e di sostituire a quest’ultima l’immagine modificata. https://testdrive-archive.azurewebsites.net/graphics/hands-on-css3/hands-on_svg-filter-effects.htm
  47. 47. SVG filters CSS filters #main { background: url('img/desert.jpg’); filter: blur(25px); }
  48. 48. SVG filters CSS filters #main { background: url('img/desert.jpg’); filter: url(#f1); } <svg height="0"> <filter id="f1"> <feGaussianBlur stdDeviation="10" /> </filter> </svg>
  49. 49. TEXT module
  50. 50. Text Module p { text-align: justify; }
  51. 51. Text Module p { text-align: justify; overflow-wrap: break-word; }
  52. 52. Text Module p { text-align: justify; overflow-wrap: break-word; hyphens: auto; }
  53. 53. Facciamo un po’ di chiarezza… word-wrap overflow-wrap word-break Text Module
  54. 54. word-wrap può aiutare i contenuti ad andare a capo in caso di url o stringhe molto lunghe. overflow-wrap la proprietà word-wrap è stata rinominata in overflow-wrap nella specifica corrente CSS3 word-break In realtà fa la stessa cosa di overflow-wrap. Ma viene usata più comunemente per le lingue non inglesi e per la maggior parte dell'Asia orientale come il cinese, il giapponese e il coreano. Text Module
  55. 55. Text Module overflow-wrap: break-word; word-break: break-word; overflow-wrap: break-all; word-break: break-all;
  56. 56. Text Module
  57. 57. Text Module <svg viewBox="0 0 850 600"> <path id="curve» d="M6,150C49.63,93,105.79,36.65,156.2,47.55,207.89,58.74,213,131.91,264,150c 40.67,14.43,108.57-6.91,229-145" /> <text x="25"> <textPath xlink:href="#curve"> Breaking Blank Breaking Blank </textPath> </text> </svg> path { fill: transparent; }
  58. 58. www.typetester.org Text Module
  59. 59. CAN I USE?
  60. 60. https://joind.in/talk/1eefe #carmine.alfano { filter: url(#5); }
  61. 61. Grazie!

×