28 erinomaista esimerkkiä CSS: stä

On hämmästyttävää, mitä CSS: llä voidaan tehdä näinä päivinä. Uusimpien CSS3-ominaisuuksien tuki on vahvaa kaikkien tärkeimpien selainten - jopa Internet Explorerin - uusimmissa versioissa ja typografian, animaation mahdollisuuksissa ja vuorovaikutteisuus eivät ole koskaan olleet suurempia. Mutta web-suunnittelun inspiraation löytäminen voi olla hankalaa.

Ytimessä suuren verkkosivuston salaisuus ei ole esittely liukkaalla grafiikalla ja whiz-bang -ominaisuuksilla, vaan se, että se luo käyttäjille upean kokemuksen asettelun ja navigoinnin avulla, joka ohjaa heidät sinne, minne he haluavat mennä nopeasti ja vaivattomasti. Se sanoi, että jos se voi näyttää myös kauniilta, se on kakku.

Tässä luetellaan 28 upeaa esimerkkiä CSS-sivustoista, jotka tarjoavat inspiraation verkkosuunnittelusta. CSS on myös loistava tapa lisätä liikettä sivustoihisi - tutustu oppaaseen CSS-animaatioesimerkkejä ja kuinka luoda ne uudelleen joitain viitteitä varten.



01. Kirjoita ehdot

Tyyppitermit luotiin osittain tekosyynä kokeilla CSS-animaatioita

Tyyppitermit luotiin osittain tekosyynä kokeilla CSS-animaatioita

Type Terms on animoitu huijauslehti, jonka tiimi on luonut Manchesterin web-suunnittelutoimiston Supremo. Tutkimuksen jälkeen he havaitsivat, että useimmissa typografista terminologiaa koskevissa online-tiedoissa käytettiin yksinkertaisia, staattisia kuvia. Tiimi etsii syytä kokeilla SVG- ja CSS-animaatioita, ja tämä oli täydellinen tilaisuus.

'Päätin luoda jotain visuaalisesti kiinnostavampaa, mikä auttaisi uusia suunnittelijoita oppimaan kaikki tärkeimmät typografiset termit hetkessä', sanoo suunnittelija Dan Heywood.

Tiimi korostaa suunnittelijoiden tärkeyttä saada hyvä käsitys typografiasta. Niille, jotka oppivat sääntöjä ensimmäistä kertaa, tai kokeneille suunnittelijoille, jotka tarvitsevat päivitystä, tämä huijauslehti on sekä opettavainen että ilo tutkia. Sisältö on kohdennettua, tieto selkeää ja animaatiot silkkisen sileitä. Katso ja vaikuta suunnittelijaystäväsi typografian sanastossasi.

02. MIT Technology Review

Tech Review käyttää CSS: ää luomaan puhtaan, sveitsiläisen tunnelman

Tech Review käyttää CSS: ää luomaan puhtaan, sveitsiläisen tunnelman

MIT Technology Review, 117-vuotias julkaisu, joka kattaa tekniikan kenen tahansa ymmärtämällä tavalla, käynnisti aiemmin kesällä Boston Design Studio Upstatement. 'Olemme Tech Review -faneja, joten kun Erik Pelletier [tuotepäällikkö] käänsi meitä työskentelemään sivustolla, olimme psyykkisiä', kertoo Mike Swartz, Upstatementin kumppani.

Nykyään on epätavallista nähdä julkaisun verkkosivustoa, jota ei ole suunniteltu niin voimakkaasti kuvien ympärille, joten se on virkistävää, kun siirryt ensimmäistä kertaa Tech Review -sivuston puhtaaseen, näennäisesti sveitsiläiseen inspiraatioon. '' Halusimme todella tarttua Tech Reviewn henkeen ja sieluun sivuston suunnittelujärjestelmällä ja luoda kankaan heidän taidepäälliköilleen luovaan käyttöön '', Swartz sanoo. 'Luova johtaja Tito Bottitta ja suunnittelun johtaja Nathan Hass suunnittelivat järjestelmän, jonka on tarkoitus esitellä erinomaista taidetta ja olla ilo lukea.'

Sen sijaan, että käytämme Helvetican järjestelmän oletusversiota, jonka me kaikki tiedämme tänään, sivustossa on Neue Haas Grotesk, Helvetican alkuperäinen versio, joka todella ajaa modernia tunnelmaa. Yhdistettynä Miller-tekstiin vartalokopiota varten typografia tuntuu klassiselta mutta nykyaikaiselta. Kuvien käyttö on harkittua, tarkoituksellista ja antaa typografian loistaa.

03. ÄmpäriListly

Inspiraatio web-suunnitteluun: BucketListly

Bucketlistly antaa matkailijoille ja seikkailijoille mahdollisuuden jakaa tarinoitaan ja rohkaista muita kokemaan omat seikkailunsa

