part_03_generated.html

<!doctype html>
<html>
  <head>
    <!--[if gte IE 9]>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <![endif]-->
    <!--[if lt IE 9]>
      <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
    <![endif]-->
    <meta charset="utf-8" />
    <title>CSS3: Generated Content</title>
     <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" href="css/screen.css" media="projection, screen"/>
   <link rel="stylesheet" href="css/print.css" media="print"/>
   <style>

body, #presentation, #slides {
	-webkit-transition: all 1.5s linear;
	-moz-transition: all 1.5s linear;
	-ms-transition: all 1.5s linear;
	-o-transition: all 1.5s linear;
	transition: all 1.5s linear;
}

/* INTRO TO GENERATED CONTENT */
.beforeafter::before {
  	content: "before content - ";
  }
.beforeafter::after{
	content: " - after content";
  }
.beforeafter:before,
.beforeafter:after {font-weight: bold;}

/* GENERATED CONTENT: 2 FREE FAUX ELEMENTS */
.beforeafterdivcont {position:relative;}
.beforeafterdiv,
.beforeafterdiv:before,
.beforeafterdiv:after,
.beforeafterdiv i {
	height: 200px;
	content: "";
	border: 1px solid blue;
	position:relative;
	background-color: red;
	-webkit-transform: none;
	display:inline-block;
	box-shadow:3px 3px rgba(0,0,0,0.2),-3px -3px rgba(0,0,0,0.2), ;
	margin: 5px;
  font-size: 3rem;
}

.beforeafterdiv:before {
	content: "before";
	background-color: green;
	margin-right: -50px;
	color: #fff;
	-webkit-transform: translatez(15px);
}
.beforeafterdiv:after {
	content: "after";
	background-color: blue;
	margin-left: -50px;
	color: #fff;
	-webkit-transform: translatez(5px);
	}
.beforeafterdiv i {
	background-color: yellow;
}
/* GENERATED CONTENT : LINKS */
.ba li {list-style-type: none; margin-bottom: 20px;}
.ba a:before {
  color: #ffffff;
  background: #000000;
  font-size: 120%;
  padding: 2px 5px;
  display: inline-block;
  width: 1.2em;
  margin-right: 10px;
  text-align: center;
}
.ba a[href^="mailto:"]:before {
  content: "\2709 ";
}
.ba a[href^="tel:"]:before {
  content: "\2706";
}
.ba a[href$="vcs"]:before {
  content: "\231A";
}

/* GENERATED CONTENT -- QUOTES */
blockquote.gc p:before, blockquote.gc p:after {
  font-size: 2em;
  color: #C7573A;
  line-height: 0;
  vertical-align: middle;
}
blockquote.gc p:first-child:before {
  content: "\275D";
  margin: 0 5px 0 -48px;
}
blockquote.gc p:last-child:after {
  content: "\275E";
  margin: 0 -40px 0 5px;
}

/* THOUGHT BUBBLE & QUOTE */
.quote {
	border-radius: 10px;
	position:relative;
	padding: 20px;
	background-color: red;
	color: white;
}
.quote:after {
	position:absolute;
	content: '';
	width: 0;
	height:0;
	border: 20px solid blue;
	border-color: red transparent transparent transparent;
	bottom: -39px;
	left: 20px;
}

.thought {
	border-radius: 50%;
	border: 5px solid blue;
	background-color: white;
	float: right;
	position:relative;
	padding: 40px;
	background-color: #fff;
	overflow:visible;
	margin-bottom: 80px;
}
.thought:before,
.thought:after {
	content: '';
	border: 5px solid blue;
	border-radius: 50%;
	position:absolute;
	left: 20%;
	bottom: -30px;
	width: 40px;
	height: 40px;
	background-color: #fff;
}
.thought:after {
	height: 20px;
	width: 20px;
	bottom: -50px;
	left: 12%;
}

/* TOOL TIP */
p [data-tooltip="true"] {
	border-bottom: 1px solid;
	text-decoration:none;
	line-height:1;
	display:inline;
	z-index: 0;
}
p [data-tooltip="true"]:hover {
	position: relative;
	}
p [data-tooltip="true"]:hover:before {
	content: attr(title);
	position: absolute;
	top: 45px;
	left: 0;
	background-color: #C7573A;
	color: white;
	max-width: 10em;
	min-width: 5em;
	font-style: normal;
	padding: 5px;
	border-radius: 10px;
	text-align:center;
	z-index: 100;
}
p [data-tooltip="true"]:hover:after {
	content: "";
	position:absolute;
	top: 1.1rem;
	border: 15px solid;
	position: absolute; left: 20px;
	border-color:  transparent transparent #C7573A ;
}

.d3 {
	-webkit-transform: perspective(500px) rotateY(40deg);
	margin: 20px auto;

}
.attribute a[href^=http]:hover {
   position: relative;
}
.attribute a[href^=http]:hover:after {
   content: attr(href);
   position: absolute;
   top: 1em;
   left: 0;
   background-color: black;
   color: white;
   padding: 3px 5px;
   line-height:1;
}
/* brown: C7573A;*/
   </style>

  </head>
  <body>
  <header>
    <nav>
        <ul>
            <li class="button cancel" id="back">Back</li>
            <li class="button done" id="next">Next</li>
        </ul>
    </nav>
</header>
  <div id="topinfo">

  </div>

  <div id="info">
    <p>
    <span class="key">&rarr;</span> and <span class="key">&rarr;</span> to change slides.
    <span class="key">2</span> for comments. <a href="http://estelle.github.com/CSS-Workshop">estelle.github.com/CSS-Workshop</a>
    </p>
  </div>

  <div id="presentation">

   <div id="presentation-counter"></div>

   <div id="slides">
<!-- slidedeck title -->
<div class="slide normal">
    <header>
    	<h1 style="font-size:200%;">CSS: from Knowledgable to Ninja</h1>
    </header>
     <section class="content">
     <p> ◈ Estelle Weyl</p>
  <p> ◈ <a href="http://www.twitter.com/estellevw">@estellevw</a></p><p> ◈ <a href="http://www.standardista.com">www.standardista.com</a></p>
     </section>
    </div>

<!-- OUTLINE -->
<div class="slide normal">
 <header><h1>Course Outline</h1></header>
 <section class="content">
  <ol><li><a href="../selectors/">Selectors</a></li>
    <li><a href="part_02_specificity.html">Specificity</a></li>
    <li><a href="part_03_generated.html">Generated Content</a></li>
    <li><a href="part_04_media.html">Media Queries</a></li>
    <li><a href="part_04_media.html#slide10">Debugging</a></li>
    <li><a href="part_06_colors.html">Colors &amp; Transparency </a></li>
    <li><a href="part_07_fonts.html">Fonts / Typography </a></li>
    <li><a href="part_08_backgrounds.html">Backgrounds &amp; Borders </a></li>
    <li><a href="../gradients/">Gradients</a></li>
    <li><a href="part_10_transforms.html">Transforms</a></li>
    <li><a href="../animation/">Transitions &amp; Animation</a></li>
<li><a href="part_12_features.html">Other Features</a></li>
</ol>
 </section>
</div>

<!-- title -->
<div class="slide intro">
     <header><h1>Part 3: Generated Content</h1></header>
</div>


<!-- :before and :after  -->
<div class="slide normal">
     <header><h1>::before and ::after</h1></header>


     <section class="content">
  <pre contenteditable>p:before {
  content: "before content - ";
  font-weight: bold;
}
p:after{
  content: " - after content";
  font-weight: bold;
}</pre>

<pre contenteditable>&lt;p>the content&lt;/p></pre>

<p class="beforeafter">the content</p>
<pre contenteditable>&lt;p>
    &lt;before&gt;before content - &lt;/before>
        the content
    &lt;after&gt; - after content&lt;/after>
&lt;/p></pre>
<a href="files/31_generatetext.html" target="play" class="objectlink">Try it out</a> </section>

    </div>


