Forum FAQForum FAQSearchSearch MemberlistMemberlist Forum ignore listForum ignore list RegisterRegister ProfileProfile Log in to check your private messagesLog in to check your private messages Log inLog in
rounded corners in css
Goto page 1, 2  Next
 
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    mi3dot.org Forum Index -> Client-side
View previous topic :: View next topic  
Author Message
jurka



Joined: 26 Aug 2004
Posts: 1088
Location: Zagreb

PostPosted: 18.12.2005 17:48    Post subject: rounded corners in css Add user to your forum ignore list Reply with quote

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
View user's profile Send private message Visit poster's website
che.UP
mi3.crew


Joined: 07 Sep 2003
Posts: 2320
Location: zagreb

PostPosted: 18.12.2005 17:52    Post subject: Add user to your forum ignore list Reply with quote

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
View user's profile Send private message Visit poster's website
jurka



Joined: 26 Aug 2004
Posts: 1088
Location: Zagreb

PostPosted: 18.12.2005 17:59    Post subject: Add user to your forum ignore list Reply with quote

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
View user's profile Send private message Visit poster's website
che.UP
mi3.crew


Joined: 07 Sep 2003
Posts: 2320
Location: zagreb

PostPosted: 18.12.2005 18:11    Post subject: Add user to your forum ignore list Reply with quote

mozda ti ovo pomogne? http://www.alistapart.com/articles/customcorners2/

_________________
UP | TypeTester | Accommodations App
Meni u Firefox-u ne radi AJAX
Back to top
View user's profile Send private message Visit poster's website
jurka



Joined: 26 Aug 2004
Posts: 1088
Location: Zagreb

PostPosted: 18.12.2005 18:14    Post subject: Add user to your forum ignore list Reply with quote

ne bi vjerovao, ali baš sad to gledam, čitam i proučavam.
hvala!

_________________
Jedan šest | Behance | Vimeo
Back to top
View user's profile Send private message Visit poster's website
jurka



Joined: 26 Aug 2004
Posts: 1088
Location: Zagreb

PostPosted: 18.12.2005 18:15    Post subject: Add user to your forum ignore list Reply with quote

ali mi nikako ne uspjeva to složitit Shocked Crying or Very sad

_________________
Jedan šest | Behance | Vimeo
Back to top
View user's profile Send private message Visit poster's website
che.UP
mi3.crew


Joined: 07 Sep 2003
Posts: 2320
Location: zagreb

PostPosted: 18.12.2005 18:20    Post subject: Add user to your forum ignore list Reply with quote

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
View user's profile Send private message Visit poster's website
kakarinac



Joined: 16 Feb 2005
Posts: 1978
Location: Rijeka

PostPosted: 18.12.2005 18:22    Post subject: Add user to your forum ignore list Reply with quote

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
View user's profile Send private message Send e-mail Twitter profile
r3dsc0rpi0n



Joined: 20 Apr 2005
Posts: 354
Location: Zagreb

PostPosted: 18.12.2005 18:24    Post subject: Add user to your forum ignore list Reply with quote

http://www.456bereastreet.com/lab/teaser/one_image/
http://www.456bereastreet.com/lab/teaser/
http://24ways.org/advent/broader-border-corners

_________________
::: Fortis est, qui se vincit ! ::::
Back to top
View user's profile Send private message Send e-mail Visit poster's website Twitter profile
jurka



Joined: 26 Aug 2004
Posts: 1088
Location: Zagreb

PostPosted: 18.12.2005 18:34    Post subject: Add user to your forum ignore list Reply with quote

@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 Wink

_________________
Jedan šest | Behance | Vimeo
Back to top
View user's profile Send private message Visit poster's website
r3dsc0rpi0n



Joined: 20 Apr 2005
Posts: 354
Location: Zagreb

PostPosted: 18.12.2005 18:42    Post subject: Add user to your forum ignore list Reply with quote

z-index?

_________________
::: Fortis est, qui se vincit ! ::::
Back to top
View user's profile Send private message Send e-mail Visit poster's website Twitter profile
jurka



Joined: 26 Aug 2004
Posts: 1088
Location: Zagreb

PostPosted: 18.12.2005 18:51    Post subject: Add user to your forum ignore list Reply with quote

jok, mislim da z-index nema veze s tim...

_________________
Jedan šest | Behance | Vimeo
Back to top
View user's profile Send private message Visit poster's website
sinisa.kusic



