Share
Het is tijd voor wat meer CSS3 versus Photoshop, en bij deze gelegenheid gaan we ingaan op transformaties. Het veranderen van de vorm van een object is een groot deel van de toolset van elke grafische editor. Tegenwoordig kunnen we met CSS3 de vorm van een element roteren, schalen en scheeftrekken zonder Photoshop nodig te hebben. Laten we het proberen!
Notitie: Alle onderstaande voorbeelden zijn getest op Mozilla Firefox, Safari en Chrome. Als je iets vergelijkbaars wilt in IE of een andere browser, laat dan een reactie achter en ik help je graag verder.
In deze zelfstudie gebruiken we achtergronden voor kleurovergangen, vakschaduwen en meerdere afbeeldingen, evenals overgangseffecten en dekkings- en transparantie-stijlen, onderwerpen die in de eerste drie handleidingen van deze serie worden besproken:
Een element roteren is een van de meer elementaire functies van een grafische editor. Het rotatie-effect gebruikt een radiale coördinatenwaarde met hoeken van 0 tot 180 (zowel positief als negatief). Een positieve hoek wordt een rotatie met de klok mee en een negatieve hoek betekent een rotatie tegen de klok in.
In het verleden was het meestal erg ingewikkeld om een element in HTML te draaien, nu met CSS3 is alles heel eenvoudig:
Dit zijn de syntaxis van een rotatie-transformatie:
transformeren: roteren (
Stel nu een aantal verschillende hoekrotaties in voor HTML-secties:
/ * Transforms * / / * Roteer 15 graden * / .rotate15 -moz-transform: roteer (15deg); -webkit-transform: roteer (15deg); / * Roteer 45 graden * / .rotate45 -moz-transform: roteer (45deg); -webkit-transform: roteren (45deg); / * Roteren -30 graden * / .rotate-30 -moz-transform: rotate (-30deg); -webkit-transform: roteren (-30deg); / * 180 graden draaien (omgekeerde tekst) * / .rotate180 -moz-transform: roteren (180 graden); -webkit-transform: roteren (180 graden); / * 270 graden draaien (verticale tekst) * / .rotate270 -moz-transform: roteren (270 graden); -webkit-transform: roteren (270 graden);
Zoals je ziet, is de manier waarop we transformaties bepalen precies hetzelfde als in Photoshop.
Een andere basistransformatieoptie die u bij elke grafische editor kunt krijgen, is Schalen. Schalen is vrij eenvoudig, het vergroot of verkleint de breedte en hoogte van elk element of groep elementen.
Met CSS3 kunt u elementen op dezelfde manier schalen als in Photoshop, de syntaxis die langs beide assen moet worden geschaald:
transformeren: schaal (
transformeren: scalex (
transformeren: scaley (
Laten we een aantal voorbeelden bekijken:
/ * Schaal 50% * / .scale50 -moz-transform: schaal (.50); -webkit-transform: schaal (0,50); / * Schaal 120% * / .scale120 -moz-transform: schaal (1.2); -webkit-transformatie: schaal (1,2); / * Schaal van 25% tot 75% op: hover * / .scale25-75 -moz-transform: scale (.25); -webkit-transform: schaal (0,25); -webkit-overgang: alle 1s gemak-in-uit; -moz-overgang: alle 1s gemak-in-uit; .scale25-75: hover -moz-transform: scale (.75); -webkit-transform: schaal (0,75); / * Schaal 50% breedte * / .scale50x -moz-transform: scalex (.50); -webkit-transform: scaleX (0,50); / * Schaal 50% hoogte * / .scale50y -moz-transform: scaley (.50); -webkit-transform: scaley (0,50);
Zie het nu draaien:
We gaan verder met een andere, zeer eenvoudige maar krachtige transformatie: skew. Door een hoek te veranderen, kunt u de parallelle lijnen van een vorm verplaatsen, waardoor een perspectief illusie ontstaat die als een 3D-effect kan worden gebruikt.
Met CSS3 is het mogelijk om een vorm te scheeftrekken net als in Photoshop, laten we enkele voorbeelden bekijken:
/ * Skew * / / * Skew 30 graden X op zweeftekst * / .skew30x -webkit-transition: alle 1s gemak in-uit; -moz-overgang: alle 1s gemak-in-uit; .skew30x: hover -moz-transform: skewx (30deg); -webkit-transform: skewx (30deg); / * Scheef 15 graden X * / .skew15x -moz-transform: skewx (15deg); -webkit-transformatie: skewx (15deg); / * Skew -15 graden X * / .skew-15x -moz-transform: skewx (-15deg); -webkit-transform: skewx (-15deg); / * Scheef 25 graden Y * / .skew25y -moz-transform: skewy (25deg); -webkit-transform: skewy (25deg); / * Skew -25 graden Y * / .skew-25y -moz-transform: skewy (-25deg); -webkit-transform: skewy (-25deg);
Laten we transformatiestijlen combineren om een aantal radicale effecten te creëren:
/ * Combinatie van Transforms * /. Getransformeerde -moz-transform: roteer (10 graden) schaal (1.3) skewy (15deg) skewx (-30deg); -webkit-transform: roteer (10deg) schaal (1.3) skewy (15deg) skewx (-30deg;
Hieronder enkele leuke voorbeelden van wat kan worden bereikt met behulp van transformaties. We beginnen met mijn Photoshop-weergaven van de ontwerpen, daarna zullen we zien of we hetzelfde resultaat kunnen behalen met CSS3 (je kunt de PSD-bron downloaden in de zelfstudiebestanden).
Stel eerst een aantal algemene CSS in:
/ * Reset * / html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td , img margin: 0; opvulling: 0; border: 0px; header, section, footer, aside, nav, article, figure display: block; / * Einde van Reset * / / * Stel een aantal basisstijlen in * / body font-family: Arial, Helvetica, sans-serif; color: # 333; html height: 100%; / * Om een volledige CSS3-verloop toe te voegen, moet je deze hoogte instellen op 100% * / .wrapper margin: 0px auto; Breedte: 960; opvulling: 60px 0px 60px 0px; .left text-align: left; .recht text-align: right; .center text-align: center; / * achtergrond van het lichaam * / body height: 100% ; / * Om een volledige CSS3-verloop toe te voegen, moet je deze hoogte instellen op 100% * / herhalen op de achtergrond: niet herhalen; achtergrondafbeelding: -moz-lineaire gradiënt (boven, # 0096f5, # 00416a); achtergrondafbeelding: -webkit-gradiënt (lineair, 0% 0%, 0% 100%, van (# 0096f5), tot (# 00416a), kleurstop (1, # FFF)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, startColorstr = # 0096f5, endColorstr = # 00416a); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (GradientType = 0, startColorstr = # 0096f5, endColorstr = # 00416a)"; / * Om te voorkomen dat er een lege streep onderaan staat, zijn er een paar fixes * / / * background-attachment: fixed; * / / * Werkt goed, behalve op IE * / background-color: # 00416a; / * De achtergrond ziet er goed uit wanneer je scrollt, terwijl je de onderste kleur helemaal over de pagina toevoegt * / / * een standaardstijl voor een kolom * / .row width: 50%; float: left; margin-bottom: 10px; Hoogte: 340px; border-bottom: 1px stippellijn #FFF;
In het eerste effect hebben we een fan van drie divs en een heading-tag. De truc hier is om de eigenschap z-index te gebruiken om de inhoud correct in te delen.
De HTML-structuur:
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimus veniam, quis nostrud exercise ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Stijl nu de divs en de kop:
/ * Hoofdvak * / .box width: 190px; Hoogte: 190px; background-color: RGBA (255255255, 0,85); / * Afgeronde hoeken * / -moz-border-radius: 10px; -webkit-border-radius: 10px; grensradius: 10px; / * Weg met Bleed * / -moz-background-clip: padding; -webkit-achtergrond-clip: padding-box; achtergrond-clip: padding-box; / * Stel de positie * / positie: relatief in; left: 0px; top: 0px; / * Laat het zien bovenaan * / z-index: 3; / * Een eenvoudige alineastijl * / .box p color: # 02263D; padding: 10px; font-size: 11px; line-height: 140%; / * Toon het ook bovenaan * / z-index: 3; / * Eerste doorschijnende laag * / .box2 / * Stel de achtergrondkleur in met RGBA * / achtergrondkleur: rgba (255,255,255, .5); / * Stel de positie * / left in: 20px; top: -165px; / * Laat het een niveau achter het hoofdvak zien * / z-index: 2; / * Roteer Trabsform * / -moz-transform: roteer (15deg); -webkit-transform: roteer (15deg); / * Tweede doorschijnende laag * / .box3 / * Stel de achtergrondkleur in met RGBA * / achtergrondkleur: rgba (255,255,255, 0,25); / * Stel de positie * / links in: 30px; top: -325px; / * Laat het twee niveaus achter het hoofdvak zien * / z-index: 1; / * Roteer Trabsform * / -moz-transform: roteer (30 deg); -webkit-transform: roteer (30 deg); / * Verticale titel * / .title / * Tekststijlen * / kleur: #FFF; text-transform: in hoofdletters; font-size: 14px; / * Stel de positie * / positie: relatief in; left: -255px; top: -45px; / * Rotate Transform * / -moz-transform: roteer (-90deg); -webkit-transform: roteren (-90deg);
U kunt onafhankelijk alle elementen in een html-element roteren. Dit, in combinatie met overgangseffecten, kan een goede manier zijn om aandacht te schenken aan sommige delen van je ontwerp. Neem bijvoorbeeld de volgende HTML-mockup:
Draai nu de afbeelding en de containerdoos onder verschillende hoeken (met de klok mee en tegen de klok in) in de : hover pseudoklasse.
/ * Box Style * / .box4 / * Breedte en opvulling * / width: 220px; Hoogte: 220px; padding: 10px; / * Doorschijnende achtergrondkleur met RGBA * / achtergrondkleur: rgba (255,255,255, .85); / * Afgeronde hoeken * / -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; grensradius: 10px; / * Weg met Bleed * / -moz-background-clip: padding; -webkit-achtergrond-clip: padding-box; achtergrond-clip: padding-box; / * Overgangseffecten * / -webkit-overgang inschakelen: alle 1s gemak in-uit; -moz-overgang: alle 1s gemak-in-uit; overgang: alle 1s gemak-in-uit; / * Zet de stijlen van de afbeelding in de sectie * / .box4 img / * Een mooie rand * / rand: 1px vast #FFF; / * Een vakschaduw om een beetje diepe sensatie toe te voegen * / vakschaduw: 5px 5px 5px rgba (0,0,0,0.25); -moz-box-shadow: 5px 5px 5px rgba (0,0,0,0.25); -webkit-box-shadow: 5px 5px 5px rgba (0,0,0,0.25); / * Overgangseffecten * / -webkit-overgang inschakelen: alle 1s gemak in-uit; -moz-overgang: alle 1s gemak-in-uit; -o-overgang: alle 1s gemak in-uit; -ms-overgang: alle 1s gemak in-uit; overgang: alle 1s gemak-in-uit; / * Roteren op hover * / .box4: hover / * Rotate -15deg CCW * / -moz-transform: rotate (-15deg); -webkit-transform: roteren (-15deg);
Laten we de dingen een stap verder brengen. Met Skew Transforms kun je een soort 3D-diepte voor je secties. Laten we proberen een alternatieve manier te bouwen om een item uit een mediagalerij te tonen, met behulp van een titel, beschrijving en een HTML5-videotag!
Laten we beginnen met de HTML-mockup:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
Voorbeeldvideo
Sinds een
Stel eerst de achtergrond van de containersectie in. De volgende code genereert een glanzende helling die een soort "horizon" creëert om de volgende elementen te bespotten.
/ * Plaats de container * / .row2 / * Pas de grootte en positie aan * / width: 100%; hoogte: 650 pixels; float: left; padding-top: 10px; / * Je weet dat je de hele sectie kunt schalen * / -moz-transform: scale (.90); -webkit-transform: schaal (0,90); / * Een gradient-achtergrond * / achtergrond toepassen: -moz-linear-gradient (boven, rgba (0,105,175,0) 0%, rgba (0,105,175,0,85) 35%, rgba (0,80,130,0,95) 35%, rgba ( 0,80,130,0) 100%); achtergrond: -webkit-gradiënt (lineair, linkerbovenkant, linksonder, van (rgba (0,105,175,0)), kleurstop (0,35, rgba (0,105,175,0,85)), kleurstop (0,35, rgba (0,80,130) 0,95)) tot (rgba (0,80,130,0)));
Stel de algemene stijlen voor tekst in.
/ * Veel voorkomende stijlen (hier niets erg moeilijks) * / .top h2 font-size: 20px; color: # fff; text-transform: in hoofdletters; padding: 25px; .side p font-size: 20px; color: # fff; font-weight: normal; padding: 10px;
Stijl nu de voorste container, tags kunnen bijna alle CSS-stijlen die we kennen verwerken en gedragen zich als elk ander blokelement op HTML-niveau.
/ * Laten we de voorste container * / .front instellen / * Positie * / positie instellen: relatief; left: 220px; top: 132px; / * Afmetingen * / breedte: 355 px; Hoogte: 200px; background-color: # fff; / * Skew Y Transform * / -moz-transform: skewy (20deg); -webkit-transform: skewy (20deg);
Nu het zijgedeelte (kan de video-opdracht zijn of een inleidende tekst.
/ * Plaats de zijcontainer * / .side / * positie (naast de voorste container) * / positie: relatief; left: 575px; top: -45px; Breedte: 130 x; Hoogte: 200px; / * Stel een gradient-achtergrond * / background-image in: -moz-linear-gradient (links, # 000000, # 313131); achtergrondafbeelding: -webkit-gradiënt (lineair, 0% 0%, 100% 0%, van (# 000000), tot (# 313131), kleurstop (1, # 313131)); / * Skew it * / -moz-transform: skewy (-30deg); -webkit-transform: skewy (-30deg); / * In het geval dat de tekst groter is dan de container * / overloop: verborgen;
Laten we de titel stylen.
/ * De titel * / .top / * Stel de positie * / positie in: relative; left: 220px; top: -360px; width: 355px; hoogte: 75 pixels; / * Een gradient-achtergrond * / achtergrondafbeelding: -moz-linear-gradient (links, # 000000, # 313131); achtergrondafbeelding: -webkit-gradiënt (lineair, 0% 0%, 100% 0%, van (# 000000), tot (# 313131), kleurstop (1, # 313131)); / * Scheef het naar het voorste gedeelte * / -moz-transform: skewy (20deg); -webkit-transform: skewy (20deg);
Nu we de belangrijkste div's op hun juiste plaats hebben, voegen we een paar "vloerspiegelingen" (divs met een RGBA-gradiëntachtergrond) toe om deze sectie een meer glanzend effect te geven.
.frontreflectie / * Zet de positie net onder het voorste gedeelte * / positie: relative; top: -147px; left: 220px; width: 355px; Hoogte: 200px; / * Schud het om de perspectiefhoek te passen * / -moz-transform: skewy (20deg); -webkit-transform: skewy (20deg); / * Stel de verloopachtergrond in (met de onderste stopkleur transparant) * / achtergrond: -moz-linear-gradient (boven, rgba (182,182,182,1) 0%, rgba (182,182,182,0) 100%); achtergrond: -webkit-gradiënt (lineair, linker boven, links onder, van (rgba (182,182,182,1)), tot (rgba (182,182,182,0))); / * Zet de dekking op je gewenste * / dekking: 0.25; .sidereflection / * Zet de positie net onder de zijsectie * / positie: relative; left: 575px; top: -320px; Breedte: 130 x; Hoogte: 200px; / * Vergelijk de scheefstand * / -moz-transform: skewy (-30deg); -webkit-transform: skewy (-30deg); / * Stel de achtergrondverloop * / achtergrond in: -moz-linear-gradient (boven, rgba (73,73,73,1) 0%, rgba (73,73,73,0) 100%); achtergrond: -webkit-gradiënt (lineair, linker boven, links onder, van (rgba (10,10,10,1)), tot (rgba (10,10,10,0))); / * Zet de dekking * / dekking: 0.35;
Bekijk deze reeks voorbeelden die in een browser worden uitgevoerd:
Ga zelf aan de slag en zie wat u kunt maken met CSS3-transformatieopties. Bedankt voor het lezen!
Accentsconagua