<div class="slide object">
<header><h1>Try it out</h1></header>
<object data="files/31_generatetext.html"></object>
<a href="files/31_generatetext.html" target="play" class="objectlink">Try it out</a>
</div>


<!-- 2 free elements  -->
<div class="slide intro">
     <header><h1>Pseudo Elements</h1></header>
     <section class="content">
     You get 2 free stylable faux elements for every non-empty element
     <div class="beforeafterdivcont  d3">
     	<div class="beforeafterdiv"><i>Content</i></div>
      </div>
     </section>
 </div>

<!-- Pseudoelement Syntax & Support-->
<div class="slide normal">
     <header><h1>Syntax</h1></header>
     <section class="content">
     <pre contenteditable>
 element:before {
 	content: "REQUIRED";
 }
 </pre>
 <ul class="icons">
         <li class="chrome">Chrome</li>
         <li class="safari">Safari</li>
         <li class="firefox">Firefox</li>
         <li class="opera">Opera</li>
         <li class="ie ">IE 8</li>
     </ul>
      <pre contenteditable>
 element:before {
    content: '';                  /* empty */
    content: " (.pdf) ";          /* any text */
    content: "\2603";             /* unicode */
    content: " (" attr(href) ")"; /* attributes */
    content: counter(name);
        counter-increment: name;  /* counters */
 }
 </pre>
     </section>
 </div>

<!--  Special Characters -->
<div class="slide normal">
     <header><h1>Special Character</h1></header>
     <section class="content">
     <pre contenteditable>
 element:before {
 	content: "\2603";
 }
 </pre>
<object data="http://evotech.net/articles/testjsentities.html" style="height:300px; width:100%;"></object>
<p><a href="files/32_generatetext.html" target="play">Try it out</a><br>
 <a href="http://copypastecharacter.com/">CopyPasteCharacter.com</a></p>
 <a class="objectlink" href="http://evotech.net/articles/testjsentities.html" target="resource">Calculator</a>
     </section>
 </div>

<!-- counters and content -->
<div class="slide normal">
     <header><h1>Values for content:</h1></header>
     <section class="content">
     <dl class="deprecated listed">
  <dt><span title="none"><strong>none</strong></span></a></dt>
  <dd>Same as no content property declared.</dd>
  <dt><span title="normal"><strong>normal</strong></span></a></dt>
  <dd>Same as no content property declared.</dd>
  <dt><span title="&lt;string&gt;"><strong>string</strong></a></span></dt>
  <dd>A string of text. Can be combined with URL, counter, attr(x), quotes, etc.</dd>
  <dt><span title="&lt;uri&gt;"><strong>image</strong></span></dt>
  <dd>URL of  a resource, usual an image</dd>
  <dt><span title="&lt;counter&gt;"><strong>counter</strong></a></span></dt>
  <dd>'counter(name), counter(name, style), 'counters(name, string)' or 'counters(name, string, style)'.  'name' is a string, but not  'none', 'inherit' or 'initial'. </dd>
  <dt><span title="open-quote"><strong>open-quote</strong></a></span> / <span title="close-quote"><strong>close-quote</strong></a></span><a href="http://www.w3.org/TR/CSS2/generate.html" target="resource">⎘</a></dt>
  <dd>The appropriate string set in the  <strong>'quotes'</strong></a> property.</dd>
  <dt><span title="no-open-quote"><strong>no-open-quote</strong></a></span> / <span title="no-close-quote"><strong>no-close-quote</strong></a></span></dt>
  <dd>Does not include quotes,  but increments  the level of nesting for quotes.</dd>
  <dt><span title="attr()"><strong>attr(X)</strong></span></a></dt>
  <dd>Displays the value of the attribute 'X'</dd>
</dl>
<pre contenteditable>body {counter-reset: sections;}
header h1.sectiontitle:before{
	content: "Part " counter(sections) ": ";
	counter-increment: sections;
}</pre>
<a href="http://www.standardista.com/css3/creating-counters-with-generated-content/" target="resource" class="objectlink">Tutorial</a>
     </section>
 </div>

<div class="slide">
  <header><h1>attr() - FUTURE</h1></header>
    <section class="content">
      <p>CSS 2.1</pre>
      <pre contenteditable>attr( attrName )</pre>
      <p>CSS3</p>
      <pre contenteditable>attr( attrName unit? [ , fallback ]? )</pre>
      <dl class="deprecated">
        <dt>string</dt>
<dd>contents of a CSS string. Default is the empty string.</dd>
<dt>color</dt>
<dd>Must parse as a readable color. Default is ‘currentColor’.</dd>
<dt>url</dt>
<dd>Default is ‘about:invalid’. Relative URLs will be made absolute, not relative to the style sheet.</dd>
<dt>integer</dt>
<dd>Default is ‘0’</dd>
<dt>number</dt>
<dd>Default is ‘0’</dd>
<dt>length, angle, time or frequency</dt>
<dd>Default is ‘0’ in the relevant units. If the unit is a relative length, it will be computed to an absolute length.</dd>
<dt>length or unit token </dt>
<dd>'em’ ‘ex’ ‘px’ ‘rem’ ‘vw’ ‘vh’ ‘vmin’ ‘vmax’ ‘mm’ ‘cm’ ‘in’ ‘pt’ ‘pc’ ‘deg’ ‘grad’ ‘rad’ ‘ms’ ‘s’ ‘Hz’ ‘kHz’ or ‘%'. If the unit is a relative length, it will be computed to an absolute length.</dd>
      </dl>
<pre contenteditable>&lt;p data-count="5">Hi&lt;/p>

width: attr(data-count em, auto);</pre>
    </section>
</div>

<div class="slide object">
<header><h1>Try it out</h1>
<object data="files/31_generatetext.html"></object>
<a href="files/31_generatetext.html" target="play" class="objectlink">Try it out</a>
</div>


<!-- Generated Content: links icons -->
<div class="slide normal">
     <header><h1>Simple Use Cases</h1></header>
     <section class="content ba">

     <pre contenteditable style="float: left; margin-right: 30px;">a:before {
  color: #ffffff;
  background: #000000;
  font-size: 120%;
  padding: 2px 5px;
  display: inline-block;
  width: 1.2em;
  margin-right: 10px;
  text-align: center;
}
a[href^="mailto:"]:before {
  content: "\2709 ";
}
a[href^="tel:"]:before {
  content: "\2706";
}
a[href$="vcs"]:before {
  content: "\231A";
}</pre>

<ul>
	<li><a href="mailto:spam@yahoo.com">spam@yahoo.com</a></li>
	<li><a href="tel:18005551212">1.800.555.1212</a></li>
	<li><a href="ical.vcs">Add to Calendar</a></li>
</ul>
     </section>
 </div>

 <!-- attribute example -->
 <div class="slide normal">
     <header><h1>Attribute Values as content</h1></header>
     <section class="content attribute">
     <p>There are <a href="files/32_generatetext.html">exercises</a>, or you can search <a href="http://lmgtfy.com/?q=css+generated+content+attributes">Google</a>.</p>
     <pre contenteditable>a[href^=http]:hover {
   position: relative;
}
a[href^=http]:hover:after {
   <b>content: attr(href);</b>
   position: absolute;
   top: 1em;
   left: 0;
   background-color: black;
   color: white;
   padding: 3px 5px;
   line-height:1;
} </pre>
     </section>
 </div>


<!-- quotes example -->
<div class="slide normal">
     <header><h1>More uses</h1></header>
     <section class="content">
<pre contenteditable>&lt;blockquote&gt;
  &lt;p&gt;With generated content you can create text effects.&lt;/p&gt;
  &lt;p&gt;We'll cover other uses next.&lt;/p&gt;
