Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse

Transparent bakgrund (genomskinlig)

Hur gör man en transparentekt bakgrund på sin blogg? I dagens video visar Sanna hur du gör för att göra bakgrunder på din blogg genomskinlig. Det är en effekt som är mycket populär bland fotobloggar.

 

Stilmallskod:


#wrapper::after {
background-color:#FFFFFF;
clear:both;
content:'.';
display:block;
height:0;
visibility:hidden;
}

Kod som styr din bakgrund  på #wrapper:


<i>background: <u>transparent</u> url(länkentilldinbild) repeat-y; </i>

Transkribering av filmen:

Genomskinlig bakgrund bakom bloggen

Hej.

I detta tips hade jag tänkt visa er hur man gör en bakgrund liksom, alltså det här är ju bakgrunden, men att man gör ytterligare en bakgrund som går runt själva ramen av bloggen som är genomskinlig. Kan visa ett exempel här, jag tror att Filippa har det så. Ska vi se. Det är ju väldigt inne att ha det i bland fotobloggare och det är väldigt många som har frågat mig hur man gör. Därför så tänkte jag att då kan det ju vara bra att visa det för er. Man ser det inte så bra här men hon har en, en lite, vad heter det, en lite genomskinlig bakgrund på själva wrappern. Wrappern är liksom det som ramar in allting här. Vi har bodyn som är hela alltet och sen så har vi wrappern som ramar in själva bloggen i sig. Det är där vi bestämmer om bloggen ska vara centrerad eller om den, ja vart den ska börja och hur bred bloggen ska vara och så där. Allt som allt. Allt som ska ingå i det.

 

Det första man ska göra då det är att man ser till att man har även wrapper after i sin stilmall och har ni inte det så kan ni bara rulla ner lite, alltså här under videon så finns det här. Om ni då inte har det så klistrar ni bara in det i stilmallen precis under wrapper. För annars så kommer wrappern bara att synas precis bakom headern. Man kan också behöva justera lite med margin och padding. Till exempel kan man behöva lägga en margin så att bloggen inte börjar precis uppe i kanten här och sen kan man behöva lägga en padding på wrapper, inte wrapper after, utan wrapper. För att den här ska, för att den ska börja lite högre upp än själva headern.

 

Lägger man en margin på headern så flyttas även wrappern ner så det kan man inte göra utan man lägger en padding på wrappern istället. I alla fall då är det som så att man kan tyvärr inte bara lägga en bakgrund och sedan, vad heter det, lägga opacitet på den bakgrunden. Jag ska visa vad som händer, eller kort sagt, det händer ingenting om man gör på det viset. Ska vi se här, jag lägger en bakgrund som har opacitet 0.7. Då blir hela bloggen, alltså alltihopa blir genomskinligt liksom. Det ska man inte göra utan man behöver någon typ av, vad heter det, bildredigeringsprogram.

 

Då går man in i till exempel photoshop och så skapar man sig ett nytt dokument. Så kollar man hur brett ska det här dokumentet vara. Det ser man ju på bredden på wrapper, alltså under width så ser ni att det är 800 pixlar på min. Zoomar in lite så att ni ser. Då är det 800 pixlar där men sen så har jag även lagt till en padding på 20 pixlar och då blir det ju en padding på 20 pixlar uppåt, åt vänster, åt vänster och neråt. Det betyder att då ska vi lägga till ytterligare 40 pixlar till den här bredden för det blir ju 20 pixlar åt vänster, 20 pixlar åt höger vilket betyder 800+20+20 är 840 istället för 800.

 

Då gör man som så att man skapar ett nytt dokument här i photoshop och man ser till att man har en transparent bakgrund annars kommer inte detta att fungera. Så vi lägger den på 840 och sen så behöver den inte vara speciellt hög alltså den kan vara 1 pixel egentligen men jag gör den på 50 pixlar för att illustrera lite bättre. Då ser det ut så här och det jag gör då, det är att jag skapar ett nytt lager med control-shift-N eller command-shift-N. Så färglägger jag det lagret helt och hållet. Jag fyller det helt enkelt. Då kan man antingen trycka på edit och fill eller så kan man hålla in shift-f5 eller så håller man in shift-backspace om man har, vad heter det, om man har Mac.

 

Men vi trycker på fill där i alla fall och så tar vi färg och då tar vi vitt då. Vill man ha en annan färg alltså att det är lite transparent i rosa eller vad det nu kan vara så kan man givetvis välja det men jag väljer vitt här. Då blir den helt vit, men jag vill att den ska vara lite genomskinlig så då lägger jag en liten opacitet på den där och jag hade ju lagt 0.7 vilket är 70% så då lägger jag 70% på den här också. Det får man ju givetvis välja själv, man kan ha 30% om man skulle vilja det, men vi provar med 50 här då.

 

Sen så sparar jag det och då är det viktigt att spara detta som png eller annat som bevarar att det är en transparent bakgrund. Om man sparar det som jpeg eller jpg så kommer det att bli en vit bakgrund och då blir hela bilden vit istället för lite transparent. Jag sparar den och så döper jag den till nånting som wrapper background och sen så ska jag ladda upp den här bilden på min blogg. Så då gör vi så. Gick jag in på arkiv alltså och så bilder. Man kan ju givetvis ladda upp den här på tinypic eller imageshack eller tumblr eller vart man vill men jag gör det här.

 

Så ska vi se. 900 pixlar så att de här 840 får plats då för om jag lägger den på 800 pixlar så blir den ju 800 pixlar och inte 840. Sådär. Kopierar fullstora bilden och så lägger jag den som bakgrund här på, vad heter det, på wrapper, inte på wrapper after utan på wrapper. Då är det viktigt att man lägger en transparent först så man skriver transparent. Det stavas ju t r a n s p a r e n t och inte på nåt annat sätt. Ni ser att om ni stavar rätt så kommer det bli fet lila text, skriver ni däremot fel, kanske transperant eller nåt sånt där, då blir det grön smal text. Då vet ni att då har ni stavat fel helt enkelt.

 

Sen skriver jag som man gör med en vanlig bildkod, url och så en parentes och inuti den parentesen så skriver jag in, alltså kopierar jag in den här url-adressen som det är till bilden då. Sen så skriver jag repeat-y vilket betyder att den repeterar sig neråt. Om jag inte hade lagt en repeat-y, jag kan ju illustrera det med att ta bort repeat-y. Så syns den tydligen ändå, men jag rekommenderar att man lägger en repeat-y där ändå för säkerhetens skull för jag kan inte lova att det blir så på alla bloggar.

Var noga med att ni inte skriver no-repeat eller att ni skriver repeat-x eller nåt annat utan repeat – y för att vara på den säkra sidan så att ni vet att det repeteras neråt på alla bloggar. Sen så hade vi ju opaciteten där också, den ska jag ju ta bort. Sådär, då ligger den där och så är det en liten transparent bakgrund på min blogg där.

 

Det var allt för idag, ha det så gott. Hej hej.

Skribent och ansvarig för DDB. Driver Designa din blogg sedan juni 2015. Har bland annat studerat webbdesign, marknadsföring och online strategier både i Sverige och USA. Jobbar inom IT.

Läs mina andra inlägg

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *