10 ├║tr┼żkov HTML a CSS na vytvorenie rozlo┼żenia na rozdelenej obrazovke

U┼ż├şvate─żsk├ę rozhrania rozdelenej obrazovky sa stali popul├írnym sp├┤sobom zobrazovania obsahu. ─îasto si mysl├şme, ┼że sa pou┼ż├şvaj├║ v oblastiach, v ktor├Żch chceme, aby si pou┼ż├şvatelia vybrali medzi dvoma mo┼żnos┼ąami. Vid├şme v┼íak aj in├ę tvoriv├ę vyu┼żitie tejto techniky. Napr├şklad rozdelen├í obrazovka sa m├┤┼że ve─żmi dobre vyu┼żi┼ą aj ako ├║pln├ę rozlo┼żenie str├ínky alebo dokonca ako anim├ícia prechodu.

Tu je 10 pr├şkladov pou┼ż├şvate─żsk├ęho rozhrania rozdelenej obrazovky, doplnen├Żch zdrojov├Żm k├│dom, ktor├Ż m├┤┼żete upravi┼ą pod─ża svojich potrieb. Ka┼żd├Ż z nich m├í ─Źo pon├║knu┼ą.

Rozhodn├║┼ą sa

Toto je pravdepodobne najbe┼żnej┼í├ş sp├┤sob pou┼żitia rozdelenej obrazovky. N├ív┼ítevn├şk webovej str├ínky m├í dve mo┼żnosti. Tu farby na obr├ízku na pozad├ş poskytuj├║ dobr├ę oddelenie, zatia─ż ─Źo zaoblen├ę logo v strede sp├íja v┼íetko dohromady.

Rozdelenie jazdca

Rozdelen├í obrazovka tie┼ż vytv├íra zauj├şmav├Ż prechodn├Ż efekt, ako vid├şme v nasleduj├║com pr├şklade prezent├ície. Pos├║vanie nadol sp├┤sob├ş, ┼że sa ka┼żd├í polovica obrazovky rozdel├ş a odhal├ş ─Ćal┼í├ş obr├ízok vo fronte. V├Żsledkom je ve─żmi plynul├ę a sofistikovan├ę u┼ż├şvate─żsk├ę rozhranie.

Rozlo┼żenie str├ínky so statick├Żm bo─Źn├Żm panelom

V─Ćaka tomu, ┼że obrazovky HD a 4K z├şskavaj├║ priestor, za─Ź├şnaj├║ vyu┼ż├şva┼ą ─Ćal┼í├ş priestor dizajn├ęri ─Ćal┼í├ş n├ívrh├íri. Toto vzorov├ę rozlo┼żenie poskytuje statick├Ż bo─Źn├Ż panel s tu─Źn├Żm obr├ízkom na pozad├ş. Ale tie┼ż vyzer├í skvele na men┼í├şch obrazovk├ích, preto┼że bo─Źn├Ż panel sa st├íva hlavi─Źkou. Je to atrakt├şvne a funk─Źn├ę.

Pre porovnanie

─Äal┼í├şm trendom, ktor├Ż z├şskava p├┤du, je pou┼żitie rozdelenej obrazovky na porovnanie obr├ízkov ÔÇ×predÔÇť a ÔÇ×poÔÇť. Tu m├íme nastavenie, ktor├ę umo┼ż┼łuje pou┼ż├şvate─żom jednoducho pohn├║┼ą my┼íou, aby videli rozdiely medzi dvoma obr├ízkami. Pomocou trochu k├│du JavaScript je toto pou┼ż├şvate─żsk├ę rozhranie zauj├şmav├Żm zvratom v technike.

Alternat├şvna gal├ęria

Efekt pos├║vania ÔÇ×pol a polÔÇť v tomto pr├şklade dod├íva jedine─Źn├Ż n├ídych. Je to takmer pocit, ┼że karty a fotografie sa pri pos├║van├ş striedavo ukladaj├║ na seba. A ke─Ć┼że pou┼ż├şva menej ako 150 riadkov ─Źist├ęho CSS, ─Źas na─Ź├ştania by nemal by┼ą hlavn├Żm probl├ęmom.

