Ett mycket enkelt sätt att rotera elementen på en webbplats sida - använd bara några css-stilar. Genom att bekanta dig med den här lektionen kan du placera ett veckat kortfläkt, spridda fallna löv eller snygga foton i ett album på sidan. Lektionen innehåller ett exempel på implementeringen av ett fotoalbum och tar hänsyn till lösningen för alla moderna webbläsare.
Det är nödvändigt
Fyra bilder upp till 450 pixlar breda
Instruktioner
Steg 1
Det här exemplet fokuserar på att skapa en snygg albumsida med roterade foton.
Jag förberedde i förväg bilder (bredd 400 pixlar) med adresser:
I framtiden kommer vi att tilldela bilder till ID efter deras namn.
Steg 2
Först förbereder vi ett block för vårt fotoalbum med div-taggen och lägger också till foton till det med img-taggen (varje bild måste bifogas sin egen div-tagg), så här:
Observera att vi har tilldelat blocket en identifierare -. Genom identifieraren kan vi hänvisa till blocket med hjälp av css.
Steg 3
Därefter måste du ställa in css-stilar till blocket. Lista över stilar: "position: relative;" - kommer att ställa in ursprunget från det övre vänstra hörnet av vårt block; "margin: 50px auto;" - kommer att ställa in indragningen av vårt block "50px" ovanför och under resten av sidinnehållet, samt ställa in den automatiska fördjupningen till höger och vänster, och därigenom justera vårt block i mitten; "bredd: 900px; höjd: 650px;" - ställer in bredden till 900 pixlar respektive höjden till 650 pixlar.
Den angivna listan över stilar måste placeras på detta sätt:
#foto_sida {
position: relativ;
marginal: 0 auto;
bredd: 900px;
höjd: 650px;
textjustera: centrum;
}
Observera användningen av "#photo_page" - så hänvisar vi till block-ID.
Steg 4
Nu kommer vi att tilldela allmänna stilar för varje bild inuti blocket photo_page. Dessa är rundade hörn, grå kant, vit bakgrund, stoppning och skugga.
Detta skapar en fotografisk effekt:
#foto_sida img {
gränsradie: 7 pixlar;
kant: 1px fast grå;
bakgrund: #ffffff;
stoppning: 10px;
box-shadow: 2px 2px 10px # 697898;
}
Observera användningen av "#photo_page img" - detta kommer att hänvisa till alla bilder inuti foto_sidan
Steg 5
Det är också viktigt att lägga till en kort stil så här:
#foto_sida div {
flyta till vänster;
}
Den krymper alla block inuti foto_sidan till vänster.
Steg 6
Mellansteget i lektionen har nu slutförts. Om ditt arbete liknar bilden på skärmdumpen har du inte gjort något misstag och kan gå vidare till nästa steg.
Steg 7
Nu vänder vi oss för att rotera de upplagda bilderna. För detta behöver vi transformera stilen. För närvarande, i sin rena form, används den inte, men bara med ett prefix för varje webbläsare i början, så här:
-webkit-transform: rotera (värde);
-moz-transform: rotera (värde);
-o-transform: rotera (värde);
Detta är rotationsstilen för webbläsare: Google Chrome, Mazilla, Opera (respektive). I stället för ordet "värde" infogar vi ett tal med deg i slutet, så här:
90 grader - rotera 90 grader medurs.
-5deg - rotera -5 grader moturs.
Etc.
Steg 8
Stil för fotofoto_1:
# foto_1 {
-webkit-transform: rotera (5deg);
-moz-transform: rotera (5deg);
-o-transform: rotera (5deg);
}
Den första bilden roteras 5 grader.
Steg 9
Stil för fotofoto_2:
# foto_2 {
-webkit-transform: rotera (-3deg);
-moz-transform: rotera (-3deg);
-o-transform: rotera (-3deg);
}
Den andra bilden roteras -3 grader.
Steg 10
Stil för fotofoto_3:
# foto_3 {
-webkit-transform: rotera (-2deg);
-moz-transform: rotera (-2deg);
-o-transform: rotera (-2deg);
}
Den tredje bilden roteras -2 grader.
Steg 11
Stil för foto foto_4:
# foto_4 {
-webkit-transform: rotera (8deg);
-moz-transform: rotera (8deg);
-o-transform: rotera (8deg);
}
Den fjärde bilden roteras 8 grader.
Steg 12
Låt oss se hur du kan korrigera bildernas position. Till exempel vill du kompensera den första bilden 20px från toppen och 10px från vänster. I det här fallet måste du använda marginalstilen. Här är rätt sätt att använda det för vårt fall:
# foto_1 {
marginal: 20px -10px -20px 10px;
-webkit-transform: rotera (5deg);
-moz-transform: rotera (5deg);
-o-transform: rotera (5deg);
}
Observera att det första värdet i stilen är toppmarginalen; den andra är strecksatsen till höger; det tredje är ett indrag från botten; fjärde - vänstra strecksatsen.
Viktigt: i vårt fall är bottenmarginalen lika med det negativa värdet på toppmarginalen. Om du ser vitt utrymme under bilden på din sida, försök att fördjupa bildens botten ännu mer negativt.
Steg 13
Arbetet är klart, jag ger en skärmdump (med hänsyn till förändringen i indragningen av den första bilden som beskrivs i steg 12).
Lägg till fördjupningsstil till alla bilder som inte passar dig.
