Ett galleri med CSS3-transitions
Hur man skapar ett enkelt galleri med transitions i CSS3
Svep med musmarkören över en bild för att testa. (Fungerar i Firefox, Chrome, Opera, Safari och i Internet Explorer 10). Galleriet kan användas till viss del i IE9 men den mjuka transitionrörelsen försvinner. Surfar du med Internet Explorer 9 eller tidigare? Då missar du mycket av den nya webben. Hämta Google Chrome.
Först så lägger vi in några bilder i en div-container innanför sidans <body>-taggar (glöm inte alt-taggarna i skarpt läge!):
<div class="galleri">
<img src="/images/gbg1.jpg">
<img src="/images/gbg2.jpg">
<img src="/images/gbg3.jpg">
<img src="/images/gbg4.jpg">
</div>
Sen skriver vi lite CSS för ovanstående DIV, antingen innanför <head>-taggarna och då mellan <style> och </style> eller med en länk till ett externt stylesheet.
.galleri{
margin: 90px 0px 0px 100px;
background: #D8EEFE;
padding:10px;
width:
320px;
}
Efter det skriver vi CSS för själva bilderna. Vi bestämmer hur lång tid rotationen och förstoringen/förminskningen ska ta. I exemplet tar det 1 sekund för alla transitions; i det här fallet 1 sekund att förstora och vrida när man hovrar över bilden och 1 sekund att förminska och vrida tillbaka när man tar bort markören från bilder. (-webkit för Chrome och Safari, -moz för Firefox, -o för Opera och -ms för IE9 och uppåt)
.galleri img {
margin: 5px;
padding: 5px;
width: 135px;
border: solid 1px black;
background: white;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
-ms-transition:all 1s;
}
Här skapar vi själva transform-effekten som sker när någon hovrar över bilden. Förstora bilden 2,5 ggr och rotera den 6 grader åt höger. (sätt ett minus framför siffran om du vill rotera bilden åt andra hållet).
.galleri img:hover {
-webkit-transform: scale(2.5) rotate(6deg);
-moz-transform: scale(2.5) rotate(6deg);
-o-transform: scale(2.5) rotate(6deg);
-ms-transform: scale(2.5) rotate(6deg);
}
Läs mer om webbdesign, mobilanpassade sidor m.m.
Hälsningar
Fredrik Olsson
Freddys Foto & Webb
kontakt@freddyolsson.se