Na tisoče nasveti CSS, PHP, skripte. Koristne vaje in video nasveti

Ideja je ustvariti videz diaprojekcije brez vrtiljaka. Z drugimi besedami, naredimo vrsto slik, ki jih drsimo od leve proti desni in ponovimo, ko dosežemo konec slik. Trik je v tem, da uporabljamo eno sliko v ozadju z animacijami CSS za (...) "

Zdi se, da je malo čarovništva, ko opazujem, kako se oblika risa v spletu. Ali pa gre verjetno za vdelani video. Ni pa nujno! Pravzaprav z izjemno malo kode in strašno pametno tehniko, ki vključuje poteze in odmike potez, lahko to storimo na kateri koli poti SVG. "

Morda moj najljubši CSS trik vseh časov! Ta uporablja štiri plastne prelive ozadja, ki razkrivajo sence na vrhu in na dnu vsebnikov, ki se pomikajo in označujejo, da se lahko pomikate v tej smeri. Je dober UX in celo več kot zdaj leta 2012, ko je bil izumljen, saj so uporabniški vmesniki brez drsnikov vedno bolj pogosti. "

Ko se na spletnem mestu uporablja razpršena povezava, se stran pomakne do mesta, kjer je viden element, na katerega je povezan. Toda ali je to povsem jasno? Včasih je moteče in zmedeno. Rumena bliskavica je ideja, da na kratko poudarimo element, na katerega je povezan, da ga usmerimo v oči in razumemo zmedeno situacijo. "

Na srečo imamo danes veliko več nadzora nad nalaganjem pisav. Uporabnikom ni treba več siliti, da čakajo, da se pisava naloži, preden jim pokaže besedilo, lahko jo zamenjamo, ko se pisava naloži. Toda ta zamenjava je lahko vizualno groba z veliko nenadnimi premiki in preoblikovanjem. To lahko popravimo! "

Obstaja več načinov, kako lahko v spletu animiramo ali prehodimo eno obliko v drugo. Ne govorim o vrtenju puščice ali povečanju kljukice, govorim o tem, da gledam, kako se oblika premika same točke, iz katerih je narejena, na nova mesta. "

Obstaja način, kako lahko zgradite vrstico napredovanja, ki prikazuje, kako daleč se je uporabnik pomaknil po strani navzdol (kot je "indikator napredka branja"), ne da bi sploh imel JavaScript. Samo nekaj pametne uporabe prelivov in pozicioniranja. "

Pozdravljeni vsi skupaj! Dobrodošli v celotni seriji o izdelavi prvega spletnega mesta za umetnike z WordPressom. To se nekoliko razlikuje od zadnje serije "

Smešna beseda, kajne? To je vizualni učinek, zaradi katerega se element nekako migota, ki se premeša, in mu da nekako nelagoden, a izjemno unikaten občutek. "

V tej oddaji govorim o tem, kakšna je bila komunikacija med mano in Jeffom, ko mi je prvič poslal e-pošto, da želi preoblikovati spletno mesto. "

Iz zadnjega videoposnetka vemo, da moramo pri oblikovanju te strani upoštevati pet glavnih točk. Tiste bomo imeli na vrhu kot "

Chris Coyier To je zbirka mojih najljubših trikov, na katere sem naletel ves čas, ko sem delal to spletno stran. Večina jih ni moja, ampak ljudje, ki so bistveno bolj pametni od mene. Tu jih predstavim in razložim trik, kot ga vidim. Medtem ko so nekateri med njimi bolj (...) "

Začnemo z odprto datoteko Photoshop. Precej neumno videti "podolgovat" posnetek zaslona za iPhone, ki nam preprosto da samo platno v mobilni napravi "

Imamo "glavo" zasnove na mestu, le ugotoviti moramo preostanek strani. Imamo seznam najpomembnejših ciljev, ki si jih želimo "

Med delom na tem projektu želimo delati lokalno. Nekaj ​​razlogov: Hitro je. Brez povezave lahko delamo od koder koli. Delamo na celotnem "

Mi smo sredi odstranjevanja teme WordPress na približno tako golo kost, kot jo lahko dobimo. Ne skrbi nas zasnova, do katere poskušamo priti, "

Kot glavno pisavo za Jeffovo spletno stran smo izbrali Proxima Nova. Danes je sicer zelo priljubljeno, a z Jeffovim delom izgleda super. Preprosto, "

Kmalu bomo ustavili pogled na staro spletno mesto. To je zadnjič! Naš načrt zdaj, ko imamo pravilno lokalno razvojno okolje, je, da "

V tej oddaji zaslona imamo CodeKit, ki začne gledati naš projekt. To veliko olajša naloge razvijalcev. Prva stvar, ki jo naredimo, je, da "

Za drsnik na domači strani se odločimo za RoyalSlider. Že dolgo sem ljubitelj AnythingSliderja, saj sem bil del njegovega ustvarjanja in sem "