Joined: 26 Jul 2005
Posts: 728
Location: Rijeka

PostPosted: 18.12.2005 19:12    Post subject: Add user to your forum ignore list Reply with quote

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">&nbsp;</div>
   <div id="rounded_corners_midle_body">&nbsp;</div>
   <div id="rounded_corners_bottom">&nbsp;</div>
</div>
<!-- END ROUNDED CORNERS -->


Evo onako iz glave, nije testirano ali šta nebi trebalo ovo da radi?
Back to top
View user's profile Send private message Send e-mail MSN Messenger
jurka



Joined: 26 Aug 2004
Posts: 1088
Location: Zagreb

PostPosted: 18.12.2005 19:28    Post subject: Add user to your forum ignore list Reply with quote

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
View user's profile Send private message Visit poster's website
sinisa.kusic



Joined: 26 Jul 2005
Posts: 728
Location: Rijeka

PostPosted: 18.12.2005 19:35    Post subject: Add user to your forum ignore list Reply with quote

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!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy Very Happy
Back to top
View user's profile Send private message Send e-mail MSN Messenger
jurka



Joined: 26 Aug 2004
Posts: 1088
Location: Zagreb

PostPosted: 18.12.2005 19:39    Post subject: Add user to your forum ignore list Reply with quote

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) Very Happy za dodati...

_________________
Jedan šest | Behance | Vimeo
Back to top
View user's profile Send private message Visit poster's website
gog



Joined: 17 Jun 2004
Posts: 679
Location: zagreb

PostPosted: 19.12.2005 09:06    Post subject: Add user to your forum ignore list Reply with quote

http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/

http://pro.html.it/articoli/id_599/idcat_31/pag_1/pag.html
Back to top
View user's profile Send private message Visit poster's website
Sulien



Joined: 04 Jan 2004
Posts: 2905
Location: Zagreb

PostPosted: 19.12.2005 11:13    Post subject: Add user to your forum ignore list Reply with quote

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 Sad

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
View user's profile Send private message Send e-mail Visit poster's website
keye



Joined: 24 Nov 2003
Posts: 2465
Location: Paris - France

PostPosted: 19.12.2005 12:27    Post subject: Add user to your forum ignore list Reply with quote

bas mi je fino upao ovaj topic, jutros sam si sredila novi layout sa rounded cornerima Very Happy

_________________
Google is a blind person
Back to top
View user's profile Send private message Visit poster's website
jurka



Joined: 26 Aug 2004
Posts: 1088
Location: Zagreb

PostPosted: 20.12.2005 10:26    Post subject: Add user to your forum ignore list Reply with quote

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 Sad

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
View user's profile Send private message Visit poster's website
sinisa.kusic



Joined: 26 Jul 2005
Posts: 728
Location: Rijeka

PostPosted: 20.12.2005 11:21    Post subject: Add user to your forum ignore list Reply with quote

Very Happy nice and simple Very Happy
Back to top
View user's profile Send private message Send e-mail MSN Messenger
red



Joined: 03 May 2004
Posts: 919
Location: Zabok

PostPosted: 20.12.2005 12:36    Post subject: Add user to your forum ignore list Reply with quote

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
View user's profile Send private message Visit poster's website Twitter profile
jurka



Joined: 26 Aug 2004
Posts: 1088
Location: Zagreb

PostPosted: 20.12.2005 18:00    Post subject: Add user to your forum ignore list Reply with quote

a zašto view source ne radi na tom linku?

_________________
Jedan šest | Behance | Vimeo
Back to top
View user's profile Send private message Visit poster's website
red



Joined: 03 May 2004
Posts: 919
Location: Zabok

PostPosted: 20.12.2005 19:13    Post subject: Add user to your forum ignore list Reply with quote

jurka wrote:
a zašto view source ne radi na tom linku?


Confused Uhm, jer je .gif? Smile

_________________
Get busy living, or get busy dying.
Back to top
View user's profile Send private message Visit poster's website Twitter profile
Sulien



Joined: 04 Jan 2004
Posts: 2905
Location: Zagreb

PostPosted: 20.12.2005 19:27    Post subject: Add user to your forum ignore list Reply with quote

Možeš i gifu vidjet 'source' ali on baš nije nešto čitko Laughing
Back to top
View user's profile Send private message Send e-mail Visit poster's website
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    mi3dot.org Forum Index -> Client-side All times are GMT + 1 Hour
Goto page 1, 2  Next
Page 1 of 2

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group