View previous topic :: View next topic |
Author |
Message |
jurka
Joined: 26 Aug 2004 Posts: 1088 Location: Zagreb
|
Posted: 18.12.2005 18:48 Post subject: rounded corners in css |
|
|
trebam pomoć...
mučim se s tim već dva sata, guglo sam i sve ali nisam našao ono kaj tražim.
dakle, želim napraviti običan box u css-u koji ima rounded cornerse iliti zaobljene rubove.
to se radi tako da se u rubove puknu zaobljeni gif-ovi te se oni onda pozicioniraju u rubove boxa koristeći css.
tu dolazim do problema. pošto imam pozadinu koja je slika, htio bi da su rubovi transparentni tako da se ispod može vidjeti pozadina (ako me kužite). tablicama mi je to minuta posla, ali ja bi to htio složiti 100% u css-u, a ne znam.
any help? |
_________________ Jedan šest | Behance | Vimeo |
|
Back to top |
|
|
che.UP mi3.crew
Joined: 07 Sep 2003 Posts: 2320 Location: zagreb
|
Posted: 18.12.2005 18:52 Post subject: |
|
|
pa dio koji ti treba da se kroz njega vidi pozadina neka bude proziran... gif is your friend :)
vjerojatno ces morat rucno peglat pixele ako hoces da bude savrseno :) |
_________________ UP | TypeTester | Accommodations App
Meni u Firefox-u ne radi AJAX |
|
Back to top |
|
|
jurka
Joined: 26 Aug 2004 Posts: 1088 Location: Zagreb
|
Posted: 18.12.2005 18:59 Post subject: |
|
|
to sam probao, ali ne znam kako pozicionirati, odnosno složiti css tako da sve bude na svom mjestu u svim (ili bar većini browsera). gif je najmanji problem, mene muči kod. |
_________________ Jedan šest | Behance | Vimeo |
|
Back to top |
|
|
che.UP mi3.crew
Joined: 07 Sep 2003 Posts: 2320 Location: zagreb
|
|
Back to top |
|
|
jurka
Joined: 26 Aug 2004 Posts: 1088 Location: Zagreb
|
Posted: 18.12.2005 19:14 Post subject: |
|
|
ne bi vjerovao, ali baš sad to gledam, čitam i proučavam.
hvala! |
_________________ Jedan šest | Behance | Vimeo |
|
Back to top |
|
|
jurka
Joined: 26 Aug 2004 Posts: 1088 Location: Zagreb
|
Posted: 18.12.2005 19:15 Post subject: |
|
|
ali mi nikako ne uspjeva to složitit |
_________________ Jedan šest | Behance | Vimeo |
|
Back to top |
|
|
che.UP mi3.crew
Joined: 07 Sep 2003 Posts: 2320 Location: zagreb
|
Posted: 18.12.2005 19:20 Post subject: |
|
|
jel ti kod dobar? mislim, doctype, validacija, simo tamo... probaj proc po onom css topicu, vjerojatno i tamo ima jos par tehnika... |
_________________ UP | TypeTester | Accommodations App
Meni u Firefox-u ne radi AJAX |
|
Back to top |
|
|
kakarinac
Joined: 16 Feb 2005 Posts: 1978 Location: Rijeka
|
Posted: 18.12.2005 19:22 Post subject: |
|
|
Ovo iskopah iz bukmarksa, možda ti može pomoć, bo! |
_________________ [ when the going gets weird, the weird turn pro.] ♫ [ kaks on dA ] |
|
Back to top |
|
|
r3dsc0rpi0n
Joined: 20 Apr 2005 Posts: 354 Location: Zagreb
|
|
Back to top |
|
|
jurka
Joined: 26 Aug 2004 Posts: 1088 Location: Zagreb
|
Posted: 18.12.2005 19:34 Post subject: |
|
|
@che: dobar je kod zato što radim samo to u novom dokumentu, nema ničeg više
@kakarinac: to mi je ok, ali ne bi koristio nikakav javascript, samo pure css
@r3dsc0rpi0n: mislim da mi nijedan od tih primjera ne dopušta da stavim neki gradient ili pattern ispod...
a ovo je
ono šta želim dobiti.
koliko frke, a s tablicama je doslovno minuta posla. ali to onda nije to |
_________________ Jedan šest | Behance | Vimeo |
|
Back to top |
|
|
r3dsc0rpi0n
Joined: 20 Apr 2005 Posts: 354 Location: Zagreb
|
Posted: 18.12.2005 19:42 Post subject: |
|
|
z-index? |
_________________ ::: Fortis est, qui se vincit ! :::: |
|
Back to top |
|
|
jurka
Joined: 26 Aug 2004 Posts: 1088 Location: Zagreb
|
Posted: 18.12.2005 19:51 Post subject: |
|
|
jok, mislim da z-index nema veze s tim... |
_________________ Jedan šest | Behance | Vimeo |
|
Back to top |
|
|
sinisa.kusic
Joined: 26 Jul 2005 Posts: 728 Location: Rijeka
|
Posted: 18.12.2005 20:12 Post subject: |
|
|
jurka wrote: | jok, mislim da z-index nema veze s tim... |
ni blizu
Code: |
<!-- CSS STYLE -->
<style type="text/css">
#container
{
width:250px;
}
#rounded_corners_top
{
width: 250px;
height: 25px;
background-image: url(rounded_corners_top.gif);
}
#rounded_corners_midle_body
{
width: 250px;
background-image: url(rounded_corners_midle_body.gif);
}
#ounded_corners_bottom
{
width: 250px;
height: 25px;
background-image: url(ounded_corners_bottom.gif);
}
</style>
<!-- END CSS STYLE -->
<!-- ROUNDED CORNERS -->
<div id="container">
<div id="rounded_corners_top"> </div>
<div id="rounded_corners_midle_body"> </div>
<div id="rounded_corners_bottom"> </div>
</div>
<!-- END ROUNDED CORNERS -->
|
Evo onako iz glave, nije testirano ali šta nebi trebalo ovo da radi? |
|
|
Back to top |
|
|
jurka
Joined: 26 Aug 2004 Posts: 1088 Location: Zagreb
|
Posted: 18.12.2005 20:28 Post subject: |
|
|
aha, to je složeno sa tri diva, svaki ima top middle i bottom dio.
za top i bottom napravim gif koji će mi biti jednake širine kao cijeli box. mislim da bi to trebalo raditi, samo nedostatak ove metode je produženo vrijeme učitavanja stranice, pošto su ta dva gifa dosta "velika", odnosno, veći su nego četiri 15px kvadratića. ako sam dobro shvatio, naravno... |
_________________ Jedan šest | Behance | Vimeo |
|
Back to top |
|
|
sinisa.kusic
Joined: 26 Jul 2005 Posts: 728 Location: Rijeka
|
Posted: 18.12.2005 20:35 Post subject: |
|
|
opet brzina učitavanja ti je uvijetovana kopresijom slike koja je pak uvijetovana detaljima same slike. Što je slika s manje detalja to je više možeš kompresirat a da neprimjetno narušiš valitetu prikaza. bla bla bla
Vjerojatno postoji i bolji način da se isto ovo izvede ali ovo mi je prvo palo na pamet.
@Sulien
CSS MASTER HELP US!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
|
|
Back to top |
|
|
jurka
Joined: 26 Aug 2004 Posts: 1088 Location: Zagreb
|
Posted: 18.12.2005 20:39 Post subject: |
|
|
postoji, konkretno dao ga je che sa linkom na alistapart, ali to je totalno komplicirano. eventualno ako Sulien ima nešto (the big css mastermind of mi3) za dodati... |
_________________ Jedan šest | Behance | Vimeo |
|
Back to top |
|
|
gog
Joined: 18 Jun 2004 Posts: 679 Location: zagreb
|
|
Back to top |
|
|
Sulien
Joined: 04 Jan 2004 Posts: 2905 Location: Zagreb
|
Posted: 19.12.2005 12:13 Post subject: |
|
|
Ovo zadnje sa 456berea je prava stvar jer je prilično bulletproof i update-ano više puta. Naravno, ovisi o JS, ali ako želiš neovisno o JS imati rounded corners svuda onda jednostavno PHP-om generiraj markup na div-ovima kojeg JS gradi dinamički DOM-om
Rounded corners ima različitih rješenja toliko da ih više ne možeš ni na prste nabrojati. Sve ovisi je li ti box fixni size, fixne širine, je li pozadina iza solid color ili može biti bilo što, je li pozadina unutra solid color ili gradient, kakvi su borderi, koje browsere želiš podržati itd. Po screenshotu ti svakako treba ovo bulletproff rješenje sa 456berea. Ja, pošto ne radim stvari za široke mase nego za intranet odbacujem podršku za IE i stare browsere i koristim generated content (:before i :after). To i relativno pozicioniranje, negativne margine i transparentni PNG-ovi su sve što treba za corners - na žalost, samo će ih uska publika vidjet kakvo je trenutno stanje.
Dakle treba koristit ovo sa linka dok browseri ne podrže kao Safari multiple backgrounds. CSS3 modul za borders još nećemo dugo vidjeti
Ako trebaš pomoć sa tehnikom sa ALA ili 456berea stavi online do kuda si stigao. Ne znam kako bih ti mogao pomoći bolje nego autori tih članaka koji su sve sjajno opisali. |
|
|
Back to top |
|
|
keye
Joined: 24 Nov 2003 Posts: 2465 Location: Paris - France
|
Posted: 19.12.2005 13:27 Post subject: |
|
|
bas mi je fino upao ovaj topic, jutros sam si sredila novi layout sa rounded cornerima |
_________________ Google is a blind person |
|
Back to top |
|
|
jurka
Joined: 26 Aug 2004 Posts: 1088 Location: Zagreb
|
Posted: 20.12.2005 11:26 Post subject: |
|
|
Sulien wrote: | Ovo zadnje sa 456berea je prava stvar jer je prilično bulletproof i update-ano više puta. Naravno, ovisi o JS, ali ako želiš neovisno o JS imati rounded corners svuda onda jednostavno PHP-om generiraj markup na div-ovima kojeg JS gradi dinamički DOM-om
Rounded corners ima različitih rješenja toliko da ih više ne možeš ni na prste nabrojati. Sve ovisi je li ti box fixni size, fixne širine, je li pozadina iza solid color ili može biti bilo što, je li pozadina unutra solid color ili gradient, kakvi su borderi, koje browsere želiš podržati itd. Po screenshotu ti svakako treba ovo bulletproff rješenje sa 456berea. Ja, pošto ne radim stvari za široke mase nego za intranet odbacujem podršku za IE i stare browsere i koristim generated content (:before i :after). To i relativno pozicioniranje, negativne margine i transparentni PNG-ovi su sve što treba za corners - na žalost, samo će ih uska publika vidjet kakvo je trenutno stanje.
Dakle treba koristit ovo sa linka dok browseri ne podrže kao Safari multiple backgrounds. CSS3 modul za borders još nećemo dugo vidjeti
Ako trebaš pomoć sa tehnikom sa ALA ili 456berea stavi online do kuda si stigao. Ne znam kako bih ti mogao pomoći bolje nego autori tih članaka koji su sve sjajno opisali. |
hvala na odgovoru. moram priznati da će mi najbolje doći rješenje od feelfree, zato što je najjednostavnije.
što se tiče mojih potreba - odnosno kakav će box biti:
box ima fiksnu širinu - konkretno 380px, pozadina je pattern (ispod boxa). pozadina unutra je solid color, bez bordera i kompliciranja. što se tiče browsera, važni su mi firefox i IE. ako i u ostalima izgleda ok, još bolje... |
_________________ Jedan šest | Behance | Vimeo |
|
Back to top |
|
|
sinisa.kusic
Joined: 26 Jul 2005 Posts: 728 Location: Rijeka
|
Posted: 20.12.2005 12:21 Post subject: |
|
|
nice and simple |
|
|
Back to top |
|
|
red
Joined: 03 May 2004 Posts: 919 Location: Zabok
|
Posted: 20.12.2005 13:36 Post subject: |
|
|
jurka wrote: | što se tiče mojih potreba - odnosno kakav će box biti:
box ima fiksnu širinu - konkretno 380px, pozadina je pattern (ispod boxa). pozadina unutra je solid color, bez bordera i kompliciranja. što se tiče browsera, važni su mi firefox i IE. ako i u ostalima izgleda ok, još bolje... |
Ja se nikad nisam zamarao nekakvim tamo fancy tehnikama, najviše zato jer mislim da nisu vrijedne toga - obično se radi o brdu kôda za par rounder cornera... Nnnah, I'll take the easy way, thank-you!
So, veliš da imaš fixed width. Bg boxa je solid color.
Zašto ne jednostavno samo napravit gif ili dva? To je predložio i Che u jednom od prvih postova. Gif sa jednog sajta iz portfolia web.burze: http://www.fx64.de/css/cssImg/boxTop3.gif
Umjesto nekoliko DIV-ova, ovakav nekakav gif strpaš u npr. bg gornjeg elementa, nekakvog headinga maybe, a drugi u bg DIV-a na bottom.
dodatak:
Code: | <div id="sidebar"><h2>Sidebar, innit?</h2>...</div> |
Code: | #sidebar { background: url... } |
Code: | #sidebar h2 { background: url... } |
|
_________________ Get busy living, or get busy dying. |
|
Back to top |
|
|
jurka
Joined: 26 Aug 2004 Posts: 1088 Location: Zagreb
|
Posted: 20.12.2005 19:00 Post subject: |
|
|
a zašto view source ne radi na tom linku? |
_________________ Jedan šest | Behance | Vimeo |
|
Back to top |
|
|
red
Joined: 03 May 2004 Posts: 919 Location: Zabok
|
Posted: 20.12.2005 20:13 Post subject: |
|
|
jurka wrote: | a zašto view source ne radi na tom linku? |
Uhm, jer je .gif? |
_________________ Get busy living, or get busy dying. |
|
Back to top |
|
|
Sulien
Joined: 04 Jan 2004 Posts: 2905 Location: Zagreb
|
Posted: 20.12.2005 20:27 Post subject: |
|
|
Možeš i gifu vidjet 'source' ali on baš nije nešto čitko |
|
|
Back to top |
|
|
|