CSS Layout: O ontem, o hoje e o depois

Slide 1

Slide 1 text

css layout O ONTEM, O HOJE E O DEPOIS @LOOPINFINITO

Slide 2

Slide 2 text

@CAIO_GONDIM @ALMIRFILHO

Slide 3

Slide 3 text

GLOBO.COM

Slide 4

Slide 4 text

LOOPINFINITO.COM.BR

Slide 5

Slide 5 text

tabelas O ONTEM

Slide 6

Slide 6 text

• 1990 html 1.0 • estrutura de documento • layout com

Slide 7

Slide 7 text

bells and whistles “Storage of ASCII text, and display on 24x80 screens, is in the short term sufficient, and essential. Addition of graphics would be an optional extra with very much less penetration for the moment.” Tim Berners-Lee

Slide 8

Slide 8 text

primeiro site ever

Slide 9

Slide 9 text

• 1993 html 2.0 • • padrao IETF

Slide 10

Slide 10 text

• 1995 html 3.0 • • nunca foi aprovado • text flow ao redor de • elementos matematicos

Slide 11

Slide 11 text

• 1997 html 3.2 • •nasce o web designer

Slide 12

Slide 12 text

html 3.2 spec “HTML 3.2 includes a widely deployed subset of the specification given in RFC 1942 and can be used to markup tabular material or for layout purposes.” W3C HTML 3.2 specification – http://www.w3.org/TR/REC-html32

Slide 13

Slide 13 text

yahoo!

Slide 14

Slide 14 text

apple.com

Slide 15

Slide 15 text

bol.com.br

Slide 16

Slide 16 text

uol.com.br

Slide 17

Slide 17 text

cade.com.br

Slide 18

Slide 18 text

amazon.com

Slide 19

Slide 19 text

globo.com

Slide 20

Slide 20 text

globo.com

Slide 21

Slide 21 text

codigo

Slide 22

Slide 22 text

• conteudo e layout misturados problemas • render nao incremental • baixa acessibilidade

Slide 23

Slide 23 text

box model O HOJE

Slide 24

Slide 24 text

• 1996 (com o HTML 3.2) css 1 • separa estilo da marcacao • reuso de estilos • independente do conteudo (?)

Slide 25

Slide 25 text

css 1 • block-level elements • margin, padding e border • width e height • display e float

Slide 26

Slide 26 text

• 1998 - 2011! css 2.1 • position • top, bottom, left e right • min-height e max-height • min-width e max-width

Slide 27

Slide 27 text

• 1999 - HOJE css 3 • CSS basic user interface module level 3 • box-sizing: border-box

Slide 28

Slide 28 text

margin-top margin-bottom margin-left margin-right padding-top padding-bottom padding-left padding-right width x height border-top-width border-bottom-width border-left-width border-right-width top bottom left right

Slide 29

Slide 29 text

margin-top margin-bottom margin-left margin-right padding-top padding-bottom padding-left padding-right border-top-width border-bottom-width border-left-width border-right-width width x height top bottom left right bo x- siz i ng: bor der-box ;

Slide 30

Slide 30 text

2002 TABLELESS

Slide 31

Slide 31 text

tabelas para DADOS TABULARES box model para LAYOUTS

Slide 32

Slide 32 text

TABLELESS.COM

Slide 33

Slide 33 text

