Share
Toți trebuiau să obținem un efect care să necesite o parte suplimentară de Divizii sau PNG-uri. Nu ar trebui să ne limităm la aceste tehnici vechi când vine o nouă eră. Această nouă eră include utilizarea CSS3. În tutorialul de astăzi, vă voi arăta unsprezece efecte care necesită mult timp și care pot fi realizate destul de ușor cu CSS3.
Sunt sigur că ați auzit de CSS în general. CSS3 nu este atât de diferit, în termeni de sintaxă; cu toate acestea, puterea CSS3 este mult mai mare. Așa cum veți vedea în aceste unsprezece tehnici, puteți avea mai multe fundaluri, puteți redimensiona dinamic acele fundaluri, raze de frontieră, umbre de text și multe altele!
Iată ce site-ul oficial al CSS3, css3.info, trebuie să spună despre CSS3:
CSS3 este noul copil din familia stilului. Oferă noi posibilități interesante de a crea un impact cu desenele, vă permite să utilizați foi de stil mai diverse pentru o varietate de ocazii și multe altele.
Iată cele 11 tehnici pe care le voi arăta cum să le recreezi cu CSS3. Vă voi arăta cum să le creați folosind CSS2 (sau JavaScript), apoi cu proprietățile CSS3. Rețineți - aceste efecte vor funcționa numai în browserele moderne care implementează aceste funcții CSS3. Opțiunea cea mai bună este să le vizualizați cu Safari 4.
Probabil preferatul meu de pe această listă, colțurile rotunjite oferă un dezvoltator cu atât de multe opțiuni. Puteți crea un buton de colț rotunjit în câteva secunde. Lucrul meu preferat este să stabiliți un background de gradient pentru a repeta de-a lungul axei x și apoi să aplicați colțuri rotunjite pentru a face un buton Web 2.0 foarte frumos.
Puteți simula colțurile rotunjite folosind patru divizii suplimentare sau prin utilizarea JavaScript. Cu toate acestea, un utilizator nu vede aceste colțuri netede dacă au JavaScript dezactivat, cred că este bine atâta timp cât site-ul funcționează în continuare așa cum ar trebui. Puteți citi această metodă dacă preferați să utilizați CSS pur în realizarea colțurilor rotunjite.
Metoda clasică utilizează jQuery împreună cu un plugin JavaScript numit Corners.
După cum puteți vedea, tot ce trebuie să faceți este să specificați trei proprietăți CSS3. În cele din urmă, va fi doar unul; trebuie să utilizați trei acum, deoarece browserele diferite utilizează nume diferite de proprietăți.
Vizualizați demonstrația.
Boxe umbrite vă oferă o unealtă foarte puternică. 99% din momentul în care desenez, mă găsesc folosind umbre pentru ceva. Încă o dată, voi folosi un plugin jQuery pentru a avea grijă de modul clasic, deoarece sincer, încercând să-mi dau seama că doar CSS este confuz. De ce ar trebui să-mi pierd timpul petrecând cu margini negative atunci când există deja ceva scris care face treaba pentru mine? Atâta timp cât design-ul meu arată bine atunci când oamenii au JavaScript dezactivat, eu sunt perfect de conținut folosind un plugin jQuery.
Folosesc pluginul dropShadow. Simplu și ce vroiam; deși aș prefera să utilizez doar CSS;).
Valorile pentru proprietățile de umbră ale cutiei sunt: colorare de estompare x-offset y-offset. Mult mai ușor decât importarea a două fișiere JavaScript și LOT mult mai ușor decât încurcăturile cu imagini de fundal și margini negative.
Vizualizați demonstrația.
Dacă ați citit vreodată un tutorial despre cum să faceți efectul de tip letterpress în Photoshop, veți ști că este folosit efectul de umbră a picăturilor. Este foarte simplu să creați text cu litere, urmați acest tutorial la Line25 de Chris Spooner.
Vulpea brună se scurge peste câinele leneș. Vulpea brună se scurge peste câinele leneș.
În loc să utilizez un plugin jQuery de data aceasta, am folosit doar câteva trucuri simple CSS pentru a poziționa absolut textul în spatele celeilalte copii de text. Singurul lucru rău în legătură cu faptul că nu utilizați CSS3 pentru această situație este că veți primi două copii ale textului dacă CSS este dezactivat.
Accentsconagua
Vulpea brună se scurge peste câinele leneș. Dacă intenționați să utilizați umbre de text care sunt neclară (a treia "opțiune" din proprietatea text-shadow), nu știu cum ați realiza acest lucru cu CSS pur și nici imagini.
Vizualizați demonstrația.
Am visat deja de mult timp, dar puteți afișa în final "fonturi fanteziste" pe web fără bazându-se pe JavaScript. Desigur, acest lucru cauzează unele probleme care permit distribuirea fonturilor plătite pe internet. Oricum, vă prezint cu @ font-face.
Vulpea brună se scurge peste câinele leneș. Am decis să folosesc Cufón pentru a înlocui textul. Nu voi explica cum să o folosesc pentru că Jeffrey are deja un screencast minunat.
Vulpea brună se scurge peste câinele leneș. Creăm o familie de fonturi cu @ font-face și apoi o folosim ca valoare pentru familia font-ului. Michael Owens a scris un articol aici despre o lună în urmă, ceea ce explică @ font-face destul de bine.
Vizualizați demonstrația.
Dacă ați vizitat reproiectarea site-ului Envato în ultima vreme, ați fi observat că există o mulțime de elemente transparente. Deși acest lucru este realizat cu PNG transparente, puteți obține un efect similar utilizând proprietatea de opacitate. Acum, proprietatea de opacitate a fost în jur de ceva timp, dar iubitul nostru IE are proprietăți proprii.
Cu CSS3, am eliminat doar două proprietăți care erau specifice IE, nu este așa de minunat?!
Vizualizați demonstrația.
Toată lumea știe ce înseamnă RGB (roșu, verde, albastru), dar ce reprezintă standul A? Este vorba despre alfa, care se referă la transparență.
În afară de colțurile rotunjite, RGBA este proprietatea mea cea mai utilizată CSS3. Uneori vreau doar să adaug câteva fundaluri de lumină albă / neagră la legăturile de navigare atunci când un utilizator trece peste ele. Este mult mai ușor decât crearea unei imagini noi pentru fiecare culoare; cu toate acestea, cu un pic PHP face lucrurile mult mai ușor.
Văzând cum acest lucru nu este un articol PHP, nu voi trece peste PHP. Doar salvați acest fișier ca rgba.php și când aveți nevoie de o anumită culoare RGBA, faceți "culoarea" fundalului ca adresă URL (rgba.php? R = R & g = G & b = B & a =.
Acum, aplicați asta la o div ...
Vizualizați demonstrația.
Proprietatea dimensiunea fundalului este un lucru uimitor pe care îl aveți pe centura de sculă atunci când creați un aspect lichid. Un exemplu de acest lucru ar putea fi atunci când aveți o imagine de fundal pentru un container care este pentru bara laterală. Modul clasic de a face acest lucru ar necesita ajustarea pentru ca imaginea să se repete de-a lungul axei y, dar cu CSS3 este ca și cum ați adăuga o altă proprietate de fundal.
Din păcate, această proprietate nu este implementată în Firefox (V3.5.2) în momentul acestei scrieri.
Vizualizați demonstrația.
Ah, fundaluri multiple. Acum, acest lucru oferă dezvoltatorilor un instrument foarte puternic. Mă pot gândi la atâtea lucruri care necesită mai multe diviziuni doar pentru a avea mai mult de un singur fundal. Cel mai obișnuit loc unde pot vedea că este util este într-o secțiune antet a site-ului, dar acesta este primul lucru pe care l-am gândit.
Metoda clasică este destul de evidentă, înfășurați div cu o altă div și așa mai departe pentru fiecare fundal de care aveți nevoie. Creează un cod minunat, nu-i așa??
Sintaxa este cu adevărat ușor de recunoscut pe aceasta. Tot ce faci pentru fundaluri multiple este să adăugați o virgulă între fiecare! Cu toate acestea, din nou, aceasta este o proprietate limitată și este numai în Safari.
Vizualizați demonstrația.
Aceasta este cea mai interesantă proprietate CSS3 pe care am venit-o. Nu este ceva ce vedeți foarte mult în designul web. Eu însumi am văzut doar coloane de ziar o dată sau de două ori; cu toate acestea, îmi place modul în care efectul arată când este făcut corect. În mod normal, ați separa conținutul în div și flotați acele div, dar am găsit un plugin jQuery care redă dinamic coloanele.
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui un magna tempor pretium. Quisque id enim. Tortor id proin. Curabitorul se află într-un loc în care se află quam pharetra imperdiet. Nulla diam ante, eu pellentesque, vestibulum non, adipiscing nca, eros. Vestibulum ante ipsum primis în faucibus orci luctus și ultrices posuere cubilia Curae; Duis un nunc. Donec nu dui un velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu eu mă uit la ureche. Clasa aptitudini taciti sociosqu ad tortor per conubia nostra, per inceptos himenaeos. În purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui un magna tempor pretium. Quisque id enim. Tortor id proin. Curabitorul se află într-un loc în care se află quam pharetra imperdiet. Nulla diam ante, eu pellentesque, vestibulum non, adipiscing nca, eros. Vestibulum ante ipsum primis în faucibus orci luctus și ultrices posuere cubilia Curae; Duis un nunc. Donec nu dui un velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu eu mă uit la ureche. Clasa aptitudini taciti sociosqu ad tortor per conubia nostra, per inceptos himenaeos. În purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.
Am adaugat o colmatare doar coloanelor, asa ca textul nu este distrus unul impotriva celuilalt.
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui un magna tempor pretium. Quisque id enim. Tortor id proin. Curabitorul se află într-un loc în care se află quam pharetra imperdiet. Nulla diam ante, eu pellentesque, vestibulum non, adipiscing nca, eros. Vestibulum ante ipsum primis în faucibus orci luctus și ultrices posuere cubilia Curae; Duis un nunc. Donec nu dui un velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu eu mă uit la ureche. Clasa aptitudini taciti sociosqu ad tortor per conubia nostra, per inceptos himenaeos. În purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui un magna tempor pretium. Quisque id enim. Tortor id proin. Curabitorul se află într-un loc în care se află quam pharetra imperdiet. Nulla diam ante, eu pellentesque, vestibulum non, adipiscing nca, eros. Vestibulum ante ipsum primis în faucibus orci luctus și ultrices posuere cubilia Curae; Duis un nunc. Donec nu dui un velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu eu mă uit la ureche. Clasa aptitudini taciti sociosqu ad tortor per conubia nostra, per inceptos himenaeos. În purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.
Există o mulțime de alte proprietăți ale coloanei CSS3 pe care le puteți aplica, dar în scopuri demonstrative am specificat doar numărul de coloane. Dacă doriți să aflați mai multe despre aceste alte proprietăți, consultați pagina cu mai multe coloane din CSS3.info.
Vizualizați demonstrația.
Nu aveam nici o idee despre proprietatea imaginii de la frontieră până când am făcut upgrade la Firefox 3.5 și m-am dus la site-ul lui Chris Spooner și am văzut că imaginile postului lui aveau granițe de imagine. Eu personal nu am nici un interes în această proprietate, dar asta nu mă va împiedica să explic cum să-l realizez.
În loc să petrecem timpul creând mai multe divs și repetând imaginea de fundal în jurul divului, am găsit un plugin jQuery care face munca pentru mine. Se numește borderImage și funcționează exact așa cum ar trebui.
După cum puteți vedea, proprietatea imaginii de frontieră este un pic ciudat. W3 explică cum se calculează MULT mai bine.
Vizualizați demonstrația.
Bine, cine nu-i place să vadă un element ușor alunecă spre stânga sau să se estompeze când stați peste ceva? Animațiile sunt minunate pentru a crește interfața cu utilizatorul, dar asigurați-vă că nu treceți peste bord! Singurele browsere care acceptă animațiile CSS3 sunt browserele bazate pe Webkit. Singura altă modalitate de afișare a animațiilor este utilizarea JavaScript. Voi folosi jQuery pentru că este biblioteca mea preferată JavaScript (dacă nu ați ghicit până acum).
Ambele fragmente de cod fac același lucru: glisați div 20 pixeli în jos pe parcursul a 300 ms. Rețineți că codul CSS3 funcționează numai în browserele Webkit!
Vizualizați demonstrația.
Acolo aveți: 11 tehnici CSS care vor deveni mult mai ușor cu CSS3 în viitorul (sperăm că aproape). Evident, va fi un timp înainte de a putea depinde 100% de aceste proprietăți în toate browserele.
Nu uitați să revizuiți aceste alte tutoriale Nettuts + care discută despre CSS3:
