Perfekt rotera och maskera miniatyrer med CSS3

Har du någonsin sett en webbplats som visar miniatyrbilder som roteras något? Det är en enkel effekt som lägger till ett lager av visuell personlighet. Säger att om du inte uppnår rotationseffekten med CSS jobbar du för hårt! Lär dig hur du gör det rätt!

Publicerad handledning

Varje par veckor besöker vi några av våra läsares favoritinlägg från hela webbplatsens historia. Denna handledning publicerades först i augusti 2011.

Introduktion

Bildgallerier med roterade miniatyrer är lite sällsynta, men det är ett enkelt trick att lägga till stil på din webbsida. Men om inte gjort rätt kan uppnå och bibehålla denna effekt ibland vara ett stort problem!

För att kunna uppnå denna effekt kan dina första tankar vända sig till att skapa roterade miniatyrbilder i Photoshop. Detta kan dock visa sig vara svårt på lång sikt. Nackdelar med att skapa roterade miniatyrbilder på detta sätt inkluderar:

Vinkelkonsistens: Om bilderna inte alla roteras i samma vinkel, förloras den visuella konsistensen av sidan. Det innebär att man håller fast en PSD för varje enskild miniatyr som roteras ordentligt i en jämn vinkel. Du kan till exempel öppna din PSD och inse att du har glömt rotationsvinkeln på dina miniatyrbilder.
CMS Thumbnail Generation:Om du kör ett CMS (som Wordpress) genereras dina miniatyrer sannolikt automatiskt. Med den ovan beskrivna PSD-metoden måste du manuellt skapa och ladda upp varje enskild miniatyrbild i ditt CMS. Om du redan har en befintlig webbplats men vill använda rotationseffekten till dina miniatyrbilder måste du återskapa alla miniatyrbilder i Photoshop och sedan ladda upp dem alla igen.!
Långsiktigt hanterbarhet: Säg att du har skapat alla dina miniatyrer lite roterade, men nu vill du ändra eller omforma ditt galleri. Det betyder att du måste regenerera alla dina miniatyrbilder. Om du har hanterat dina miniatyrbilder i Photoshop, betyder det att du måste justera och spara på nytt varje enskild miniatyrbild igen. Usch.

Skulle det inte vara trevligt om du kan utföra denna lilla rotation med en rad kod? Tja du kan! Låt oss lära oss hur.

Steg 1: Förstå vårt mål

En kort översikt över vad vi försöker uppnå avslöjar följande steg:

Skapa en miniatyrbild i Photoshop (ej roterad)
Lägg in miniatyren med hjälp av img märka
Maskera det på lämpligt sätt med hjälp av CSS (tänk Photoshop-masker)
Rotera miniatyren i masken med hjälp av CSS3

För att se till att vårt galleri graderas graciöst, kommer steg 1-3 att åstadkommas med hjälp av CSS. Steg 4 (rotationseffekten) kommer att åstadkommas med användning av CSS3.

Steg 2: Förstå miniatyrstorlek och rotationsvinkel ökar

Innan vi skapar våra miniatyrer måste vi bestämma hur stor varje miniatyrbild ska visas på skärmen.

Om våra miniatyrer är för små och vi roterar dem för mycket av en vinkel, ger några av hörnen oss ett tomt utrymme. Så här:

För att fylla på maskområdet korrekt kan vi därför dra slutsatsen att ju mer vår miniatyrbild roteras desto större blir det. I matematiska termer, när tumorns rotationsvinkel ökar, måste också miniatyrens storlek (och vice versa).

Kom ihåg den här nyckeln: bildminnebilden kommer alltid att vara större än bildmasken (miniatyrstorlek> maskstorlek)

En varning till dem som försvinner av matematik

Steg 3-6 beskriver hur man matematiskt kan beräkna proportionell storlek för bildmask och miniatyrbild. Förstå det är inte nödvändigt att kunna rotera bilder med CSS omvandla fast egendom. Snarare är dess syfte att hjälpa dig att förstå hur man korrekt bestämmer storleken på dina element för att möjliggöra full 360 ° rotation. Detta garanterar att du inte kommer att lämnas med fula tomma hörn.

Steg 3: Proportionellt lika

För att undvika att visa tomt utrymme i vår mask måste vi bestämma ETT av följande:

Storlek på den faktiska miniatyrbilden
Bildmaskens storlek (synlig del av miniatyren)

Eftersom miniatyrbilden och bildmaskan är proportionellt lika stora, om vi bestämmer storleken på en kan vi beräkna storleken på den andra.

Steg 4: Bestämning av mått

I det här exemplet kommer vi att ställa in vår bildmaskstorlek först. Genom att ställa in storleken på vår bildmask kan vi använda lite matte för att beräkna miniatyrens storlek:

Bestäm bildmaskens storlek: 180x240 pixlar
Hitta längden på diagonalsidan
- Använd den pythagoranska stolen (a² + b² = c² )
  - Vår första sida (a) är 180px
  - Vår andra sida (b) är 240px
  - Så, 180² + 240² = c² (diagonal längd)
  - 90 000 = c²
  - 300 = c (ta kvadratroten på varje sida)
- Vår diagonal längd (c) motsvarar 300

Diagonallängden är ett viktigt nummer. För att tillåta att vår miniatyrbild är full 360 ° rotation måste dess kortaste sida vara lika med bildmasken längsta sidan. (Även om du kanske inte behöver det, kommer tilldelning för 360 ° rotation att möjliggöra framtida ändringar i rotationsvinkeln utan att du behöver ändra storlek på dina miniatyrbilder).

Steg 5: Beräkning av miniatyrmått

Som du kan se måste vår miniatyrs kortaste sida vara lika med vår maskas längsta sida. Om inte, lämnas vi tomt utrymme. Kom ihåg att miniatyrens storlek är proportionellt större än bildmaskens storlek.

Beräkning av miniatyrens storlek så att den passar perfekt är lätt när vi känner till bildmaskens dimensioner. Vi tar helt enkelt maskens största sida (diagonalen) och låt den motsvara den kortaste sidan av vår miniatyrbild.

Masks största sida (300) motsvarar miniatyrens kortaste sida (x)
Använd proportionerliga relationer för att hitta miniatyrens längd
- 180: 300 (maskans höjd: miniatyrens höjd)
- 240: y (maskellängd: miniatyrlängd)
Kors multiplicera för att lösa
- 180y = 72.000
y = 400 (miniatyrlängd)

Vi har nu bestämt våra mask- och miniatyrstorlekar. Vi vet om vår bildmask är 180x240px, än bildminnebilden i den masken måste vara 300x400px för att tillåta 360 ° rotation.

En glad notering: Eftersom bildmask och miniatyrstorlekar är proportionellt lika, skulle den här matematiken också fungera om vi ställer in vår miniatyrstorlek först! Vi skulle använda samma Pythagorasats och proportionerliga relationer för att bestämma rätt storlek.

Steg 6: Slutligen Några HTML

Nu när vi känner till alla våra storlekar, låt oss bygga våra roterade miniatyrer genom att börja med några grundläggande HTML.

    Roterade miniatyrer med CSS3     Roterade miniatyrer med CSS3
 Transform Vinkel:     Endast numeriska värden

Denna grundläggande HTML-markup lägger till följande:

- Detta gör att användaren kan ändra rotationsvinkeln. Vi ställde också vår värde tillskriva lika stor mängd som vi ursprungligen kommer att ange i vår CSS (15 i det här fallet).
- Detta felmeddelande kommer att döljas från visning. Med jQuery visar vi om användaren anger något förutom ett nummer i inmatningsrutan.
- Dessa är våra miniatyrbilder som kan kopplas till vad som helst du vill.
tydligt: båda - Rensar våra flytande miniatyrbilder
class = "mask" - Klassen för vår bildmask

Steg 7: CSS Basic Page Styling

Låt oss använda några grundläggande styling på vår sida för att ge den struktur och enkelhet.

 kropp marginal: 0; padding: 0; bakgrund: #eee; font-family: Genève, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif;  #wrapper width: 840px; marginal: 0 auto; bakgrund: #fff; gränsen: 1px solid #ccc; padding: 25px; border-top: none;  #error_message färg: röd; display: none; font-size: .8em;

Observera här att vi gömde vår felmeddelande som standard som vi kommer att växla siktning senare i jQuery.

Lägg till några CSS3-effekter

