Tao of CSS
40
TAO OF CSS ROB PORTER
-
Upload
robzonenet -
Category
Technology
-
view
255 -
download
0
Transcript of Tao of CSS
TAO OF CSSROB PORTER
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%;
}
<div class=“max-circle">
<img src="Max-fall.png" />
</div>
.square {
background: #298BE2;
width: 200px;
height: 200px;
}
.rectangle {
background-color: #298BE2;
width: 100px;
height: 200px;
float: 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;
border-left: 50px solid white;
border-right: 50px solid white;
border-bottom: 100px solid #298BE2;
}
Triangles
.triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #298BE2;
}
Triangles
.triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid #298BE2;
border-bottom: 50px solid transparent;
}
Triangles
.triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #298BE2;
border-bottom: 50px solid transparent;
}
Triangles
.triangle-top-left {
width: 0;
height: 0;
border-top: 100px solid #298BE2;
border-right: 100px solid transparent;
}
Triangles
.triangle-top-left {
width: 0;
height: 0;
border-top: 100px solid #298BE2;
border-right: 100px solid white;
}
Triangles
.triangle-top-right {
width: 0;
height: 0;
border-top: 100px solid #298BE2;
border-left: 100px solid transparent;
}
Triangles
.triangle-bottom-left {
width: 0;
height: 0;
border-bottom: 100px solid #298BE2;
border-right: 100px solid transparent;
}
Triangles
.triangle-bottom-right {
width: 0;
height: 0;
border-bottom: 100px solid #298BE2;
border-left: 100px solid transparent;
}
Triangles
Triangles
.trapezoid {
height: 0;
width: 100px;
border-bottom: 100px solid #298BE2;
border-left: 50px solid transparent;
border-right: 50px solid 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-right: 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;
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;
}
.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;
}
.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;
}
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;
transform: rotate(45deg);
}
Rotate
.rotate .yin-yang:hover {
transform: rotate(99deg);
}
.translate .pacman:hover {
transform: translate(50px, 0px);
border-right: 60px solid #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
easelinearease-inease-outease-in-outstep-startstep-endcubic-bezier(0, 0, 0.58, 1);
http://css3.bradshawenterprises.com/transitions/
PLEASE USE THE SURVEY APP TO SEND US FEEDBACK.
HELP US IMPROVE!
ploneconf.sixfeetup.com
