Rounded corner

Er du på jakt etter inspirasjon til en nettside e.l. kan du enten titte igjennom inspirasjonskategorien eller poste en forespørsel i ønskes-kategorien.

Rounded corner

Innlegg solo » 12.04.2013 12:11

Kom over denne nyttige tjenesten i dag når jeg skulle lage avrundede hjører til bilder: http://www.generateit.net/rounded-corner/

Koden for et bilde med avrundet hjørner kan f.eks. bli:
Kode: Merk alt
<div style="width:100px;height:100px;background: url('BILDET.jpg') no-repeat;">
<
img src="avrundet_hjorne.png" alt="" width="100" height="100" />
</
div>
 
Brukerens avatar
solo
Medlem
 
Innlegg: 989
Registrert: 15.10.2003 18:25
Bosted: Larvik

Re: Rounded corner

Innlegg Matsemann » 12.04.2013 19:04

Vel, med dagens CSS er det ikke verre enn å slenge på border-radius, egentlig. ;)

Kode: Merk alt
img {
    border-radius: 20px;
}


Eksempel med random bilde fra internett: http://jsfiddle.net/9Ker2/1/
Master i Datateknikk, NTNU
Brukerens avatar
Matsemann
Moderator
 
Innlegg: 2131
Registrert: 05.02.2005 19:13

Re: Rounded corner

Innlegg adeneo » 12.04.2013 20:37

imgur ser ut til å ha en no-hotlinking policy, så bildet vises ikke hos meg, men jeg er enig med Matsemann, det er ingen som bruker bilder til dette lengre, ei fele med ett annet bilde -> http://jsfiddle.net/9Ker2/3/

Bruker brukeren Internet Eksploderer 6, så får det være deres problem, og vi andre koser oss med CSS3.
Sist endret av adeneo den 12.04.2013 20:51, endret 2 ganger.
adeneo
Medlem
 
Innlegg: 628
Registrert: 08.04.2011 21:09

Re: Rounded corner

Innlegg solo » 12.04.2013 20:39

Kule metoder med CSS3.
Er det mulig å få avrundede kanter kun øverst?
Brukerens avatar
solo
Medlem
 
Innlegg: 989
Registrert: 15.10.2003 18:25
Bosted: Larvik

Re: Rounded corner

Innlegg adeneo » 12.04.2013 20:41

adeneo
Medlem
 
Innlegg: 628
Registrert: 08.04.2011 21:09

Re: Rounded corner

Innlegg Matsemann » 12.04.2013 20:42

Ja, kan stappe inn flere tall på samme måte som med "padding" og "margin".
http://jsfiddle.net/9Ker2/7/

F. eks.
border: 50px 10px 20px 90px;

border: topleft topright bottomright bottomleft;

Endret: Var treig, men vi viser to forskjellige metoder.
Master i Datateknikk, NTNU
Brukerens avatar
Matsemann
Moderator
 
Innlegg: 2131
Registrert: 05.02.2005 19:13

Re: Rounded corner

Innlegg khawaga » 12.04.2013 20:49

Dette er ikke inspirasjon, men despirasjon. Allerede i 2002 kalte jeg dette "pølsedesign" i en nettdiskusjon : nettstedet er ikke lenger levende, men jeg har faktisk kopi av innlegget. Jeg lagrer alt jeg skriver som tekstfiler, før jeg publiserer det.

Trenden i dag går motsatt, og mer naturlig. En firkant; en blokk; skal være : nettopp, en blokk, og ikke stusset i kantene. Hvorfor *faen* skal ting være runde? Det er mer naturlig å skjære over tvert ... så blir det avrundet av seg selv, etter bruk.

Jeg følger "inspirasjon" nøye, og har sett og lært mye ... jeg er vel online halve mitt våkne liv ... men jeg må i all beskjedenhet si at mer utdatert inspirasjon har aldri vært postet på NWF.

Avrundede hjørner bestemmes i moderne nettlesere (omtrent siden 2000) av border-radius antall grader, og til og med IE fikser det i dag.

-khw-
"Humans are destined party animals. Technology will follow." (Linus Torvalds)
Khawagas oppslagstavle og album
Brukerens avatar
khawaga
Seniormedlem
 
Innlegg: 4865
Registrert: 30.09.2002 22:34

Re: Rounded corner

Innlegg adeneo » 12.04.2013 20:54

Trenden nå er nok helt riktig firkantede hjørner og bokser.
Det var vel egentlig ikke ment som inspirasjon eller trendsettende, men mer som et teknisk svar på hvordan man lager runde hjørner uten at man hverken trenger å bruke bilder eller avrunde alle mulige elementer, men enkelte ganger er det kjekt å ha.

