Perfect draaien en maskeren van miniaturen met CSS3

Ooit een website gezien met miniaturen die enigszins zijn geroteerd? Het is een eenvoudig effect dat een laag van visuele persoonlijkheid toevoegt. Zeggen dat, als je niet het rotatie-effect met CSS bereikt, je te hard werkt! Leer hoe je het goed doet!

Opnieuw gepubliceerde zelfstudie

Om de paar weken bekijken we enkele van onze favoriete lezers uit de geschiedenis van de site. Deze tutorial werd voor het eerst gepubliceerd in augustus 2011.

Invoering

Afbeeldingsgalerijen met geroteerde miniaturen zijn enigszins zeldzaam, maar het is een eenvoudige truc om stijl aan uw webpagina toe te voegen. Als het echter niet goed wordt gedaan, kan het bereiken en handhaven van dit effect soms een groot probleem zijn!

Om dit effect goed te bereiken, kunnen uw eerste gedachten worden over het maken van geroteerde miniaturen in Photoshop. Dit kan echter op de lange termijn moeilijk zijn. De nadelen voor het maken van geroteerde miniaturen op deze manier zijn onder meer:

Hoekconsistentie: Als de afbeeldingen niet allemaal onder dezelfde hoek worden geroteerd, gaat de visuele consistentie van de pagina verloren. Dit houdt in dat een PSD van elke afzonderlijke miniatuurweergave op de juiste manier wordt geroteerd onder een consistente hoek. U kunt bijvoorbeeld uw PSD openen en realiseren dat u de rotatiehoek van uw miniaturen bent vergeten.
CMS Thumbnail Generation:Als u een CMS (zoals Wordpress) gebruikt, worden uw miniaturen waarschijnlijk automatisch gegenereerd. Met behulp van de hierboven beschreven PSD-methode moet u elke afzonderlijke miniatuur in uw CMS handmatig maken en uploaden. Als u al een bestaande site heeft maar het rotatie-effect op uw miniaturen wilt toepassen, moet u alle miniaturen opnieuw maken in Photoshop en ze vervolgens opnieuw uploaden!
Langetermijnbeheer: Stel dat u al uw miniaturen enigszins geroteerd hebt gemaakt, maar nu wilt u uw galerij opnieuw uitlijnen of opnieuw ontwerpen. Dit betekent dat je al je miniaturen opnieuw moet genereren. Als je je miniaturen in Photoshop hebt beheerd, betekent dit dat je elke afzonderlijke thumbnail opnieuw moet aanpassen en opnieuw moet opslaan. Ugh.

Zou het niet fijn zijn als je deze kleine rotatie kon uitvoeren met één regel code? Nou dat kan! Laten we leren hoe.

Stap 1: Ons doel begrijpen

Een kort overzicht van wat we proberen te bereiken onthult de volgende stappen:

Maak een afbeeldingsminiatuur in Photoshop (niet geroteerd)
Voer de miniatuur in met behulp van de img label
Maskeer het op de juiste manier met CSS (denk aan Photoshop-maskers)
Roteer de miniatuur in het masker met behulp van CSS3

Om ervoor te zorgen dat onze galerij gracieus wordt afgebroken, worden de stappen 1-3 uitgevoerd met behulp van CSS. Stap 4 (het rotatie-effect) wordt bereikt met CSS3.

Stap 2: De miniaturenafmetingen en rotatiehoeken worden groter

Voordat we onze miniaturen maken, moeten we bepalen hoe groot elke miniatuur op het scherm zal verschijnen.

Als onze miniaturen te klein zijn en we ze te veel van een hoek roteren, geven sommige hoeken ons een lege ruimte. Zoals dit:

Daarom kunnen we, om het maskergebied goed te vullen, concluderen dat hoe meer onze thumbnail wordt geroteerd, hoe groter deze zal moeten zijn. In wiskundige termen, als de rotatiehoek van de miniatuur toeneemt, moet ook de grootte van de miniatuur (en omgekeerd).

Onthoud deze sleutel: de miniatuurafbeelding is altijd groter dan het afbeeldingsmasker (miniatuurformaat> maskergrootte)

Een waarschuwing voor hen die afstoten door wiskunde

In stappen 3-6 wordt beschreven hoe u proportioneel op grootte berekenen voor het afbeeldingsmasker en de miniatuur kunt berekenen. Het is niet nodig om afbeeldingen te kunnen roteren met de CSS transformeren eigendom. Het is veeleer bedoeld om u te helpen begrijpen hoe u de dimensionering van uw elementen op de juiste manier kunt bepalen om een volledige rotatie van 360 ° mogelijk te maken. Dit zorgt ervoor dat je niet met lelijke lege hoeken achterblijft.

Stap 3: evenredig gelijk

Om te voorkomen dat lege ruimte in ons masker wordt getoond, moeten we bepalen EEN van de volgende:

Grootte van de daadwerkelijke miniatuur
Grootte van het afbeeldingsmasker (zichtbaar gedeelte van de miniatuur)

Omdat de miniatuur en het afbeeldingsmasker verhoudingsgewijs even groot zijn, kunnen we de grootte van de ander berekenen als we de grootte van de afbeelding instellen.

Stap 4: Afmetingen bepalen

In dit voorbeeld gaan we eerst de afbeeldingsmaskerafmetingen instellen. Door de grootte van ons afbeeldingsmasker in te stellen, kunnen we wat rekenwerk gebruiken om de grootte van de thumbnail te berekenen:

Bepaal de grootte van het afbeeldingsmasker: 180x240 pixels
Zoek de lengte van de diagonale kant
- Gebruik de stelling van Pythagoras (a² + b² = c² )
  - Onze eerste kant (a) is 180 px
  - Onze tweede zijde (b) is 240 px
  - Dus, 180² + 240² = c² (diagonale lengte)
  - 90.000 = c²
  - 300 = c (neem de vierkantswortel van elke kant)
- Onze diagonale lengte (c) is gelijk aan 300

De diagonale lengte is een belangrijk getal. Om de 360 ° rotatie van onze thumbnail volledig mogelijk te maken, moet de kortste zijde gelijk zijn aan de langste zijde van het beeldmasker. (Ook al heb je het misschien niet nodig, je kunt 360 ° roteren als je toekomstige wijzigingen in je rotatiehoek aanbrengt zonder je miniaturen aan te passen).

Stap 5: miniatuurafmetingen berekenen

Zoals je kunt zien, moet de kortste zijde van onze thumbnail gelijk zijn aan de langste zijde van ons masker. Als dat niet zo is, blijven we achter met lege ruimte. Let op: de grootte van de thumbnail is verhoudingsgewijs groter dan de afmeting van het afbeeldingsmasker.

Het berekenen van de grootte van de thumbnail zodat deze goed past, is eenvoudig als we de afmetingen van het afbeeldingsmasker kennen. We nemen simpelweg de grootste kant van het masker (de diagonaal) en laten deze gelijk zijn aan de kortste zijde van onze miniatuur.

De grootste zijde van het masker (300) staat gelijk aan de kortste zijde van de miniatuur (x)
Gebruik de proportionele relaties om de lengte van de thumbnail te vinden
- 180: 300 (maskershoogte: miniatuurhoogte)
- 240: y (lengte van het masker: lengte van de thumbnail)
Kruis vermenigvuldigen om op te lossen
- 180y = 72.000
y = 400 (lengte van de thumbnail)

We hebben nu ons masker en de thumbnail-afmetingen bepaald. We weten dat ons afbeeldingsmasker 180x240 px is, dan dat de afbeeldingsminiatuur binnen dat masker 300x400 px moet zijn voor 360 ° rotatie.

Een gelukkige opmerking: Omdat het afbeeldingsmasker en de miniatuurafmetingen verhoudingsgewijs gelijk zijn, zou deze wiskunde ook werken als we onze miniatuurafmetingen eerst instellen! We zouden dezelfde stellingen en proportionele relaties van Pythagoras gebruiken om de juiste maten te bepalen.

Stap 6: Eindelijk wat HTML

Nu we al onze afmetingen kennen, kunnen we onze geroteerde miniaturen opbouwen door te beginnen met enkele eenvoudige HTML.

    Geroteerde miniaturen met CSS3     Geroteerde miniaturen met CSS3
 Transformeer hoek:     Alleen getalwaarden

Deze eenvoudige HTML-opmaak voegt het volgende in:

- Hierdoor kan de gebruiker de rotatiehoek wijzigen. We hebben ook onze waarde attribuut gelijk aan hetzelfde bedrag dat we aanvankelijk in onze CSS zullen plaatsen (15 in dit geval).
- Dit foutbericht wordt aan het zicht onttrokken. Met behulp van jQuery laten we zien of de gebruiker iets invoert naast een getal in het invoervak.
- Dit zijn onze miniaturen die kunnen worden gekoppeld aan wat u maar wilt.
beiden opschonen - Wist onze drijvende miniaturen
class = "masker" - De klasse voor ons afbeeldingsmasker

Stap 7: CSS Basic Page Styling

Laten we wat basisstyling toepassen op onze pagina om het structuur en eenvoud te geven.

 body marge: 0; padding: 0; achtergrond: #eee; font-family: Geneva, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif;  #wrapper width: 840px; marge: 0 auto; achtergrond: # fff; border: 1px solid #ccc; padding: 25px; border-top: none;  #error_message color: red; Geen weergeven; font-size: .8em;

Merk op dat we onze verborgen hebben ERROR_MESSAGE standaard omdat we de zichtbaarheid later in jQuery wijzigen.

Voeg enkele CSS3-effecten toe

Laten we nog enkele details toevoegen om onze basisstyling te verbeteren

 #wrapper border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; vakschaduw: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc;

Nu hebben we onze inhoud gecentreerd met goede spatiëring en enkele CSS3-effecten voor verbeterde paginastijling.

Stap 8: CSS Styling Image Mask

Laten we het afbeeldingsmasker toepassen op onze miniaturen. In onze HTML verpakten we elke miniatuur in een ankertag en gaven die een klasse masker die we zullen gebruiken in onze CSS.

 .masker positie: relatief; Hoogte: 180px; width: 240px; float: left; overloop verborgen; margin: 15px; border: 5px solid # f6f6f6; vakschaduw: 0 0 1px # 000; -moz-box-shadow: 0 0 1px # 000; -webkit-vak-schaduw: 0 0 1px # 000;

Hier volgt een beschrijving van de CSS-eigenschappen die we hebben gebruikt (en waarom we ze hebben gebruikt):

position: relative - Onze img tags worden absoluut in ons afbeeldingsmasker gepositioneerd
hoogte, breedte - Eerder hebben we de afmetingen van ons afbeeldingsmasker bepaald. Dit is waar we die maten plaatsen.
float: left - Drijft onze afbeeldingen zodat ze in een galerijvorm verschijnen.
overloop verborgen - Zoals eerder berekend, zullen onze thumbnails 300x400 px zijn. We zullen echter slechts een deel (180x240px) van hen laten zien. Deze eigenschap fungeert als masker en verbergt het gedeelte van onze miniaturen dat zich buiten de 180x240-dimensies bevindt.
marge - Spreid onze afbeeldingen uit
grens, box-shadow - Dit geeft ons een dubbele grens (in ondersteunende browsers). De grens eigenschap geeft ons een dikke, gebroken witte rand rond het beeld, terwijl de box-shadow geeft ons een dunne, zwarte rand rond onze dikke, gebroken witte rand.

Stap 9: CSS Sizing De miniaturen

Stel onze miniaturen in op basis van de dimensies die we in stap 5 hebben berekend.

 .masker img height: 300px; width: 400px;

Stap 10: CSS Centering De miniaturen

Op dit moment zijn onze miniaturen relatief gepositioneerd (vanuit de linkerbovenhoek).

We willen dat onze miniatuur horizontaal en verticaal gecentreerd wordt in het masker.

Om dit te bereiken, gebruiken we de volgende CSS-regels:

 .masker img positie: absoluut; margin-top: -150px; / * de helft van de hoogte * / marge links: -200 px; / * halve breedte * / bovenkant: 50%; Links: 50%;

Hier is een beschrijving van wat we hebben gedaan:

positie: absolute - Hierdoor wordt de miniatuur absoluut in het afbeeldingsmasker geplaatst
marge - We stellen negatieve marges in die exact de helft van de hoogte en breedte van de afbeelding zijn (300 x 400) en stellen vervolgens onze positioneringseigenschappen in top en links die de elementen terug in het perfecte centrum trekken.

Stap 11: CSS Thumbnail Rotation

We zullen de CSS3-eigenschap gebruiken transformeren om onze elementen te roteren. Onze CSS bevat dus alle voorvoegsels van de browser

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

De CSS hier is vrij eenvoudig. We plaatsen gewoon onze rotatiehoek tussen haakjes gevolgd door "deg".

In dit voorbeeld hebben we 15 als de rotatiewaarde gebruikt, maar je kunt daar een andere waarde plaatsen. Omdat we de afmetingen van ons masker en de thumbnail goed hebben berekend, hebben we ruimte voor een volledige 360 ° -rotatie! Een positief geheel getal roteert het beeld naar rechts, een negatief geheel getal roteert het beeld naar links.

Stap 12: CSS Image Hover-effect

Als een extra effect zullen we een eenvoudige lijn CSS toevoegen die onze randkleur verandert wanneer de gebruiker zweeft en de afbeelding.

 .mask: hover border-color: #ddd;

