Share
Este timpul pentru mai multe CSS3 vs. Photoshop, și cu această ocazie vom săpa în transformări. Schimbarea formei unui obiect este o parte importantă a setului de unelte al editorului grafic. Aceste zile, cu CSS3 putem roti, scala și înclina forma unui element fără a fi nevoie de Photoshop. Hai sa incercam!
Notă: Toate exemplele de mai jos au fost testate pe Mozilla Firefox, Safari și Chrome. Dacă doriți să obțineți ceva similar în IE sau în orice alt browser, lăsați un comentariu și vă voi ajuta cu plăcere.
În acest tutorial vom folosi Fundaluri Gradient, Shadows Box și Imagini Multiple Images, precum și efecte de tranziție și stiluri de Opacitate și Transparență, subiecte abordate în primele trei tutoriale din această serie:
Rotirea unui element este una din caracteristicile de baza ale oricarui editor grafic. Efectul de rotație utilizează o valoare a coordonatelor radiale cu unghiuri de la 0 la 180 (atât pozitive, cât și negative). Un unghi pozitiv devine o rotație în sensul acelor de ceasornic și un unghi negativ înseamnă o rotire în sens invers acelor de ceasornic.
În trecut, a fost de obicei foarte complicat să se rotească un element în HTML, acum cu CSS3 totul este foarte simplu:
Iată sintaxele unei transformări de rotație:
transforma: roti (
Acum setați o grămadă de rotații diferite de unghiuri pentru secțiunile HTML:
/ * Transformă * / / * Rotire 15 grade * / .rotate15 -moz-transform: rotire (15deg); -webkit-transform: rotiți (15deg); / * Rotire 45 grade * / .rotate45 -moz-transform: rotire (45deg); -webkit-transform: rotiți (45deg); / * Rotire -30 grade * / .rotate-30 -moz-transform: rotire (-30deg); -webkit-transform: rotire (-30deg); / * Rotire 180 de grade (Text inversat) * / .rotate180 -moz-transform: rotire (180deg); -webkit-transform: rotire (180deg); / * Rotire 270 grade (text vertical) * / .rotate270 -moz-transform: rotire (270deg); -webkit-transform: roti (270deg);
După cum puteți vedea, modul în care determinăm transformările este exact ca în Photoshop.
O altă opțiune de transformare de bază pe care o puteți obține cu orice editor grafic este Scala. Scalarea este destul de simplă, crește sau reduce lățimea și înălțimea oricărui element sau grup de elemente.
Cu ajutorul CSS3 puteți scala elemente aproape la fel ca în Photoshop, sintaxele care se scindează pe ambele axe sunt:
transforma: scala (
transforma: scalex (
transforma: scara (
Să vedem o grămadă de exemple:
/ * Scală 50% * / .scale50 -moz-transform: scară (.50); -webkit-transformare: scală (.50); / * Scară 120% * / .scale120 -moz-transform: scale (1.2); -webkit-transformare: scală (1.2); / * Scară de la 25% la 75% pe: hover * / .scale25-75 -moz-transform: scale (.25); -webkit-transformare: scara (.25); -webkit-transition: toate 1s ease-in-out; -moz-tranziție: toate 1s ușurință-în-out; .scale25-75: mutați -moz-transform: scale (.75); -webkit-transformare: scara (.75); / * Scală 50% lățime * / .scale50x -moz-transform: scalex (.50); -webkit-transformare: scalex (.50); / * Scară 50% înălțime * / .scale50y -moz-transform: scaley (.50); -webkit-transformare: scaley (.50);
Acum, vezi-l în desfășurare:
Trecerea la o altă transformare foarte fundamentală, dar puternică: Skew. Prin schimbarea unui unghi, puteți deplasa liniile paralele ale unei forme, creând o iluzie de perspectivă care poate fi folosită ca un efect 3D.
Cu CSS3 este posibil să înfruntați o formă la fel ca în Photoshop, să vedem câteva exemple:
/ * Skew * / / * Skew 30 de grade X pe hover * / .skew30x -webkit-tranziție: toate 1s ease-in-out; -moz-tranziție: toate 1s ușurință-în-out; .wsw30x: mutați -moz-transform: skewx (30deg); -webkit-transform: skewx (30deg); / * Skew 15 de grade X * / .skew15x -moz-transform: skewx (15deg); -webkit-transform: skewx (15deg); / * Skew -15 de grade X * / .skew-15x -moz-transform: skewx (-15deg); -webkit-transform: skewx (-15deg); / * Skew 25 de grade Y * / .skew25y -moz-transform: skewy (25deg); -webkit-transform: skewy (25deg); / * Skew -25 de grade Y * / .skew-25y -moz-transform: skewy (-25deg); -webkit-transform: skewy (-25deg);
Să încercăm să combinăm stilurile de transformare pentru a crea unele efecte radicale:
/ * Combinarea transformărilor * /. Transformată (-moz-transform: rotire (10deg) scară (1.3) skewy (15deg) skewx (-30deg); -webkit-transform: rotire (10deg) scară (1.3) skewy (15deg) skewx (-30deg;
Mai jos sunt câteva exemple amuzante despre ceea ce se poate obține folosind transformări. Vom începe cu imaginile din Photoshop ale desenelor, apoi vom vedea dacă putem obține același rezultat cu CSS3 (puteți descărca sursa PSD în fișierele tutorial).
În primul rând, înființați câteva CSS generale:
/ * Resetare * / html, corp, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, , img margine: 0; umplutura: 0; frontieră: 0px; antet, secțiune, subsol, în afară, nav, articol, cifră display: block; / * Sfârșitul Resetare * / / * Configurarea unor stiluri de bază * / corp font-family: Arial, Helvetica, sans-serif; Culoare: # 333; html înălțime: 100%; / * Pentru a adăuga un gradient CSS3 al întregii pagini, trebuie să setați această înălțime la 100% * / .wrapper margin: 0px auto; lățime: 960 x; padding: 60px 0px 60px 0px; .left text-align: left; .right text-align: right;. ; / * Pentru a adăuga un gradient CSS3 al întregii pagini, trebuie să setați această înălțime la 100% * / background-repeat: no-repeat; fundal-imagine: -moz-linear-gradient (top, # 0096f5, # 00416a); fundal-imagine: -webkit-gradient (liniar, 0% 0%, 0% 100%, de la (# 0096f5) la (# 00416a), stop color (1, # FFF)); filtru: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, startColorstr = # 0096f5, endColorstr = # 00416a); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (GradientType = 0, startColorstr = # 0096f5, endColorstr = # 00416a)"; / * Pentru a evita o bara mica in partea de jos, exista cateva fixe * / / * background-attachment: fix; * / / * Functioneaza ok, cu exceptia IE * / background-color: # 00416a; / * Fundalul va arăta frumos atunci când derulați, adăugând culoarea de jos pe toată pagina * / / * un stil de bază pentru o coloană * / .row width: 50%; plutește la stânga; margin-bottom: 10px; height: 340px; frontală de fund: 1px punctat #FFF;
În primul efect, avem un fan de trei divizii și un etichetă de titlu. Trucul aici este de a folosi proprietatea z-index pentru aranjarea corectă a conținutului.
Structura HTML:
Lorem Ipsum
Lorem ipsum dolor este așezat în amonte, în funcție de timpul de aderare, de la locul de muncă temporar la locul de muncă și de la alte persoane. Ut enim ad minim veniam, quis exerciții de muncă ultima lucrătoare aliquip ex a commodo consequat. Duis aute irure dolor în reputație în voluptate comandă esse cillum dolore eu fugiat nulla pariatur.
Acum stilul divs și titlul:
/ * Caseta principală * / .box width: 190px; height: 190px; background-color: RGBA (255,255,255, .85); / * Colțuri rotunjite * / -moz-border-radius: 10px; -webkit-border-radius: 10px; raza de graniță: 10 pixeli; / * Scapa de Bleed * / -moz-background-clip: padding; -webkit-background-clip: căptușeală; fundal-clip: padding-box; / * Setați poziția * / poziția: relativă; stânga: 0px; top: 0px; / * Afișați-o în partea de sus * / z-index: 3; / * Un stil de bază al paragrafului * / .box p color: # 02263D; padding: 10px; font-size: 11px; line-height: 140%; / * Arată-le și pe partea de sus * / z-index: 3; / * Primul strat translucid * / .box2 / * Setați culoarea de fundal cu RGBA * / background-color: rgba (255,255,255, .5); / * Setați poziția * / stânga: 20px; sus: -165px; / * Afișează-l cu un nivel în spatele casetei principale * / z-index: 2; / * Rotiți Trabsform * / -moz-transform: rotiți (15deg); -webkit-transform: rotiți (15deg); / * Al doilea strat translucid * / .box3 / * Setați culoarea de fundal cu RGBA * / background-color: rgba (255,255,255, .25); / * Setați poziția * / stânga: 30px; sus: -325px; / * Afișați-l cu două nivele în spatele casetei principale * / z-index: 1; / * Rotiți Trabsform * / -moz-transform: rotiți (30deg); -webkit-transform: rotire (30deg); / * Titlu vertical * / .title / * Text Styles * / color: #FFF; text-transform: majuscule; font-size: 14px; / * Setați poziția * / poziția: relativă; stânga: -255px; sus: -45px; / * Rotire Transformare * / -moz-transform: rotire (-90deg); -webkit-transform: rotire (-90deg);
Puteți roti în mod independent toate elementele dintr-un element html. Acest lucru, combinat cu efecte de tranziție, poate fi o modalitate excelentă de a adăuga accentul pe anumite domenii ale desenelor. Luați, de exemplu, următorul machet HTML:
Acum rotiți imaginea și cutia de containere în unghiuri diferite (în sensul acelor de ceasornic și în sens contrar acelor de ceasornic) în interiorul :planare pseudo-clasă.
/ * Box Style * / .box4 / * Lățime și umplutură * / lățime: 220px; height: 220px; padding: 10px; / * Culoarea de fundal translucidă cu RGBA * / culoarea de fundal: rgba (255,255,255, .85); / * Colțuri rotunjite * / -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; raza de graniță: 10 pixeli; / * Scapa de Bleed * / -moz-background-clip: padding; -webkit-background-clip: căptușeală; fundal-clip: padding-box; / * Activați efecte de tranziție * / -webkit-transition: toate 1s easy-in-out; -moz-tranziție: toate 1s ușurință-în-out; tranziție: toate 1s ușurință-în-out; / * Setați stilurile imaginii în interiorul secțiunii * / .box4 img / * O margine frumoasă * / margine: 1px solid #FFF; / * O umbră cutie pentru a adăuga un pic de senzație profundă * / box-shadow: 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); / * Activați efecte de tranziție * / -webkit-transition: toate 1s easy-in-out; -moz-tranziție: toate 1s ușurință-în-out; -o-tranziție: toate 1s ușurință-în-out; -ms-transition: toate 1s ușurință-out-out; tranziție: toate 1s ușurință-în-out; / * Rotire pe hover * / .box4: hover / * Rotire -15deg CCW * / -moz-transform: rotire (-15deg); -webkit-transform: rotire (-15deg);
Să trecem lucrurile cu un pas mai departe. Cu Transformări înclinate puteți avea un fel de adâncime 3D în secțiunile dvs. Să încercăm să construim un mod alternativ de a afișa un articol dintr-o galerie media, folosind un titlu, o descriere și o etichetă video HTML5!
Să începem cu machetul HTML:
Lorem ipsum dolor stați amet, consectetur adipisicing elit, sed do eiusmod.
Exemplu de video
Din moment ce a
Mai întâi, configurați fundalul secțiunii containerului. Următorul cod generează un gradient lucios care creează un fel de "orizont" pentru a momeia următoarele elemente.
/ * Setați containerul * / .row2 / * Reglați dimensiunea și poziția * / lățimea: 100%; înălțime: 650 de pixeli; plutește la stânga; padding-top: 10px; / * Știți că puteți scala întreaga secțiune * / -moz-transform: scară (.90); -webkit-transformare: scara (0.90); / * Aplica un fundal gradient * / fundal: -moz-linear-gradient (top, rgba (0,105,175,0) 0%, rgba (0,105,175,0,85) 35%, rgba (0,80,130,0,95) 0,80,130,0) 100%); fundal: -webkit-gradient (liniar, stânga sus, fund stânga, de la (rgba (0,105,175,0)), stop color (0,35, rgba (0,105,175,0,85) , 0,95)), la (rgba (0,80,130,0)));
Setați stilurile comune pentru text.
/ * Stiluri comune (Nimic foarte dificil aici) * / .top h2 font-size: 20px; Culoare: #fff; text-transform: majuscule; padding: 25px; . pside font-size: 20px; Culoare: #fff; font-weight: normal; padding: 10px;
Acum stilul containerului din față, etichetele pot gestiona aproape toate stilurile CSS pe care le cunoaștem și se comportă ca orice alt element de nivel de blocare HTML.
/ * Să setăm containerul frontal * / .front / * Setați poziția * / poziția: relativă; stânga: 220px; top: 132px; / * Dimensiuni * / lățime: 355px; height: 200px; culoare de fundal: #fff; / * Transversal Y-transversal * / -moz-transform: skewy (20deg); -webkit-transform: skewy (20deg);
Acum secțiunea laterală (poate fi scurta video sau un text introductiv.
/ * Setați containerul lateral * / .prior / * Poziție (lângă containerul din față) * / poziție: relativă; stânga: 575px; sus: -45px; lățime: 130 x; height: 200px; / * Setați un fundal gradient * / background-image: -moz-linear-gradient (stânga, # 000000, # 313131); fundal-imagine: -webkit-gradient (liniar, 0% 0%, 100% 0%, de la (# 000000) la (# 313131), stop color (1, # 313131); / * Skew it * / -moz-transform: skewy (-30deg); -webkit-transform: skewy (-30deg); / * Doar în cazul în care textul este mai mare decât containerul * / overflow: hidden;
Să stilizăm titlul.
/ * Titlul * / .top / * Setați poziția * / poziția: relativă; stânga: 220px; sus: -360px; lățime: 355px; înălțime: 75px; / * Un fundal gradient * / fundal-imagine: -moz-linear-gradient (stânga, # 000000, # 313131); fundal-imagine: -webkit-gradient (liniar, 0% 0%, 100% 0%, de la (# 000000) la (# 313131), stop color (1, # 313131); / * Skew-l pentru a se potrivi cu secțiunea frontală * / -moz-transform: skewy (20deg); -webkit-transform: skewy (20deg);
Acum, când avem principalele diviziuni în locul lor, vom adăuga câteva "reflecții de pardoseală" (divuri cu un background de gradient RGBA) doar pentru a da acestei secțiuni un efect mai lucios.
.frontreflecție / * Setați poziția chiar sub secțiunea frontală * / poziție: relativă; sus: -147px; stânga: 220px; lățime: 355px; height: 200px; / * Skew pentru a se potrivi cu unghiul de perspectivă * / -moz-transform: skewy (20deg); -webkit-transform: skewy (20deg); / * Setați fundalul gradientului (cu culoarea transparentă a fundului transparent) * / background: -moz-linear-gradient (top, rgba (182,182,182,1) 0%, rgba (182,182,182,0) 100%); fundal: -webkit-gradient (liniar, stânga sus, fundul stâng, de la (rgba (182,182,182,1)), la (rgba (182,182,182,0)); / * Setați opacitatea așa cum doriți * / opacitate: 0.25; .fiecareflecție / * Setați poziția chiar sub secțiunea laterală * / poziție: relativă; stânga: 575px; sus: -320px; lățime: 130 x; height: 200px; / * Se potrivește unghiul de înclinare * / -moz-transform: skewy (-30deg); -webkit-transform: skewy (-30deg); / * Stabilirea gradientului fundal * / background: -moz-linear-gradient (top, rgba (73,73,73,1) 0%, rgba (73,73,73,0) 100%); fundal: -webkit-gradient (liniar, stânga sus, fund stânga, de la (rgba (10,10,10,1)), la (rgba (10,10,10,0)); / * Setați opacitatea * / opacitatea: 0,35;
Consultați acest set de exemple care rulează într-un browser:
Faceți-vă un drum și vedeți ce puteți crea cu opțiunile de transformare CSS3. Vă mulțumim pentru lectură!
Accentsconagua
