BAZA WIEDZY
Grafika Webmaster
Aktualności Porady dla Webmastera
Porady CSS Porady HTML Porady MySQL Porady PHP Porady Smarty Pozycjonowanie
Kursy Dokumentacje Skrypty PHP Skrypty JAVA
Windows Hardware Software Download Książki Projekty domów Katalog firm, stron Reklama
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: 40 | UU: 1315
[HTML-CSS] Zaokrąglone rogi w tabeli, ramce?
Porady HTML, Porady CSS | 4 luty 2009 | Wizyt: 39953

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