Rozlo┼żenie ─Źasopisu

Tento dizajn simuluje nie─Źo, ─Źo n├íjdete v tla─Źovom ─Źasopise. Tu─Źn├Ż popis a ├║vodn├Ż text na─żavo pon├║kaj├║ vynikaj├║ci kontrast k fotografick├ęmu ─Źl├ínku a viac st─║pcov napravo. Celkovo to vyzer├í ve─żmi elegantne a profesion├ílne.

Zhrnutie slu┼żieb

Tento koncept je z h─żadiska zna─Źky ve─żmi cool. Pou┼ż├şva rozdelen├║ obrazovku na str├ínke, na ktorej je v─żavo statick├í spr├íva o zna─Źke, v kombin├ícii s pos├║vac├şm zoznamom slu┼żieb pon├║kan├Żch napravo. Je to len in├Ż sp├┤sob, ako sa trochu vymani┼ą z davu.

Efekty pos├║vania rozdelenej obrazovky

─îasto vid├şme kr├ísne rozlo┼żenie rozdelenej obrazovky, ale nie z h─żadiska interaktivity. Nasleduj├║ci pr├şklad prid├í ch├Żbaj├║cu zlo┼żku s niektor├Żmi prechodmi z├íkladn├Żch mierok, ke─Ć na ┼łu prejdete. Dobr├í vec na tom je, ┼że poskytuje pou┼ż├şvate─żovi trochu extra vizu├ílneho podnetu.

3D karusel

Prechody medzi sn├şmkami v tomto karuseli doslova dod├ívaj├║ rozdelen├Żm obrazovk├ím nov├Ż rozmer. Ka┼żd├í sn├şmka je ÔÇ×rozdelen├íÔÇť na polovicu, zatia─ż ─Źo ─Ćal┼íia sn├şmka je vyvinut├í v chladnom 3D form├íte. Tu je ur─Źit├í kvalita stroja, ktor├Ż m├┤┼że by┼ą skvelou vo─żbou pre stroj├írsku alebo priemyseln├║ spolo─Źnos┼ą.

Split Reveal

Postup rolovania po str├ínke sa m├┤┼że nudi┼ą ve─żmi r├Żchlo. Je prekvapuj├║ce, ┼że v tomto postupe nesp├şme. Niekedy je dobr├ę presun├║┼ą do posunu nie─Źo in├ę, ako je tento efekt zverejnenia inform├íci├ş. Anim├ícia dod├íva z├í┼żitku mal├║ osobnos┼ą a em├│cie. M├┤┼że dokonca pom├┤c┼ą pril├íka┼ą n├ív┼ítevn├şkov, aby sa viac z├║─Źastnili na va┼íich str├ínkach.

Zdie─żanie je rozdiel

To, ─Źo sa za─Źalo ako sp├┤sob v├Żberu medzi A alebo B, sa stalo nie─Ź├şm in├Żm. Rozdelen├ę kresby a anim├ície pon├║kaj├║ dizajn├ęrom ─Ćal┼í├ş kreat├şvny sp├┤sob, ako podpori┼ą interakciu. Aj ke─Ć ich st├íle vid├şme vo svojej tradi─Źnej podobe, zis┼ąujeme tie┼ż, ┼że sa pou┼ż├şvaj├║ na vylep┼íenie vec├ş, ako je napr├şklad prech├ídzanie gal├ęriami obsahu a obr├ízkov. Dokonca sa pou┼ż├şva na napodob┼łovanie techn├şk tla─Źov├ęho dizajnu.

Na┼í┼ąastie vy┼í┼íie uveden├ę pr├şklady in┼ípiruj├║ sp├┤soby, ako prida┼ą rozdelen├ę pou┼ż├şvate─żsk├ę rozhranie do va┼íich vlastn├Żch projektov. Bavte sa experimentovan├şm a implement├íciou funkci├ş, ktor├ę vyzeraj├║ skvele a prid├ívaj├║ do zmesi nie─Źo jedine─Źn├ę.