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">robzonenet@gmail.com</li></ul>

• Email address: robzonenet@gmail.comResult

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;}

Thank You

Any Questions?Email: robzonenet@gmail.comTwitter: @robzonenet