• alinhar verticalmente problemas Conteudo } ? .box { vertical-align: middle;

Slide 34

Slide 34 text

• alinhar verticalmente problemas Conteudo .box { vertical-align: middle; } display: table-cell;

Slide 35

Slide 35 text

Slide 36

Slide 36 text

• igualar altura de regioes problemas Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non .box { height: 200px; } aside, .right { height: 100%; float: left; } Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ofelquys lotomania ipsum tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Slide 37

Slide 37 text

Slide 38

Slide 38 text

• igualar altura de regioes problemas Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ofelquys lotomania ipsum tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. .box { height: 200px; display: table-row; } aside, .right { height: 100%; float: left; display: table-cell; }

Slide 39

Slide 39 text

table table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group tabelas...

Slide 40

Slide 40 text

table table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group tabelas...

Slide 41

Slide 41 text

verdade seja dita 2013 2013 O GOOGLE JA FEZ ATE UM MEDIDOR DE KI

Slide 42

Slide 42 text

verdade seja dita 2013 2013 E AINDA NAO SUPERAMOS AS TABELAS

Slide 43

Slide 43 text

grid O DEPOIS

Slide 44

Slide 44 text

• 2012 (draft W3C) css grid layout • divide o espaco em regioes

Slide 45

Slide 45 text

assim como tabelas... LINHAS E COLUNAS

Slide 46

Slide 46 text

diferente de tabelas... ESTRUTURALMENTE INDEPENDENTE

Slide 47

Slide 47 text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non LOOP Lorem ipsum Dolor sit amet Consectetur adipisicing Sed do eiusmod bla bla footer

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

sem position ? esqueca! resize? esqueca!

Slide 53

Slide 53 text

mão na massa... DEFININDO UM GRID

Slide 54

Slide 54 text

html

Slide 55

Slide 55 text

css display: grid;

Slide 56

Slide 56 text

css grid-definition-columns: auto auto; 1 2 display: grid;

Slide 57

Slide 57 text

css grid-definition-rows: auto auto auto; 1 2 3 4 5 6 grid-definition-columns: auto auto; display: grid;

Slide 58

Slide 58 text

css 1 2 3 4 5 6 grid-definition-columns: auto auto; AREA DA TELA

Slide 59

Slide 59 text

css 1 2 3 4 5 6 grid-definition-columns: auto 1fr;

Slide 60

Slide 60 text

css 1 2 3 4 5 6 grid-definition-columns: 1fr 1fr;

Slide 61

Slide 61 text

css 1 2 3 4 5 6 grid-definition-columns: 2fr 1fr;

Slide 62

Slide 62 text

css content grid-definition-columns: auto minmax(min-content, 1fr); 1 2 3 4 5 6

Slide 63

Slide 63 text

css content 1 3 4 5 6 RESIZE grid-definition-columns: auto minmax(min-content, 1fr);

Slide 64

Slide 64 text

css content 1 3 4 5 6 RESIZE MAIS grid-definition-columns: auto minmax(min-content, 1fr);

Slide 65

Slide 65 text

minmax() minmax(800px, 1fr); minmax(2fr, 3fr); minmax(50%, 100%); minmax(10em, 80%); minmax(min-content, 1fr); minmax(70%, max-content); minmax(calc(70% + 80px + 9em), 1fr); minmax(min-content, max-content) = auto

Slide 66

Slide 66 text

mão na massa... ASSOCIANDO CONTEUDO

Slide 67

Slide 67 text

html 1 2 3 4 5 6

Slide 68

Slide 68 text

html

• sem blocos para linha/coluna

1 2 3 4 5 6

Slide 69

Slide 69 text

html • a ordem nao importa 1 2 3 4 5 6

Slide 70

Slide 70 text

css 2 3 4 5 6 .reg1 { grid-column: 1; grid-row: 1; } c1

Slide 71

Slide 71 text

css 2 3 5 6 .reg1 { grid-column: 1; grid-row: 1; } c1 .reg4 { grid-column: 2; grid-row: 2; } c4

Slide 72

Slide 72 text

css 2 5 6 .reg1 { grid-column: 1; grid-row: 1; } c1 .reg4 { grid-column: 2; grid-row: 2; } c4 .reg3 { grid-column: 1; grid-row: 2; } c3

Slide 73

Slide 73 text

css 2 5 6 .reg1 { grid-column: 1; grid-row: 1; } c1 .reg4 { grid-column: 2; grid-row: 2; } c4 .reg3, .reg6 { grid-column: 1; grid-row: 2; } c3 c6

Slide 74

Slide 74 text

mão na massa... TEMPLATES

Slide 75

Slide 75 text

grid-template header aside content footer .container { display: grid; grid-template: "header header" "aside content" "footer footer"; }

Slide 76

Slide 76 text

grid-template .container { display: grid; grid-template: "header header" "aside content" "footer footer"; } .reg1 { grid-area: header } .reg2 { grid-area: aside } .reg3 { grid-area: content } .reg4 { grid-area: content } .reg5 { grid-area: content } .reg6 { grid-area: footer }

Slide 77

Slide 77 text

templates responsivos header menu content aside footer

Slide 78

Slide 78 text

templates responsivos header menu content footer aside

Slide 79

Slide 79 text

templates responsivos @media (orientation: landscape){ .container { grid-template: "header header header" "menu content aside" "footer footer footer"; } } @media (orientation: portrait){ .container { grid-template: "header header" "menu menu" "content content" "aside footer"; } }

Slide 80

Slide 80 text

flexbox O DEPOIS

Slide 81

Slide 81 text

• otimizado para UI layout • comportamento previsivel • agnostico de direcao flexbox

Slide 82

Slide 82 text

web site header content ads

Slide 83

Slide 83 text

ads content2 footer

Slide 84

Slide 84 text

web app footer header side main

Slide 85

Slide 85 text

os x app store

Slide 86

Slide 86 text

versões • 2009: display:box; box-{*} • 2011: display:box; flex() • 2012: display:flex; flex-{*}

Slide 87

Slide 87 text

vocabulário flex-item flex-item main size cross size main axis cross axis flex-container

Slide 88

Slide 88 text

grow and shrink .a .a .b .container { display: flex; flex-direction: row; } .container 600px

Slide 89

Slide 89 text

flex-grow .a .a .b .a { flex-basis: 113px; flex-grow: 0; flex-shrink: 1; } .b { flex-basis: 333px; flex-grow: 1; flex-shrink: 0; } .container 600px

Slide 90

Slide 90 text

.a .a .b .a { flex-basis: 113px; flex-grow: 0; flex-shrink: 1; } .container 800px .b { flex-basis: 333px; flex-grow: 1; flex-shrink: 0; } flex-grow

Slide 91

Slide 91 text

flex-shrink .a .a .b .container 600px .a { flex-basis: 113px; flex-grow: 0; flex-shrink: 1; } .b { flex-basis: 333px; flex-grow: 1; flex-shrink: 0; }

Slide 92

Slide 92 text

.a .b .container 500px .a .a { flex-basis: 113px; flex-grow: 0; flex-shrink: 1; } .b { flex-basis: 333px; flex-grow: 1; flex-shrink: 0; } flex-shrink

Slide 93

Slide 93 text

cálculo do espaço .a .b .container 800px .c .a { flex: 1; } .b { flex: 2; } .c { flex: 1; } css .container { display: flex; }

Slide 94

Slide 94 text

cálculo do espaço .a .b .container 800px .c .a { flex: 1; } .b { flex: 2; } .c { flex: 1; } css .container { display: flex; }

Slide 95

Slide 95 text

cálculo do espaço .a .b .container 800px .c .a { flex: 1; } .b { flex: 2; } .c { flex: 1; } css .container { display: flex; }

Slide 96

Slide 96 text

cálculo do espaço .a .b .container 800px .c .a { flex: 1; } .b { flex: 2; } .c { flex: 1; } css .container { display: flex; }

Slide 97

Slide 97 text

cálculo do espaço .a .b .container 800px .c 1 + 2 + 1 = 4 800 / 4 = 200 .a = 1 * 200 .b = 2 * 200 .c = 1 * 200 unidade proporção 200px 400px 200px

Slide 98

Slide 98 text

1 flex-direction: row; 2 3

Slide 99

Slide 99 text

1 flex-direction: column; 2 3

Slide 100

Slide 100 text

justify-content: flex-start; 1 2 3

Slide 101

Slide 101 text

justify-content: flex-end; 1 2 3

Slide 102

Slide 102 text

justify-content: center; 1 2 3

Slide 103

Slide 103 text

justify-content: space-between; 1 2 3

Slide 104

Slide 104 text

justify-content: space-around; 1 2 3

Slide 105

Slide 105 text

align-items: flex-start; 1 2 3

Slide 106

Slide 106 text

align-items: flex-end; 1 2 3

Slide 107

Slide 107 text

align-items: center; 1 2 3

Slide 108

Slide 108 text

align-items: stretch; 1 2 3

Slide 109

Slide 109 text

order: N; 1 2 3

Slide 110

Slide 110 text

order: N; 3 2 1

Slide 111

Slide 111 text

order: N; 3 2 1

Slide 112

Slide 112 text

mix com media queries header main footer aside1 aside2

Slide 113

Slide 113 text

header main footer aside2 aside1 mix com media queries

Slide 114

Slide 114 text

não é só isso • respeita media-queries • respeita max-width, min-width, ... • inline ou em block

Slide 115

Slide 115 text

centralizar elementos .a .container { display: flex; } .container .a { margin: auto; }

Slide 116

Slide 116 text

centralizar elementos .a .container .container { display: flex; } .a { margin: auto; }

Slide 117

Slide 117 text

web app flexible

Slide 118

Slide 118 text

web app flexible

Slide 119

Slide 119 text

regions O DEPOIS

Slide 120

Slide 120 text

html • separacao de conteudo e apresentacao • HTML como template • layouts de impressos

Slide 121

Slide 121 text

Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed layout em colunas Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.

Slide 122

Slide 122 text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. layouts complexos

Slide 123

Slide 123 text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. layouts complexos

Slide 124

Slide 124 text

conceitos importantes •named flows •regions

Slide 125

Slide 125 text

html

...

Slide 126

Slide 126 text

html

...

Slide 127

Slide 127 text

css .content { flow-into: lorem-ipsum; } .region { flow-from: lorem-ipsum; }

Slide 128

Slide 128 text

css .content { flow-into: lorem-ipsum; } .region { flow-from: lorem-ipsum; }

Slide 129

Slide 129 text

@region @region .region-3 { p { color: #BADA55; } } @region .region-4 { p { color: red; } }

Slide 130

Slide 130 text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. layouts complexos

Slide 131

Slide 131 text

regions

Slide 132

Slide 132 text

regions

Slide 133

Slide 133 text

layouts complexos

Slide 134

Slide 134 text

exclusions O DEPOIS

Slide 135

Slide 135 text

a tirania do retângulo ELEMENTOS DE BLOCO SAO QUADRADOS

Slide 136

Slide 136 text

a tirania do retângulo border-radius?

Slide 137

Slide 137 text

a tirania do retângulo border-radius? • molda apenas estilo • nao molda conteudo

Slide 138

Slide 138 text

shapes! shape-inside shape-outside

Slide 139

Slide 139 text

shape-inside .circulo { // shape-inside: circle(cx, cy, radius); shape-inside: circle(50%, 50%, 50%); } Sed ast molestie augue sitep amet leo consequat siuop posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac amet euism Sed

Slide 140

Slide 140 text

shape-inside A Sed molestie augue sit amet leo consequat as due to a posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac am .estrela { shape-inside: polygon(0px 150px, ...); }

Slide 141

Slide 141 text

shapes com regions A Sed molestie augue sit amet leo consequat as due to a posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, soc at consectetur adipisg elit. Vivamus luctus urna sed urna ultricies ser am Sed ast molestie augue sitep amet leo consequat siuop posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac amet euism Sed

Slide 142

Slide 142 text

shape-outside p { // shape-outside: circle(cx, cy, radius); shape-outside: circle(-50px, 50%, 50%); } Sed ast molestie augue sitep amet leo consequat siuop posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. nulla fringilla, orci ac amet euism sed orci ac amet euism

Slide 143

Slide 143 text

shape-outside .circulo { // shape-outside: circle(cx, cy, radius); shape-outside: circle(-100px, 50%, 50%); } Sed ast molestie augue sitep amet leo consequat siuop posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. nulla fringilla, orci ac amet euism sed orci ac amet euism -100px 50%