Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Banderas

Banderas
March 30, 2021

 Banderas

Nuestra tienda online de banderas puedes comprar cualquier tipo de banderas, en la tienda online de Banderaseuropa.

Banderas

March 30, 2021
Tweet

Other Decks in Business

Transcript

  1. How New CSS Is Changing Everything About Graphic Design on

    the Web W3C Publishing Summit @jenSimmons
  2. The Official Timeline of Web Page Layout The No-Layout Layout

    Table-based Layouts Hand-coded Float Layouts Framework Layouts Amazing Future!
  3. CSS Grid Flexbox Alignment Writing Modes Multicolumn Viewport Units Transforms

    Object Fit Clip-path Masking Shape-outside Initial-letter Flow Floats Block Inline Inline-block Display:table Margin Negative margins Padding everything else in CSS
  4. 1.

  5. 2.

  6. 3.

  7. 4.

  8. 5.

  9. img { width: 200px; margin: 0 1.5em 0.5em 0; float:

    left; shape-outside: circle(); } There is a prefix: -webkit-shape-outside: circle(); *
  10. img { max-width: 600px; float: left; margin-left: -26%; shape-outside:polygon( nonzero,

    -69.6% 101.25%, -84.35% 24.5%, 1.65% 4%, 23.3% 14.25%, 40.4% 13.5%, 43% 13.25%, 57.1% 16.5%, 62.7% 27%, 74.5% 32.25%, 78.15% 42.5%, 80.1% 49.25%, 77.15% 58.75%, 92.25% 68.25%, 92.9% 82.25%, 75.5% 92.5%, 51.55% 90.75%, -5.6% 101.25% ); }
  11. THREE OPTIONS FOR WRITING-MODE writing-mode: vertical-lr; writing-mode: vertical-rl; toggle w/

    `dir` attribute in HTML + unicode writing-mode: horizontal-tb;
  12. TWO MORE (FUTURE) OPTIONS FOR WRITING-MODE block direction inline direction

    writing-mode: sideways-lr; block direction inline direction writing-mode: sideways-rl; creates a horizontal typographic mode only A A
  13. .container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows:

    1fr 1fr 1fr 1fr; } .item { grid-row: 1 / 3; grid-column: 2 / 4; } 1 2 3 4 1 2 3 4 5 grid-row: 1 / 3; grid-column: 2 / 4; 5
  14. “ THE VIGNELLI CANON Great designs can be achieved without

    the use of the grid, but the grid is a very useful tool to guarantee results. Ultimately the most important tool is the management of the white space in layouts. It is the white space that makes the layout sing. Bad layouts have no space left for breathing — every little space is covered by a cacophony of type sizes, images, and screaming titles.
  15. What happens when parts of the content / interface are

    ‘missing’? Or are shorter / longer than ‘ideal’?
  16. Modern Layouts: 
 Getting Out of Our Ruts Revolutionize Your

    Page: 
 Real Art Direction on the Web 2015 2016 available on jensimmons.com