IE innførte border-radius i version 9, men nå ligger jo de normalt ti år etter resten av verden, så rundt år 2000 er nok ikke så langt unna.

Edit: husker at Firefox 2 støttet i hvert fall "moz-border-radius" i 2005-2006 ?
adeneo
Medlem
 
Innlegg: 628
Registrert: 08.04.2011 21:09

Re: Rounded corner

Innlegg khawaga » 12.04.2013 21:52

Det var en gang, Andre. Jeg har en flunkende ny maskin ... jeg sitter i øyeblikket på gamla ... den trenden vi snakker om, er tilbake til tusenårskiftet. Alt skulle være rundt; alle nettsider jeg fikk til vurdering var framesets med meny til venstre og svære runde knapper å trykke på. Ergo begrepet "pølsedesign" - som jeg uforbeholdent er opphavsmann til, uten at det er noe å være stolt av.

Det var tidligere nødvendig med -k-border-radius, -moz-border-radius og husker ikke alt, for å få de jævla hjørnene runde uten å bruke utrolig mye kode. Jeg har aldri innsett nødvendigheten av slikt. Dermed er jeg up to date uten å ha rørt en finger.

Jeg rører fingeren fremdeles: det har vel noen fått føle. Men ikke unødvendig, får vi håpe.

-khw-
"Humans are destined party animals. Technology will follow." (Linus Torvalds)
Khawagas oppslagstavle og album
Brukerens avatar
khawaga
Seniormedlem
 
Innlegg: 4865
Registrert: 30.09.2002 22:34

Re: Rounded corner

Innlegg adeneo » 12.04.2013 22:03

Jepp, jeg husker det godt jeg.

Satte opp et par nettsider den gangen med Microsofts Frontpage, og der var det slik at man hadde ferdige "layouts" og knapper.
Standarden den gangen var vel tre frames, en helt til venstre med en meny, en på toppen med en logo eller noe slikt, og en i midten som byttet innhold etter hva man trykte på i menyen.
Programmet hadde en rekke slike "pølseknapper" ferdige, som man bare pekte og klikket på, så spratt det opp slike fæle avrundede knapper, som nå i ettertid så helt forferdelige ut, men som den gangen var "state of the art", og de så faktisk ut som pølser, så "pølsedesign" er spot on.

Sidene var ofte venstrestilt, ettersom midtstilling var nesten umulig med frames, og bredden var vel rundt 600 pixler ettersom 12 og 14 tommers skjermer fortsatt var standarden.

Det er heldigvis ikke alt som var bedre i "gamle dager" !
adeneo
Medlem
 
Innlegg: 628
Registrert: 08.04.2011 21:09

Re: Rounded corner

Innlegg ingeva » 13.04.2013 6:44

khawaga skrev:Dette er ikke inspirasjon, men despirasjon. Allerede i 2002 kalte jeg dette "pølsedesign" i en nettdiskusjon : nettstedet er ikke lenger levende, men jeg har faktisk kopi av innlegget. Jeg lagrer alt jeg skriver som tekstfiler, før jeg publiserer det.

Hehe. I min tid med web har jeg nok brukt atskillig mer tid på få finne gode boks-design og til å strippe av kode, enn til å lage noe som hadde runde hjørner. Hva F er vitsen med sånt design? Ikke egnet til annet enn å sløse med tid og energi.
"If you're staying with Microsoft you're getting more and more overwhelmed to update and change your whole IT infrastructure." Peter Hofmann . . . . Se her.
Brukerens avatar
ingeva
Seniormedlem
 
Innlegg: 1071
Registrert: 24.01.2011 6:48
Bosted: Sandvika

Re: Rounded corner

Innlegg Nukleuz » 14.04.2013 15:38

Skjønner ikke helt kritikken til avrundede hjørner. I dette oppsettet bruker jeg det både på knappene til venstre, og på pop-up - og synes det ser vesentlig bedre ut slik, enn da de var firkantet.

IMG_20130414_163449.JPG
Avrundede hjørner
IMG_20130414_163449.JPG (101.81 KiB) Vist 5776 ganger
Mvh
Joachim M. Giæver
http://development.giaever.org
Brukerens avatar
Nukleuz
Seniormedlem
 
Innlegg: 1659
Registrert: 09.12.2006 2:08
Bosted: Tromsø

Re: Rounded corner

Innlegg ingeva » 14.04.2013 19:53

Nukleuz skrev:Skjønner ikke helt kritikken til avrundede hjørner. I dette oppsettet bruker jeg det både på knappene til venstre, og på pop-up - og synes det ser vesentlig bedre ut slik, enn da de var firkantet.

IMG_20130414_163449.JPG

