tao of css
TRANSCRIPT
![Page 1: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/1.jpg)
TAO OF CSSROB PORTER
![Page 2: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/2.jpg)
I LOVE CSS WAY TOO MUCH
Rob Porter
![Page 3: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/3.jpg)
BASIC CSS SHAPES
▸ Circle
▸ Square
▸ Rectangle
▸ Ovals
![Page 4: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/4.jpg)
.circle {
background-color: #298BE2;
width: 200px;
height: 200px;
border-radius: 50%;
}
![Page 5: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/5.jpg)
<div class=“max-circle">
<img src="Max-fall.png" />
</div>
![Page 6: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/6.jpg)
.square {
background: #298BE2;
width: 200px;
height: 200px;
}
![Page 7: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/7.jpg)
.rectangle {
background-color: #298BE2;
width: 100px;
height: 200px;
float: left;
}
![Page 8: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/8.jpg)
.oval {
width: 100px;
height: 200px;
background-color: #298BE2;
/*border-radius: 50px / 100px;*/
border-radius: 50%;
}
![Page 9: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/9.jpg)
BORDER DRAWN CSS SHAPES
▸ Triangles
▸ Trapezoid
▸ Star
![Page 10: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/10.jpg)
.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #298BE2;
}
Triangles
![Page 11: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/11.jpg)
.triangle-up {
width: 0;
height: 0;
border-left: 50px solid white;
border-right: 50px solid white;
border-bottom: 100px solid #298BE2;
}
Triangles
![Page 12: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/12.jpg)
.triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #298BE2;
}
Triangles
![Page 13: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/13.jpg)
.triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid #298BE2;
border-bottom: 50px solid transparent;
}
Triangles
![Page 14: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/14.jpg)
.triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #298BE2;
border-bottom: 50px solid transparent;
}
Triangles
![Page 15: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/15.jpg)
.triangle-top-left {
width: 0;
height: 0;
border-top: 100px solid #298BE2;
border-right: 100px solid transparent;
}
Triangles
![Page 16: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/16.jpg)
.triangle-top-left {
width: 0;
height: 0;
border-top: 100px solid #298BE2;
border-right: 100px solid white;
}
Triangles
![Page 17: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/17.jpg)
.triangle-top-right {
width: 0;
height: 0;
border-top: 100px solid #298BE2;
border-left: 100px solid transparent;
}
Triangles
![Page 18: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/18.jpg)
.triangle-bottom-left {
width: 0;
height: 0;
border-bottom: 100px solid #298BE2;
border-right: 100px solid transparent;
}
Triangles
![Page 19: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/19.jpg)
.triangle-bottom-right {
width: 0;
height: 0;
border-bottom: 100px solid #298BE2;
border-left: 100px solid transparent;
}
Triangles
![Page 20: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/20.jpg)
Triangles
![Page 21: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/21.jpg)
.trapezoid {
height: 0;
width: 100px;
border-bottom: 100px solid #298BE2;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
Triangles
![Page 22: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/22.jpg)
.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;
}
![Page 23: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/23.jpg)
COOL CSS SHAPES
▸ Talk Bubble
▸ Pac-Man
▸ Yin Yang
![Page 24: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/24.jpg)
![Page 25: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/25.jpg)
.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;
}
![Page 26: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/26.jpg)
.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;
}
![Page 27: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/27.jpg)
.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;
}
![Page 28: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/28.jpg)
CSS TRANSFORMS
▸ Skew, SkewX(), SkewY()
▸ Scale, ScaleX(), ScaleY()
▸ Rotate
▸ Translate
![Page 29: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/29.jpg)
![Page 30: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/30.jpg)
.rectangle2.skew {
transform: skewX(20deg);
margin-left: 21px;
font-size: 2em;
padding: 0.3em;
display: inline-block;
}
.rectangle2.skew:hover {
transform: skewX(-20deg);
}
![Page 31: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/31.jpg)
.scalable .scale:hover {
transform: scale(1.2);
}
Triangles
![Page 32: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/32.jpg)
.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
![Page 33: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/33.jpg)
.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
![Page 34: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/34.jpg)
.rotate .yin-yang:hover {
transform: rotate(99deg);
}
![Page 35: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/35.jpg)
.translate .pacman:hover {
transform: translate(50px, 0px);
border-right: 60px solid #E9E900;
}
![Page 36: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/36.jpg)
CSS TRANSITIONS
.example {
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}
![Page 37: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/37.jpg)
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/
![Page 38: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/38.jpg)
CSS TRANSITIONS
easelinearease-inease-outease-in-outstep-startstep-endcubic-bezier(0, 0, 0.58, 1);
http://css3.bradshawenterprises.com/transitions/
![Page 40: Tao of CSS](https://reader036.vdocuments.mx/reader036/viewer/2022081604/5881260e1a28ab00438b4585/html5/thumbnails/40.jpg)
PLEASE USE THE SURVEY APP TO SEND US FEEDBACK.
HELP US IMPROVE!
ploneconf.sixfeetup.com