Låt oss lägga till några fler detaljer för att förbättra vår grundläggande styling

 #wrapper border-radius: 0 0 5px 5px; -moz-gränsen-radien: 0 0 5px 5px; -webkit-gränsen-radien: 0 0 5px 5px; boxskugga: 0 0 5px #ccc; -moz-box-skugga: 0 0 5px #ccc; -webkit-box-skugga: 0 0 5px #ccc;

Nu har vi vårt innehåll centrerat med bra avstånd och några CSS3-effekter för förbättrad sidstilning.

Steg 8: CSS Styling Image Mask

Låt oss tillämpa bildmaskinen på våra miniatyrbilder. I vår HTML paketerade vi varje miniatyrbild i en ankare och gav den en klass av mask som vi kommer att använda i vår CSS.

 .mask position: relativ; höjd: 180px; bredd: 240 pixlar; flyta till vänster; overflow: hidden; margin: 15px; gräns: 5px fast # f6f6f6; boxskugga: 0 0 1px # 000; -moz-box-skugga: 0 0 1px # 000; -webkit-box-skugga: 0 0 1px # 000;

Här är en beskrivning av de CSS-egenskaper vi använde (och varför vi använde dem):

positioner: relativ - Vår img taggar kommer att placeras helt inne i vår bildmask
höjd, bredd - Tidigare bestämde vi vår bildmaskens dimensioner. Det är här vi placerar dessa storlekar.
flyta till vänster - Flyter våra bilder så att de visas i ett galleriformat.
overflow: hidden - Som beräknat tidigare kommer våra miniatyrbilder att vara 300x400px. Vi visar dock bara en del (180x240px) av dem. Den här egenskapen fungerar som mask och döljer den del av våra miniatyrbilder som sträcker sig utanför dimensionerna 180x240.
marginal - Rym ut våra bilder
gräns, box-shadow - Detta ger oss en dubbelgräns (i stödjande webbläsare). De gräns egendom ger oss en tjock, vitvit kant runt bilden medan box-shadow ger oss en tunn svart kant runt vår tjocka, vitvit gräns.

Steg 9: CSS-dimensionering Miniatyrer

Ställ in våra miniatyrstorlekar enligt de mått vi beräknat i steg 5.

 .mask img höjd: 300px; bredd: 400px;

Steg 10: CSS-centrerar miniatyrerna

Just nu är våra miniatyrer placerade relativt (från övre vänstra hörnet).

Vi vill att vår miniatyrbild ska centreras horisontellt och vertikalt i masken.

För att uppnå detta använder vi följande CSS-regler:

 .mask img position: absolute; margin-top: -150px; / * halva höjden * / margin-vänster: -200px; / * halva bredden * / topp: 50%; vänster: 50%;

Här är en beskrivning av vad vi gjorde:

position: absolute - Detta placerar miniatyrbilden absolut i bildmask
marginal - Vi ställer in negativa marginaler som exakt är halva höjden och bredden av bilden (300x400) och ställer sedan in våra positioneringsegenskaper topp och vänster som drar elementen tillbaka till perfekt centrum.

Steg 11: CSS-miniatyrrotation

Vi kommer att använda CSS3-fastigheten omvandla att rotera våra element. Så, vår CSS kommer att inkludera alla webbläsare prefix

 .mask img -webkit-transform: rotera (15deg); -moz-transform: Rotera (15deg); -o-transform: rotate (15deg); -MS-transform: Rotera (15deg); transform: Rotera (15deg);

CSS här är ganska enkelt. Vi placerar bara vår vridningsvinkel inom parentes följt av "deg".

I det här exemplet använde vi 15 som rotationsvärdet, men du kan lägga ett annat värde där. Eftersom vi har beräknat storlekarna på vår mask och miniatyr på rätt sätt har vi plats för full 360 ° rotation! Ett positivt heltal roterar bilden till höger, ett negativt heltal roterar bilden till vänster.

Steg 12: CSS Image Hover Effect

Som en tillägg kommer vi att lägga till en enkel rad CSS som ändrar gränsen färgen när användaren svänger över och bild.

 .mask: sväva border-color: #ddd;

Steg 13: jQuery Ändrar rotationsvärde dynamiskt

Som en liten bonus kommer vi att tillåta användaren att ange ett värde i vår inmatningslåda som ändrar CSS-rotationsvinkeln. Så först, låt oss lägga till jQuery i slutet av vår sida strax innan stängningen kropp tagga med en länk till vårt anpassade skript:

