Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Jak za pomocą CSS zrobić zaokraglone rogi w ramce,
Forum PHP.pl > Forum > Po stronie przeglądarki
miedzna
  1. #belka{
  2. background: #002576 url(/images/1.jpg) top left no-repeat;
  3. }


  1. <div id="belka">jakieś info</div>


robi mi tylko 1 zaokrąglony róg góra-lewy, a jak zrobić, żeby pozostałe 3 też były okrągłe?
revyag
Zrób dwa obrazki, jeden u góry, drugi u dołu a pośrodku zawartość(div).
lenczewski
w FF zadziała
  1. div {
  2. -moz-border-radius:5px; /* Rounded edges in Firefox */
  3. }
  4. </style>

możesz też skorzystać z JS

http://dhtmlgoodies.com/scripts/rounded-co...ed-corners.html
download:
http://dhtmlgoodies.com/scripts/rounded-co...ded-corners.zip
WereWolf
kiedyś, dawno dawno temu... smile.gif jak tylko zacząłem uczyć się cssa i... nigdy nie skończyłem... w każdym razie, jakiś czas temu, przebudowując stronę i chcąc koniecznie mieć modne wtedy (i chyba nadal) okrągłe rogi, zrobiłem to w ten sposób...

nie jest to zbyt eleganckie - całe mnóstwo zagnieżdżonych divów... ale za to sprawdza się jeśli potrzebujesz w każdym rogu inny obrazek (na przykład cieniowanie), a w dodatku można użyć dowolnej szerokości/wysokości...

robimy diva "ogólnego", w którego wstawiamy divy, dla których będą obrazki kolejno - góra, prawa, dół, lewa, góra-lewy itd... łącznie powinno być 8 zagnieżdżonych divów... i kolejny z zawartością ramki...
ważdna jest kolejność, bo tła w góra, prawy, dół, lewy będą powtarzane, jeśli najpierw damy "góra-lewy", to potem "góra" przykryje nam wcześniejsze tło i nie będzie rogu... (mam nadzieję, że ktoś to zrozumie) biggrin.gif

w cssie pewnie się domyślasz jak to będzie wyglądać...

przykładowo:

  1. góra {background: url(coś tam) top left repeat-x}
  2. prawa {background: url(coś tam) top right repeat-y}
  3. ...
  4. góra-lewy {background: url(coś tam) top left no-repeat}
  5. góra-prawy {background: url(coś tam) top right no-repeat}
revyag
@WereWolf a po co tak kombinować ? Moim sposobem masz tylko jednego diva i dwa obrazki i porządek w kodzie.
WereWolf
Cytat(revyag @ 8.11.2006, 21:26:12 ) *
@WereWolf a po co tak kombinować ? Moim sposobem masz tylko jednego diva i dwa obrazki i porządek w kodzie.

tak jak pisałem... było to dawno i takie coś właśnie potrzebowałem...

a dlaczego?
1. konieczne były też obrazki po bokach, bo ramka była nie jednolitego koloru, tylko z cieniowaniem
2. ramka była uniwersalna, niezależnie od szerokości/wysokości tekstu, sama się rozszerza

i tak jak pisałem... rozwiązanie może niezbyt eleganckie, bo mnóstwo divów, ale działa i to bardzo dobrze smile.gif

a strona o której mówiłem jest tutaj: http://sephiroth.blog.pl/xiega/index.php
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.