Knappene til venstre har jo ingen hjørner, så det er jo greit.
Runde hjørner på noe som ellers er rektangulært er i det minste unødvendig så lenge det ikke trenger å være aerodynamisk. Hvorfor i all verden bruke energi og prosesseringskraft på sånt?
"If you're staying with Microsoft you're getting more and more overwhelmed to update and change your whole IT infrastructure." Peter Hofmann . . . . Se her.
Brukerens avatar
ingeva
Seniormedlem
 
Innlegg: 1071
Registrert: 24.01.2011 6:48
Bosted: Sandvika

Re: Rounded corner

Innlegg Nukleuz » 15.04.2013 10:59

Joda, de har hjørner opprinnelig, men bare veldig avrundet - med CSS. ;)
Mvh
Joachim M. Giæver
http://development.giaever.org
Brukerens avatar
Nukleuz
Seniormedlem
 
Innlegg: 1659
Registrert: 09.12.2006 2:08
Bosted: Tromsø

Re: Rounded corner

Innlegg ingeva » 15.04.2013 12:04

Nukleuz skrev:Joda, de har hjørner opprinnelig, men bare veldig avrundet - med CSS. ;)

Hadde det ikke vært enklere å bare fjerne bakgrunnen? :)
"If you're staying with Microsoft you're getting more and more overwhelmed to update and change your whole IT infrastructure." Peter Hofmann . . . . Se her.
Brukerens avatar
ingeva
Seniormedlem
 
Innlegg: 1071
Registrert: 24.01.2011 6:48
Bosted: Sandvika

Re: Rounded corner

Innlegg Nukleuz » 15.04.2013 14:49

Bilde inne i knappen består bare av transparent png, altså det svarte ikonet. Bakgrunnen, det hvite er også ren css.
Mvh
Joachim M. Giæver
http://development.giaever.org
Brukerens avatar
Nukleuz
Seniormedlem
 
Innlegg: 1659
Registrert: 09.12.2006 2:08
Bosted: Tromsø

Re: Rounded corner

Innlegg ingeva » 15.04.2013 14:54

Nukleuz skrev:Bilde inne i knappen består bare av transparent png, altså det svarte ikonet. Bakgrunnen, det hvite er også ren css.

Virker unødig komplisert, spør du meg. :)
"If you're staying with Microsoft you're getting more and more overwhelmed to update and change your whole IT infrastructure." Peter Hofmann . . . . Se her.
Brukerens avatar
ingeva
Seniormedlem
 
Innlegg: 1071
Registrert: 24.01.2011 6:48
Bosted: Sandvika

Re: Rounded corner

Innlegg Satpam » 15.04.2013 20:22

ingeva skrev:Virker unødig komplisert, spør du meg. :)


Det samme sa de da seilet ble erstattet med motor...
Any idiot can face a crisis - it's day to day living that wears you out.
Satpam
Medlem
 
Innlegg: 29
Registrert: 27.10.2009 22:51

Re: Rounded corner

Innlegg Nukleuz » 15.04.2013 21:25

Komplisert? Vel. Ønsker jeg i fremtiden å endre form og farger endrer jeg det en plass; altså i css, som endrer alle disse ikonene samtidig. Dersom du skulle gjort det samme på din måte, i et slikt tilfelle, måtte du ha endret et og et bilde, lagret hver av dem for så å lastet de opp på serveren. Så hva er mest komplisert?
Mvh
Joachim M. Giæver
http://development.giaever.org
Brukerens avatar
Nukleuz
Seniormedlem
 
Innlegg: 1659
Registrert: 09.12.2006 2:08
Bosted: Tromsø

Re: Rounded corner

Innlegg ingeva » 15.04.2013 21:42

Nukleuz skrev:Komplisert? Vel. Ønsker jeg i fremtiden å endre form og farger endrer jeg det en plass; altså i css, som endrer alle disse ikonene samtidig. Dersom du skulle gjort det samme på din måte, i et slikt tilfelle, måtte du ha endret et og et bilde, lagret hver av dem for så å lastet de opp på serveren. Så hva er mest komplisert?

Det er jo et poeng, men jeg har ikke sett din CSS og vet heller ikke hvilken grunn du skulle ha for å forandre på bildene. CSSen blir vel heller ikke helt enkel hvis du skal ta hensyn til allslags forskjellige nettlesere, hvor noen støtter runde hjørner og noen ikke gjør det.
Jeg forstår helller ikke hvordan du kan lage et bilde i ren CSS, eller forandre fargene i et bilde vha CSS - bortsett fra bakgrunnsfargen.