Steg 14: jQuery Document Ready

Låt oss nu konfigurera jQuery när dokumentet är klart:

 jQuery (dokument) .ready (funktion ($) // kod här);

Steg 15: jQuery Initial Function

Vi skapar en funktion när som helst vår "uppdatering" -knapp blir klickad.

 $ ('knappen'). klicka (funktion () // kod här);

Steg 16: jQuery Lagrar aktuellt rotationsvärde

Vi vill lagra CSS-numeriskt värde för aktuell vridningsvinkel i en variabel.

 var rotation_angle_value = $ ('# rotation_amount') .val ();

Den här koden hittar rotation_amount id (som vi tilldelade till inmatning) och får sitt nuvarande värde. Om du kommer ihåg, ställer vi in initialen värde attribut till lika 15 (samma som i vår CSS-kod för rotationsvinkeln).

Steg 17: jQuery Använda isNaN () Funktion

Vi vill göra användarens inmatningsvärde vår nya rotationsvinkel. Vi vill emellertid se till att användaren inte av misstag anger ett icke-numeriskt värde. Det är där isNaN () javascript-funktionen kommer in. isNaN () står för "är inte ett tal". Den här funktionen gör exakt vad dess namn betyder: det kontrollerar om det värde du skickar till det "är inte ett nummer".

Så vi kommer att använda isNaN () funktionen och skicka till vårt vridningsvinkelvärde (som angivits av användaren). Om det inte är ett nummer kommer vi att visa vårt felmeddelande.

 // kontrollera om användarens inmatningsvärde är ett tal eller inte om (isNaN (rotation_angle_value)) // inte ett tal $ ('# error_message'). show (); // resten av koden här

Steg 18: jQuery Uppdaterar ny rotationsvinkel

Om användarens nyinmatade värde inte är ett tal har vi visat ett felmeddelande. Nu ska vi använda en annan uttalande för när de ha angav ett numeriskt värde. Först gömmer vi felmeddelandet.

 annars $ ('# error_message'). hide ();

Eftersom rotationsvinkeln lagras flera gånger i vår CSS (på grund av de olika webbläsarens prefix) måste vi uppdatera alla dessa värden med jQuery. Så, vad vi ska göra är att lagra syntaxen för CSS-värdet i en variabel (med det nya vinkelvärdet). I huvudsak skriver vi rotate (15deg) och ersätta värdet av '15' med det värde som användarens inmatning.

 var rotation_angle = 'rotera (' + rotation_angle_value + 'deg)';

Då skapar vi ett CSS-objekt med relationella värden. Vi definierar var och en av våra CSS-egenskaper (webbläsarens prefix för transformation), sedan sätter du in värdet som den variabel vi just definierat.

 var updated_css = '-webkit-transform': rotation_angle, '-moz-transform': rotation_angle, '-o-transform': rotation_angle, '-ms-transform': rotation_angle, 'transform': rotation_angle,

Nu passerar vi bara den variabeln som lagrar våra CSS-egenskaper och värden till jQuery för att uppdatera vår CSS!

 $ ('. mask img'). css (updated_css);

Steg 19: jQuery Final jQuery-kod

Så här ser alla våra jQuery ut:

 jQuery (dokument) .ready (funktion ($) $ ('knapp'). klicka (funktion () // få rotationsvinkelvärdet var rotation_angle_value = $ ('# rotation_amount') .val (); om (isNaN (rotation_angle_value)) // är inte ett tal $ ('# error_message'). visa (); else // är ett tal $ ('# error_message'). hide (); // lagra syntax för CSS-värde med det nya rotationsvinkelvärdet var rotation_angle = 'rotera (' + rotation_angle_value + 'deg)'; // lagra CSS-egenskaper och värden var updated_css = '-webkit-transform': rotation_angle, '-moz-transform': rotation_angle -o-transform ': rotation_angle,' -ms-transform ': rotation_angle,' transform ': rotation_angle, // uppdatera vår CSS $ ('. mask img '). css (updated_css);););

Slutsats

Jag hoppas att du har lärt dig något, framförallt som förbinder dig med icke-flexibla mönster i Photoshop, undviks ofta genom att använda CSS3-tekniker direkt i webbläsaren. Tack för att du följer med!

Webbdesign