Add border-radius demo page. Tweak site CSS.

lojjic · Jan 27, 2013 · a45ef97 · a45ef97
1 parent f872c8d
commit a45ef97
Show file tree

Hide file tree

Showing 3 changed files with 162 additions and 6 deletions.
diff --git a/demos/border-radius.html b/demos/border-radius.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
+    <title>CSS3 PIE Demo: Buttons</title>
+
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+
+    <!--[if lt IE 9]>
+        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+<style type="text/css">
+
+body {
+    font-size: 12px;
+}
+
+#tests div {
+    padding: 1.5em;
+    margin: 1em 0;
+    behavior: url(/pie/PIE.htc);
+    position: relative;
+    background: #CCF;
+    overflow: hidden;
+}
+
+</style>
+
+</head>
+<body>
+
+
+<h1>PIE Demo: border-radius</h1>
+
+
+<!-- noformat on -->
+
+<p>This page demonstrates various aspects of PIE's <code>border-radius</code> rendering. Load this page in IE 6-8 to see it in action.</p>
+
+<div id="tests">
+    <h2>Uniform</h2>
+    <div>border-radius: 10px;</div>
+    <div>border-radius: 1em;</div>
+    <div>border-radius: 20%;</div>
+
+    <h2>Different per corner</h2>
+    <div>border-radius: 5px 10px 15px 20px;</div>
+    <div>border-radius: 0.5em 1em 1.5em 2em;</div>
+    <div>border-radius: 10% 20% 30% 40%;</div>
+
+    <h2>Single corner</h2>
+    <div>border-radius: 20px 0 0 0;</div>
+    <div>border-radius: 0 20px 0 0;</div>
+    <div>border-radius: 0 0 20px 0;</div>
+    <div>border-radius: 0 0 0 20px;</div>
+
+    <h2>X and Y</h2>
+    <div>border-radius: 30px / 10px;</div>
+    <div>border-radius: 3em / 1em;</div>
+    <div>border-radius: 20% / 50%;</div>
+    <div>border-radius: 5px 10px 15px 20px / 20px 15px 10px 5px;</div>
+
+    <h2>Uniform with border</h2>
+    <div>border-radius: 10px; border: 5px solid #000;</div>
+    <div>border-radius: 10px; border: 5px dotted #000;</div>
+    <div>border-radius: 10px; border: 5px dashed #000;</div>
+    <div>border-radius: 10px; border: 5px double #000;</div>
+    <div>border-radius: 10px; border: 5px groove #000;</div>
+    <div>border-radius: 10px; border: 5px ridge #000;</div>
+    <div>border-radius: 10px; border: 5px inset #000;</div>
+    <div>border-radius: 10px; border: 5px outset #000;</div>
+
+    <h2>Differing border widths</h2>
+    <div>border-radius: 10px; border: solid #000; border-width: 6px 9px 6px 3px;</div>
+    <div>border-radius: 10px; border: dotted #000; border-width: 6px 9px 6px 3px;</div>
+    <div>border-radius: 10px; border: dashed #000; border-width: 6px 9px 6px 3px;</div>
+    <div>border-radius: 10px; border: double #000; border-width: 6px 9px 6px 3px;</div>
+    <div>border-radius: 10px; border: groove #000; border-width: 6px 9px 6px 3px;</div>
+    <div>border-radius: 10px; border: ridge #000; border-width: 6px 9px 6px 3px;</div>
+    <div>border-radius: 10px; border: inset #000; border-width: 6px 9px 6px 3px;</div>
+    <div>border-radius: 10px; border: outset #000; border-width: 6px 9px 6px 3px;</div>
+
+    <h2>Border thicker than radius</h2>
+    <div>border-radius: 10px; border: 20px solid #000;</div>
+    <div>border-radius: 10px; border: 20px dotted #000;</div>
+    <div>border-radius: 10px; border: 20px dashed #000;</div>
+    <div>border-radius: 10px; border: 20px double #000;</div>
+    <div>border-radius: 10px; border: solid #000; border-width: 3px 20px 9px 15px;</div>
+    <div>border-radius: 10px; border: dotted #000; border-width: 3px 20px 9px 15px;</div>
+    <div>border-radius: 10px; border: dashed #000; border-width: 3px 20px 9px 15px;</div>
+    <div>border-radius: 10px; border: double #000; border-width: 3px 20px 9px 15px;</div>
+    <div>border-radius: 10px; border: groove #000; border-width: 3px 20px 9px 15px;</div>
+    <div>border-radius: 10px; border: ridge #000; border-width: 3px 20px 9px 15px;</div>
+    <div>border-radius: 10px; border: inset #000; border-width: 3px 20px 9px 15px;</div>
+    <div>border-radius: 10px; border: outset #000; border-width: 3px 20px 9px 15px;</div>
+
+    <h2>Zero-width borders</h2>
+    <div>border-radius: 10px; border: 20px solid #000; border-top-width: 0;</div>
+    <div>border-radius: 10px; border: 20px dotted #000; border-right-width: 0;</div>
+    <div>border-radius: 10px; border: 20px dashed #000; border-bottom-width: 0;</div>
+    <div>border-radius: 10px; border: 20px double #000; border-left-width: 0;</div>
+    <div>border-radius: 10px; border: 20px groove #000; border-top-width: 0;</div>
+    <div>border-radius: 10px; border: 20px ridge #000; border-right-width: 0;</div>
+    <div>border-radius: 10px; border: 20px inset #000; border-bottom-width: 0;</div>
+    <div>border-radius: 10px; border: 20px outset #000; border-left-width: 0;</div>
+
+    <h2>Differing border colors</h2>
+    <div>border-radius: 10px; border: 20px solid; border-color: red green blue orange;</div>
+    <div>border-radius: 10px; border: 20px dotted; border-color: red green blue orange;</div>
+    <div>border-radius: 10px; border: 20px dashed; border-color: red green blue orange;</div>
+    <div>border-radius: 10px; border: 20px double; border-color: red green blue orange;</div>
+    <div>border-radius: 10px; border: 20px groove; border-color: red green blue orange;</div>
+    <div>border-radius: 10px; border: 20px ridge; border-color: red green blue orange;</div>
+    <div>border-radius: 10px; border: 20px inset; border-color: red green blue orange;</div>
+    <div>border-radius: 10px; border: 20px outset; border-color: red green blue orange;</div>
+
+    <h2>Differing border colors and styles</h2>
+    <div>border-radius: 10px; border: 20px; border-color: red green blue orange; border-style: solid dotted dashed double;</div>
+    <div>border-radius: 10px; border: 20px; border-color: red green blue orange; border-style: groove ridge inset outset;</div>
+
+    <h2>Differing border colors and widths</h2>
+    <div>border-radius: 10px; border: solid; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
+    <div>border-radius: 10px; border: dotted; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
+    <div>border-radius: 10px; border: dashed; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
+    <div>border-radius: 10px; border: double; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
+    <div>border-radius: 10px; border: groove; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
+    <div>border-radius: 10px; border: ridge; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
+    <div>border-radius: 10px; border: inset; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
+    <div>border-radius: 10px; border: outset; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
+
+    <h2>Differing border colors, styles, and widths</h2>
+    <div>border-radius: 10px; border-style: solid dotted dashed double; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
+    <div>border-radius: 10px; border-style: groove ridge inset outset; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
+
+    <h2>Arrow-ish</h2>
+    <div>width: 0; height: 0; padding: 0; background: none; border-radius: 5px; border: 20px solid transparent; border-top-color: blue;</div>
+    <div>width: 0; height: 0; padding: 0; background: none; border-radius: 5px; border: 20px solid transparent; border-right-color: blue;</div>
+    <div>width: 0; height: 0; padding: 0; background: none; border-radius: 5px; border: 20px solid transparent; border-bottom-color: blue;</div>
+    <div>width: 0; height: 0; padding: 0; background: none; border-radius: 5px; border: 20px solid transparent; border-left-color: blue;</div>
+</div>
+
+<!-- noformat off -->
+
+<script type="text/javascript">
+$(function() {
+    $('#tests > div').each(function() {
+        this.style.cssText += this.firstChild.nodeValue;
+    });
+});
+</script>
+
+</body>
+</html>
+
diff --git a/site/pie-wp-theme/css/common.css b/site/pie-wp-theme/css/common.css
@@ -183,8 +183,8 @@ th, td {
 #mainNav .menu li a:hover {
     /*causes flicker before PIE re-renders: background: #008ECF;*/
     background: -webkit-gradient(linear,0 0,100% 0,from(#008ECF),to(#00AEEF));
-    background: -moz-linear-gradient(left,#008ECF,#00AEEF);
-    -pie-background: linear-gradient(left,#008ECF,#00AEEF);
+    background: -moz-linear-gradient(to right,#008ECF,#00AEEF);
+    -pie-background: linear-gradient(to right,#008ECF,#00AEEF);
     border-radius: 0; /*undo above*/
 }
 #mainNav .menu li.current_page_item a,

diff --git a/tests/hover-tests.html b/tests/hover-tests.html
@@ -10,7 +10,7 @@
         }
 
         .tester {
-            behavior: url(../build/PIE_uncompressed.htc);
+            behavior: url(../build/PIE.htc);
         }
 
         #test1 {
@@ -58,15 +58,15 @@
             padding: 2px 20px 1px;
             position: relative;
             text-decoration: none;
-            behavior: url(../build/PIE_uncompressed.htc);
+            behavior: url(../build/PIE.htc);
         }
         #menu li a:hover,
         #menu li a.pie_hover {
             /*background: #008ECF;*/
             background: -webkit-gradient(linear, 0 0, 100% 0, from(#008ECF) to(#00AEEF));
             background: -moz-linear-gradient(left, #008ECF, #00AEEF);
-            background: linear-gradient(left, #008ECF, #00AEEF);
-            -pie-background: linear-gradient(left, #008ECF, #00AEEF);
+            background: linear-gradient(to right, #008ECF, #00AEEF);
+            -pie-background: linear-gradient(to right, #008ECF, #00AEEF);
         }
         #menu li.active a {
             background: #FFF;