Tao of CSS

I LOVE CSS WAY TOO MUCH
Rob Porter

BASIC CSS SHAPES
▸ Circle
▸ Square
▸ Rectangle
▸ Ovals

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

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

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

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

BORDER DRAWN CSS SHAPES
▸ Triangles
▸ Trapezoid
▸ Star

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

.triangle-up {
width: 0;
height: 0;
white;
white;
solid #298BE2;
}
Triangles

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

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

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

.triangle-top-left {
width: 0;
height: 0;
#298BE2;
transparent;
}
Triangles

.triangle-top-left {
width: 0;
height: 0;
#298BE2;
white;
}
Triangles

.triangle-top-right {
width: 0;
height: 0;
#298BE2;
transparent;
}
Triangles

.triangle-bottom-left {
width: 0;
height: 0;
solid #298BE2;
transparent;
}
Triangles

.triangle-bottom-right {
width: 0;
height: 0;
solid #298BE2;
transparent;
}
Triangles

.trapezoid {
height: 0;
width: 100px;
solid #298BE2;
transparent;
transparent;
}
Triangles

.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-top: 100px solid #298BE2;
position: absolute;
content: "";
top: 30px;
left: -50px;
}

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

.t.talkbubble {
width: 120px;
height: 80px;
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;
}

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

.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%;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}

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

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

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

.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

.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
}
Rotate

.rotate .yin-yang:hover {
}

.translate .pacman:hover {
transform: translate(50px,
0px);
#E9E900;
}

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

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/

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/

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

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

Tao of CSS

More Related Content

Similar to Tao of CSS (20)

Recently uploaded (20)

Tao of CSS