CSS Shapes, transforms and transitions talk that I gave at Plone Conference 2016

1. TAO OF CSS
ROB PORTER

2. I LOVE CSS WAY TOO MUCH
Rob Porter

3. BASIC CSS SHAPES
▸ Circle
▸ Square
▸ Rectangle
▸ Ovals

4. .circle {
background-color:
#298BE2;
width: 200px;
height: 200px;
border-radius: 50%;
}

5. <div class=“max-circle">
<img src="Max-fall.png" />
</div>

6. .square {
background: #298BE2;
width: 200px;
height: 200px;
}

7. .rectangle {
background-color: #298BE2;
width: 100px;
height: 200px;
float: left;
}

8. .oval {
width: 100px;
height: 200px;
background-color: #298BE2;
/*border-radius: 50px / 100px;*/
border-radius: 50%;
}

9. BORDER DRAWN CSS SHAPES
▸ Triangles
▸ Trapezoid
▸ Star

10. .triangle-up {
width: 0;
height: 0;
border-left: 50px solid
transparent;
border-right: 50px solid
transparent;
border-bottom: 100px
solid #298BE2;
}
Triangles

11. .triangle-up {
width: 0;
height: 0;
border-left: 50px solid
white;
border-right: 50px solid
white;
border-bottom: 100px
solid #298BE2;
}
Triangles

12. .triangle-down {
width: 0;
height: 0;
border-left: 50px solid
transparent;
border-right: 50px solid
transparent;
border-top: 100px solid
#298BE2;
}
Triangles

13. .triangle-right {
width: 0;
height: 0;
border-top: 50px solid
transparent;
border-left: 100px solid
#298BE2;
border-bottom: 50px
solid transparent;
}
Triangles

14. .triangle-left {
width: 0;
height: 0;
border-top: 50px solid
transparent;
border-right: 100px
solid #298BE2;
border-bottom: 50px
solid transparent;
}
Triangles

15. .triangle-top-left {
width: 0;
height: 0;
border-top: 100px solid
#298BE2;
border-right: 100px solid
transparent;
}
Triangles

16. .triangle-top-left {
width: 0;
height: 0;
border-top: 100px solid
#298BE2;
border-right: 100px solid
white;
}
Triangles

17. .triangle-top-right {
width: 0;
height: 0;
border-top: 100px solid
#298BE2;
border-left: 100px solid
transparent;
}
Triangles

18. .triangle-bottom-left {
width: 0;
height: 0;
border-bottom: 100px
solid #298BE2;
border-right: 100px solid
transparent;
}
Triangles

19. .triangle-bottom-right {
width: 0;
height: 0;
border-bottom: 100px
solid #298BE2;
border-left: 100px solid
transparent;
}
Triangles

20. Triangles

21. .trapezoid {
height: 0;
width: 100px;
border-bottom: 100px
solid #298BE2;
border-left: 50px solid
transparent;
border-right: 50px solid
transparent;
}
Triangles

22. .star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #298BE2;
position: relative;
}
Triangles
.star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #298BE2;
position: absolute;
content: "";
top: 30px;
left: -50px;
}

23. COOL CSS SHAPES
▸ Talk Bubble
▸ Pac-Man
▸ Yin Yang

25. .t.talkbubble {
width: 120px;
height: 80px;
background: #298BE2;
position: relative;
border-radius: 10px;
margin-left: 26px;
padding: 1em 0em 0em 1.4em;
font-size: 1.5em;
font-weight: bold;
}
.talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid #298BE2;
border-bottom: 13px solid transparent;
}

26. .pacman {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid #E9E900;
border-left: 60px solid #E9E900;
border-bottom: 60px solid #E9E900;
border-radius: 60px;
}

27. .yin-yang {
/* by Alexander Futekov */
width: 96px;
height: 48px;
background: #eee;
border-color: #298BE2;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
.yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid #298BE2;
border-radius: 100%;
width: 12px;
height: 12px;
}
.yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: #298BE2;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}

28. CSS TRANSFORMS
▸ Skew, SkewX(), SkewY()
▸ Scale, ScaleX(), ScaleY()
▸ Rotate
▸ Translate

30. .rectangle2.skew {
transform: skewX(20deg);
margin-left: 21px;
font-size: 2em;
padding: 0.3em;
display: inline-block;
}
.rectangle2.skew:hover {
transform: skewX(-20deg);
}

31. .scalable .scale:hover {
transform: scale(1.2);
}
Triangles

32. .heart {
/* by http://nicolasgallagher.com/ */
position: relative;
width: 100px;
height: 90px;
}
Heart
.heart:before, .heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin :100% 100%;
}
Rotate

33. .infinity {
/* by http://nicolasgallagher.com/ */
position: relative;
width: 212px;
height: 100px;
}
Heart
.infinity:before, .infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid #298BE2;
border-radius: 50px 50px 0 50px;
transform: rotate(-45deg);
}
.infinity:after {
left: auto;
right: 0;
border-radius: 50px 50px 50px 0
transform: rotate(45deg);
}
Rotate

34. .rotate .yin-yang:hover {
transform: rotate(99deg);
}

35. .translate .pacman:hover {
transform: translate(50px,
0px);
border-right: 60px solid
#E9E900;
}

36. CSS TRANSITIONS
.example {
transition: [transition-property] [transition-duration]
[transition-timing-function] [transition-delay];
}

37. CSS TRANSITIONS
.foo {
transition: background-color 0.5s linear;
}
.drupal {
transition: all 1.5s ease-out;
}
.Plone {
transition: all 1.5s ease-in;
}
http://css3.bradshawenterprises.com/transitions/

38. CSS TRANSITIONS
ease
linear
ease-in
ease-out
ease-in-out
step-start
step-end
cubic-bezier(0, 0, 0.58, 1);
http://css3.bradshawenterprises.com/transitions/

39. Thank you!
Rob Porter
Email: rob.porter@wildcardcorp.com
Twitter: @robzonenet

40. PLEASE USE THE
SURVEY APP TO SEND
US FEEDBACK.
HELP US IMPROVE!
ploneconf.sixfeetup.com