Een zeer eenvoudige manier om de elementen van een webpagina te roteren - pas een paar CSS-stijlen toe. Door vertrouwd te raken met deze les kun je een uitgevouwen kaartwaaier, verspreide gevallen bladeren of stijlvolle foto's in een album op de pagina plaatsen. De les bevat een voorbeeld van de implementatie van een fotoalbum en houdt rekening met de oplossing voor alle moderne browsers.
Het is nodig
Vier foto's tot 450px breed
instructies:
Stap 1
Dit voorbeeld richt zich op het maken van een stijlvolle albumpagina met gedraaide foto's.
Ik heb vooraf afbeeldingen voorbereid (breedte 400px) met adressen:
In de toekomst zullen we ID's aan afbeeldingen toewijzen op basis van hun naam.
Stap 2
Eerst zullen we een blok voor ons fotoalbum voorbereiden met behulp van de div-tag, en er ook foto's aan toevoegen met de img-tag (elke afbeelding moet zijn ingesloten in zijn eigen div-tag), zoals deze:
Houd er rekening mee dat we een identifier hebben toegewezen aan het blok -. Door de identifier kunnen we naar het blok verwijzen met behulp van css.
Stap 3
Vervolgens moet je de css-stijlen op het blok instellen. Lijst met stijlen: "positie: relatief;" - stelt de oorsprong in vanuit de linkerbovenhoek van ons blok; "marge: 50px automatisch;" - zal de inspringing van ons blok "50px" boven en onder de rest van de pagina-inhoud instellen, evenals de automatische inspringing naar rechts en links, waardoor ons blok in het midden wordt uitgelijnd; "breedte: 900px; hoogte: 650px;" - stelt de breedte in op respectievelijk 900px en de hoogte op 650px.
De opgegeven lijst met stijlen moet op deze manier worden geplaatst:
#photo_page {
positie: relatief;
marge: 0 automatisch;
breedte: 900px;
hoogte: 650px;
tekst uitlijnen: midden;
}
Let op het gebruik van "#photo_page" - dit is hoe we naar de blok-ID verwijzen.
Stap 4
Nu zullen we algemene stijlen toewijzen voor elke afbeelding in het photo_page-blok. Dit zijn afgeronde hoeken, grijze rand, witte achtergrond, opvulling en slagschaduw.
Dit zorgt voor een fotografisch effect:
#photo_page img {
grensradius: 7px;
rand: 1px effen grijs;
achtergrond: #ffffff;
opvulling: 10px;
doosschaduw: 2px 2px 10px # 697898;
}
Let op het gebruik van "#photo_page img" - dit verwijst naar alle afbeeldingen in het blok photo_page
Stap 5
Het is ook belangrijk om een korte stijl als deze toe te voegen:
#photo_page div {
zweven: links;
}
Het verkleint alle blokken in het photo_page-blok naar links.
Stap 6
De tussenfase van de les is nu afgerond. Als uw werk lijkt op de afbeelding in de schermafbeelding, heeft u geen fout gemaakt en kunt u doorgaan naar de volgende stap.
Stap 7
Nu draaien we om de geplaatste foto's te roteren. Hiervoor hebben we de transformatiestijl nodig. Op dit moment wordt het in zijn pure vorm niet gebruikt, maar alleen met een voorvoegsel voor elke browser aan het begin, zoals dit:
-webkit-transform: roteren (waarde);
-moz-transform: roteren (waarde);
-o-transform: roteren (waarde);
Dit is de rotatiestijl voor browsers: Google Chrome, Mazilla, Opera (respectievelijk). In plaats van het woord "waarde", voegen we een getal in met graden aan het einde, zoals dit:
90 graden - draai 90 graden met de klok mee.
-5deg - draai -5 graden tegen de klok in.
Enz.
Stap 8
Stijl voor foto photo_1:
# foto_1 {
-webkit-transform: roteren (5deg);
-moz-transformatie: roteren (5deg);
-o-transformatie: roteren (5deg);
}
De eerste afbeelding is 5 graden gedraaid.
Stap 9
Stijl voor foto photo_2:
# foto_2 {
-webkit-transform: roteren (-3deg);
-moz-transform: roteren (-3deg);
-o-transformeren: roteren (-3deg);
}
De tweede afbeelding is -3 graden gedraaid.
Stap 10
Stijl voor foto photo_3:
# foto_3 {
-webkit-transform: roteren (-2deg);
-moz-transform: roteren (-2deg);
-o-transform: roteren (-2deg);
}
De derde afbeelding is -2 graden gedraaid.
Stap 11
Stijl voor foto photo_4:
# foto_4 {
-webkit-transform: roteren (8deg);
-moz-transform: roteren (8deg);
-o-transformatie: roteren (8deg);
}
De vierde afbeelding is 8 graden gedraaid.
Stap 12
Laten we eens kijken hoe u de positie van afbeeldingen kunt corrigeren. U wilt bijvoorbeeld de eerste afbeelding 20 px vanaf de bovenkant en 10 px vanaf de linkerkant verschuiven. In dit geval moet u de margestijl gebruiken. Dit is de juiste manier om het voor ons geval te gebruiken:
# foto_1 {
marge: 20px -10px -20px 10px;
-webkit-transform: roteren (5deg);
-moz-transformatie: roteren (5deg);
-o-transformatie: roteren (5deg);
}
Houd er rekening mee dat de eerste waarde van de stijl de bovenmarge is; de tweede is het streepje aan de rechterkant; de derde is een streepje vanaf de onderkant; vierde - linker streepje.
Belangrijk: in ons geval is de ondermarge gelijk aan de negatieve waarde van de bovenmarge. Als je witruimte onder de afbeelding op je pagina ziet, probeer dan de onderkant van de afbeelding nog negatiever te laten inspringen.
Stap 13
Het werk is voltooid, ik geef een screenshot (rekening houdend met de wijziging in de inspringing van de eerste afbeelding beschreven in stap 12).
Voeg een inspringstijl toe aan afbeeldingen die niet in de juiste positie voor u zijn.
