API tools faq
paste
Advertisement
Guest User

BluePrint + JQuery : Rounded borders ans corners

a guest
Feb 17th, 2011
354
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 7.02 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
  2.  
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.    
  6.     <!-- Chargement des feuilles de style BluePrint. -->
  7.     <link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection">
  8.     <link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print">
  9.     <!--[if lt IE 8]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
  10.    
  11.     <!-- Chargement des librairies JavaScript. -->
  12.     <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
  13.     <script type="text/javascript" src="jquery.corner.js"></script>
  14.    
  15.     <script language="javascript">
  16.         $(function()
  17.         {
  18.             // We create rounded corners for all divisions that have the attribute "box".
  19.             $("[box]").corner("10px");
  20.  
  21.             // We create the rounded border.
  22.             $('div.inner').corner("round 8px");
  23.             $('div.outer').corner("round 10px");
  24.         });
  25.     </script>
  26.        
  27.     <style type="text/css">
  28.    
  29.         .padding10 { padding:10px; }
  30.        
  31.         .padding11 { padding:11px; }
  32.        
  33.         .padding15 { padding:15px; }
  34.        
  35.         .padding20 { padding:20px; }
  36.        
  37.         .border1 { border-width:1px; border-style:solid; border-color:#000000; }
  38.        
  39.         .bigdiv { width:920px; }
  40.    
  41.         .gradient   {
  42.                         background-image: url("sectionLrgBack.jpg");
  43.                         background-repeat: no-repeat;
  44.                         color: #000000;
  45.                         width: 100%;
  46.                         text-align: left;
  47.                    }
  48.                    
  49.         .green  { background-color:#BDFFB2; }
  50.                
  51.         .blue   { background-color:#B2E3FF; }
  52.                
  53.         .orange { background-color:#FFAE80; }
  54.            
  55.         div.outer {
  56.                     float:left;
  57.                     background: #c82;
  58.                     padding-left:5px;
  59.                     padding-right:5px;
  60.                     padding-top:4px;
  61.                     padding-bottom:5px;
  62.                     width:940px;
  63.                   }
  64.        
  65.         div.inner {
  66.                     padding-left: 30px;
  67.                     padding-right: 30px;
  68.                     padding-top: 10px;
  69.                     padding-bottom: 10px;
  70.                     margin-left:5px;
  71.                   }
  72.            
  73.     </style>
  74.    
  75. </head>
  76. <body>
  77.    
  78.     <div class="container">
  79.  
  80.         <h1>Introduction</h1>
  81.        
  82.         <div class="span-24 last">
  83.             <p>This page shows how to add rounded corners with BluePrint and JQuery.</p>
  84.             <ul>
  85.                 <li>BluePrint: http://blueprintcss.org</li>
  86.                 <li>JQuery: http://jquery.com/</li>
  87.                 <li>JQuery plugin for rounded corners: http://jquery.malsup.com/corner/</li>
  88.             </ul>
  89.         </div>
  90.    
  91.         <h1>Using the JQuery Plugin to create rounded corners</h1>
  92.    
  93.         <div box="yes" class="orange bigdiv padding15 large clear">
  94.             This is not a "BluePrint division".<br/>
  95.             Total width = width + padding-right + padding-left = 920+15+15 = 950px.<br/>
  96.             Please note the use of the class "clear": The current division will place itself underneath all divisions previously declared in the document.
  97.         </div>
  98.        
  99.         <h1>Using the JQuery Plugin with BluePrint classes</h1>
  100.        
  101.         <h2>Imbricated divisions</h2>
  102.        
  103.         <div class="span-12">
  104.             <div box="yes" class="green padding15 large">
  105.             Rounded borders division, inside a BluePrint's division.
  106.             </div>
  107.         </div>
  108.         <div class="span-12 last">
  109.             <div box="yes" class="blue padding15 large">
  110.             Rounded borders division, inside a BluePrint's division.
  111.             </div>
  112.         </div>
  113.    
  114.         <h2>Rouded corners on BluPrint divisions</h2>
  115.  
  116.         <div box="yes" class="orange padding20 span-23">
  117.        
  118.             <b>BluePrint outer division (roange):</b>
  119.             <ul>
  120.                 <li>padding-left=20px</li>
  121.                 <li>padding-right=20px</li>
  122.                 <li>Nomimal width=910px (span-23)</li>
  123.                 <li>Total width of the outer BluePrint division=910+20+20=950px</li>
  124.             </ul>
  125.            
  126.             <p>And:</p>
  127.            
  128.             <b>Inner divisions (green and blue):</b>
  129.             <ul>
  130.                 <li>Gap between the 2 inner BluePrint divisions (the green and the blue): 10px</li>
  131.                 <li>Width of the inner green BluePrint division: 450px.</li>
  132.                 <li>Width of the inner blue BluePrint division: 450px.</li>
  133.                 <li>Total width: 450 + 450 + 10 = 910px (that is: The size of the outer division - span-23)</li>
  134.             </ul>
  135.        
  136.             <div box="yes" class="span-11 padding10 green">
  137.                 <b>BluePrint inner left division.</b>
  138.                 <ul>
  139.                     <li>padding-left=10px</li>
  140.                     <li>padding-right=10px</li>
  141.                     <li>Nomimal width=430px (that is: span-11)</li>
  142.                     <li>Total width=430+10+10=450px</li>
  143.                 </ul>
  144.             </div>
  145.            
  146.             <div box="yes" class="span-11 padding10 blue last">
  147.                 <b>BluePrint inner right division.</b>
  148.                 <ul>
  149.                     <li>padding-left=10px</li>
  150.                     <li>padding-right=10px</li>
  151.                     <li>Nomimal width=430px (that is: span-11)</li>
  152.                     <li>Total width=430+10+10=450px</li>
  153.                     <li>Trick: Make sure to set the CSS class "last"!</li>
  154.                 </ul>
  155.             </div>    
  156.         </div>
  157.        
  158.         <h1>Using JQuery to create rounded borders on BluePrint's divisions</h1>
  159.        
  160.         <div class="outer">
  161.             <div class="inner span-22 orange">
  162.            
  163.                 <b>Outer division:</b>
  164.                 <ul>
  165.                     <li>Total width = width + paddin-left + padding-right = 940 + 5 + 5 (that is: span-24)</li>
  166.                 </ul>
  167.                
  168.                 <b>BluePrint inner division:</b>
  169.                 <ul>
  170.                     <li>Total width = span-22 + paddin-left + padding-right = 870 + 30 + 30 = 940px</li>
  171.                     <li>Trick: BluePrint's class defines a right margin of 10px. But, there is nothing to the right of the division. Therefore, this space is not included in the calcul of the total width.</li>
  172.                     <li>Position of the right border: margin-left + Total width = 5 + 940 = 945px (from the left).
  173.                     <li>Position of the left border: margin-left = 5px (from the left).</li>
  174.                 </ul>
  175.             </div>
  176.         </div>
  177.    
  178.         <hr class="space"/>
  179.    
  180.     </div> <!-- .container -->
  181. </body>
  182. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!