adding more cowbell to your site with css
DESCRIPTION
Adding More Cowbell to your Site with CSS. Rob Porter - Penn State - TLT Studio @robzonenet Examples from the talk: https://dl.dropboxusercontent.com/u/7733060/cowbell-talk/index.html. CSS. CSS is Awesome. CSS is Awesome. http://www.zazzle.com/css_is_awesome_coffee_mug-168716435071981928. - PowerPoint PPT PresentationTRANSCRIPT
Adding More Cowbell to your Site with CSS
Rob Porter - Penn State - TLT Studio@robzonenet
Examples from the talk: https://dl.dropboxusercontent.com/u/7733060/cowbell-talk/index.html
CSS
CSS is Awesome
CSS is Awesome
http://www.zazzle.com/css_is_awesome_coffee_mug-168716435071981928
http://inspectelement.com/wp-content/uploads/2013/03/Q3cUg29.gif
http://f3nation.com/wp-content/uploads/2013/01/Walken.jpg
Substring Matching Attribute Selectors
Attribute selectors let you target an element based on its attributes.
Substring Matching Attribute Selectors
[att=value] exact value
[att~=value] whitespace separated list of words
[att|=value] starts with and is immediately followed by -
[att^=value] starts with
[att$=value] ends with
[att*=value] contains
Substring Matching Attribute Selectors
[att=value] “exact value” example
input[type="text"] { width: 200px;
}
Substring Matching Attribute Selectors
[att$=value] “ends with” example
a[href$=".png"] { background: url(mypngicon.gif) no-repeat left 50%;
padding: 2px 0 2px 20px; }
Substring Matching Attribute Selectors
[att*=value] “contains” example
ul li a[href*="google.com"] { background-image: url(demo-images/google.png);
}
Pseudo-elements
Pseudo-elements::first-letter
::first-line
::before
::after
Pseudo-elements ::before, ::after
Adding Content to your site
CSS.email-address::before {
content: "Email address: ";}
HTML<ul>
<li class="email-address">[email protected]</li></ul>
• Email address: [email protected]
Pseudo-elements ::before, ::afterAdding Content to your site
CSS@media print {
#content a::after { content: " (" attr(href) ") ";
}}
HTML<a href=“http://studio.tlt.psu.edu/“>TLT STUDIO</a> is great
Printed PaperTLT STUDIO (http://studio.tlt.psu.edu) is great
Child Selectors
ul > li { margin: 0 0 5px 0; }
Child Selectors
ul > li { margin: 0 0 5px 0; }
ul li { margin: 0 0 5px 0; }
Child Selectors
ul > li { margin: 0 0 5px 0; } Descendants
ul li { margin: 0 0 5px 0; } Children
Child SelectorsHTML<ul>
<li>List item one</li><li>List item two
<ol><li>Nested list item
one</li><li>Nested list item
two</li></ol></li>
<li>List item three</li></ul>
CSSChildrenul li {
color: red; }
Descendantsul > li {
color: yellow; }
Child SelectorsHTML<ul>
<li>List item one</li><li>List item two
<ol><li>Nested list item
one</li><li>Nested list item
two</li></ol></li>
<li>List item three</li></ul>
CSSChildrenul li {
color: red; }
Descendantsul > li {
color: yellow; }
Child SelectorsHTML<ul>
<li>List item one</li><li>List item two
<ol><li>Nested list item
one</li><li>Nested list item
two</li></ol></li>
<li>List item three</li></ul>
CSSChildrenul li {
color: red; }
Descendantsul > li {
color: yellow; }
Adjacent Sibling Combinators
p + p {color: red;
}
Adjacent Sibling CombinatorsHTML
<div><p>Line One</p><p>Line Two</p><div>Box</div>
<p>Line Three</p>
</div>
CSSp + p {color: red;
}
div + p {color: yellow;
}
Adjacent Sibling CombinatorsHTML
<div><p>Line One</p>
<p>Line Two</p>
<div>Box</div><p>Line
Three</p></div>
CSSp + p {color: red;
}
div + p {color: yellow;
}
Adjacent Sibling CombinatorsHTML
<div><p>Line One</p><p>Line Two</p><div>Box</div>
<p>Line Three</p>
</div>
CSSp + p {color: red;
}
div + p {color: yellow;
}
General Sibling Combinators
p ~ p {color: red;
}
General Sibling CombinatorsHTML
<div><p>Line One</p><p>Line Two</p><div>Box</div>
<p>Line Three</p>
</div>
CSSp ~ p {color: red;
}
div ~ p {color: yellow;
}
General Sibling CombinatorsHTML
<div><p>Line One</p><p>Line Two</p><div>Box</div>
<p>Line Three</p>
</div>
CSSp ~ p {color: red;
}
div ~ p {color: yellow;
}
General Sibling CombinatorsHTML
<div><p>Line One</p><p>Line Two</p><div>Box</div>
<p>Line Three</p>
</div>
CSSp ~ p {color: red;
}
div ~ p {color: yellow;
}
Pseudo-classes:link
:visited
:hover
:active
Pseudo-classes:first-child
:last-child
:nth-child(N)
:nth-of-type(N)
:first-of-type
:last-of-type
Pseudo-classes:first-child HTML<div>
<p>Line One</p><p>Line Two</p><p>Line
Three</p><div>**Box**</
div><p>Line Four</p><p>Line Five</p></div>
CSSp:first-child {
color: red;}
Pseudo-classes:first-child HTML<div>
<h2>H2</h2><p>Line One</p><p>Line Two</p><p>Line
Three</p><div>**Box**</
div><p>Line Four</p><p>Line Five</p></div>
CSSp:first-child {
color: red;}
Pseudo-classes:nth-child(N) HTML
<div><p>Line One</p><p>Line Two</p>
<p>Line Three</p>
<div>**Box**</div>
<p>Line Four</p><p>Line Five</p>
</div>
CSSp:nth-child(3) {
color: red;}
Pseudo-classes:nth-child(N) HTML
<div><p>Line One</p><p>Line Two</p>
<p>Line Three</p>
<div>**Box**</div>
<p>Line Four</p><p>Line Five</p>
</div>
CSSp:nth-child(2n) {
color: red;}
Pseudo-classes:nth-child(N)
HTML<div>
<p>Line One</p><p>Line Two</p><p>Line
Three</p><div>**Box**</
div><p>Line Four</p><p>Line Five</p></div>
CSSp:nth-child(2n+1) {
color: red;}
Pseudo-classes:nth-child(N)
p:nth-child(An+B)
A = Cycle Size n = Counter starting at zero(A*0,
A*1, A*2,…)B = Offset value used to determine
where the iteration will begin
Pseudo-classes:nth-child(N)
p:nth-child(odd)
p:nth-child(even)
Pseudo-classes:nth-last-child(N)
p:nth-last-child(2n+3)
Pseudo-classes:nth-of-type(N)
Pseudo-classes:nth-of-type(N)
HTML<div>
<p>Line One</p><p>Line Two</p><p>Line
Three</p><div>**Box**</
div><p>Line Four</p><p>Line Five</p></div>
CSSp:nth-of-type(2n+1) {
color: red;}
Math in CSS?
calc()
Math in CSS?.sidebar {
width: 35%; float: left;
margin-right: 1em;}
.content { width: calc(65% - 1em);
float: right;}
Math in CSS?.column-1-12 {
width: 8.333%;}
.column-2-12 { width: 16.6667%;
}.column-3-12 { width: 25%;
}
Math in CSS?.column-1-12 {
width: 8.333%;}
.column-2-12 { width: 16.6667%;
}.column-3-12 { width: 25%;
}
.column-1-12 { width: calc(100% / 12);
}.column-2-12 {
width: calc(100% / 12 * 2);}
.column-3-12 { width: calc(100% / 12 * 3);
}
=>
Font Icons
Actually Font Characters Scales nicelyaria-hidden="true"
Free Font Icons
http://icomoon.io/http://fortawesome.github.io/Font-Awesome/icons/http://fontello.com/
Making Circles
circle: 1.) Border-radius: 50%
2.) Width, Height: should be same(square)
Making Circles.column-8-12 {
background: #006; color: white;
width: 300px; height: 300px;
-webkit-border-radius: 50px; -moz-border-radius: 50px;
border-radius: 50px;}
Box-Sizing
content-boxborder-box
Box Sizing
textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; }
Box Sizing
*, *::after, *::before { box-sizing: border-box;
}
CSS Transitions transition: padding 4s ease;
.example { padding: 1em;
transition: padding 4s ease; background-color: #006;
color: white; }
CSS Transitions transition: padding 4s ease;
.example { padding: 1em;
transition: padding 4s ease; background-color: #006;
color: white; }
CSS Transitions transition: padding 4s ease;
.example { padding: 1em;
transition: padding 4s ease; background-color: #006;
color: white; }
CSS Transitions transition: padding 4s ease;
.example { padding: 1em;
transition: padding 4s ease; background-color: #006;
color: white; }
CSS Transitions
transition: padding 4s ease;
ease linear ease-in ease-out ease-in-out step-start step-end
cubic-bezier(0, 0, 0.58, 1);
CSS Transitions
.example { padding: 1em; transition: padding 4s ease; background-color: #006; color: white; }.example:hover { padding: 4em; background-color: #060;}