BucketListly on yhteisö, jonka tarkoituksena on auttaa käyttäjiä avaamaan saavutukset tosielämässä inspiroimalla muita tekemään samoin. Rakennettu käyttämällä Ruby on Rails -sovellusta HTML5: n, SCSS: n, CoffeeScriptin ja jQueryn avulla, alustalla on mahdollisuus antaa matkailijoille ja seikkailijoille jakaa tarinansa sivuston ystäviensä ja heidän yhteydessä olevien sosiaalisten verkostojensa kanssa.

Kun käyttäjä jakaa tarinan BucketListly-palvelussa, alusta seuraa automaattisesti, mitä, milloin ja missä he ovat saavuttaneet kyseisen elämäntavoitteen, antamalla heidän ansaita erityisiä merkkejä ja näyttää kaikki nämä tiedot kauniilla aikajanalla ja kartalla.

04. 96 norsua

Inspiraatio verkkosivujen suunnittelusta: 96 norsua

96 norsua on nimetty Afrikassa päivittäin tapettujen norsujen määrän mukaan

Yhdysvaltalainen Viget Labs on luonut tietoisuuskeskeisen verkkokokemuksen saadakseen tukea Wildlife Conservation Societyn tehtävälle suojella afrikkalaisia ​​norsuja. Sen viimeisin kampanja on 96 norsua, ns. Koska näin monta norsua tapetaan päivittäin Afrikassa.

Koulutuksellinen kerronta kerrotaan yhden sivun lukujen avulla, joista jokaisessa kuvataan hyvin todellisia komplikaatioita käynnissä olevissa pyrkimyksissä lopettaa laiton elefanttien tappaminen heidän hampaistaan. Huolimatta ensisijaisesta tavoitteesta vetoa vetoomukseen ilmoittautuneita, Viget-tiimi on tehnyt taidokkaan työn tasapainottaakseen välittömän toiminnan, joka kaikkialla läsnä olevalla toimintakehotuksella on emotionaalisesti kiinnostavampaan, tarinavetoisempaan sisältöön.

kuinka piirtää kytkimeen

Etu ja keskusta on ahdistava taiteen suunta, joka pakottaa sinut pysähtymään ja kohtaamaan emotionaalinen tehtävä. Kaunis, reunasta reunaan suuntautuva valokuvaus ja aikakauslehtiä muistuttava ulkoasu pyrkivät rakentamaan sen reagoivasti haasteena. Sen sijaan, että aloittaisit työpöydällä, sivusto rakennettiin ensin mobiililaitteille. Tämä mahdollisti suunnittelupäätösten tarkoituksellisen harkinnan pienille näytöille sen sijaan, että ne toimisivat työpöydän kokemuksen vesittyneenä välityspalvelimena.

05. Yhdistä tietueet

Inspiraatio verkkosivujen suunnittelusta: Yhdistä tietueet

Yhdistettyjen levy-yhtiöiden, kuten Arcade Fire, Superchunk ja The Mountain Goats, merge Records Durhamissa, Pohjois-Carolinassa, etsi paikalliselta digitaaliselta kumppanilta. Uudenaikainen rakentaa maailmanluokan verkkokaupan kokemus vastaamaan artistiensa laatua.

Rakennettu NewfangledCMS: lle, Newfangledin omistamalle PHP-pohjaiselle CMS: lle, HTML5: llä ja CSS3: lla, sivusto reagoi kauniisti erilaisiin laitekokoihin. Uusi järjestelmä on nyt automatisoitu sen varmistamiseksi, että etiketin resursseja hallitaan keskitetysti ja käytettävissä. Newfangled-varatoimitusjohtaja Chris Butler sanoo,

Aina kun tuote lisätään, meidän on selvitettävä, miten tämä vastaa fyysisen inventaarion kappaletta, joka sijaitsee eri tietokannassa, ja miten se muodostaa digitaalisen inventaarion osan, joka sijaitsee toisessa järjestelmässä. Meidän oli selvitettävä nuo logistiikat. ' Koska jokaisella sivulla on lukuisia erilaisia ​​tietokantakutsuja, tietojen tärkeysjärjestys oli tärkeä oikeaksi pääsemiseksi.

06. Lähettiläs

CSS-siirtymiä käytetään apuna Lähettäjän mielenosoituksessa

CSS-siirtymiä käytetään apuna Lähettäjän mielenosoituksessa

Lähettiläs , tuote, joka keskittyy vierailijoiden rekisteröintiin toimistossasi, tarjoaa tyylikkään iPad-pohjaisen käyttöliittymän nimien keräämiseen, allekirjoitusten sieppaamiseen ja vierailijoiden merkkien tulostamiseen paikan päällä. Sovellusta mainostavan verkkosivuston ensisijainen tavoite oli antaa asiakkaillemme mahdollisuus visualisoida, kuinka heidän omat kävijänsä voivat kokea lähettäjän toimistoissaan, kertoo perustaja ja suunnittelija Vítor Lourenço. 'Päätimme, että interaktiivinen demo olisi visuaalisesti kiinnostavin tapa osoittaa tämä.'

Tämän saavuttamiseksi sivusto näyttää sovelluksen toiminnot ja näytön tilat iPad-mallin päällä. Kun selaat yhden sivun sivustoa, tilat päivittyvät esittelyssä. CSS-siirtymiä käytetään apuna esittelyssä, mikä parantaa kokemusta olematta koskaan estämättä sisältöä.

'Vietimme useita tunteja pienten yksityiskohtien parissa', perustaja ja insinööri Larry Gadea lisää. '' Rakastamme tapaa, jolla kävijän allekirjoitus vetää itsensä, kun vierität NDA-näyttöä, tai kuinka vierailijakortti tulostetaan virtauksen lopussa. ''

07. Enemmän unta

Enemmän unta Berliinin luovalla toimistolla on rohkea sivusto. 'Tavoitteenamme oli esitellä kolme projektia, jotka edustavat osaamistamme sen sijaan, että näyttäisimme kaiken tähän mennessä tekemämme työn', kertoo tekninen johtaja Torsten Bergler.

Suuret kirjasinkokoarvot, siistit vieritysefektit ja puna-raskas, kontrastinen värimaailma tekevät tästä sivustosta erottuvan. 'Ainutlaatuista on teoksen esitys: visualisoida projektiprosessi, ohjata kävijöitä sen läpi ja kertoa tarina tekemästämme työstä', kertoo taiteellisen ohjauksen johtaja Stefan Schuster.

CSS siirtymien ansiosta sivujen ja sisällön selaaminen on sujuvampaa. Taustakoon ominaisuuksia käytetään säätämään kuvien skaalausta erikokoisina. Jopa uutiskirjeen ilmoittautumislomake on muotoiltu vastaamaan puhdasta ulkoasua.

08. Kiitollinen rekisteri

Kiitollinen rekisteri antaa pariskunnille mahdollisuuden luoda ainutlaatuinen, henkilökohtainen häärekisteri mistä tahansa haluamastaan ​​lahjasta missä tahansa Internetissä. Sivuston loi Murskaa + ihana ; Jeff Schram ja Michael Phillips sen käyttötiimistä halusivat CSS: n olevan yhtä kaunis kuin muotoilu. He käyttivät aikaa suunnitellakseen tarkkaan SCSS-rakenteensa tälle sovellukselle.

'' Monikehittäjäympäristössä on tärkeää, että koodi on järjestetty, helppo kulkea ja kommentoida perusteellisesti '', Phillips selittää. Kova työ näkyy sivuston esteettisyydessä vahvalla typografialla ja suurilla, voimakkailla kuvilla. Tiimi ei halunnut peittää näitä missään näkymässä ja riskin menettää merkityksensä.

'Olemme luoneet reagoivan järjestelmän, joka liukuu koko sivun alas paljastaen tärkeimmät navigointivaihtoehdot. Tämä antoi meille mahdollisuuden keskittyä upeisiin kuviin ja antaa käyttäjille myös ainutlaatuisen reagoivan kokemuksen '', Schram sanoo.

09. Elämä kengissäni

Life In My Shoes on tehokas monialustakampanja, jonka tarkoituksena on
nuoria, jotka haastavat HIV: n ympäröivän pelon ja väärinkäsityksen. Lontoossa toimiva digitaalitoimisto Liikenne hänelle kerrottiin kehittämällä verkkosivusto, joka houkuttelee nuoria.

Tuotemerkkifontti, Houshka Rounded Medium, otettiin käyttöön font-face -toiminnolla, jotta verkkosivustolle saataisiin uusi ilme. Koristeelliset kuvat ja dramaattiset keltaiset aksentit tarjoavat houkuttelevan esteettisyyden.

Tietoja meistä -sivulla on vilkas parallaksivaikutus, joka on mukautettu tableteille ja älypuhelimille. 'Kirjoitimme näille laitteille mediahaun, joka muuttaa liitetiedoston kiinteästä vieritykseen ja asettaa yksittäiset taustakohdat siten, että kuvat istuvat oikeassa paikassa', selitti liikennetiimi.

10. Vain

Solo on all-in-one-projektinhallintatyökalu, joka on tarkoitettu freelancereiden käyttöön. Kustannustehokas ja helppokäyttöinen sovellus yhdistää erinomaisen toiminnallisuuden, käytettävyyden ja kauniin muotoilun.

Tuotetta mainostava sivusto on täynnä CSS3: n mahtavuutta. 'Päätin käyttää HTML5: ää ja CSS3: ta heti alusta alkaen, tarjoilen vain moderneille verkkoselaimille', selittää Jerome Iveson , sovelluksen suunnittelija. 'Vain kolme prosenttia sivustomme kävijöistä käyttää Internet Exploreria. Koska kohdemarkkinamme eivät näytä käyttävän sitä, Sololla ei näyttänyt olevan juurikaan syytä tukea sitä. ''

Näet nämä CSS-säännöt toiminnassa koko tämän suunnittelun ajan, mikä tekee projektinhallinnasta leikkisämmän lukuisilla värikkäillä CSS-ruutuvarjoilla. Fontit, kuten Clarendon ja Bryant, tarjoavat hienon tasapainon hienostuneisuudesta ja hauskuudesta.

Sivuston koon muuttaminen tai sen katseleminen matkapuhelimella antaa sinun nähdä asettelun mukautuvan eri näytön kokoisille ja tarkkuuksille. Pidin melko juuttumisesta mediakyselyjen puolelle. Pidän sitä erittäin mielenkiintoisena suunnittelun näkökulmasta '', Iveson sanoo.

yksitoista. Lomake seuraa toimintoa

esimerkkejä css: stä

Tyyli on minimaalinen ja käyttää kultaista suhdetta sekä mielenkiintoista typografiaa

Lomake seuraa toimintoa (FFF) on korealaisen kehittäjän kauniisti suunniteltu HTML5- ja CSS-kokeiden esittely Jongmin Kim joka työskentelee interaktiivisena kehittäjänä osoitteessa Esikoisen multimedia New Yorkissa.

Kim kertoo sivustonsa nimen heijastavan hänen tavoitettaan pyrkiä aina 'miinusmalliin kuin plusmalleihin' ja pitää mielessä, että muoto seuraa toimintoa. Hän sanoo, että hänen tyylinsä on minimaalinen ja käyttää kultainen leikkaus sekä mielenkiintoinen typografia. FFF tehtiin 'huvin vuoksi' ja kesti Kimillä kolme viikkoa luoda, mukaan lukien viettää lomansa työskentelemällä sen kanssa.

12. Hellävaraisesti hullu

Inspiraatio verkkosivujen suunnittelusta: The Gently Mad

Suuri otsikko ja hyvin suunniteltu jaksolista antavat henkilökohtaisen kosketuksen tähän suunnitteluun

Hellävaraisesti hullu on aihe-agnostinen podcast web-sisällöntuottajista. Adam Clark , sen takana oleva mieli, poistui perinteisestä blogiasettelusta suunnitellessaan sitä luomaan jotain, jolla on hieman enemmän vaikutusta.

Suuri otsikko ja hyvin suunniteltu jaksolista ilmoittavat, että tähän suunnitteluun liittyy henkilökohtainen kosketus. Clark aloitti 'hullemmilla' CSS3-siirtymillä ja haalistumisilla, mutta poisti ne, hän kertoo meille. 'Tunsin tekemäni suunnitteluvalinnat (väri, asettelu, typografia) toimivan paljon paremmin vain jätettynä yksin', hän sanoo.

13. Amazee Labs

esimerkkejä css: stä

Osaamisella ja itsevarmuudella tämä verkkosivusto on kaunis esimerkki CSS: stä

Tuoreiden verkkosivustojen ja yhteisöratkaisujen luominen Amazee Labs tuo tuotemerkkisi online-maailmaan, joka perustuu Drupalin moderniin avoimen lähdekoodin kehykseen. Pätevyyden ja itsevarmuuden oma sivusto on kaunis esimerkki CSS: stä.

Jo luomalla sivustoja televisioverkoille, digitaalisille toimistoille, hyväntekeväisyysjärjestöille ja yrityksille on selvää, että heidän sivustonsa on vaikuttanut melkein kaikkiin. Emme voineet sopia enemmän.

kuinka aloittaa öljymaalaus

14. A & W

CSS-kierron muunnoksia käytetään otsikkotekstissä, mikä antaa A&W-sivustolle hauskan tulostusvalikkotunteen

CSS-kierron muunnoksia käytetään otsikkotekstissä, mikä antaa A&W-sivustolle hauskan tulostusvalikkotunteen

Ryhmä Cornett IMS halusi sivuston A & W se oli enemmän kuin logo, hampurilaiset ja juurioluet.

'' Rakkautemme A&W: hen oli tehtävä paljon muistojen kanssa, jotka jaettiin kotikaupungissamme ravintoloissa, joten halusimme ylittää jokaisen myymälän ainutlaatuisuuden yhdistämällä uuden sukupolven faneja paikalliseen A&W: hen '', kertoo luova johtaja David Coomer. sivuston tarkoitus.

@ Font-face: n käyttö Metroscript- ja Century Gothic -fonttien palvelemiseen luo mukautetun, nautittavan tyyppisen järjestelmän. CSS-kierron muunnoksia käytetään otsikkotekstiin, mikä antaa sivustolle hauskan tuloksen valikosta.

25. Nolowene Nowak

esimerkkejä css: stä

Nolowene Nowak esittelee taitojaan tällä hauskalla online-salkulla

Verkkosuunnittelija ja kuvittaja Nolowene Nowak on luonut hauskan online-salkun - loistava esimerkki CSS: n käytöstä loistavaan vaikutukseen. Jos vierität alaspäin ja tarkastat aikajanan osaa, huomaat, että CSS-ohjattu asettelu määrittää älykkäästi perussäännöt moduulin luomiseksi, joka vaihtuu vaaka-asennosta pystysuoraan asetteluun pienemmissä näytöissä.

Sivusto on yhtä nautinnollinen kuin sen luominen: 'Se oli todella rikas kokemus, joka antoi minulle mahdollisuuden luoda jotain ainutlaatuista, joka olin yksinkertaisesti minä', kertoo kehittäjä Christophe Dumont . `` Halusimme tarjota vierailijalle saman kokemuksen kuin lapsena, kun hän löysi uuden lelun. ''

Kehityksen aikana Dumont käytti Zurbia Säätiö : reagoiva CSS-kehys, joka on rakennettu Sassin kanssa. 'Sen tuki herättää reagoivan suunnittelun todella eloon', hän sanoo.

16. Caava Design

Sivusto houkuttelee käyttäjiä vihjeisiin vieritysanimaatioista ja parallaksitoiminnoista

Sivusto houkuttelee käyttäjiä vihjeisiin vieritysanimaatioista ja parallaksitoiminnoista

Suunnittelustudio Caava on kaunis uusi sivusto. Käyttäjät houkuttelevat vieritysanimaation ja parallaksitoimintojen vihjeitä, kun taas pääpaino on salkussa. 'Yritimme tarjota tuoreen ja ainutlaatuisen lineaarisen kokemuksen lyömättä ihmisiä sen yli pään yli', kertoo Caavan omistaja Cody Small.

Selaamalla sivustoa nuolet, jotka sitovat eri osiot yhteen, animoivat ylä- ja vasemman asennon pitämällä kokemuksen yhtenäisenä. '' Koska meillä on paljon animoituja soihdutuksia, kesti jonkin aikaa, jotta se tuntui luonnolliselta ja tukee suunnittelua '', sanoo kehittäjä Brandon Lavigne.

Nuolet ovat yhdenmukaisia ​​koko suunnittelun ajan, kuten työaluetta tutkittaessa. Tarkastellessasi näet, että ne on luotu CSS-reunoilla ja muunnoksilla. Tämä on erittäin siisti ja hyödyllinen, koska projekteilla on erilaiset värimallit, ja nuolien värejä voidaan sitten helposti muuttaa CSS-ominaisuuksilla vastaamaan.

17. Fitbit

Inspiraatio verkkosuunnitteluun: Fitbit

Fitbitin sivustosuunnittelu on kirkas ja eloisa, ja siinä on kuvakkeita ja värikkäitä tilastografioita

Fitbit tekee aktiivisuuden seurantalaitteita ja asteikkoja aktiivisuuden tallentamiseen, unen seuraamiseen ja painon ja rasvan dokumentointiin. Nämä tiedot julkaistaan ​​langattomasti Fitbitille, jossa käyttäjät voivat nähdä kaavioita, asettaa tavoitteita, kilpailla ja jakaa edistymisensä muiden kanssa. 'Tehtävämme ei ole pelkästään tekniikan käyttö, jotta maailmasta tulisi terveellisempi paikka!' kehittäjä Biagio Azzarelli.

Sivuston suunnittelu on kirkas ja vilkas. Kuvakkeet ja värikäs tilastografiikka auttavat herättämään informatiivisia katkelmia elämään tylsistämättä käyttäjiä. Hyvin käytetyn ristikon pitäisi helpottaa sivuston muuttamista juoksevaksi ulkoasuksi tulevaisuudessa.

Azzarelli kertoo nauttineensa sivuston analysointiin perustuvan sivuston kehittämisestä. '' Koska käyttäjäkuntamme jatkaa A-luokan selainten omaksumista, voimme hyödyntää CSS3: n nautinnollisia osia hyväksyttävällä huonontumisella IE7: ssä ja 8: ssa. ''

18. Mammothbooth

esimerkkejä css: stä

MammothReachin takana oleva tiimi loi tämän hienon valokuvasuunnan MammothBooth

Detroitissa toimivat taiteilijat MammuttiReach halusi luoda maailman nopeimman valopöydän ja sen myötä Mammutti verkkosivusto syntyi.

'Halusimme sivuston, joka oli sujuva, välitön ja hauska', muistelee suunnittelija / kehittäjä Nick Keebaugh, 'ja juuri se on meidän osastomme. Halusimme kaiken kaikkiaan täysin mukautetun tunnelman koko sivustolta, joka heijastaisi sitä, kuka olemme yritys ja mitä tuotteemme tekee sen ytimessä. Sivusto on MammothBoothin online-laajennus läpi ja läpi. '

MammothReach hyödynsi kierto-muunnosominaisuutta suurella kierteisellä purskekuvalla, joka pyörii jatkuvasti. Hauska sisältö liukuu sisään, kun vierailet sivuston eri osioissa, joissa on animoituja tyyliominaisuuksia. Leikkisä Arvil Sans -fontti sopii erinomaisesti esteettiseen tyyliin ja on saatavana nimeksi hintasi fontiksi Lost Type Co-op .

19. Lab-kumppanit

Esimerkkejä CSS: stä

Lab-kumppanit esittävät työnsä värikkäällä ja koristeellisella verkkosivustolla

Taide- ja designstudio Lab Partners, jota johtavat aviomies Ryan Meis ja Sarah Labieniec, on avannut värikkään ja koristeellisen verkkosivuston, joka on yksi parhaista esimerkkeistä CSS: stä.

Huomiota yksityiskohtiin loistaa jokaisella sivulla. Työosassa on kuratoitu asettelu, joka antaa salkun tuntea erityisen omaperäistä. Projektin pikkukuvilla on suuri leijutusalue, joka hyödyntää peittävyysominaisuutta erottamalla selvästi leijutustilan. Kauppa-osio on käynnissä Big Cartel -ostoskärryssä, mutta tuntuu olevan integroitu osa sivustoa, jossa elementteihin on sovellettu mukautettua CSS: ää.

'Verkko tuntuu todella yhdeltä muodon ja toiminnallisuuden viimeisimmistä yhdistelmistä', Meis huomauttaa. Hän selittää, että tasapainon löytäminen näiden kahden välillä oli sekä nautinnollista että haastavaa. 'Loppujen lopuksi jokainen ongelma osoittautui tilaisuudeksi luoda ratkaisu, jota en ollut alun perin ajatellut.'

kaksikymmentä. Pizza Brain

Esimerkkejä CSS: stä: Pizza Brain

Pizza Brain on täysin reagoiva ja näyttää hyvältä pienemmissä ulkoasuissa

Esimerkkejä CSS: stä eivät tule paljon paremmiksi kuin tämä! Brian Dwyerin perustama Pizza Brain on maailman ensimmäinen pizzamuseo ja ravintola. Sivustolla mainostetaan lehdistötiedotteita ja blogi, joka kuvaa työn etenemistä, ja siinä on Michael Almquistin suunnittelema brändäys.

Fontit Pacifico Regular ja Bebas Neue on yhdistetty lämpimään, pizzamaiseen väripalettiin, mikä luo ystävällisen esteettisyyden, joka on helppo lukea, mutta silti jännittävä ja hauska. 'Se oranssi, se on kaunis ja se todella luo pohjan sisällölle', kertoo kehittäjä Arjun Mehta.

Erilaiset pyöristetyt kulmat ja peittävyysvaikutukset täydentävät tämän puhtaan ilmeen. 'Jokaisen viestin saaminen omalle pyöristetylle suorakulmion sisältöosuudelle oli todella lainaa Pizza Brainin käyntikorttien visuaalisesta kielestä', Mehta lisää. Täysin reagoiva sivusto näyttää hyvältä myös pienemmissä ulkoasuissa.

Yksi parhaista esimerkkeistä CSS: stä toiminnassa - ja pidä silmällä sivustoa, koska odotetaan lisää. 'Olen innoissani siitä, kuinka sivusto voi kasvaa ja miten sitä voidaan edelleen kehittää, kun tämä hämmästyttävä hanke toteutuu ajan myötä', Mehta sanoo.

kaksikymmentäyksi. Lähetettävissä

Esimerkkejä CSS: stä: Lähetettävä

Postitettava on helppo tapa kaapata postiosoitteet

Postable on tarkoitettu ensisijaisesti kävijöille, jotka haluavat lähettää häätkutsuja ja lomakortteja, tai niille, jotka haluavat yksinkertaisesti online-osoitekirjan, Postable tarjoaa helpon tavan siepata postiosoitteita.

'Postableilla on uskomattoman leikkisä ilme, etenkin verkkosovelluksissa, ja halusin pysyä uskollisina näille malleille', kertoo frontend-kehittäjä Kevin Kneife. Sivusto tekee kirjekuorihenkisistä raidallisista reunoista hauskoihin taustarakenteisiin ja vankasti pyöristettyyn Omnes Pro -fonttiin, joten osoitteiden kerääminen ei ole enää helppoa.

Hauskoja ja hyödyllisiä piirroksia käytetään kaikkialla. Pyöristetyt kulmat, nauhat ja älykkäät leijutilat pitävät sivuston sitoutumisen viihdyttävänä. Se on yksi parhaista esimerkeistä CSS-muunnoksista, joita olemme nähneet, ja niitä käytetään päivittämään taustakuvan kiertoarvo, vetämällä käyttäjät ohjeisiin sivuston helppokäyttöisyydestä.

kuinka kerros tyhjennetään Photoshopissa

Kun olet luonut tilin, yhteystieto lisätään helppokäyttöisellä lomakkeella, jossa on puhtaat CSS-valintaruudut, jotka Kneife on täysin suunnitellut. Hän paljastaa: 'Tähän sisältyi lomakkeiden valintaruutujen peittäminen ulkodivillä, läpinäkyvyyden lisääminen ja -webkit-ulkonäön käyttö. Tuloksena on laatikko, joka näyttää hyvältä kaikissa selaimissa ja hajoaa sulavasti. '

22. Robby Leonardi

Esimerkkejä CSS: stä: Robby Leonardi

Sivustolla on värikkäitä piirroksia ja piirrettyjä tyylejä

Suunnittelija Robby Leonardin kodissa on värikkäitä piirroksia ja piirrettyjä tyylejä, jotka tuovat teokseen iloisen persoonallisuuden. Kuten Leonardi sanoo: 'On aina hyvä saada ihmiset hymyilemään, ja uskon, että tämä verkkosivusto tekee juuri sen.'

Se on yksi hieno esimerkki CSS: stä, jota käytetään hämmästyttävien visuaalien luomiseen. Taustakuvat kerrostetaan luomaan siistit vaakasuuntaiset parallaksitehosteet otsikkoalueelle. Sivulla alaspäin CSS-kiertomuutoksia käytetään siirtämään vaihdetta katselualueen sivuilla. Salkun kappaleet on kehystetty puupohjaisissa ikkunoissa, joissa on animoituja leijuja.

Puupalikat tehtiin Leonardin 3D-mallinnuksesta. Hän selittää: 'Yhdistin kaikki nämä renderoinnit yhdeksi kuvaksi ja muutin CSS: n vasemmalle ominaisuutta aina, kun käyttäjä vierittää sivua. On melko yllättävää, että yksinkertainen CSS-temppu voi tuottaa niin hyvän vaikutuksen! '

2. 3. Libor Zezulka

Esimerkkejä CSS: stä: Libor Zezulka

Libor Zezulka on puhdas ja älykäs henkilökohtainen salkku

Libor Zezulkan yhden sivun verkkosivusto on puhdas ja älykäs henkilökohtainen salkku, joka on asetettu kaltevuuksien joukosta, joka poppaa ja tekstiä alkaa lukea CSS-tekstivarjojen älykkään käytön ansiosta.

Johtava suunnittelija ja käyttöliittymäkehittäjä Martin Pospisil Madeo nauttinut työskentelystä sivustolla. '[Meillä oli] vapaus pelata suunnittelun ja tekniikan kanssa', hän selittää. Tämä näkyy sivuston hauskassa tekijässä. Suunnittelu on yksinkertainen, mutta tehokas, koska osat ovat selvästi erotettavissa. Pospisil arvioi, että 'voima on kuvakkeissa ja väriyhdistelmissä'.

Toinen ainutlaatuinen kosketus on lightbox-ponnahdusikkunat. Tämän sivuston painikkeet on erotettu toimiviksi alla olevan varjokuvantamisen avulla. Sulje-painike on siirretty hieman laatikosta, mikä tarjoaa helppokäyttöisen käyttöliittymän.

3. 4. Emporium-piirakat

Emporium PIes -sivusto saa sinut kokeilemaan niitä kaikkia

Emporium PIes -sivusto saa sinut kokeilemaan niitä kaikkia

' Emporium Pies -sivusto on yksi työ: saada sinut syömään lisää piirakkaa ', Kyle Turman, interaktiivinen johtaja Valimokollektiivi väittää. Ja poika, kertoako hän totuutta. Dallasissa sijaitsevan piirakan ja kahvilan hyvin suunniteltu reagoiva sivusto saa sinut nälkäiseksi. Todella nälkäinen.

'Operatiivinen johtaja Paul Wilkes sieppasi todella erinomaisia ​​otoksia piirakoista, ja asetimme ne etusijalle suunnittelun hierarkiassa mahdollisimman paljon', Turman jatkaa. `` Pidimme tärkeänä antaa piirakoiden puhua puolestaan, eikä täyttää sivustoa tonnilla hämmentävää kopiota. ''

Katso leijuvaefektit Piirakat-sivulta. Se käyttää CSS 3D -muunnoksia yhdistettynä piirakoiden kuvien taustapinnan näkyvyysominaisuuteen paljastamaan jälkiruokan nimen ja lisätietoja.

25. Autonjaon tulevaisuus

Esimerkkejä CSS: stä: Autojen jakamisen tulevaisuus

UX on helppo tehdä tämän viehättävän vaakasuoran vierityssivuston avulla

Autojen jakamisen tulevaisuus Yhteistyörahasto ja Hyperakt tuella Startup America -kumppanuus , on täynnä tietoa yhä suositummasta vaihtoehdosta auton omistamiselle. Tämä viehättävä horisontaalinen vierityssivusto helpottaa vertaisverkko-, yritys-kuluttaja- ja voittoa tavoittelemattomien autojen jakamisen erojen tulkintaa.

'Alusta alkaen tehtiin päätös työntää tämä kappale niin pitkälle kuin pystymme' ', neuvoo Hyperaktin tietoarkkitehti Simon Corry. 'Tämä tarkoitti sitä, että samalla kun tarjoimme taaksepäin yhteensopivuutta vanhemmille selaimille mahdollisuuksien mukaan, painotettiin CSS3-ominaisuuksien rajojen testaamista. Olen aina ollut videopelien fani ja CSS3: n nykyisen selaintuen ansiosta pystyin nauttimaan tämän tason animaatiosta ja suunnittelusta CSS: n kautta.

'CSS3: n kauneus on yksinkertaisuudessaan, joten se on täydellinen kieli kaikille luoville', Corry sanoo.

26. Elämä Greenvillessä

Esimerkkejä CSS: stä: Greenville

Sivusto tervehtii sinua Kulturista-kirjasintyypillä

Elämä Greenvillessä tarkastelee asumista ja työskentelyä Greenvillessä, Etelä-Carolinassa. 'Me kaikki paikassa CoWork rakastan Greenvillea ja halusi luoda verkkosivuston, joka auttaisi ihmisiä ymmärtämään miksi '', sanoo pääkehittäjä Sean Gaffney.

Sivusto tervehtii sinua Kulturista-kirjasimella huomiota herättävällä 53 kuvapisteen kokoisella kirjasinkoolla täysleveän ja reagoivan sankarikuvan päällä. Puhdas muotoilu pitää sinut kiinnostuneina ja haluavasta oppia lisää helposti saatavilla olevan sisällön avulla. Hieman animoitu logo leijonalla tarjoaa myös iloa.

Tiimi hyödynsi Skeleton-kattilaa auttaakseen tyylien rakentamista. `` Luuranko tarjoaa todella mukavan leveyssuunnittelun, joten se vain muutti muutamia kohteita asettelussa kullekin näytön koolle '', Gaffney sanoo.

27. True Fish Tales

Esimerkkejä CSS: stä

True Fish Tales rakennettiin CSS3: n ja JavaScriptin yhdistelmällä

True Fish Tales todella kiinnittää sinut sisään. Se toistaa ajatusta siitä, että kalastajat ovat kuuluisia kertomalla korkeita tarinoita tuomalla yhteen upeita 'todellisia tarinoita' meren alla piilevistä hirviöistä. Se erottaa sen sujuvan ja käyttäjäystävällisen vuorovaikutteisuuden, joka tekee sisällön löytämisestä hauskan ja viihdyttävän kokemuksen.

Infografiikan on koonnut Brian Maier ja Mark Shelton Kentuckyn virastosta DBS> Interaktiivinen osana jatkuvaa pyrkimystä lisätä tuoretta sisältöä United Marine verkkosivusto.

Maier ja Shelton käyttivät CSS3: n ja JavaScriptin yhdistelmää infografiikan rakentamiseen. 'Monet animaatioista ja grafiikoista hoidetaan CSS3: lla', Lewis selittää, mutta ne käyttivät JavaScriptiä joissakin paikoissa vanhempien selainten sovittamiseen, jotka eivät vielä tue tätä tekniikkaa.

28. Asema neljä

Esimerkkejä CSS: stä

Tänä vuonna Station Four on uudistettu tuotemerkkinsä parantamiseksi

Verkkotoimisto Asema neljä on käynyt läpi tuotemerkkiprosessin ja suunnitellut uuden verkkosivuston parantamaan sen persoonallisuutta ja tuotemerkkiä. 'Aloimme suunnitella uutta verkkosivustoa ajatuksella näyttää potentiaalisille asiakkaille, emmekä kertoa, mitä voimme tehdä', kertoo Station Fourin luova johtaja ja osakasomistaja Christopher Olberding.

Tästä syystä uudella kotisivulla käytetään suurta, esillä olevaa työpalkkia, joka näyttää Station Fourin uusimman työn.

Asiantuntemussivulla on mielenkiintoinen navigointisuunnittelu: se käyttää linkeinä suuria ympyräkuvia. Nämä hyödyntävät reunan säteen ominaisuuksia saavuttaakseen ulkonäön ja soveltavat niihin myös animaatioita.

kuinka kerros tyhjennetään Photoshopissa

Menetimme ohitse suosikkiesimerkkisi CSS: stä toiminnassa? Kerro meille siitä alla olevissa kommenteissa!

Avustajat : Chris Cashdollar ja Rikas Clark

Nämä arvostelut julkaistiin alun perin nettilehti , maailman myydyin verkkosivujen suunnittelijoille ja kehittäjille suunnattu lehti.