Share
Har du noen gang sett et nettsted som viser noen miniatyrbilder som er litt roterte? Det er en enkel effekt som legger til et lag av visuell personlighet. Å si at hvis du ikke oppnår rotasjonseffekten med CSS, jobber du for hardt! Lær hvordan du gjør det riktig!
Publisert opplæringNoen få uker besøker vi noen av leserens favorittinnlegg fra hele historien til nettstedet. Denne opplæringen ble først publisert i august 2011.
Bildegallerier med roterte miniatyrer er noe sjeldne, men det er et enkelt triks å legge til stil på nettsiden din. Men hvis ikke gjort riktig, kan oppnå og opprettholde denne effekten noen ganger vise seg å være et stort problem!
For å oppnå denne effekten kan dine første tanker slå på å skape roterte miniatyrer i Photoshop. Dette kan imidlertid vise seg å være vanskelig på lang sikt. Ulemper for å skape roterte miniatyrer på denne måten inkluderer:
Ville det ikke vært fint om du kunne utføre denne lille rotasjonen med en linje med kode? Vel du kan! La oss lære hvordan.
En kort oversikt over hva vi prøver å oppnå, avslører følgende trinn:
Accentsconagua
img stikkord
For å sikre at vårt galleri brytes grasiøst, vil trinn 1-3 oppnås ved hjelp av CSS. Trinn 4 (rotasjonseffekten) vil bli oppnådd ved bruk av CSS3.
Før du lager våre miniatyrbilder, må vi avgjøre hvor stor hver miniatyrbilde vil vises på skjermen.
Hvis miniatyrbildene våre er for små og vi roterer dem for mye i en vinkel, vil noen av hjørnene gi oss et tomrom. Som dette:
Derfor, for å fylle maskeområdet riktig, kan vi konkludere med at jo mer vår miniatyrbilde blir rotert, desto større må det være. I matematiske termer, når rotasjonsvinkelen på miniatyrbildet øker, må også miniatyrens størrelse (og omvendt).
Trinn 3-6 beskriver hvordan man beregner matematisk forholdsmessig dimensjonering for bildemasken og miniatyrbildet. Forstå det er ikke nødvendig å kunne rotere bilder med CSS forvandle eiendom. Snarere er dens formål å hjelpe deg å forstå hvordan du skal bestemme størrelsen på elementene dine for å tillate full 360 ° rotasjon. Dette sikrer at du ikke vil bli igjen med stygge tomme hjørner.
For å unngå å vise tomt rom i masken må vi bestemme EN av de følgende:
Fordi miniatyrbildet og bildemasken er forholdsmessig like i størrelse, hvis vi setter størrelsen på en, kan vi beregne størrelsen på den andre.
I dette eksemplet skal vi først sette inn størrelsen på bildemasken. Ved å angi størrelsen på vår bildemaske kan vi bruke litt matematikk til å beregne miniatyrstørrelsen:
Diagonallengden er et viktig nummer. For å tillate at vår miniatyrbilde er full 360 ° rotasjon, må den korteste siden være lik bildemaskens lengste side. (Selv om du kanskje ikke trenger det, vil tildeling for 360 graders rotasjon tillate fremtidige endringer i rotasjonsvinkelen uten å endre størrelsen på miniatyrbildene dine).
Som du kan se, må miniatyrets korteste side være lik maskens lengste side. Hvis det ikke er det, blir vi igjen med tomt rom. Husk at miniatyrbildets størrelse er forholdsmessig større enn størrelsen på bildemasken.
Beregning av miniatyrets størrelse slik at den passer riktig, er lett når vi kjenner dimensjonene til bildemasken. Vi tar bare maskens største side (diagonalen) og la den være den minste siden av miniatyrbildet.
Vi har nå bestemt oss for maske- og miniatyrstørrelser. Vi vet om bildemasken vår er 180x240px, enn bildet miniatyrbildet inne i masken må være 300x400px for å tillate 360 ° rotasjon.
En glad merknad: Fordi bildemasken og miniatyrstørrelsen er forholdsmessig like, vil denne matte også fungere hvis vi først angir miniatyrstørrelsen vår! Vi ville bruke samme pythagorasetning og proporsjonale relasjoner for å bestemme de riktige størrelsene.
Nå som vi kjenner alle våre størrelser, la oss bygge våre roterte miniatyrbilder ved å starte med noen grunnleggende HTML.
Roterte miniatyrer med CSS3 Roterte miniatyrer med CSS3
Bare tallverdier
Denne grunnleggende HTML-oppsettet legger inn følgende:
verdi attributt til lik samme beløp som vi først vil sette inn i vårt CSS (15 i dette tilfellet).![]()
klar: begge - Rydder våre flytede miniatyrbilderclass = "maske" - Klassen for vår bildemaske
La oss bruke noen grunnleggende styling til vår side for å gi den struktur og enkelhet.
kropp margin: 0; padding: 0; bakgrunn: #eee; font-familie: Genève, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif; #wrapper width: 840px; margin: 0 auto; bakgrunn: #fff; grense: 1px solid #ccc; padding: 25px; border-top: none; #error_message farge: rød; display: none; font-size: .8em;
Legg merke til at vi skjulte vår feilmelding som standard som vi vil bytte det er synlighet senere i jQuery.
La oss legge til noen flere detaljer for å forbedre vår grunnleggende styling
#wrapper border-radius: 0 0 5px 5px; -moz-grense-radius: 0 0 5px 5px; -webkit-grense-radius: 0 0 5px 5px; bokseskygge: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; -webkit-boks-skygge: 0 0 5px #ccc;
Nå har vi innholdet vårt sentrert med god avstand og noen CSS3-effekter for forbedret sidestyling.
La oss bruke bildemasken til våre miniatyrbilder. I vår HTML pakket vi hver miniatyrbilde i en ankermerke og ga den en klasse av maske som vi vil bruke i vårt CSS.
.maske posisjon: relativ; høyde: 180 piksler; bredde: 240 piksler; float: venstre; flow: hidden; margin: 15px; grense: 5px solid # f6f6f6; bokseskygge: 0 0 1px # 000; -moz-boks-skygge: 0 0 1px # 000; -webkit-boks-skygge: 0 0 1px # 000;
Her er en beskrivelse av CSS-egenskapene vi brukte (og hvorfor vi brukte dem):
stilling: relativ - Våre img Merkene vil bli plassert helt inne i vår bildemaskehøyde, bredde - Tidligere har vi bestemt oss for bildemaskens dimensjoner. Det er her vi plasserer disse størrelsene.float: left - Flyter bildene våre slik at de vises i et galleriform.flow: hidden - Som beregnet tidligere vil våre miniatyrer være 300x400px. Vi vil imidlertid bare vise en del (180x240px) av dem. Denne egenskapen fungerer som maske, gjemmer den delen av miniatyrbildene som strekker seg utenfor dimensjonene 180x240.margin - Plasser ut våre bildergrense, box-shadow - Dette gir oss en dobbel ramme (i støttende nettlesere). De grense Egenskapen gir oss en tykk, gråhvit kant rundt bildet mens box-shadow gir oss en tynn, svart ramme rundt vår tykke, gråhvit grense.
Sett våre miniatyrstørrelser i henhold til dimensjonene vi har beregnet i trinn 5.
.maske img høyde: 300px; bredde: 400 piksler;
For øyeblikket er våre miniatyrer plassert relativt (fra øverste venstre hjørne).
Vi vil at vår miniatyrbilde skal være sentrert horisontalt og vertikalt i masken.
For å oppnå dette bruker vi følgende CSS-regler:
.maske img posisjon: absolutt; margin-top: -150px; / * halv høyde * / margin-venstre: -200px; / * halv bredde * / topp: 50%; venstre: 50%;
Her er en beskrivelse av hva vi gjorde:
position: absolute - Dette plasserer miniatyrbildet helt innenfor bildemaskenmargin - Vi angir negative marginer som er nøyaktig halvparten av bildet i høyden og bredden (300x400), og deretter angir vi posisjoneringsegenskapene topp og venstre som trekker elementene tilbake i perfekt senter.
Vi bruker CSS3 eiendommen forvandle å rotere elementene våre. Så vil vår CSS inkludere alle nettleserprefiksene
.maske img -webkit-transform: roter (15deg); -moz-transform: rotere (15deg); -o-transform: roter (15deg); -MS-transform: rotere (15deg); transform: rotere (15deg);
CSS her er ganske enkelt. Vi plasserer bare vinkelen vår i parentes etterfulgt av "deg".
I dette eksemplet brukte vi 15 som rotasjonsverdien, men du kunne sette en annen verdi der. Fordi vi har beregnet størrelsen på masken og miniatyrbildet på riktig måte, har vi plass til full 360 ° rotasjon! Et positivt heltall roterer bildet til høyre, et negativt heltall roterer bildet til venstre.
Som en ekstra effekt, skal vi legge til en enkel linje med CSS som endrer grensefarge når brukeren svinger over og bilde.
.maske: hover border-color: #ddd;
Som en liten bonus, skal vi tillate brukeren å skrive inn en verdi i vår innboks boks som endrer CSS rotasjonsvinkelen. Så først, la oss legge til jQuery på slutten av siden vår like før avslutningen kropp ta med en lenke til vårt tilpassede skript:
La oss nå sette opp jQuery for når dokumentet er klart:
jQuery (dokument) .ready (funksjon ($) // kode her);
Vi lager en funksjon når som helst vår "oppdatering" -knapp blir klikket.
$ ('button'). klikk (funksjon () // kode her); Vi ønsker å lagre CSS-tallverdien for den nåværende rotasjonsvinkelen i en variabel.
var rotation_angle_value = $ ('# rotation_amount') .val (); Denne koden finner rotation_amount id (som vi tilordnet til inngang) og får sin nåværende verdi. Hvis du husker, setter vi inn førstegangen verdi Tilordne til lik 15 (det samme som i vår CSS kode for rotasjonsvinkelen).
Vi ønsker å gjøre brukerens inntaksverdi vår nye rotasjonsvinkel. Vi vil imidlertid sørge for at brukeren ikke tilfeldigvis oppgir en ikke-numerisk verdi. Det er der isNaN () javascript-funksjonen kommer inn. isNaN () står for "er ikke et tall". Denne funksjonen gjør akkurat hva navnene innebærer: det kontrollerer for å se om verdien du overfører til den "er ikke et nummer".
Så, vi vil bruke isNaN () fungere og send det til vår rotasjonsvinkelverdi (som oppgitt av brukeren). Hvis det ikke er et nummer, vil vi vise vår feilmelding.
// sjekk for å se om brukerens inngangsverdi er et tall eller ikke hvis (isNaN (rotation_angle_value)) // ikke et nummer $ ('# error_message'). show (); // resten av koden her Hvis brukerens nylig innmeldte verdi ikke er et nummer, har vi vist en feilmelding. Nå skal vi bruke en ellers uttalelse for når de ha angitt en numerisk verdi. Først skjuler vi feilmeldingen.
ellers $ ('# error_message'). skjul (); Fordi rotasjonsvinkelen er lagret flere ganger i vårt CSS (på grunn av de forskjellige nettleserversifikasjonene), må vi oppdatere alle disse verdiene med jQuery. Så, hva vi skal gjøre er å lagre syntaksen til CSS-verdien i en variabel (med den nye vinkeldelen). I hovedsak skriver vi Roterings (15deg) og erstatte verdien av '15' med verdien brukerinngangen.
var rotation_angle = 'roter (' + rotation_angle_value + 'deg)'; 
Da oppretter vi et CSS-objekt med relasjonsverdier. Vi definerer hver av våre CSS egenskaper (nettleser prefiks for transformasjon), og sett inn verdien som variabelen vi nettopp har definert.
var updated_css = '-webkit-transform': rotation_angle, '-moz-transform': rotation_angle, '-o-transform': rotation_angle, '-ms-transform': rotation_angle, 'transform': rotation_angle,
Nå sender vi bare den variabelen som lagrer våre CSS-egenskaper og verdier til jQuery for å oppdatere CSS!
$ ('. mask img'). css (updated_css); Slik ser alle våre jQuery ut:
jQuery (dokument) .ready (funksjon ($) $ ('knapp'). klikk (funksjon () // få rotasjonsvinkelverdien var rotation_angle_value = $ ('# rotation_amount') .val (); hvis (isNaN (rotation_angle_value)) // er ikke et tall $ ('# error_message'). show (); else // er et tall $ ('# error_message'). skjul (); // lagre CSS-verdi syntaks med Den nye rotasjonsvinkelverdien var rotation_angle = 'rotate (' + rotation_angle_value + 'deg)'; // lagre CSS egenskaper og verdier var updated_css = '-webkit-transform': rotation_angle, '-moz-transform': rotation_angle, ' -O-transform ': rotation_angle,' -ms-transform ': rotation_angle,' transform ': rotation_angle, // oppdater CSS $ ('. mask img '). css (updated_css););); Jeg håper du har lært noe, fremfor alt som forplikter deg til ikke-fleksible design i Photoshop, er det ofte unødvendig å bruke CSS3-teknikker direkte i nettleseren. Takk for at du følger med!