Har du observert hvordan runde hjørner er laget phpBB? Der blir bakgrunnsfargen feil utenfor sirkelsektoren hvis du skifter bakgrunnsfarge for nettsiden. Problemet løses enklest ved å fjerne alle avrundede hjørner. Generelt mener jeg at "problemet" med runde hjørner løses best ved å unngå dem, slik fx Microsoft endelig har funnet ut - mer enn 10 år etter at de fant ut at det ville være "fancy".
Fancy? Ja, kanskje for noen, men fullstendig unødvendig og dermed bortkastet. Ditt tilfelle med sirkelrunde bilder er for spesielt til å forandre på det. For meg virker det mest som en øvelse i å finne en løsning på et oppkonstruert problem.
"If you're staying with Microsoft you're getting more and more overwhelmed to update and change your whole IT infrastructure." Peter Hofmann . . . . Se her.
Brukerens avatar
ingeva
Seniormedlem
 
Innlegg: 1071
Registrert: 24.01.2011 6:48
Bosted: Sandvika

Re: Rounded corner

Innlegg adeneo » 15.04.2013 23:17

ingeva skrev:Generelt mener jeg at "problemet" med runde hjørner løses best ved å unngå dem, slik fx Microsoft endelig har funnet ut - mer enn 10 år etter at de fant ut at det ville være "fancy".


Det er strengt tatt feil fremgangsmåte. Det enkleste for å unngå problemer i det store hele med alt av nettløsninger, er å unngå Microsoft, ikke å unngå alt ikke Microsoft skjønner noe av !
Ser man bort i fra Internet Explorer så støtter alle nettlesere det meste av CSS3, og har gjort det i årevis, og det er dessverre Microsoft som lager problemene.

Nå er det slik at IE9 og IE10 er såpass at i det minste det meste elementære virker, og alle er enige om at man bør slutte å støtte IE8 og nedover på grunn av alle problemene som finnes i de nettleserne, til og med Microsoft er enige i dette.
Flere store rammeverk og globale aktører kommer i løpet av kort tid til å fjerne all støtte for det som kalles "legacy IE", altså gamle IE versjoner. jQuery lanserer snart versjon 2.0, hvor all støtte for IE8 og nedover er fjernet, og dette mer enn halverte kodebasen, og det sier litt når halvparten av koden går med til dusteløsninger for å støtte gammel dritt.

Det er jo nesten umulig å finne en nettside i dag som ikke har brukt runde hjørner, skygger og annen snask til et eller annet, og tenk på hvordan det så ut på nettet for ti år siden, og si helt ærlig at du vil tilbake til det utseende igjen !
Selv når du leser dette, er det fullt av runde hjørner du ser rundt på denne siden ?
adeneo
Medlem
 
Innlegg: 628
Registrert: 08.04.2011 21:09

Re: Rounded corner

Innlegg ingeva » 16.04.2013 3:33

adeneo skrev:Ser man bort i fra Internet Explorer så støtter alle nettlesere det meste av CSS3, og har gjort det i årevis, og det er dessverre Microsoft som lager problemene.
Der vil jeg snu på flisa og si heldigvis. Da er det greit å vite hva man skal kutte ut først. :)

adeneo skrev:Det er jo nesten umulig å finne en nettside i dag som ikke har brukt runde hjørner, skygger og annen snask til et eller annet, og tenk på hvordan det så ut på nettet for ti år siden, og si helt ærlig at du vil tilbake til det utseende igjen !
Det syns jeg er å konkludere litt for mye, selv om jeg syns det er for stort fokus på (fancy) utseende, og for lite på innhold. I dagens utgave av NWF har jeg en annen post hvor jeg spør hvor mange som kan lese en viss nettside. Den er spekket med "fancy" løsninger, hvilket medfører at jeg med mine tre forskjellige nettlesere og to forskjellige OS kun ser en blank side. Ting kan gjøres for komplisert.

adeneo skrev:Selv når du leser dette, er det fullt av runde hjørner du ser rundt på denne siden ?
Du kan lese min forrige post om hva jeg syns om phpBBs løsning. Den er sikkert litt antikvarisk, men jeg føler meg sikker på at i neste versjon er triksene med runde hjørner fjernet eller vesentlig forenklet. Forøvrig har jeg fjernet alle runde hjørner i de forumene jeg har/har hatt ansvaret for, bortsett fra phpbb.no, hvor jeg har beholdt det designet som "alltid" har vært; samme som her.
"If you're staying with Microsoft you're getting more and more overwhelmed to update and change your whole IT infrastructure." Peter Hofmann . . . . Se her.
Brukerens avatar
ingeva
Seniormedlem
 
Innlegg: 1071
Registrert: 24.01.2011 6:48
Bosted: Sandvika


Gå til Inspirasjon

Hvem er i forumet

Brukere som leser i dette forumet: Ingen registrerte brukere og 2 gjester