CSS չարաշահում

Օրինակների հավաքածու, թե ինչպես CSS- ին մղել դրա սահմանները

Ամեն ինչ CSS- ի մասին է: Այստեղ բոլոր հեղինակները կամ մոռացել են օգտագործել JavaScript- ը, կամ նրանք անջատել են այն իրենց զննարկիչում և չեն կարող կրկին այն միացնել: այնպես որ նրանք ստիպված էին ավարտել գործը `օգտագործելով միայն մաքուր CSS:

Խորանարդի տուփ

Ես կարծում էի, որ այդ խորանարդները 3D աշխատանք են, բայց, ինչպես հեղինակը ասաց, «նա մոռացավ օգտագործել ԵՐԵՔ.յժ-ը», և ամեն ինչ մաքուր CSS է:

Անիմացիոն խորանարդի փաթեթ

Այն, ինչ ինձ շատ դուր է գալիս այստեղ, այն է, թե ինչպես են խորանարդները ստվերներ նետում և արտացոլում լույսը ՝ այն զգացնելով, որ դրանք իսկապես լողացող են և պտտվում:

Մաքուր-CSS ֆրանչին

Այո, դա նավթի ներկ չէ: դա լրիվ մաքուր CSS արվեստ է:

Ֆրանկային նկարչություն

Մոնա Լիզայի նման, այս նկարն իր գաղտնիքներն էլ ունի: Այն ակտիվացնելու համար հարկավոր է օգտագործել Windows 98 դարաշրջանի հնագույն սարք, որը IE7- ով աշխատելը հնարավորություն կտա ձեզ տեսնել նրա ուրվականը:

Francine Painting Ghost (շնորհակալություն IE)

Single Div

Այս բոլոր գրաֆիկները ոչ միայն նկարված են միայն HTML- ով և CSS- ով, դրանք բոլորն էլ ստեղծվել են (դուք կռահեցիք այն) մեկ բաժանումով:

Single div արվեստի գործեր

Հիանալի է, բայց կարո՞ղ է նա անիմաստ ստրկացնել:

Անիմացիոն միայնակ div

Հանոյի աշտարակ

Հանոյի հայտնի հանելուկը: Այն բաղկացած է երեք ձողերից և տարբեր չափերի մի շարք սկավառակներից, որոնք կարող են սահել ցանկացած գավազանով: Փազլը սկավառակների հետ սկսում է կոկիկ տուփի մեջ մեկ գավազանով չափի աճող կարգով, վերին մասում ամենափոքրը ՝ դրանով իսկ կազմելով կոնաձև:

Փազլի նպատակն է ամբողջ պատնեշը տեղափոխել մեկ այլ գավազան ՝ հետևելով հետևյալ պարզ կանոններին.

  1. Միանգամից կարող է տեղափոխվել միայն մեկ սկավառակ:
  2. Յուրաքանչյուր քայլ բաղկացած է վերին սկավառակը տողերից մեկից վերցնելուց և մեկ այլ պատառաքաղի կամ դատարկ գավթի վերևում դնելուց:
  3. Ոչ մի սկավառակ չի կարող տեղադրվել փոքր սկավառակի վերևում:

Երբ կտտացնում եք սկավառակների սկավառակը, ընտրում եք ամենաշատ սկավառակը, այնուհետև այն կարող եք տեղափոխել մեկ այլ գավազան, որքան փորձեք, չես կարող փոքր սկավառակի վերևում տեղադրել մեծ սկավառակ (ինչպես խաղի կանոններ), և բոլորը սա զուտ CSS մոգություն է:

Կարծում եմ, որ այս խաղի հեղինակը իր CV- ին պետք է ավելացնի ևս երկու նոր հմտություն `թվաբանական հանճար և երկար մտածող մարդ:

Mario Kart խաղ

Զրոյական պատկերներով, JavaScript- ի զրոյական տողերով և CSS հարյուրավոր տողերով, նա կարողացավ ճանապարհին դնել Մարիոյին:

Ինչպես նկատեցիք, դա ամենևին էլ Mario Kart խաղը չէ, քանի որ կարող եք փոխել միայն նիշերի միջև և ընտրված նիշը տեղափոխել աջ կամ ձախ, բայց դրան հասնելը `առանց նույնիսկ Javascript- ի մեկ տող օգտագործելու, CSS չարաշահման մի տեսակ է, որը ես իսկապես դուր եմ գալիս .

Որոնիչ ՝ CSS- ում

Մենք շատ հեռու ենք ճանապարհորդել այժմ վերադառնալու համար, այնպես որ ինչու չստեղծել CSS որոնման համակարգ:

Վերջնական մտքեր

Եթե ​​զարմանում եք, ինչու՞ էին նրանք դա անում մաքուր CSS- ով: Կարծում եմ, որ պատասխանը այստեղ է, քանի որ նրանք կարող են:

Այստեղ մարտահրավերը զարմանալի նկարների ստեղծում կամ Mario Kart խաղային վեբ վարկածի ստեղծում չէ, այլ այստեղ խնդիրն այն է, ստեղծել այն, օգտագործելով մի գործիք, որը մենք բոլորս ծանոթ ենք և կարող ենք այն լավ օգտագործել (CSS), չնայած որ այս գործիքը նախատեսված չէ արա դա

Իհարկե, եթե նրանք օգտագործում էին JavaScript կամ SVG, նրանք կարող են հասնել նույն արդյունքների կամ նույնիսկ ավելի լավ արդյունքների հասնել ավելի քիչ ցավոտ եղանակով, բայց նաև պակաս հետաքրքիր ձևով:

Այս կերպ նրանք ցույց են տալիս, թե ինչ կարող են անել, և ցույց են տալիս, որ անկախ նրանից, թե որ գործիքն եք օգտագործում, ձեր ստեղծագործական գործունեության համար սահման չկա: Գործիքը միշտ կլինի գործիք, բայց ճիշտ ձեռքերում կարող է ստեղծել այս մոգությունը:

Եթե ​​ունեք «ինչպես չարաշահել CSS- ը» այլ օրինակներ, խնդրում ենք, այն տեղադրեք մեկնաբանություններում:

Շնորհակալ եմ կարդալու համար: