28 izvanrednih primjera CSS-a

Nevjerojatno je što se danas može učiniti sa CSS-om. Podrška za najnovija svojstva CSS3 snažna je u najnovijim verzijama svih glavnih preglednika - čak i Internet Explorera - i mogućnostima tipografije, animacije a interaktivnost nikada nije bila veća. No pronaći inspiraciju za web dizajn može biti nezgodno.

U osnovi tajna sjajne web stranice nije u pokazivanju s glatkim vizualima i whiz-bang značajkama, već je u stvaranju izvrsnog iskustva za korisnike kroz izgled i navigaciju koji ih vode tamo gdje žele ići brzo i bez napora. To je reklo, ako i to može izgledati lijepo, to je šlag na torti.



Ovdje navodimo 28 izvrsnih primjera CSS stranica koje će pružiti nalet inspiracije za web dizajn. CSS je također izvrstan za dodavanje pokreta na vaše web stranice - pogledajte naš vodič za Primjeri CSS animacije i kako ih ponovno stvoriti za neke upute.



01. Upišite uvjete

Type Terms djelomično je stvoren kao izgovor za eksperimentiranje s CSS animacijom

Type Terms djelomično je stvoren kao izgovor za eksperimentiranje s CSS animacijom

Type Terms animirani je varalica koji je stvorio tim iz Suprema, agencije za web dizajn u Manchesteru. Nakon istraživanja, otkrili su da se većina postojećih mrežnih informacija o tipografskoj terminologiji koristila jednostavnim, statičnim slikama. Tim je tražio razlog za eksperimentiranje sa SVG i CSS animacijom, a ovo je bila savršena prilika.



'Odlučio sam stvoriti nešto što je vizualno privlačnije, što će novim dizajnerima pomoći da u trenutku nauče sve ključne tipografske izraze', kaže dizajner Dan Heywood.

Tim naglašava važnost dizajnera koji dobro razumiju tipografiju. Za one koji prvi put uče pravila ili za iskusne dizajnere kojima je potrebno osvježavanje, ova je varalica poučna i užitak za istraživanje. Sadržaj je fokusiran, informacije su jasne, a animacije svilenkasto glatke. Pogledajte i impresionirajte svoje prijatelje dizajnere svojim rječnikom tipografije.

02. MIT tehnološki pregled

Tech Review koristi CSS kako bi stvorio čisti, švicarski osjećaj



Tech Review koristi CSS kako bi stvorio čisti, švicarski osjećaj

MIT Technology Review, 117 godina staru publikaciju koja pokriva tehnologiju na način koji svatko može razumjeti, početkom ovog ljeta ponovno je pokrenuo bostonski dizajnerski studio Upstatement. 'Mi smo super obožavatelji Tech Reviewa, pa kad nam se Erik Pelletier [potpredsjednik proizvoda] obratio da radimo na web mjestu, bili smo u nedoumici', kaže Mike Swartz, partner u tvrtki Upstatement.

Ovih je dana neobično vidjeti web stranicu publikacije koja nije toliko dizajnirana oko slika, pa osvježava kad prvi put prijeđete na čisti pregled, naizgled nadahnut švicarskim dizajnom tvrtke Tech Review. 'Zaista smo željeli uhvatiti duh i duh Tech Reviewa sustavom dizajna web stranice i stvoriti platno za kreativno korištenje njihovih umjetničkih direktora', kaže Swartz. 'Kreativni direktor Tito Bottitta i voditelj dizajna Nathan Hass dizajnirali su sustav koji treba prikazati izvrsnu umjetnost i biti užitak za čitanje.'

Umjesto da se koristi sistemska zadana verzija Helvetice koju danas svi znamo, stranica sadrži Neue Haas Grotesk, izvornu verziju Helvetice, koja zaista pokreće suvremeni osjećaj. Uparen s Millerovim tekstom za kopiranje tijela, tipografija se osjeća klasično, ali suvremeno. Korištenje slika zamišljeno je, namjerno i omogućuje da tipografija zasja.

03. BucketListly

Inspiracija za web dizajn: BucketListly

Bucketlistly omogućava putnicima i avanturistima da dijele svoje priče i potiču druge na vlastite avanture

BucketListly je zajednica koja želi pomoći korisnicima da otključaju postignuća u stvarnom životu, istovremeno nadahnjujući druge da učine isto. Izgrađena koristeći Ruby on Rails s HTML5, SCSS, CoffeeScript i jQuery, platforma omogućuje putnicima i avanturistima da dijele svoje priče sa svojim prijateljima na web mjestu, kao i njihovim povezanim društvenim mrežama.

Kada korisnik podijeli priču na BucketListly, platforma automatski prati što, kada i gdje je postigao taj životni cilj, dopuštajući im da zarade posebne značke i prikazuju sve te podatke u prekrasnoj vremenskoj traci i mapi.

04. 96 Slonovi

Inspiracija za web dizajn: 96 slonova

96 Slonovi nazvani su po broju slonova ubijenih svaki dan u Africi

Američki Viget Labs stvorio je internetsko iskustvo usmjereno na svjesnost kako bi zatražilo podršku misiji Društva za zaštitu divljih životinja da zaštiti afričke slonove. Njegova najnovija kampanja je 96 slonova, takozvana, jer toliko slonova svakodnevno ubijaju u Africi.

Obrazovni narativ ispričan je kroz niz poglavlja na jednoj stranici, od kojih svako detaljno opisuje vrlo stvarne komplikacije u tekućim naporima da se okonča ilegalni čin ubijanja slonova zbog kljova. Unatoč primarnom cilju vođenja prijava za peticiju, tim Viget je umjetno odradio balansiranje neposrednosti koju sveprisutni poziv na akciju predstavlja prema emocionalno uvjerljivijim sadržajima vođenim pričama.

najbolja vanjska zvučna kartica za glazbenu produkciju

Sprijeda i u sredini proganjajući je umjetnički smjer koji vas tjera da se zaustavite i suočite s emocionalnom misijom. Prekrasna fotografija od ruba do ruba i izgled poput časopisa uložili su napor da je odaberu kao izazov. Umjesto da počne sa radnom površinom, web lokacija je napravljena prvo za mobilne uređaje. To je omogućilo da se dizajnerske odluke namjerno razmotre za male zaslone, umjesto da djeluju kao razvodnjeni proxy na radnoj površini.

05. Spoji zapise

Inspiracija za web dizajn: Merge Records

S sastavima poput Arcade Fire, Superchunk i The Mountain Goats na popisu, Merge Records iz Durhama u Sjevernoj Karolini, potražili su lokalnog digitalnog partnera Nov izgraditi iskustvo e-trgovine svjetske klase kako bi odgovaralo kvaliteti svojih umjetnika.

Izgrađeno na NewfangledCMS-u, vlasničkom CMS-u temeljenom na PHP-u, s HTML5 i CSS3, web mjesto izvrsno reagira na različite veličine uređaja. Novi sustav sada je automatiziran kako bi se osiguralo da se imovinom naljepnice upravlja centralno i dostupno. Novopečeni glavni izvršni direktor Chris Butler kaže,

'Kad god se doda proizvod, moramo shvatiti kako to odgovara dijelu fizičkog inventara koji se nalazi u drugoj bazi podataka i kako obračunava dio digitalnog inventara koji se nalazi u drugom sustavu. Morali smo shvatiti tu logistiku. ' S brojnim različitim pozivima baze podataka na svakoj stranici, redoslijed prioriteta podataka bio je važan za ispravljanje.

06. Izaslanik

CSS prijelazi koriste se za pomoć u demonstracijama izaslanika

CSS prijelazi koriste se za pomoć u demonstracijama izaslanika

Izaslanik , proizvod koji se fokusira na registraciju posjetitelja u vašem uredu, nudi elegantno sučelje temeljeno na iPadu za prikupljanje imena, bilježenje potpisa i ispis znački posjetitelja na licu mjesta. Za web stranicu koja promovira aplikaciju, 'primarni cilj bio je omogućiti našim kupcima da vizualiziraju kako vlastiti posjetitelji mogu doživjeti izaslanika u njihovim uredima', objašnjava suosnivač i dizajner Vítor Lourenço. 'Odlučili smo da će interaktivni demo biti vizualno najzanimljiviji način da se to pokaže.'

Da bi se to postiglo, web lokacija prikazuje funkcionalnost aplikacije i stanja zaslona na vrhu makete iPada. Dok se krećete kroz web stranicu s jednom stranicom, države se ažuriraju u demonstraciji. CSS prijelazi koriste se kao pomoć u demonstraciji, poboljšavajući iskustvo bez da se priječe sadržaj.

'Proveli smo mnogo sati radeći na sitnim detaljima', dodaje suosnivač i inženjer Larry Gadea. 'Sviđa nam se način na koji se potpis posjetitelja crta kad se pomičete pokraj zaslona NDA ili kako se značka posjetitelja ispisuje na kraju tijeka.'

07. MoreSleep

MoreSleep , kreativna agencija iz Berlina, ima podebljano mjesto. 'Cilj nam je bio predstaviti tri projekta koja predstavljaju našu stručnost, umjesto da pokažemo sav posao koji smo do sada obavili', kaže tehnički direktor Torsten Bergler.

Velike vrijednosti veličine fonta, uredni efekti pomicanja i crvena boja, kontrastna shema boja ističu ovu web stranicu. 'Ono što je jedinstveno je prezentacija djela: vizualizacija procesa projekta, vođenje posjetitelja kroz njega i pričanje priče o poslu koji smo obavili', kaže voditelj umjetničkog vodstva Stefan Schuster.

CSS prijelazi olakšavaju navigaciju kroz stranice i sadržaj. Svojstva veličine pozadine koriste se za kontrolu skaliranja slika različitih veličina. Čak je i obrazac za prijavu na bilten oblikovan tako da odgovara čistom izgledu i osjećaju.

08. Zahvalni registar

Zahvalni registar omogućava parovima da stvore jedinstveni, personalizirani registar vjenčanja od bilo kakvih poklona s bilo kojeg mjesta na Internetu. Web mjesto kreirao je Drobiti + ljupko ; Jeff Schram i Michael Phillips iz njegovog frontend tima željeli su da CSS bude jednako lijep kao i dizajn. Trebalo im je vremena pažljivo planirajući svoju SCSS strukturu za ovu aplikaciju.

'U okruženju s više razvojnih programera ključno je da se kôd organizira, lako se može proći i temeljito komentirati', objašnjava Phillips. Naporan rad pokazuje se u estetici stranice s jakom tipografijom i velikim, moćnim slikama. Tim ih nije želio prikriti ni u jednom pogledu i riskirati da izgube svoj značaj.

'Stvorili smo responzivni sustav koji se klizi niz cijelu stranicu kako bi otkrio glavne opcije nav. To nam je omogućilo da se usredotočimo na prekrasne slike i korisnicima pružimo jedinstveno iskustvo reagiranja ', kaže Schram.

09. Život u mojim cipelama

Život u mojim cipelama snažna je kampanja usmjerena na više platformi
mladima koji izazivaju strah i nerazumijevanje koje okružuje HIV. Digitalna agencija sa sjedištem u Londonu Promet upoznat je s izradom web stranice koja bi privukla omladinsku publiku.

Font marke, Houshka Rounded Medium, implementiran je pomoću font-face kako bi web mjestu dao svježi izgled i dojam. Dekorativne slike i dramatični žuti naglasci pružaju primamljivu estetiku.

Stranica 'O nama' sadrži živahni paralaksni efekt prilagođen tabletima i pametnim telefonima. 'Napisali smo medijski upit za ove uređaje koji mijenja privitak u pozadini iz fiksnog u pomicanje i postavlja pojedinačne položaje u pozadini tako da slike stoje na pravom mjestu', objasnio je prometni tim.

10. Samo

Solo je sveobuhvatni alat za upravljanje projektima usmjeren prema uporabi od strane slobodnih profesionalaca. Isplativa i jednostavna za upotrebu, aplikacija kombinira izvrsnu funkcionalnost, iskoristivost i lijep dizajn.

Web stranica koja promovira proizvod puna je CSS3 fantastičnosti. 'Odlučio sam koristiti HTML5 i CSS3 od samog početka, udovoljavajući samo modernim web preglednicima', objašnjava Jerome Iveson , dizajner aplikacije. 'Samo tri posto posjetitelja naše stranice koristi Internet Explorer. Budući da se čini da ga naše ciljno tržište ne koristi, činilo se da nema puno razloga da ga Solo podrži. '

Ova CSS pravila vidjet ćete na djelu tijekom ovog dizajna, što upravljanje projektima čini razigranijim uz mnoštvo šarenih sjena CSS okvira. Fontovi poput Clarendon i Bryant pružaju lijepu ravnotežu sofisticiranosti i zabave.

Promjena veličine web mjesta ili gledanje na mobilnom telefonu omogućuje vam prikaz izgleda koji se prilagođava različitim veličinama i rezolucijama zaslona. 'Jako mi se svidjelo zaglaviti se u onim stranama medijskih upita. To mi je vrlo zanimljivo iz perspektive dizajna ', kaže Iveson.

jedanaest. Obrazac slijedi funkciju

primjeri css-a

Stil je minimalan i koristi zlatni omjer kao i zanimljivu tipografiju

Obrazac slijedi funkciju (FFF) je lijepo dizajnirana izložba HTML5 i CSS eksperimenata korejskog programera Jongmin Kim koji radi kao interaktivni programer u Prvorođena multimedija u New Yorku.

Kim objašnjava da naziv njegove stranice odražava njegov cilj da uvijek slijedi 'minus dizajn, a ne plus dizajn' i imajući na umu da oblik slijedi funkciju. Kaže da je njegov stil minimalan i da koristi Zlatni omjer kao i zanimljiva tipografija. FFF je stvoren 'iz zabave', a Kimu su trebala tri tjedna da stvori, uključujući i odmor na njemu radeći.

12. Nježno luda

Inspiracija za web dizajn: The Gently Mad

Veliko zaglavlje i dobro dizajniran popis epizoda daju osobni pečat ovom dizajnu

Nježno luda je tematski agnostički podcast o kreatorima weba. Adam Clark , um koji stoji iza toga, odmaknuo se od tradicionalnog izgleda bloga kada ga je dizajnirao da stvori nešto s malo više utjecaja.

Veliko zaglavlje i dobro dizajniran popis epizoda dokazuju da ovaj dizajn ima osobni dodir. Clark je započeo s 'luđim' CSS3 prijelazima i blijedi, ali ih je uklonio, kaže nam. 'Osjetio sam da su dizajnerski odabiri koje sam donio (boja, izgled, tipografija) funkcionirali puno bolje samo da sam ostao na miru', kaže.

13. Amazee Labs

primjeri css-a

Kompetentno i s povjerenjem, ova web stranica je prekrasan primjer CSS-a

Izrada svježih web stranica i rješenja za zajednice, Amazee Labs na donijeti svoju marku u internetski svijet zasnovan na modernom open source okviru Drupal. S kompetencijom i samopouzdanjem, vlastita web stranica prekrasan je primjer CSS-a.

Već izrađujući web stranice za televizijske mreže, digitalne agencije, dobrotvorne organizacije i tvrtke, jasno je da je njihova web stranica impresionirala gotovo sve. Nismo se mogli više složiti.

corel painter osnovno vs corel painter

14. A&W

CSS transformacije rotacije koriste se u tekstu zaglavlja, što daje web mjestu A&W zabavan osjećaj u ispisnom izborniku

CSS transformacije rotacije koriste se u tekstu zaglavlja, što daje web mjestu A&W zabavan osjećaj u ispisnom izborniku

Grupa na Cornett IMS želio web mjesto za A&W to je bilo više od logotipa, pljeskavica i piva od korijena.

'Naša ljubav prema A&W morala je puno učiniti sa uspomenama koje smo dijelili u restoranima u našim rodnim gradovima, pa smo željeli nadići jedinstvenost svake trgovine, povezujući novu generaciju obožavatelja s njihovim lokalnim A&W', objašnjava glavni kreativni direktor David Coomer na svrha web mjesta.

Korištenje @ font-face za posluživanje fontova Metroscript i Century Gothic stvara prilagođeni, ugodan sustav tipova. CSS transformacije rotacije koriste se u tekstu zaglavlja, što daje web mjestu zabavan osjećaj u izborniku ispisa.

25. Nolowene Nowak

primjeri css-a

Nolowene Nowak pokazuje svoje vještine s ovim zabavnim internetskim portfeljem

Web dizajner i ilustrator Nolowene Nowak stvorio je zabavni internetski portfelj - sjajan primjer CSS-a koji se koristi za briljantni učinak. Ako se pomaknete prema dolje i pogledate odjeljak vremenske trake, primijetit ćete da raspored upravljan CSS-om inteligentno određuje osnovna pravila za stvaranje modula koji se mijenja od vodoravnog do okomitog izgleda na manjim zaslonima.

Web mjesto ugodno je koristiti kao i stvoriti: 'Bilo je to zaista bogato iskustvo koje mi je dalo mogućnost da stvorim nešto jedinstveno što sam jednostavno bio ja', kaže programer Christophe Dumont . 'Posjetitelju smo željeli ponuditi isto iskustvo kao kad je bio dijete otkrivajući novu igračku.'

Tijekom razvoja Dumont se koristio Zurbovim Temelj : responzivni CSS okvir izgrađen sa Sassom. 'Njegova podrška zaista čini oživljeni dizajn', kaže.

16. Dizajn Caava

Web stranica privlači korisnike sa savjetima za pomicanje animacija i paralaksnih funkcija

Web stranica privlači korisnike sa savjetima za pomicanje animacija i paralaksnih funkcija

Dizajn studio Caava ima prekrasno novo mjesto. Korisnike privlače nagovještaji pomicanja animacija i paralaksnih funkcija, dok glavni fokus ostaje na portfelju. 'Pokušali smo pružiti svježe i jedinstveno linearno iskustvo, a da pritom ne tučemo ljude po glavi', objašnjava vlasnik Caave Cody Small.

Pomicanjem stranice, strelice koje povezuju različite odjeljke animiraju gornji i lijevi položaj, održavajući iskustvo kohezivnim. 'Budući da se događa puno animiranih raketa, trebalo je neko vrijeme da se osjeća prirodno i da podrži dizajn', kaže programer Brandon Lavigne.

Strelice su dosljedne tijekom cijelog dizajna, na primjer pri istraživanju radnog područja. Ako pažljivo pogledate, vidjet ćete da su stvoreni s CSS obrubima i transformacijama. Ovo je izuzetno uredno i korisno, jer projekti imaju različite sheme boja, a boje strelica mogu se lako mijenjati pomoću CSS svojstava kako bi se podudarale.

17. Fitbit

Inspiracija za web dizajn: Fitbit

Fitbitov dizajn web stranica je svijetao i živahan, sadrži ikone i šarene grafičke statistike

Fitbit izrađuje uređaje za praćenje aktivnosti i vage za bilježenje aktivnosti, nadgledanje sna i dokumentiranje vaše tjelesne težine i masti. Te se informacije bežično objavljuju na Fitbit-u, gdje korisnici mogu vidjeti grafikone, postaviti ciljeve i natjecati se te podijeliti svoj napredak s drugima. 'Naša misija je samo korištenje tehnologije kako bismo svijet učinili zdravijim!' primjećuje programer Biagio Azzarelli.

Dizajn web stranice je svijetao i živahan. Ikone i šarene statističke grafike pomažu oživjeti informativne isječke bez dosadnih korisnika. Dobro korištena mreža trebala bi olakšati pretvaranje mjesta u fluidni raspored u budućnosti.

Azzarelli kaže da je uživao u razvoju stranice temeljenoj na korisničkoj analitici. 'Kako naša baza korisnika nastavlja s prihvaćanjem preglednika A-razreda, u mogućnosti smo iskoristiti ugodne dijelove CSS3 s prihvatljivom degradacijom u IE7 i 8.'

18. Mammothbooth

primjeri css-a

Tim koji stoji iza MammothReach-a stvorio je ovaj cool fotokabin MammothBooth

Umjetnici iz Detroita iz MammothReach je želio stvoriti najhladniju fotokabinu koju je svijet vidio, a time i MammothBoth rođena je web stranica.

'Željeli smo web mjesto koje je fluidno, trenutno i zabavno', sjeća se dizajner / programer Nick Keebaugh, 'a upravo je takav naš štand. Sve u svemu, željeli smo potpuno prilagođeni osjećaj na cijeloj web lokaciji koji odražava tko smo kao tvrtka i što u osnovi čini naš proizvod. Web stranica je mrežno proširenje MammothBooth-a. '

MammothReach je koristio svojstvo rotiranja pretvorbe s velikom spiralnom rafalnom slikom koja je u stalnoj rotaciji. Zabavan sadržaj se uvlači dok posjećujete različite odjeljke web mjesta s animiranim svojstvima stila. Razigrani font Arvil Sans izvrsno se uklapa u estetiku i dostupan je kao font 'napišite cijenu' Izgubljeni tip Co-op .

19. Laboratorijski partneri

Primjeri CSS-a

Lab Partners predstavljaju svoj rad živopisnom i dekorativnom web stranicom

Umjetnički i dizajnerski studio Lab Partners, koji vode tim supruga i supruga Ryan Meis i Sarah Labieniec, pokrenuo je živopisnu i dekorativnu web stranicu koja je jedan od najboljih primjera CSS-a.

Pažnja prema detaljima probija se za svaku stranicu. Radni odjeljak sadrži kurirani raspored koji omogućuje da se portfelj osjeća posebno originalno. Sličice projekta imaju veliko područje lebdenja koje iskorištava svojstvo neprozirnosti jasnim razlikovanjem stanja lebdenja. Odjeljak Trgovina radi na košarici Big Cartel, ali čini se kao integrirani dio web stranice s prilagođenim CSS-om primijenjenim na elemente.

'Web se uistinu osjeća kao jedna od krajnjih kombinacija oblika i funkcionalnosti', primjećuje Meis. Dalje objašnjava da je bilo ugodno i izazovno pronaći ravnotežu između njih dvoje. 'Na kraju se ispostavilo da je svaki problem prilika za stvaranje rješenja na koje prvotno nisam mislio.'

dvadeset. Mozak za pizzu

Primjeri CSS-a: Pizza Brain

Pizza Brain u potpunosti reagira i sjajno izgleda na manjim izgledima

Primjeri CSS-a ne postaju puno bolji od ovog! Osnovao ga je Brian Dwyer, Pizza Brain prvi je muzej i restoran pizze na svijetu. Web stranica promovira priopćenja za javnost i blog koji opisuje napredak u pothvatu i značajke marke koje je dizajnirao Michael Almquist.

Fontovi Pacifico Regular i Bebas Neue upareni su s toplom paletom boja nalik pizzi koja stvara prijateljsku estetiku koja se lako čita, a istovremeno je uzbudljiva i zabavna. 'Ta narančasta, prekrasna je i stvarno postavlja pozornicu za sadržaj', kaže programer Arjun Mehta.

Raznoliki zaobljeni kutovi i efekti neprozirnosti zaokružuju ovaj čisti izgled. 'Imati svaki post u svom zasebnom odjeljku sa sadržajem zaobljenog pravokutnika zapravo je posuđivanje iz vizualnog jezika koji se nalazi na posjetnicama Pizza Braina', dodaje Mehta. Također u potpunosti reagira, web stranica izgleda sjajno na manjim izgledima.

Jedan od najboljih primjera CSS-a u akciji - i pripazite na web mjesto jer se očekuje više. 'Oduševljena sam kako bi web stranica mogla rasti, te se dodatno usavršavati i dograđivati ​​kako se ovaj nevjerojatni pothvat vremenom ostvari', kaže Mehta.

dvadeset i jedan. Poštarina

Primjeri CSS-a: poštarinski

Poštable pruža jednostavan način za hvatanje poštanskih adresa

Namijenjen prvenstveno posjetiteljima koji žele poslati pozivnice za vjenčanje i čestitke za odmor ili onima koji jednostavno žele mrežni adresar, Postable pruža jednostavan način za bilježenje poštanskih adresa.

'Postable ima nevjerojatno razigran izgled, posebno za web aplikaciju, a ja sam želio ostati vjeran tim dizajnom', kaže frontend programer, Kevin Kneife. Od prugastih rubova nadahnutih kovertama, do zabavnih tekstura pozadine do robusno zaobljenog Omnes Pro fonta, web mjesto za adresiranje trenutačno čini manje povlačenjem.

U cijelom se prostoru koriste zabavne i korisne ilustracije. Zaobljeni kutovi, vrpce i pametna stanja lebdenja održavaju angažman na mjestu zabavnim. To je jedan od najboljih primjera CSS transformacija koje smo vidjeli, a koriste se za ažuriranje vrijednosti zakretanja pozadinske slike, privlačeći korisnike uputama kako je web mjesto jednostavno koristiti.

kako poništiti odabir u photoshopu

Nakon stvaranja računa, dodavanje kontakta vrši se putem jednostavnog obrasca koji sadrži čiste CSS okvire za odabir koje je Kneife u potpunosti izradio. Otkriva: 'To je uključivalo maskiranje odabranih okvira na obrascima pomoću vanjskog div-a, dodavanje prozirnosti i upotrebu -webkit-izgleda. Rezultat je okvir koji izgleda dobro u svim preglednicima i graciozno se razgrađuje. '

22. Robby Leonardi

Primjeri CSS-a: Robby Leonardi

Web stranica sadrži živopisne ilustracije i stilove crtića

U kući dizajnera Robbyja Leonardija nalaze se živopisne ilustracije i stilovi crtića, unoseći radost u veselu osobnost. Kao što Leonardi kaže, 'Uvijek je dobro nasmijati ljude i mislim da će ovo web mjesto učiniti upravo to.'

To je jedan od sjajnih primjera CSS-a koji se koristi za stvaranje nevjerojatnih vizuala. Pozadinske slike su slojevite kako bi se stvorili uredni vodoravni efekti paralakse u području zaglavlja. Dolje na stranici, CSS rotacijske transformacije koriste se za pomicanje zupčanika sa strane područja gledanja. Komadi portfelja uokvireni su drvenim prozorima koji animirano lebde.

Drveni blokovi izrađeni su iz Leonardijevog prikaza 3D modela. Objašnjava: 'Kombinirao sam sve te prikaze u jednu sliku i promijenio CSS lijevo svojstvo kad god korisnik pomiče stranicu. Prilično je iznenađujuće da jednostavan CSS trik može proizvesti tako dobar učinak! '

2. 3. Libor Zezulka

Primjeri CSS-a: Libor Zezulka

Libor Zezulka čisti je i pametni osobni portfelj

Web stranica Libora Zezulke na jednoj stranici čist je i pametan osobni portfelj postavljen među gradijente koji se pojavljuju i tekst koji traži da se pročita, zahvaljujući pametnoj upotrebi CSS tekstnih sjena.

Vodeći dizajner i razvojni programer Martin Pospisil iz Madeo uživao raditi na web mjestu. '[Imali smo] slobodu da se igramo s dizajnom i tehnologijom', objašnjava on. To se vidi u faktoru zabave web mjesta. Dizajn je jednostavan, ali učinkovit, jer se dijelovi mogu jasno razlikovati. Pospisil računa da 'snaga leži u ikonama i kombinacijama boja.'

Još jedan jedinstveni dodir su skočni prozori lightboxa. Gumbi na ovom web mjestu odvojeni su kao djelovanje pomoću slike sjene ispod. Gumb za zatvaranje pomalo je odmaknut od okvira, pružajući sučelje jednostavno za upotrebu.

3. 4. Emporium pita

Web stranica Emporium PIes natjerat će vas da isprobate sve njih

Web stranica Emporium PIes natjerat će vas da isprobate sve njih

»The Web stranica Emporium Pies ima jedan posao: natjerati vas da pojedete više pite ', Kyle Turman, interaktivni direktor u Ljevački kolektiv tvrdi. A dečko, govori li istinu. Dobro osmišljeno web mjesto s odgovorima u pita i kafiću sa sjedištem u Dallasu učinit će vas gladnima. Zaista gladan.

'Operativni direktor Paul Wilkes snimio je zaista izvrsne snimke pita, a mi smo im dali što je više moguće prioriteta u hijerarhiji dizajna', nastavlja Turman. 'Smatrali smo da je važno pustiti pite da govore same za sebe, a ne ispuniti web mjesto s tonom nesretne kopije.'

Pogledajte efekte lebdenja na stranici Pies. Koristi CSS 3D transformacije u kombinaciji sa svojstvom vidljivosti pozadine na slikama pita kako bi otkrio ime i više informacija o desertu.

25. Budućnost dijeljenja automobila

Primjeri CSS-a: Budućnost dijeljenja automobila

UX olakšan ovim šarmantnim vodoravnim pomicanjem

Budućnost dijeljenja automobila, suradnja između Fond za suradnju i Hyperakt uz podršku Startup America Partnership , prepun je informacija o sve popularnijoj alternativi vlasništvu automobila. Dešifriranje razlika u međusobnom dijeljenju automobila između tvrtki i potrošača te neprofitnih organizacija olakšava ovo šarmantno vodoravno pomicanje.

'Od samog početka donesena je odluka da se ovaj komad gurne što dalje,' savjetuje Simon Corry, informacijski arhitekt u Hyperaktu. 'To je značilo da, dok smo pružali povratnu kompatibilnost za starije preglednike, gdje je to bilo moguće, naglasak je bio na testiranju ograničenja svojstava CSS3. Oduvijek sam bio ljubitelj video igara i s trenutnom razinom podrške preglednika za CSS3, mogao sam uživati ​​u toj razini animacije i inženjeringa kroz CSS.

'Ljepota CSS3 u svojoj je jednostavnosti, što ga čini savršenim jezikom za svakog kreativca', kaže Corry.

26. Život u Greenvilleu

Primjeri CSS-a: Greenville

Web stranica vas pozdravlja s fontom Kulturista

Život u Greenvilleu baca pogled na život i rad u Greenvilleu u Južnoj Karolini. 'Svi mi u CoWork volio je Greenville i želio je stvoriti web stranicu koja će ljudima pomoći da shvate zašto ', kaže vodeći programer Sean Gaffney.

Stranica vas pozdravlja s fontom Kulturista u veličini fonta koja privlači pažnju 53 px povrh cjelovite, responzivne herojske slike. Čisti dizajn dizajnira vas da budete angažirani i želite naučiti više s lako dostupnim sadržajem. Pomalo animirani logotip pri zadržavanju pokazivača također pruža određenu radost.

Tim je iskoristio kosturnu pločicu Skeleton kako bi pomogao u izgradnji stilova. 'Kostur pruža stvarno lijep osnovni skup širina za dizajniranje, pa se svelo samo na to da podesimo nekoliko stavki u rasporedu za svaku veličinu zaslona', kaže Gaffney.

27. Istinite riblje bajke

Primjeri CSS-a

True Fish Tales izgrađen je pomoću kombinacije CSS3 i JavaScript-a

Istinite riblje bajke stvarno vas prikvači. Igra na ideji da su ribari poznati po pričanju visokih priča okupljajući nevjerojatne 'istinite priče' o čudovištima koja vrebaju pod morem. Ono što ga razlikuje je njegova glatka i jednostavna interakcija, što otkrivanje sadržaja čini zabavnim i zabavnim iskustvom.

Infografiku je sastavio Brian Maier i Mark Shelton agencije Kentucky DBS> Interaktivni kao dio trajnih napora za dodavanje svježeg sadržaja United Marine web stranica.

Maier i Shelton koristili su kombinaciju CSS3 i JavaScript za izradu infografije. 'Mnoge animacije i grafike obrađuju se pomoću CSS3', objašnjava Lewis, 'ali na nekim su mjestima koristili JavaScript za prilagođavanje starijim preglednicima koji još ne podržavaju ovu tehnologiju.

kako očistiti sloj u

28. Stanica četiri

Primjeri CSS-a

Ove je godine Station Four pretrpio redizajn kako bi poboljšao svoju marku

Web agencija Stanica četiri je prošao postupak rebrandiranja i dizajnirao novu web stranicu kako bi poboljšao svoju osobnost i brand. 'Započeli smo osmišljavanje nove web stranice oko ideje da potencijalnim klijentima pokažemo, a ne da im kažemo što možemo učiniti', objašnjava kreativni direktor i suvlasnik Christophera Olberdinga na stanici Four.

Stoga nova početna stranica koristi veliki istaknuti radni natpis za prikaz najnovijeg djela Stanice četiri.

Stranica 'Stručnost' ima zanimljiv navigacijski dizajn: koristi slike krugova kao poveznice. Oni iskorištavaju svojstva radijusa obruba kako bi postigli izgled, a na njih primjenjuju i animacije.

Jesmo li propustili vaš omiljeni primjer CSS-a na djelu? Javite nam o tome u komentarima ispod!

Suradnici : Chris Cashdollar i Bogati Clark

Ove su recenzije izvorno objavljene u neto magazin , najprodavaniji svjetski časopis za web dizajnere i programere.