Domů › Kulaté rožky

Kulaté rožky

Kulaté rožky je možné vytvářet pomocí CSS vlastnosti border-radius.

Curvy Corners

Curvy Corners používají k vytovření kulatých rožků JavaScript.

Níže uvedený příklad použije JavaScript na vytváření kulatých rožků vždy (zvyšuje zátěž počítače):

  ...
  <style type="text/css">
    /* <![CDATA[ */
      .rounded {
        background-color: #ff0;
        border: 3px solid #f00;
      }
    /* ]]> */
  </style>
  <meta http-equiv="content-script-type" content="text/javascript" />
  <script type="text/javascript" src="scripts/curvycorners.js"></script>
  <script type="text/javaScript">
    /* <![CDATA[ */
      addEvent(window, 'load', initCorners);
      function initCorners() {
        var settings = {
          tl: {radius: 20},
          tr: {radius: 20},
          bl: {radius: 20},
          br: {radius: 20},
          antiAlias: true
        }
        curvyCorners(settings, ".rounded");
      }
    /* ]]> */
  </script>
</head>
<body>
  <h1>Curvy Corners</h1>
  <div class="rounded">
    Content
  </div>
  ...

Níže uvedený příklad použije JavaScript pouze v případě, kdy prohlížeč nepodporuje CSS3 vlastnot border-radius:

  ...
  <style type="text/css">
    /* <![CDATA[ */
      .rounded {
        background-color: #ff0;
        border: 3px solid #f00;
        /* Do rounding (native in Firefox and Safari) */
        border-radius: 20px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
      }
    /* ]]> */
  </style>
  <meta http-equiv="content-script-type" content="text/javascript" />
  <script type="text/JavaScript" src="scripts/curvycorners.js"></script>
</head>
<body>
  <h1>Curvy Corners</h1>
  <div class="rounded">
    Content
  </div>
  ...

Nifty Corners

Nifty Corners nabízí další způsob vytvoření kulatých rožků.

PřílohaVelikost
curvycorners-2.0.4.zip188.9 KB
curvy-corners-css.zip2.66 KB