Designtips: Vit-tonad bild vid mouseover

Fått lite frågor om hur jag får den vita toningen på mina bilder i inläggen, så nu tänkte jag förklara :) 
Det enda jag har gjort är att lägga in en kod i kodmallen, eftersom jag har en vit bakgrund i mina inlägg så blir det en vit toning, annars blir bilderna egentligen genomskinliga.
 
1. Gå in i kodmallen och lägg den här koden mellan <head> och </head>.
 

<style type="text/css">
img{opacity: 1;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;}

img:hover{opacity: 0.6;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;}
</style>

 

2. För att ändra hur genomskinlig du vill att bilden ska bli ändrar du img:hover{opacity: 0.6; från 0,1-1,0 beroende på hur mycket du vill att det ska vara. Sen lägger du bara in koden i varje kodmall så det syns överallt på bloggen :) 


Designtips: Skugga på bloggen

Tänkte tipsa om hur man får skugga på bloggen, så som jag har.

Börja med att gå in på design-stillmall och bläddra till #wrapper och lägg in den här koden:

-moz-box-shadow:0px 0px 15px #888;
box-shadow: 0px 0px 15px #888;
padding: 0px 0px 0px 0px;}

Då ska det se ut ungefär såhär:

På moz-box-shadow kan man också ändra skuggans "storlek" där det står 15px. Samma gäller också där det står box-shadow 15px, bara att ändra talet till det man vill ha.

Sen om man vill ha skugga i menyn också är det bara att lägga in samma kod på #side. Det är bara att prova sig fram!

Designtips: Bildspel i headern

Fått otroligt många frågor om detta designtips som jag har gjort. Många kommenterar också att det inte funkar och vill ha min hjälp. Så tänkte grundligt gå igenom hur man gör, försökte göra med bilder men det funkade inte alls och kan inte filma heller. Hoppas en liten bättre förklaring hjälper!

1. Börja med att gå in på design och sen vidare till kodmall. Där klistrar du in den HÄR koden mellan <head> och </head>.

2. När du har gjort klart de första så ska du ladda upp dina bilder som du gör via "Skapa" sen kan du välja mellan inlägg, bild och länk. Välj bild och sedan kommer du till bilduppladdningen där du väljer vilken bild sen storlek.

När bilden är uppladdad så klickar du på den och sen kopierar du bildlänken (ett tips är att spara bildlänken i till exempel ett word dokument så länge).

3. Klistra in den HÄR koden mellan <div id="wrapper"> och <div id="header"> som finns i kodmallen. Om du inte hittar den kan du klicka på Ctrl och F samtidigt så kommer en sökruta upp.

4. Klistra in dina bildlänkar i koden som du just har lagt in mellan wrappern och headern. Du kan ha hur många bilder du vill men kom ihåg att alla bilder FÖRUTOM sista ska ha en sån här ; efter sig.  Alltså, alla bilder utomsista ska ha en sån här ; bakom sig.

5. Sedan sparar du och gör samma sak i alla kodmallar (framsida, arkivsida, kategorisida och inläggssida). Ta även bort den header du har haft innan, den finns i stilmallen under #header.


Tidigare inlägg