Permalink
Browse files

Tweaked classes so prettify can work as optimally as possible.

  • Loading branch information...
richbradshaw committed Feb 15, 2012
1 parent 3f62efb commit b5139a0c5c138adad000c7ba465d4d44f9e83e4a
Showing with 33 additions and 33 deletions.
  1. +3 −3 accordions.php
  2. +1 −1 animations.php
  3. +2 −2 cfimg1.php
  4. +3 −3 cfimg2.php
  5. +2 −2 cfimg3.php
  6. +2 −2 cfimg5.php
  7. +2 −2 flip.php
  8. +3 −3 legacy.php
  9. +3 −3 slide1.php
  10. +1 −1 slide2.php
  11. +6 −6 styles/default.css
  12. +2 −2 transforms.php
  13. +3 −3 transitions.php
View
@@ -94,7 +94,7 @@
<p>I'm using classes again here to define different states, then using jQuery to turn them on and off. As always, I could use the :target pseudo selector, but I'd want to use preventDefault() onClick anyway to prevent the page skipping up and down, so I might as well just do it all in jQuery.</p>
<h3>The Code</h3>
<p>HTML:</p>
-<pre class="prettyprint html">
+<pre class="prettyprint lang-html">
&lt;div id=&quot;accordion&quot;&gt;
&lt;section id=&quot;item1&quot;&gt;
&lt;p class=&quot;pointer&quot;&gt;&amp;#9654;&lt;/p&gt;&lt;h1&gt;&lt;a href=&quot;#&quot;&gt;A long paragraph&lt;/a&gt;&lt;/h1&gt;
@@ -112,7 +112,7 @@
&lt;/div&gt;
</pre>
<p>CSS:</p>
-<pre class="prettyprint css">
+<pre class="prettyprint lang-css">
#accordion section, #accordion .pointer, #accordion h1, #accordion p {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
@@ -171,7 +171,7 @@
}
</pre>
<p>Plus a bit of javascript to turn the classes on and off.</p>
-<pre class="prettyprint js">
+<pre class="prettyprint lang-js">
$(document).ready(function() {
$("#accordion section h1").click(function(e) {
$(this).parents().siblings("section").addClass("ac_hidden");
View
@@ -83,7 +83,7 @@
</div>
<h2>Code</h2>
<p>The interesting bit of this code is this bit of CSS (remember to add vendor prefixes):</p>
-<pre class="prettyprint css">
+<pre class="prettyprint lang-css">
@keyframes resize {
0% {
padding: 0;
View
@@ -35,14 +35,14 @@
</div>
<h3>Code</h3>
<p>First up, the HTML markup. Without CSS enabled, you just get two images. Remember to add alt text for production use.</p>
-<pre class="prettyprint html">
+<pre class="prettyprint lang-html">
&lt;div id=&quot;cf&quot;&gt;
&lt;img class=&quot;bottom&quot; src=&quot;/tests/images/Stones.jpg&quot; /&gt;
&lt;img class=&quot;top&quot; src=&quot;/tests/images/Summit.jpg&quot; /&gt;
&lt;/div&gt;
</pre>
<p>Then the CSS:</p>
-<pre class="prettyprint css">
+<pre class="prettyprint lang-css">
#cf {
position:relative;
height:281px;
View
@@ -43,15 +43,15 @@
<p class="center" id="cf_onclick">Click me to toggle</p>
<h3>Code</h3>
<p>First up, the HTML markup. Again, with no CSS enabled, you just get two images.</p>
-<pre class="prettyprint html">
+<pre class="prettyprint lang-html">
&lt;div id=&quot;cf2&quot; class=&quot;shadow&quot;&gt;
&lt;img class=&quot;bottom&quot; src=&quot;/tests/images/Stones.jpg&quot; /&gt;
&lt;img class=&quot;top&quot; src=&quot;/tests/images/Summit.jpg&quot; /&gt;
&lt;/div&gt;
&lt;p id=&quot;cf_onclick&quot;&gt;Click me to toggle&lt;/p&gt;
</pre>
<p>Then the CSS. I've added a class with the opacity value.</p>
-<pre class="prettyprint css">
+<pre class="prettyprint lang-css">
#cf2 {
position:relative;
height:281px;
@@ -76,7 +76,7 @@
}
</pre>
<p>Then the extremely short JS. Note that the browser is smart enough to realise that it can animate to the new properties, I didn't have to set them in javascript (thought that works too).</p>
-<pre class="prettyprint js">
+<pre class="prettyprint lang-js">
$(document).ready(function() {
$("#cf_onclick").click(function() {
$("#cf2 img.top").toggleClass("transparent");
View
@@ -92,7 +92,7 @@
<p class="center">Each image is visible for 9 seconds before fading to the other one.</p>
<h3>Code</h3>
<p>Everything's the same as <a href="#cfimg1">Demo 1</a>, but I've added this to the CSS and removed the hover selector</p>
-<pre class="prettyprint css">
+<pre class="prettyprint lang-css">
@keyframes cf3FadeInOut {
0% {
opacity:1;
@@ -224,7 +224,7 @@
</div>
<p class="center">Staggering the animations can result in a multiple image fader.</p>
<p>This time I've created an animation that goes from 0 to 1 opacity, then staggered the animations so only one is visible at once. It's not great, but it is maybe a start. Any suggestions on how to make this better would be gladly received!</p>
-<pre class="prettyprint css">
+<pre class="prettyprint lang-css">
#cf4a img:nth-of-type(1) {
animation-delay: 0;
}
View
@@ -28,11 +28,11 @@
<div id="cf6_image"></div>
<h3>Code</h3>
<p>This only works on Chrome 18+ and on Webkit Nightlies built in 2012 onwards. It seems to be a side effect of the CSS4 crossfading work, though this is a lot more useful.</p>
-<pre class="prettyprint html">
+<pre class="prettyprint lang-html">
&lt;div id=&quot;cf6_image&quot; class=&quot;shadow&quot;&gt;&lt;/div&gt;
</pre>
<p>Then the CSS:</p>
-<pre class="prettyprint css">
+<pre class="prettyprint lang-css">
#cf6_image {
margin:0 auto;
width:450px;
View
@@ -92,7 +92,7 @@
</div>
<h3>Code</h3>
<p>First, the markup.</p>
- <pre class="prettyprint html">
+ <pre class="prettyprint lang-html">
&lt;div id=&quot;f1_container&quot;&gt;
&lt;div id=&quot;f1_card&quot; class=&quot;shadow&quot;&gt;
&lt;div class=&quot;front face&quot;&gt;
@@ -106,7 +106,7 @@
&lt;/div&gt;
</pre>
<p>Then the CSS, stripped of the vendor prefixes to keep it clean.</p>
- <pre class="prettyprint css">
+ <pre class="prettyprint lang-css">
#f1_container {
position: relative;
margin: 10px auto;
View
@@ -3,7 +3,7 @@
<p>With all these examples, no attempt has been made to hack around browsers with no support, other than adding the opacity filter in IE where appropriate. This ends up as two lines, as they changed it to a different incorrect syntax between versions 7 and 8.</p>
<p>In most cases, the transition happens, but with no animation - you see the beginning and end frames but nothing in between. Depending on the site, this may or may not be acceptable. <a href="http://www.modernizr.com">Modernizr</a> provides a nice feature detection library, allowing you to easily add different CSS/JS for legacy browsers.</p>
<p>The best way to do this in practice is to include Modernizr, then to use some javascript such as:</p>
-<pre class="prettyprint js">
+<pre class="prettyprint lang-js">
speed = 500;
var vP = "";
@@ -55,13 +55,13 @@ function animate(object, cssProperties, callback, ms) {
<p>If you are using simple properties, you can call it like this:</p>
-<pre class="prettyprint js">
+<pre class="prettyprint lang-js">
animate($("#someID"),{"left":"100px"});
</pre>
<p>For things where the property to be changed has the vendor prefix concatenated to it, use:</p>
-<pre class="prettyprint js">
+<pre class="prettyprint lang-js">
var cssArgs = {};
cssArgs[vP+"transform"] = "translate(100px,0px)";
View
@@ -74,7 +74,7 @@
<p id="slide1_controls"><span class="selected" id="slide1-1">Image 1</span><span id="slide1-2">Image 2</span><span id="slide1-3">Image 3</span><span id="slide1-4">Image 4</span></p>
<h3>Code</h3>
<p>Firstly, the mark up:</p>
-<pre class="prettyprint html">
+<pre class="prettyprint lang-html">
&lt;div id=&quot;slide1_container&quot;&gt;
&lt;div id=&quot;slide1_images&quot;&gt;
&lt;img src=&quot;/images/Cirques.jpg&quot; /&gt;
@@ -91,7 +91,7 @@
&lt;/p&gt;
</pre>
<p>The CSS:</p>
-<pre class="prettyprint css">
+<pre class="prettyprint lang-css">
#slide1_controls span {
padding-right:2em;
cursor:pointer;
@@ -119,7 +119,7 @@
}
</pre>
<p>Again, I'm using javascript to bind events to the clickable controls. This time I'm adding the number of pixels to slide into the js, though I could have defined classes for this.</p>
-<pre class="prettyprint js">
+<pre class="prettyprint lang-js">
$(document).ready(function() {
$("#slide1-1").click(function() {
$("#slide1_images").css("left","0");
View
@@ -91,7 +91,7 @@
<p id="slide2_controls"><span class="selected" id="slide2-1">Image 1</span><span id="slide2-2">Image 2</span><span id="slide2-3">Image 3</span><span id="slide2-4">Image 4</span></p>
<h3>Code</h3>
<p>Exactly the same as Demo 1, but the JS looks like this: (times 5 for the vendor specific markup)</p>
-<pre class="prettyprint js">
+<pre class="prettyprint lang-js">
$(document).ready(function() {
$("#slide2-1").click(function() {
$("#slide2_images").css("-webkit-transform","translate(0px, 0px)");
View
@@ -83,27 +83,27 @@ pre:hover, .note:hover {
box-shadow: 10px 10px 5px #aaa;
}
-pre.html {
+pre.lang-html {
background-color:rgba(255,0,0,0.1);
}
-pre.html:hover {
+pre.lang-html:hover {
background-color:rgba(255,0,0,0.2);
}
-pre.css {
+pre.lang-css {
background-color:rgba(0,255,0,0.1);
}
-pre.css:hover {
+pre.lang-css:hover {
background-color:rgba(0,255,0,0.2);
}
-pre.js {
+pre.lang-js {
background-color:rgba(0,0,255,0.1);
}
-pre.js:hover {
+pre.lang-js:hover {
background-color:rgba(0,0,255,0.2);
}
View
@@ -59,7 +59,7 @@
<div class="clear"></div>
</div>
<p>The code for these looks like this, but with the appropriate vendor prefixes added:</p>
-<pre class="prettyprint css">
+<pre class="prettyprint lang-css">
#skew {
transform:skew(35deg);
}
@@ -178,7 +178,7 @@
<div class="clear"></div>
</div>
<p>The simplified code for those looks like this:</p>
-<pre class="prettyprint css">
+<pre class="prettyprint lang-css">
#transDemo4 div {
transition:all 2s ease-in-out;
perspective: 800;
View
@@ -2,7 +2,7 @@
<h1>How to use transitions</h1>
<p>If you haven't used transitions before, here's a brief introduction.</p>
<p>On the element you want to have animate, add the following CSS:</p>
-<pre class="prettyprint css">
+<pre class="prettyprint lang-css">
#id_of_element {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
@@ -217,13 +217,13 @@
<h2>Demo - advanced delays</h2>
<p>You can set the way different properties animate differently. In this example the normal (blue) circle has this CSS (with the appropriate vendor prefixes):</p>
-<pre class="prettyprint css">
+<pre class="prettyprint lang-css">
#dd_main2 {
transition: all 1s ease-in-out;
}
</pre>
<p>The delays (green) circle has this CSS instead:</p>
-<pre class="prettyprint css">
+<pre class="prettyprint lang-css">
#dd_main2 {
transition-property: top, left;
transition-duration: 1s, 1s;

0 comments on commit b5139a0

Please sign in to comment.