&lt;/blockquote&gt;</pre>
<pre contenteditable style="float: left; position:relative; margin-right: 50px;">
blockquote p:before,
blockquote p:after {
  font-size: 2em;
  color: #C7573A;
  line-height: 0;
  vertical-align: middle;
}
blockquote p:first-child:before {
  content: "\275D";
  margin: 0 5px 0 -40px;
}
blockquote p:last-child:after {
  content: "\275E";
  margin: 0 -40px 0 5px;
}</pre>
<blockquote class="gc"><p>With generated content you can created text effects.</p><p>We'll cover other uses next.</p></blockquote>
     </section>
 </div>

<!-- quote bubble -->
 <div class="slide normal">
     <header><h1>Quotes</h1></header>
     <section class="content">

     <p class="quote">This is a quote<a href="files/33_bubbles.html" target="play" style="color: inherit">✍</a> </p>

<pre contenteditable>.quote {
    border-radius: 10px;
    position:relative;
    padding: 20px;
    background-color: red;
    color: white;
}
.quote:after {
    position:absolute;
    content: '';
    width: 0; height:0;
    border: 20px solid tran&hellip;
    border-top-color: red;
    bottom:-39px; left:20px;
}</pre>
     </section>
 </div>


 <!-- quote bubble -->
 <div class="slide normal">
     <header><h1>Thought bubbles</h1></header>
     <section class="content">

     <p class="thought">This is a thought bubble <a href="files/34_bubbles.html" target="play" style="color: inherit">✍</a></p>

<pre contenteditable style="font-size: 75%; padding:0">.thought,.thought:before,
.thought:after  {
  border-radius: 50%;
  border: 5px solid blue;
  background-color: white;
  position:relative;
}
.thought:before,
.thought:after {
  content: '';
  position:absolute;
  left: 20%; bottom: -30px;
  height: 40px; width: 40px;
}
.thought:after {
  left: 12%; bottom: -50px;
  height: 20px; width: 20px;
}</pre>
     </section>
 </div>

<!-- CSS-Tricks shapes -->
<div class="slide object">
     <object data="http://css-tricks.com/examples/ShapesOfCSS/" style="width:100%; height: 100%;"></object>
     <header style="position:absolute; top: 10px; width: 100%; text-align:center; background-color: rgba(255,255,255,0.9);"><h1><a href="http://css-tricks.com/examples/ShapesOfCSS/" target="play">Shapes</a></h1></header>
     <a class="objectlink" href="http://css-tricks.com/examples/ShapesOfCSS/" target="resource">Visit Site</a>
 </div>

<!-- CSS-Tricks -->
<div class="slide object">
     <object data="http://css-tricks.com/pseudo-element-roundup/" style="width:100%; height: 100%;"></object>
      <header style="position:absolute; top: 10px; width: 100%; text-align:center; background-color: rgba(255,255,255,0.9);"><h1><a href="http://css-tricks.com/pseudo-element-roundup/" target="play">Other ideas</a></h1></header>
      <a class="objectlink" href="http://css-tricks.com/pseudo-element-roundup/" target="resource">Visit Site</a>
 </div>

<!-- Tool Tip Example -->
<div class="slide normal">
     <header><h1>Try it: Tool Tip</h1></header>
     <section class="content">
     <p>In this section you have learned the general idea of using generated content to create effects and / or to provide additional information.  Try hovering over me to find out how awesome <i title="Generated Content Rocks my world" data-tooltip="true">generated content</i> can be.</p>
     <p>Open up a text editor and try creating a <i title="'Cause tool tips are awesome" data-tooltip="true">tooltip</i> without looking at the code. But, if you must, the code is attached, or you can check out your web inspector.</p>
     <p style="margin-bottom: 50px;">Here is <a title="Don't cheat" data-tooltip="true" href="files/35_tooltip.html" target="play">one solution</a></p>
     </section>
</div>

<!--NEXT-->
<div class="slide intro">
     <header><h1>Part 4:<br>Media Queries</h1></header>
     <section class="content">(briefly)</section>
    <h1><a href="part_04_media.html#slide3">Next ➹</a></h1>
</div>

  </div>
  <script src="slides.js"></script>
  </body>
</html>