Hur gör man det här?

Trobiz · 2012-02-21, 23:00

En snabb fråga som säkert är väldigt enkel. På sidan http://www.kernandburn.com/ finns det uppe i vänster hörn en div där det står Kern And Burn. Det ser ut som att diven viker sig om wrappern. Är det enklaste sättet att göra en bild som ser ut så och placera den på rätt ställe eller finns det något css trick som kan göra det här åt en?

samuelviking · 2012-02-21, 23:34

Ett tips: använd developer tools i din webbläsare (eller installera firebug om du använder firefox)
så kan du enkelt kolla själv precis hur de löst det.

I detta fall är det så enkelt som en bild som ser ut såhär
http://www.kernandburn.com/wp-conten...ages/logo2.jpg

Det skulle troligtvis gå att göra med hjälp av CSS men det blir lite väl meckigt skulle jag tycka.
För att dra ner på bildmaterial skulle man dock enkelt kunna göra bara den lilla nedre vänstra delen av vikningen som en bild (en liten grå triangel) och resten är helt enkelt ett HTML-element med bakgrundsfärg.

powerbuoy · 2012-02-21, 23:56

Det är väldigt enkelt att lösa med ren CSS och :after (eller :before) tillsammans med lite border-tricks. Här kan du kolla hur jag nyligen löste det (och även en "taggad" kant): http://jsfiddle.net/jknn9/2/

Edit: :before är i det här fallet "fliken", och :after är taggade kanten.

kevva · 2012-02-22, 00:00

http://jsfiddle.net/s9tPN/2/

Trobiz · 2012-02-22, 12:52

samuelviking: Okej, jag ska kolla upp det! Kör på din lösning med en liten triangel och en färgad div.

Powerbuoy och Kevva: Tack för koden, fick lite tips därifrån hur jag kunde göra.

2012-02-21, 23:00	No. 1
Trobiz Användare Ort: Båstad Inlägg: 30	Hur gör man det här? En snabb fråga som säkert är väldigt enkel. På sidan http://www.kernandburn.com/ finns det uppe i vänster hörn en div där det står Kern And Burn. Det ser ut som att diven viker sig om wrappern. Är det enklaste sättet att göra en bild som ser ut så och placera den på rätt ställe eller finns det något css trick som kan göra det här åt en?
Trobiz Användare Ort: Båstad Inlägg: 30
	Svara med citat

2012-02-21, 23:34	No. 2
samuelviking Användare Ort: Göteborg Inlägg: 227	Ett tips: använd developer tools i din webbläsare (eller installera firebug om du använder firefox) så kan du enkelt kolla själv precis hur de löst det. I detta fall är det så enkelt som en bild som ser ut såhär http://www.kernandburn.com/wp-conten...ages/logo2.jpg Det skulle troligtvis gå att göra med hjälp av CSS men det blir lite väl meckigt skulle jag tycka. För att dra ner på bildmaterial skulle man dock enkelt kunna göra bara den lilla nedre vänstra delen av vikningen som en bild (en liten grå triangel) och resten är helt enkelt ett HTML-element med bakgrundsfärg.
samuelviking Användare Ort: Göteborg Inlägg: 227
	Svara med citat

2012-02-21, 23:56	No. 3
powerbuoy Användare Ante Lager, 32 Ort: Stockholm Inlägg: 806	Det är väldigt enkelt att lösa med ren CSS och :after (eller :before) tillsammans med lite border-tricks. Här kan du kolla hur jag nyligen löste det (och även en "taggad" kant): http://jsfiddle.net/jknn9/2/ Edit: :before är i det här fallet "fliken", och :after är taggade kanten.
	60% of the time it works, every time
	Svara med citat

2012-02-22, 00:00	No. 4
kevva Topside bro Kevin Mårtensson, 23 Ort: Borås Inlägg: 344	http://jsfiddle.net/s9tPN/2/
	Senast redigerad av kevva den 2012-02-22 klockan 00:04.
	Svara med citat

2012-02-22, 12:52	No. 5
Trobiz Användare Ort: Båstad Inlägg: 30	samuelviking: Okej, jag ska kolla upp det! Kör på din lösning med en liten triangel och en färgad div. Powerbuoy och Kevva: Tack för koden, fick lite tips därifrån hur jag kunde göra.
Trobiz Användare Ort: Båstad Inlägg: 30
	Svara med citat

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Ämnesverktyg
Visa utskriftsvänlig version E-posta den här sidan