Stap 13: jQuery Rotatiewaarde dynamisch wijzigen

Als een kleine bonus gaan we de gebruiker toestaan een waarde in te voeren in ons invoervak dat de CSS-rotatiehoek wijzigt. Dus laten we eerst jQuery toevoegen aan het einde van onze pagina vlak voor de afsluiting lichaam tag samen met een link naar ons aangepaste script:

Stap 14: jQuery Document gereed

Laten we nu jQuery instellen voor wanneer het document gereed is:

 jQuery (document) .ready (functie ($) // code hier);

Stap 15: jQuery-beginfunctie

We maken een functie voor wanneer op onze knop "update" geklikt wordt.

 $ ('knop'). klik (functie () // code hier);

Stap 16: jQuery Opslaan van de huidige rotatiewaarde

We willen de CSS-numerieke waarde voor de huidige rotatiehoek in een variabele opslaan.

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

Deze code vindt de rotation_amount id (die we hebben toegewezen aan de invoer) en krijgt de huidige waarde. Als je het onthoudt, hebben we de initiaal ingesteld waarde attribuut gelijk aan 15 (hetzelfde als in onze CSS-code voor de rotatiehoek).

Stap 17: jQuery De functie isNaN () gebruiken

We willen de invoerwaarde van de gebruiker onze nieuwe draaihoek maken. We willen er echter voor zorgen dat de gebruiker niet per ongeluk een niet-numerieke waarde invoert. Dat is waar de isNaN () javascript-functie komt binnen. isNaN () staat voor "is geen nummer". Deze functie doet precies wat de naam aangeeft: het controleert of de waarde die u eraan geeft "geen getal is".

Dus, we zullen de isNaN () functie en geef er onze rotatiehoekwaarde aan door (zoals ingevoerd door de gebruiker). Als dit geen getal is, wordt onze foutmelding weergegeven.

 // controleer om te zien of de invoerwaarde van de gebruiker een getal is of niet if (isNaN (rotation_angle_value)) // niet een getal $ ('# error_message'). show (); // rest van code hier

Stap 18: jQuery Nieuwe rotatiehoek bijwerken

Als de nieuw ingevoerde waarde van de gebruiker geen getal is, hebben we een foutbericht weergegeven. Nu zullen we een anders verklaring voor wanneer zij hebben een numerieke waarde ingevoerd. Eerst verbergen we de foutmelding.

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

Omdat de rotatiehoek meerdere keren wordt opgeslagen in onze CSS (vanwege de verschillende browser-voorvoegsels), moeten we ALLE van die waarden bijwerken met jQuery. Dus wat we zullen doen is de syntaxis van de CSS-waarde opslaan in een variabele (met de nieuwe hoekwaarde). We zijn in essentie aan het schrijven rotate (15deg) en het vervangen van de waarde van '15' door de waarde die door de gebruiker is ingevoerd.

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

Vervolgens maken we een CSS-object met relationele waarden. We definiëren elk van onze CSS-eigenschappen (de browser-voorvoegsels voor transformatie) en voegen de waarde toe als de variabele die we zojuist hebben gedefinieerd.

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

Nu geven we eenvoudig die variabele door die onze CSS-eigenschappen en -waarden opslaat in jQuery om onze CSS bij te werken!

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

Stap 19: jQuery Definitieve jQuery-code

Dit is wat al onze jQuery eruit ziet:

 jQuery (document) .ready (functie ($) $ ('knop'). klik (functie () // verkrijg de rotatiehoekwaarde var rotation_angle_value = $ ('# rotation_amount'). val (); if (isNaN (rotation_angle_value)) // is geen getal $ ('# error_message'). show (); else // is een getal $ ('# error_message'). hide (); // sla CSS-syntaxis op met de nieuwe rotatiehoekwaarde var rotation_angle = 'roteren (' + rotation_angle_value + 'deg)'; // sla CSS-eigenschappen en -waarden op var varens_css = '-webkit-transform': rotation_angle, '-moz-transform': rotation_angle, ' -o-transform ': rotation_angle,' -ms-transform ': rotation_angle,' transform ': rotation_angle, // update onze CSS $ ('. mask img '). css (updated_css);););

Conclusie

Ik hoop dat je iets hebt geleerd, vooral dat je je vastlegt aan niet-flexibele ontwerpen in Photoshop, vaak door CSS3-technieken rechtstreeks in de browser te gebruiken. Bedankt voor het volgende!

Web ontwerp