Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Zaokrąglone rogi w CSS
#1
Kod:
<div id="box" class="okragle-wszystkie-rogi"> </div>

#box {
   width: 100px;
   height: 100px;
   background: red;
}

.okragle-wszystkie-rogi {
   -webkit-border-radius: 20px; /* Safari, Chrome */
   -khtml-border-radius: 20px;   /* Konqueror */
   -moz-border-radius: 20px; /* Firefox */
   border-radius: 20px;
}


Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type"
content="text/html;charset=ISO-8859-1">
<title>Box by tedd</title>

  
  <link rel="stylesheet"
href="http://sperling.com/examples/box/style.css" media="screen">
</head>
<body>
<div id="box"><!--- box border -->
<div id="lb">
<div id="rb">
<div id="bb">
<div id="blc">
<div id="brc">
<div id="tb">
<div id="tlc">
<div id="trc"><!-- -->
<div id="content">
<h1>Xxxx XX xXX X x xXX x XXXX</h1>
<p>
XXxx XX xxX xxXx</p>
<p><strong> Here is the HTM code.</strong></p>
<p>&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot;<br>
  &quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;</p>
<p>&lt;html&gt;</p>
<p>&lt;head&gt;<br>
  &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html;charset=ISO-8859-1&quot;&gt;<br>
  &lt;title&gt;Box by tedd&lt;/title&gt; <br>
  &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; media=&quot;screen&quot;&gt;<br>
  &lt;/head&gt;</p>
<p>&lt;body&gt;</p>
<p> &lt;div id=&quot;box&quot;&gt; </p>
<p> &lt;!--- box border --&gt;<br>
  &lt;div id=&quot;lb&quot;&gt;<br>
  &lt;div id=&quot;rb&quot;&gt;<br>
  &lt;div id=&quot;bb&quot;&gt;&lt;div id=&quot;blc&quot;&gt;&lt;div id=&quot;brc&quot;&gt;<br>
  &lt;div id=&quot;tb&quot;&gt;&lt;div id=&quot;tlc&quot;&gt;&lt;div id=&quot;trc&quot;&gt;<br>
  &lt;!--  --&gt;<br>
  <br>
  &lt;div id=&quot;content&quot;&gt; <br>
  &lt;h1&gt;Simple  Box by tedd&lt;/h1&gt;<br>
  <br>
  &lt;p&gt;<br>
  View the source code via your browser.<br>
  &lt;/p&gt;<br>
  <br>
  <br>
  &lt;/div&gt;<br>
  <br>
  &lt;!--- end of box border --&gt;<br>
  &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;<br>
  &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;<br>
  &lt;!-- --&gt;<br>
  <br>
  &lt;/div&gt;<br>
  &lt;/body&gt;</p>
<p>&lt;/html&gt;</p>
<p><strong>Here is the CSS file.</strong></p>
<p><br>
  /* \*/<br>
  * html #tlc, * html #trc {height: 1%;}<br>
  /* */</p>
<p>#tlc, #trc { zoom: 1 }</p>
<p>body<br>
  {<br>
  margin: 0;<br>
  padding: 0;<br>
  background-color: white;<br>
  font-size: 100.01%;<br>
  text-align: center; <br>
  }</p>
<p>#box<br>
  {<br>
  position: relative;<br>
  margin-left: auto;<br>
  margin-right: auto; <br>
  margin-top: 3em;<br>
  padding: 0;<br>
  text-align: left;<br>
  width:80%;                /* &lt;-- use this to tie width to viewport size */<br>
  width: 55em;                /* &lt;-- use this for a set width */<br>
  background-color: #eeeeee;;<br>
  }<br>
  <br>
  #content<br>
  {<br>
  padding:3em;<br>
  }</p>
<p>#content h1<br>
  {<br>
  color:#0354c2;<br>
  font-weight: bold;<br>
  font-size: 1.2em;<br>
  font-family: helvetica, geneva, arial, sans-serif;<br>
  }<br>
  <br>
  #content p<br>
  {<br>
  color:#3b3b3b;<br>
  font-size: 1em;<br>
  line-height: 1.3em;<br>
  font-family: arial, helvetica, sans-serif;<br>
  }<br>
  <br>
  /* ---=== border code follows ===--- */<br>
  /*<br>
  tlc = top left corner<br>
  trc = top right corner<br>
  blc = bottom left corner<br>
  brc = bottom right corner<br>
  lb = left border<br>
  rb = right border<br>
  tb = top border<br>
  bb = bottom border <br>
  */</p>
<p>#tlc, #trc, #blc, #brc<br>
  {<br>
  background-color: transparent;<br>
  background-repeat: no-repeat;<br>
  }</p>
<p>#tlc<br>
  {<br>
  background-image:url(images/tlc.gif);<br>
  background-position: 0% 0%;<br>
  }</p>
<p>#trc<br>
  {<br>
  background-image:url(images/trc.gif);<br>
  background-position: 100% 0%;<br>
  }<br>
  <br>
  #blc<br>
  {<br>
  background-image:url(images/blc.gif);<br>
  background-position: 0% 100%;<br>
  }</p>
<p>#brc<br>
  {<br>
  background-image:url(images/brc.gif);<br>
  background-position: 100% 100%;<br>
  }</p>
<p>#tb, #bb<br>
  {<br>
  background-color: transparent;<br>
  background-repeat: repeat-x;<br>
  }<br>
  <br>
  #tb<br>
  {<br>
  background-image:url(images/tb.gif);<br>
  background-position: 0% 0%;<br>
  }</p>
<p>#bb<br>
  {<br>
  background-image:url(images/bb.gif);<br>
  background-position: 50% 100%;<br>
  }<br>
  <br>
  #rb<br>
  {<br>
  background-image:url(images/r.gif);<br>
  background-position: 100% 0%;<br>
  background-repeat: repeat-y;<br>
  }</p>
<p>#lb<br>
  {<br>
  background-image:url(images/l.gif);<br>
  background-position: 0% 100%;<br>
  background-repeat: repeat-y;<br>
  }<br>
</p>
<pre>&nbsp;</pre>
</div>
<!--- end of box border -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- -->
</div>
</body>
</html>

http://www.devwebpro.com/25-rounded-corn...-with-css/
Chcesz pomóc? Wstaw jako sygnature na innym forum:


[Obrazek: userbar.png]

Zapraszam do odwiedzin strony  http://portal.pcmod.pl/


Asus P5B Premium :: QuadCore Intel Core 2 Quad Q8300, 2500 MHz (7.5 x 333) BOX :: 2x 2 GB PATRIOT DUAL  :: ATI Radeon HD 5770 :: 6x Seagate ST3500320AS 500GB :: HIPER Type-R 580W

Odpowiedz


Skocz do:


Użytkownicy przeglądający ten wątek: 1 gości