◈ Estelle Weyl
→ and → to change slides. 2 for comments. estelle.github.com/CSS-Workshop
◈ Estelle Weyl
column-count: 1; column-width: 10em; column-rule: 1px solid #bbb; column-gap: 2em;
Adipisicing rump nostrud exercitation turkey, bresaola deserunt ullamco beef ribs pork loin ball tip pig pork belly nisi. Cillum sunt officia deserunt, beef aliqua ham ut t-bone sed ut consequat shoulder. Nostrud excepteur biltong non, fatback salami incididunt beef cupidatat occaecat.
Reprehenderit ham hock labore tri-tip chuck, excepteur ut. Meatball sint enim beef ribs, mollit laborum flank commodo fatback pariatur tail rump eiusmod spare ribs dolore. Ut minim qui, tongue eu short ribs pancetta excepteur incididunt culpa consequat pastrami magna chuck. Flank sunt sint, occaecat ut adipisicing labore turkey laboris in magna.
Chicken bacon meatloaf minim meatball salami sunt spare ribs.
Bacon sed tail, pork loin pariatur meatloaf hamburger exercitation corned beef shank ex esse sirloin qui beef ribs. Consectetur anim corned beef, cupidatat ex enim tempor. Pariatur consectetur ad, enim ut quis consequat aliquip exercitation jowl tenderloin ham dolore.
Fugiat excepteur aliqua, cow dolor swine shoulder elit tri-tip shankle. Irure consectetur cow labore, cupidatat exercitation ea jerky ham officia dolore tongue eu aliqua. Ham hock irure beef ribs non, flank sausage eiusmod ham short loin nostrud.
box-sizing: content-box | border-box
div {
width: 200px;
height:100px;
padding: 20px;
margin:20px;
border-width: 5px;
}
border-box replicates the old IE box model
<div id="origin">[content here]</div> <div class="destination"></div> <div class="destination"></div> <div class="destination"></div> <div class="destination"></div>
#origin {
-webkit-flow-into: name_of_my_flow;
/* style of content */
}
.destination {
-webkit-flow-from: name_of_my_flow;
/* style of boxes */
}
The content here is originally in the #origin div, inside a p. However, it shows up divided amongst the .destination blocks. Try changing the width of the .destination divs with the slider and watch the text move. The styles are inherited from #origin and #origin's ancestors, and not from any .destination specific properties.
Used to position horizontal and vertical stacks.
.box {
display: box;
box-orient:;
}
.box .one, .box .two {
box-flex: 1;
}
.box .three {
box-flex: 3;
} .box {
display: box;
box-pack: ;
box-align: ;
}
display: box ;
box-orient: horizontal | vertical | inherit;
box-pack: start | end | center | justify;
box-align: start | end | center | baseline | stretch;
box-flex: integer | 0;
box-flex-group
box-ordinal-group
box-direction: normal | reverse | inherit;
box-lines:
display: flexbox | inline-flexbox;
flex-direction: lr | rl | tb | bt | inline |
inline-reverse | block | block-reverse
flex-order: integer | 1;
flex-pack: start | end | center | justify;
flex-align: auto | baseline;
The spec syntax changed drastically. Browsers are curently changing..
Related properties:
flex and inline-flex to create a flex container (on parent).row, row-reverse, column or columns-reverse on the parentflex-direction and flex-wrap properties.nowrap, wrap or wrap-reverseUsing grid system to lay out content, dividing available space into columns and rows
grid-columns: grid-rows: grid-column: grid-row: grid-cell: grid-cell-stacking: grid-template: grid-column-span: grid-row-span: grid-column-sizing: grid-row-sizing: grig-flow: grid-column-align: grid-row-align: grid-layer:
display: grid | inline-grid
p {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
overflow-hidden only: Play with the slider to see what happens at the end of the line
white-space: nowrap, overflow: hidden: Play with the slider to see what happens at the end of the line
text-overflow: ellipsis; white-space: nowrap; and overflow: hidden: Play with the slider to see what happens at the end of the line
Needs nowrap and overflow:hidden (anything other than visible) to work. Prefix in Opera
word-wrap: normal | break-word
.colA {
width:50%;
margin-right: 1em;
}
.colB {
width: -moz-calc(50% - 1em);
}
html {
font-size: 62.5%;
}
p {
font-size: 13px;
font-size: 1.3rem;
}
small {
font-size: 11px;
font-size: 1.1rem;
}
Can the element be clicked?!?!
.animatedElement {
pointer-events: none;
}
Did you note that you could change the transforms examples even when the example was covering the code?
Related to contentEditable: Determines whether content of an element is editable.
-webkit-user-modify: read-only | read-write | read-write-plaintext-only; -moz-user-modify: read-only | read-write | write-only;