Upload
binary-studio
View
109
Download
0
Embed Size (px)
Citation preview
Rusinka Bohdan
Frontend Developer@BinaryStudio
Github:BogdanRusinka
http://www.binary-studio.com/
Properties
Parent Child
★ display: flex★ flex-direction★ flex-wrap★ flex-flow★ justify-content★ align-items★ align-content
★ order★ flex-grow★ flex-shrink★ flex-basis★ flex★ align-self
Playground
http://b1narystudio.github.io/flex-playground/
Accordion
header .header-accordion .accordion {width: 100%;display: flex;
}
header .header-accordion .accordion .accordion-item {flex: 1;height: 250px;
background-size: cover; }
Photo gallery.main-photogallery-block .box {
display: flex;flex-flow: column nowrap;
width: 100%; height: 100%;}
.col-item {display: flex;flex-flow: row nowrap;
width: 100%; height: 100%; margin: 0 auto; flex: 1 2 20%;} .item {
flex: 1 2 20%;}
Flex skeleton
.col-xs-1 { flex-basis: 8.333%; max-width: 8.333%}
.row { box-sizing: border-box; display: flex; flex: 0 1 auto; flex-direction: row; flex-wrap: wrap;}
Why?
✓ Interaction with underlying element✓ Disabling interaction with current element✓ Speeding up scrolling
Properties
.element {pointer-events: none
}
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted;
pointer-events: visibleFill;
pointer-events: visibleStroke;
pointer-events: visible;
pointer-events: painted;
pointer-events: fill;
pointer-events: stroke;
pointer-events: all;
SVG only
Any
clip vs clip-path
.element { clip: rect(30px, 30px, 20px, 20px); }
vs
.element { clip-path: polygon(x1 y1, x2 y2, x3 y3, ...); }
Pros and cons
✓ Browser support✓ Pointer events✓ Any units
ㄨ All is clippedㄨ “Recommendation” stageㄨ Bugs
Firefox working with svg
<svg width="0" height="0"> <defs>
<clipPath id="clip-shape" clipPathUnits="objectBoundingBox"> <polygon points="0 1, 0 0, 1 0, 0.8 1" /></clipPath>
</defs></svg>
.element { clip-path: url("#clip-shape"); }
Usage
✓ Various polygon shapes✓ Animation changing forms✓ Add borders✓ Cool image effects
http://codepen.io/imohkay/pen/KpdBrw
Give me more time
.element:hover {
will-change: transform;
transition: transform 2s;
transform: rotate(30deg) scale(1.5);
}
.element {
/* style rules */
transition: transform 1s ease-out;
}
.element:hover {
will-change: transform;
}
.element:active {
transform: rotateY(180deg);
}
Removing will-changevar el = document.getElementById('element');
el.addEventListener('mouseenter', hintBrowser);
el.addEventListener('animationEnd', removeHint);
function hintBrowser() {
this.style.willChange = 'transform, opacity';
}
function removeHint() {
this.style.willChange = 'auto';
}
https://css-tricks.com/guide-responsive-friendly-css-columns/?utm_content=buffera29d6&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer
Responsive CSS columns
Declare both
article { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-width: 200px; -moz-column-width: 200px; column-width: 200px;}
@media(hover:hover)@media (pointer:fine) {
/* ok to use small buttons/controls */
}
@media (hover:hover) {
/* ok to use :hover-based menus */
}
@media (pointer:coarse) {
/* make buttons and other “touch targets” bigger */
}
@media (hover:none), (hover:on-demand) {
/* suppress :hover-based menus */
}
Support
/* Make radio buttons and check boxes larger if we have an inaccurate pointing device */@media (pointer:coarse) {
input[type="checkbox"], input[type="radio"] {min-width:30px;min-height:40px;background:transparent;
}}
So much modes
● multiply● overlay● screen● darken● lighten● color-dodge● color-burn
● hard-light● soft-light● difference● exclusion● hue● saturation● color● luminosity
Syntax
.element { background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/image.jpg'); background-blend-mode: screen, difference, lighten;
}
Where to use
★ Mixing image with color (hover effects)★ Mixing images★ Text overlay★ Unexpected effects
Calculations
padding + border + width = actual rendered widthpadding + border + height = actual rendered height
Problem?
Solution:
html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
What’s new?
❖ parent selector
❖ grid-structural pseudo-classes: :column, :nth-column, :nth-last-column
❖ tree-structural pseudo-classes: :nth-match, :nth-last-match
❖ ui state pseudo-class: :indeterminate
❖ time-dimensional pseudo-classes: :past, :current, :future
❖ location pseudo-classes: :any-link, :local-link
❖ logical combinators: :matches, :not
Let’s look at examples...
p:not(.classy) { color: red; }
body :not(p) { color: green; }
<p>Some text.</p>
<p class="classy">Some other text.</p>
<span>One more text<span>
Some text.Some other text.One more text
:matches(section, article, aside, nav) :matches(h1, h2, h3, h4, h5, h6) { color: #BADA55;}
/* ... which would be the equivalent of: */section h1, section h2, section h3, section h4, section h5, section h6, article h1, article h2, article h3, article h4, article h5, article h6, aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 { color: #BADA55;}
Variables
:root {
--main-bg-color: brown;
}
.one {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 50px;
height: 50px;
display: inline-block;
}
.three {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 75px;
}
.four {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 100px;
}
.five {
background-color: var(--main-bg-color);
}