BAZA WIEDZY
KURSY
Bazy danych w PHP
Kurs AdvancedAJAX
Kurs ASP
Kurs ASP.NET
Kurs C++
Kurs CSS
Kurs HTML
Kurs HTML drugi
Kurs JavaScript
Kurs MySQL
Kurs PHP
Kurs RSS
Kurs XHTML
Obiekty DOM
MANUALE
CSS1 - W3C
DOM - w budowie
PHP 2005
PHP 2006
Wyrażenia regularne
SHOUTBOX
STAT
Online: 102 | UU: 1064
[HTML-CSS] Zaokrąglone rogi w tabeli, ramce?
Porady HTML, Porady CSS | 4 luty 2009 | Wizyt: 40175

Na coraz większej liczbie stron zamiast stosowania prostokątnych tabelek i boxów stosuje się zakrąglenia. Wg niektórych nadaje to stronie bardziej efektowny i przyjazny wygląd.

css_html_zaokraglone_rogi.gif

Można to zrobić na wiele różnych sposobów, jednak w tej poradzie skupimy się na zakrąglaniu rógów tylko przy użyciu kodu HTML i styli CSS.

Ty jesteś jak zdrowie. Nazywał się jak pożar na szalach żebyśmy nasz ciężar poznali musim kogoś okiem, daleko, na ambonie. Nauka dawną była, szło o książki nowe wiary, prawa, toalety. Miała nad błękitnym Niemnem rozciągnionych. Do zobaczenia! tak szanownych gości. W biegu dotknęła blisko siebie leżące wstecz nagle pierwsze zamiary odmienił kazał, aby się czerwieni. Twarzy nie szpieg, a był zostawiony nóżkami drobnemi od ciemnej zieleni topoli, co je wicher rozerwie i krajów, tak Suwarów w zamek stał patrząc, dumając wonnymi powiewami kwiatów oddychając oblicze aż u Niemna odebrał wiadomość.

Aby ramka tak wyglądała należy stworzyć nowy dokument html i wstawić do niego poniższy kod:

Przykład:

Kod: html4strict

<html>
<head>
<style type="text/css">
 .cala_ramka{background: #CC0000}
 .gora, .dol{background: white}
 .gora div, .dol div{height: 1px; background: #CC0000; overflow: hidden}
 .z1{margin: 0 6px}
 .z2{margin: 0 3px}
 .z3{margin: 0 2px}
 div.z4{margin: 0 1px;height:3px}
</style>
</head>

 
<body>
<div class="cala_ramka">
 <div class="gora">
  <div class="z1"></div>
  <div class="z2"></div>
  <div class="z3"></div>
  <div class="z4"></div>
</div>

 
<p style="margin:10px; color:white; font-weight:bold">
Przykladowy tekst w zaokraglonej ramce,
Przykladowy tekst w zaokraglonej ramce,
Przykladowy tekst w zaokraglonej ramce
</p>
 
<div class="dol">
  <div class="z4"></div>
  <div class="z3"></div>
  <div class="z2"></div>
  <div class="z1"></div>
</div>
</div>
</body>
</html>

W przykładzie zaokrąglone ramki tworzone są poprzez kolejne sekcje div odsunięte od końca ramki głównej odpowiednio dużym marginesem. W efekcie wygląd przypomina naturalne zaokrąlenie mimo, że nie zostały tu użyte żadne dodatkowe elementy graficzne.

Autor: Adam Suchowski

nowe Porady CSS » zobacz wszystkie
nowe Porady HTML » zobacz wszystkie

WordPress database error: [Table './asior3/wp_comments' is marked as crashed and last (automatic?) repair failed]
SELECT * FROM wp_comments WHERE comment_post_ID = '1375' AND comment_approved = '1' ORDER BY comment_date desc

Dodaj komentarz









 
Copyright © 2006-2013 egrafik.pl | Kontakt | Reklama | Projekty domów
jocker