Քանի որ էջերի դասավորությունը գնալով բարդանում է, մշակողները կարիք ունեն մուտքագրելու ավելի շատ միավորներ `մարմնավորելու ձեւավորմանը: Ի լրումն սովորական հետաքրքրությունից, EM եւ REM- ից եւ պիքսելներում կան չափման նոր ստորաբաժանումներ VW եւ VH, ինչպես vmin, այնպես էլ vmax, ապահովելով ստեղծելու ավելի հզոր եղանակներ Հարմարվող ձեւավորումորոնք հաճախ կարող են օգնել հրաժարվել @ media անցումային կետերի օգտագործումից:

Մենք գնում ենք հետաքրքրությունից

Ավանդական CSS չափման ստորաբաժանումները ստեղծում են հետեւյալ խնդիրները Վեբ ձեւավորման մեջ.

• Չափման տոկոսի միավորը միշտ չէ, որ աշխատում է, ինչպես եւ սպասվում էր: Մշակողները պետք է հիշեն արտաքին ավանդները, սահմանելով տարրերի չափերը: Դուք չպետք է օգտագործեք չափման տոկոսի չափը `մարմնի տարրի բարձրությունը սահմանելու համար: Ձայնագրման տառատեսակի չափը. 50% -ը սահմանում է իր ստանդարտ չափի կեսին հավասար տեքստի չափը եւ չի սահմանում կախվածությունը տեքստի չափի եւ դրա տարրի չափի միջեւ:
• Գրեթե անհնար է ստեղծել դիտորդի պատուհանի տարբեր չափերի կատարյալ ձեւի թվեր: Շատ դժվար է ապահովել, որ տարրը կատարյալ քառակուսի է եւ միեւնույն ժամանակ հարմարեցված:

Չափման միավորներ vw եւ vh հիմնականում լուծում են այս բոլոր խնդիրները:

Իդեալական համամասնություններն աջակցելը

Օգտագործելով VW եւ VH չափման միավորներ, շատ հեշտ է կատարյալ թվեր ստեղծել վեբ էջերում: Այս ստորաբաժանումները կարող են օգտագործվել գրեթե բոլորի չափերը սահմանելու համար cSS հատկություններ, Հետեւաբար, եթե անհրաժեշտ է ստեղծել մի տարր, որը զննարկչի ցանկացած պատուհանի հետ տեւում է դրա լայնության 20% -ը եւ մնում է հրապարակ, դուք պետք է նշեք լայնության եւ բարձրության հատկությունների նույն արժեքները.

Div.twentysquare (ֆոն. # 999 ; Լայնությունը, 20vw; Բարձրություն, 20vw; )

Նայեք ստորեւ նշված օրինակի ցուցադրմանը, գնացեք հղմանը եւ փորձեք փոխել դիտման միավորի չափը `թվերի չափի փոփոխությունը տեսնելու համար:

Օգտագործելով նույն մեթոդը, դուք կարող եք հեշտությամբ ստեղծել ուղղանկյուն, որի բարձրությունը կրկնակի ավելին է, քան լայնությունը զննարկչի պատուհանի ցանկացած չափի.

Div.networect (լայնությունը `20vw; բարձրությունը, 40vw;)

Սահմանեք դրոշի, կատարյալ չափի հարաբերակցությունը շատ պարզ է CSS հետեւյալ կոդով.

Div.goldenrect (լայնությունը `100vw; բարձրությունը, 61 .8VW; ֆոն. Կարմիր;)

Հարմարվողական բլոկում օպտիմալ տեքստի մասշտաբի համար ներգրավվեք դրան տրամադրված բոլոր ծավալներով, պարզապես անհրաժեշտ է տեղադրել տառատեսակի չափը VW չափման միավորներում:

Թարգմանություն - Djurka

Հեղինակից. Ուղղանկյուն ներսից ուղղանկյուններ. Այսպես են կառուցվել մեր վեբ էջերը միշտ: Մենք փորձել ենք երկար ժամանակ ազատել ինքներդ ձեզ այս սահմանափակումներից, օգտագործելով CSS, օգտագործելով երկրաչափական թվեր ստեղծելու համար, բայց այդ թվերը երբեք չեն ազդել դեկորատիվ տարրերի ներսում, կամ ինչպես են այլ տարրեր գտնվում են համեմատաբար զարդարված բովանդակության վրա:

Թվերի համար CSS- ի նոր ճշգրտումը փոխում է իրերի ներկայիս դիրքը: Ներկայացվեց Adobe- ի 2012-ի կեսերին, այն նպատակ ունի վեբ դիզայներներին տալ համեմատաբար բարդ թվերի բովանդակության հոսքը եւ մի բան, որը մենք չէինք կարողանա հասնել նախկինում, նույնիսկ JavaScript- ը օգտագործելը:

Օրինակ, ուշադրություն դարձրեք, թե ինչպես է տեքստը հոսում կլոր նկարները հետեւյալ դիզայնի մեջ: Առանց թվերի, տեքստը կունենար ուղղանկյուն ձեւ `նետելով զտված ընդունելություն, որը դիզայնը բարձրացնում է հաջորդ մակարդակին:

Ուշադրություն դարձրեք, թե ինչպես է տեքստը այս օրինակում պարանոցի եզրերի երկայնքով կլորացված ձեւը վերցնում: Օգտագործելով CSS թվեր, մենք կարող ենք ստեղծել նման ձեւավորում եւ վեբ էջի համար.

Եկեք մանրամասն ուսումնասիրենք, թե ինչպես են գործը աշխատում եւ ինչպես կարող եք սկսել դրանք օգտագործել:

Զննարկչի աջակցություն

CSS- ի թվերը դեռեւս աջակցվում են միայն գիշերային եւ քրոմի տեսախցիկում, բայց դրանց 1 մակարդակի մոդուլը հասել է թեկնածուի առաջարկության կարգավիճակ, ուստի ճշգրտման մեջ սահմանված հատկությունները եւ շարահյուսությունը բավականին կայուն են: Դա մի փոքր ժամանակ կպահանջվի նախքան զննարկիչների մնացած մասը կսկսեն պահպանել դրանք: Այս մակարդակը կենտրոնացած է այդ գործիչների հոսքը փոխող գործիչների այն հատկությունների վրա: Մասնավորապես, այն կենտրոնանում է ձեւի դրսի գույքի վրա եւ կապված դրա հետ:

Վերջին այլ հնարավորությունների հետ միասին, ինչպիսիք են ծածկը եւ ծածկելու դիմակը, CSS ֆիլտրերը եւ հոլանդական եւ միաձուլումը, CSS թվերը թույլ կտան մեզ ստեղծել ավելի բարդ նուրբ դիզայն, առանց ֆոտոշոփի եւ InDesign- ի:

Ապագա CSS- ի մակարդակի թվերը նույնպես ուշադրություն կդարձնեն թվերի ներսում պարունակության ձեւավորմանը: Օրինակ, այսօր բավական է պարզապես CSS- ի վրա ռոմբիական գործիչ ստեղծել. Պարզապես տարրը վերածեք 45 աստիճանի, այնուհետեւ դրա ներսում վերածեք բովանդակությունը Հակադարձ ուղղությունԱյնպես, որ այն գտնվում է էջի վրա հորիզոնական: Բայց ռոմբուսի ներսում բովանդակությունը չի ստանա համապատասխան ձեւ եւ միշտ կմնա ուղղանկյուն: Ժամանակին ձեւավորված գույքը իրականացվում է, մենք կարող ենք բովանդակությունը դարձնել չափազանց ռոմբի, ստեղծելով նշույթ, որը նման է ստորեւ նկարին:

Շուտով CSS թվերը նույնպես թույլ կտան տեքստը ներսից ներխուժել, քանի որ այս ադամանդները `արտահոսքի կտորներ ստանալու փոխարեն, տեքստն ինքնին գտնվում էր կոնտեյների ծայրերի համեմատ.

Այսօր CSS թվեր օգտագործելու համար Chrome Canary- ում անհրաժեշտ է միացնել այն մուտքի վանդակը, որը դարձնում է մատչելի փորձարարական հատկություններ:

CSS գործչի ստեղծում

Դուք կարող եք գործիչը կիրառել տարրին `օգտագործելով ձեւերի հատկությունները: Դուք փոխանցում եք գործչի գործիչը արժեքի որակի մեջ: Գործառույթի գործառույթը կոդի այն մասն է, որտեղ դուք անցնում եք այն պարամետրերը, որոնք սահմանում են այն ցուցանիշը, որը ցանկանում եք դիմել ապրանքի վրա:

Թվերը կարող են ստեղծվել հետեւյալ գործառույթներից մեկի միջոցով.

Յուրաքանչյուր գործիչ որոշվում է մի շարք կետերով: Որոշ գործառույթներ միավորներ են պահանջում որպես պարամետրեր. Մյուսները. Ընդունեք օֆսեթ պարամետրերը, բայց դրանք, ի վերջո, տարրերի վրա գործիչներ են նկարելու որպես միավոր: Այս գործառույթներից յուրաքանչյուրի համար մենք վերլուծելու ենք պարամետրերը:

Նկարը կարող է որոշվել նաեւ պատկերից `հեռացնելով Alpha Channel- ը: Երբ պատկերը փոխանցվում է ձեւի գույքին, զննարկիչը վերցնում է պատկերից այդ ցուցանիշը `հիմնվելով ձեւի պատկերով-շեմի արժեքի վրա: Գծապատկերը որոշվում է պիքսելներով, որի ալֆա արժեքը սահմանված շեմից բարձր է: Պատկերը պետք է ունենա Cors համատեղելիություն: Եթե \u200b\u200bինչ-ինչ պատճառներով տրամադրված պատճառը մատչելի չէ (օրինակ, այն գոյություն չունի), ապա ոչ մի գործ չի կիրառվի:

Հետեւյալ թվերը վերցնում են վերը նկարագրված գործառույթները որպես արժեքներ.

Ձեւի դրսից. Պատճառում է բովանդակությունը `ձեւը վերածելու համար (դրսում)

Ձեւաձեւ ներս. Բովանդակությունը ներսից վերցնում է գործչի ձեւը

Կարող եք օգտագործել ձեւի դրսի գույքը `ձեւի մարժայի հետ միասին, որպեսզի գործչի շուրջը արտաքին շիճուկ ավելացվի, որը բովանդակությունը կտեղափոխի գործիչից, թողնելով նրանց միջեւ տարածությունը: Բացի այդ, ինչպես եւ ձեւը դրսից ստանում են ձեւի մարժան գույքը, ձեւը ներսից ստանում է ձեւի լիցքավորման գույք, որն ավելացնում է ներքին կցորդ:

Օգտագործելով գործչի կամ գործառույթի հատկությունները, հայտարարելով ձեւի տարրը, կարող եք անել միայն մեկ տող CSS կոդով.

Element (ձեւը դրսում. Շրջանակ (); / * Բովանդակությունը կներկայացնի սահմանված շրջանակը տարր * /)

Element (ձեւ, դրսում. URL (ուղի / to / պատկեր-ձեւով. Png);)

Տարր (ձեւ - դրսում. URL (ուղի / to / պատկեր - ձեւի););)

Բայց ... Եթե այս տողը CSS ծածկագիր եք կիրառել, ապա այդ գործիչը չի կիրառվի դրա վրա, եթե հետեւյալ պայմանները չեն բավարարվում.

Տարրը պետք է լինի լողացող: Ապագա CSS- ի թվերի մակարդակը մեզ թույլ կտա նույնականացնել ոչ լողացող տարրերի թվերը, բայց նման հնարավորություն չկա:

Տարրը պետք է նշվի: Տարրով սահմանված բարձրությունն ու լայնությունը կօգտագործվի համակարգված համակարգը հաստատելու համար:

Ինչպես տեսնեք վերը նշված գործառույթներում, թվերը որոշվում են մի շարք կետերով: Քանի որ միավորները կոորդինատներ ունեն, զննարկիչը պահանջում է համակարգված համակարգ, իմանալու, թե որտեղ պետք է տեղակայվի յուրաքանչյուր կետ: Այսպիսով, օրինակը կաշխատի վերեւում, եթե այն ունենա հետեւյալը.

Տարր (բոցեր, ձախ; բարձրությունը, 10 գ; լայնություն, 15 գ; ձեւ, դրսում. Շրջանակ (););

Տարր (float: ձախ; բարձրությունը, 10 գ; լայնություն, 15EM; ձեւը `դրսում, շրջան (););

Այնուամենայնիվ, որոշակի չափերի խնդիրը չի ազդում նրա պատասխանատուության վրա (մենք դրա մասին կխոսենք ավելի ուշ): Քանի որ յուրաքանչյուր ցուցանիշ սահմանվում է որպես մի շարք միավորներ, օգտագործելով զույգ կոորդինատներ, կետի կոորդինատների փոփոխությունը կազդի ստեղծված գործչի վրա: Օրինակ, հաջորդ ցուցանիշը ցույց է տալիս վեցանկյուն, որը կարող է ստեղծվել `օգտագործելով բազմակն () գործառույթը: Գործիչը բաղկացած է վեց կետից: Orange Point- ի հորիզոնական կոորդինատը փոխելը կփոխի վերջնական գործիչը եւ կազդի նաեւ բովանդակության տեղաբաշխման մեջ / դրսում ցանկացած կետի վրա, որի վրա կիրառվում է ցուցանիշը:

Եթե \u200b\u200bտարրը լողում է եւ հավասար է աջ եզրին, դրա վրա գործիչ է կիրառվում, ձախից բովանդակությունը կփոխի իր գտնվելու վայրը, երբ կփոխվի Polygon () գործառույթի ներսում գտնվող Orange Point համակարգումներից մեկը.

Հղման բլոկի գործիչ

CSS թվերը սահմանվում եւ ստեղծվում են հղման բլոկում (հղումատուփ), որտեղ նկարվում է ցուցանիշը: Բացի տարրի բարձրությունից եւ լայնությունից, տարրի բլոկի մոդելի բաղադրիչները `մարժայի տուփ, բովանդակության տուփ, լցնել տուփ եւ սահմանային տուփը նաեւ դիրեկտորիաներ են` տարրերի ցուցանիշը որոշելու համար:

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

Ձեւաթուղթ. Շրջանակ (250px 50% 50%) լիցքաթափման տուփ;

Ձեւաթուղթ - դրսում. Շրջանակ (250px 50% 50%) լիցքավորում - տուփ;

Այս կանոնում լիցքավորվող բառի հիմնաբառը որոշում է գործչի կիրառումը եւ սահմանափակումը լիցքաթափման տուփի տեսքով (ներքին ամբարտավանության տարածքը): Շրջանակի () գործառույթը որոշում է շրջանակը, դրա չափը եւ տեղադրումը `համեմատած նյութի հետ:

Գործառույթների միջոցով գործիչների սահմանում

Մենք կսկսենք այն փաստով, որ մենք կզբաղենք օգտագործողի avatar- ի շրջանաձեւ պատկերի տեղեկատվական տեքստը, ինչպես օգտվողի պրոֆիլը կամ հիշեցումը:

Օգտագործելով CSS ձեւերը, օգտագործողի պատկերի շուրջ տեքստը պարզեցված է, փոխարենը ուղղանկյուն ձեւը խնայելու փոխարեն:.

Մենք կօգտագործենք շրջանակի () գործառույթը `կլոր ձեւը պրոֆիլի պատկերին կիրառելու համար, օգտագործելով հետեւյալ նշանը.

LOREM IPSUM DOLOR SIT AMET, Consertetur adipicing Elit. Harum Itaque NAM Banditis Eveniet Eligendi Quae Adipisci?

Assumenda Blanditiis Voluptas Tempore Porro Quibusdam Beata Deleniti Quod asperiores Sapiente Dolorem Error. Quo nam quasi soluta Reprependerit լաուդանտիա օպտիմալ ipsam ducimus հետեւանքներ, որոնք Fuga Quibusdam Mollitia Nesciunt Modi.

< img src = "//api.randomuser.me/0.3.2/portraits/men/7.jpg"alt \u003d »(! Lang: Անձնագիր պատկերը" / > !}< p > LOREM IPSUM DOLOR SIT AMET, Consertetur adipicing Elit. Harum Itaque NAM Banditis Eveniet Eligendi Quae Adipisci?< / p > < p > Assumenda Blanditiis Voluptas Tempore Porro Quibusdam Beata Deleniti Quod asperiores Sapiente Dolorem Error. Quo nam quasi soluta Reprependerit լաուդանտիա օպտիմալ ipsam ducimus հետեւանքներ, որոնք Fuga Quibusdam Mollitia Nesciunt Modi.< / p >

Կարող եք հարցնել. «Ինչու չենք կարող սահմանի շառավիղը կիրառել` կլորացման համար »: Պատասխան. Սահմանային շառավղի ունեցվածքը չի ազդում պարունակության գտնվելու վայրի եւ դրսի այն կետի վրա, որին կիրառվում է: Դա ազդում է միայն տարրի կամ նախապատմության սահմանների վրա: Նախապատմությունը կտրվում է կլորացված անկյուններում, բոլորը: Տարրերի ներսում բովանդակությունը կմնա ուղղանկյուն, իսկ տարրի սահմաններից դուրս բովանդակությունը նույնպես կվարվի, կարծես տարրը մնում է ուղղանկյուն:

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

img (float: ձախ; լայնություն, 150px; բարձրությունը `150px; սահման - շառավղ, 15px;)

Առանց CSS թվերի, տեքստը նկարը տեսնում է որպես հրապարակ եւ կապում է հրապարակի գործիչը եւ ոչ թե կլոր.

Զննարկչի մեջ, որը չի պաշտպանում CSS ձեւերը, կլոր պատկերի շուրջ բովանդակությունը տեղակայված կլինի այնպես, կարծես թե կլոր չէ: Այսպես է թվում հին զննարկիչներում: Հատուկ գործչի շուրջ բովանդակության ուղղումը փոխելու համար օգտագործեք գործչի հատկությունները:

img (float: ձախ; լայնություն, 150px; բարձրությունը, 150px; սահմանի շառավիղ. 50%; 15px;)

iMG (Float: Left; Լայնություն, 150px; Բարձրություն, 150px; Սահման - շառավղ, դրսում. Շրջանակ - մարժա, 15px;)

Այս օրենսգրքի օգնությամբ տեքստը կկարողանա «տեսնել» կլոր գործիչը, որը կիրառվում է պատկերի վրա, եւ կներկայացնի այն, ինչպես ցույց է տրված առաջին էկրանի շոտում: (Դուք կարող եք նայել արդյունքին): դիտարկիչներում, որոնք չեն աջակցում թվերին, այն նման կլինի երկրորդ պատկերում:

Կարող եք օգտագործել շրջանակը () գործառույթը Մաքուր ձեւ Կամ պարամետրերը փոխանցեք դրան: Ահա նրա պաշտոնական շարահյուսությունը.

Շրջան () \u003d շրջան ([ ]? ? [AT.< position > ] ? )

Հարցի նշանները ցույց են տալիս, որ այս պարամետրերը ըստ ցանկության են եւ կարող են բաց թողնել: Ձեր կարոտած պարամետրերը կստանան լռելյայն արժեքներ: Երբ օգտագործում եք շրջանակը (), ինչպես կա, դիրքի ուղղակի ցուցման փոխարեն, լռելյայն, շրջանակի կենտրոնը կլինի այն իրի կենտրոնում, որտեղ դուք կիրառում եք այն:

Կարող եք տեղադրել շրջանակային շառավիղ, օգտագործելով երկարության ցանկացած երկարություն (PX, EM, PT եւ այլն): Կարող եք նաեւ շառավիղը օգտագործել `օգտագործելով պարամետրերը` օգտագործելով ամենամոտ կամ ամենահեռանկարը, բայց ամենամոտը լռելյայն արժեքն է Նշանակում է, որ զննարկիչը ստանձնելու է շառավիղի հեռավորությունը տարրի կենտրոնից մինչեւ մոտակա կողմը, ամենահեռավոր կողմը կենտրոնից հեռավորության վրա է օգտագործում հեռավորության վրա:

Ձեւի դրսում. Շրջանակ (ամենահեռավոր կողմը 25% 25%); / * Որոշում է այն շրջանակը, որի շառավղը հավասար է կեսօրին ամենաերկար կողմին, որը գտնվում է 25% 25% -ով `համաձայնեցված համակարգում * / ձեւի ներսում. Շրջանակ (250px); / * Որոշում է շրջանակը, որի կենտրոնը գտնվում է 500px հորիզոնական եւ 300px ուղղահայաց, 250px շառավղով * /

Ellipse- ի () գործառույթի աշխատանքները, ինչպես նաեւ շրջանակը () նույն արժեքներով, բացառությամբ այն, որ շառավղագծի պարամետրերի փոխարեն տեւում է երկու.

Էլիպս () \u003d էլիպս ([ (2)]? ? [AT.< position > ] ? )

Inset () գործառույթը ուղղակիորեն կապված չէ շրջանի կամ էլիպսի հետ, այն օգտագործվում է տարրի ներսում ուղղանկյուն ձեւեր ստեղծելու համար: Քանի որ իրերը երկուսն էլ ուղղանկյուն են, անհրաժեշտ չէ ուղղանկյուններ ստեղծել: Փոխարենը, Inset () կարող է օգնել մեզ ստեղծել ուղղանկյուններ կլորացված անկյուններով, որպեսզի բովանդակությունը հոսում է կլորացված անկյուններով:

Inset () գործառույթը տեւում է մեկից չորս օֆսեթ պարամետրեր, որոնք որոշում են օֆսեթը `համեմատած հղման միավորի եզրերի հետ, որը որոշում է տարրի ներսում ուղղանկյունի գտնվելու վայրը: Կլորացված անկյունները նշված են ճիշտ այնպես, ինչպես սահմանային շառավղով, օգտագործելով չորս արժեքներից մեկը, հիմնաբառի հետ միասին:

Ներկայացրեք () \u003d inset (օֆսեթ (1,4)?)

inset () \u003d inset (օֆսեթ (1, 4) [տուր< border - radius > ] ? )

Հետեւյալ ծածկագիրը կկազմի ուղղանկյուն կլորացված անկյուններով լողացող տարրով:

Տարր (float: ձախ; լայնություն, 250px; բարձրությունը, 150px; ձեւը դրսում. Inset (0px շուրջ 100px) սահմանի տուփ;)

Տարր (float: ձախ; լայնություն, 250px; բարձրությունը `150px; ձեւ - դրսում. Inset (0px շուրջ 100px) սահման - տուփ;)

Թվերի վերջին հատկությունը բազմակն է (), որը սահմանում է ավելի բարդ երկիմաստ գործիչներ, օգտագործելով ցանկացած քանակի միավոր: Գործառույթը վերցնում է գոլորշու կոորդինատների մի շարք, որտեղ յուրաքանչյուր զույգ որոշում է կետի դիրքը:

Հաջորդ օրինակում լողացող պատկերը գտնվում է աջ եզրին, զբաղեցնելով էկրանի ամբողջ բարձրությունը եւ օգտագործելով դիտման պատուհանի տեսակետները: Մենք ցանկանում ենք, որ տեքստը ձախ բարձրանում գտնվող ժամացույցի վրա գտնվող ժամացույցի ժամացույցի ժամացույցը, եւ մենք օգտագործում ենք պոլիգոնային () գործառույթը `պատկերի համար ոչ ստանդարտ գործիչը որոշելու համար:

CSS- ը վերեւում պատկերի ծածկագիրը հետեւյալն է.

img.right (float: Right; Բարձրություն, 100VH; Լայնություն. Calc (100VH + 100VH / 4); 40% 100%, 40% 100%, 40% 60 %, 45% 40%);)

img. Right իշտ է (Float: Right իշտ; Բարձրություն, 100VH; Լայնություն, CACK (100VH + 100VH / 4); ձեւավորում (40% `100%, 45% 60%, 45% 40%);)

Դուք կարող եք սահմանել կետերի կոորդինատները, որոնք որոշում են տեւողությունը երկարության կամ տոկոսի կամ տոկոսների միավորներով: Այս ծածկագիրը կտա անհրաժեշտ արդյունքը, բայց, ինչպես տեսնում եք, գործչի գործառույթը չի ազդում նշված ցուցանիշից դուրս պատկերի մնացած մասերի վրա: Փաստն այն է, որ գործչի գործառույթի օգտագործումը տարրն է. Արդյոք դա պատկեր է, թե բեռնարկղ կամ այլ բան, չի ազդի այլ բանի վրա, քան բովանդակության բովանդակության այլ բան: Նախապատմությունը, սահմանները եւ մնացած ամեն ինչ կմնան անփոփոխ:

Ստեղծված պոլիգոնն տեսողականորեն ներկայացնելու համար մենք պետք է «տրոհենք» պատկերի մասերը նկարից դուրս: Սա կօգնի մեզ clip-path- ի գույքը CSS- ի դիմակավորող մոդուլի բնութագրերից:

Clip-Path- ի գույքը վերցնում է ձեւի նույն գործառույթները եւ իմաստը `որպես գործչի սեփականությունը: Եթե \u200b\u200bմենք տալիս ենք նույն բազմակնալից գործիչը, որը մենք օգտագործում էինք ձեւի դրսի գույքի համար, տեսահոլովակի պահակը, դա կուրախացնի նկարից դուրս պատկերի մասը:

img.right (float: Right; Բարձրություն, 100VH; Լայնություն. Calc (100VH + 100VH / 4); 40% 100%, 40% 100%, 40% 60 %, 45% 40%); / * Նկարներ նկարել նկարի վրա * / clip-path: Polygon (40% 0, 100%, 45% 60%, 45% % 40%);)

img. Right իշտ է (Float: Right իշտ; Բարձրություն, 100VH; Լայնություն, CACK (100VH + 100VH / 4); ձեւավորում (40% `100%, 45% 60%, 45% 40%); / * Նկարներ նկարել նկարի ուրվագծի վրա * /clip - Ուղի, պոլիգոն (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 40%); )

Արդյունքը այսպիսին է.

Clip-Path- ի գույքը դեռեւս ապահովված է նախածանցի հետ միասին, այսինքն: Այն կաշխատի Chrome- ում `նախածանցի լրացումով. Webkit: Կարող եք նայել ցուցադրությանը:

Clip-Path- ի գույքը հիանալի արբանյակ է գործչի գործչի համար, քանի որ այն օգնում է տեսողականորեն ներկայացնել ստեղծված ձեւերը եւ բերքի մասերը գործիչից դուրս, որպեսզի դրանք շատ հաճախ օգտագործվեն միասին:

Պոլիգոնային () գործառույթը նույնպես ընդունում է պարտադիր Հիմնաբառ Լրացնելու համար, որը կարող է լինել ոչ-ներոզ, կամ նույնիսկ Evenodd: Այն սահմանում է, թե ինչպես կվարվեն բազմապրոջի ներսում գտնվող խաչմերուկային տարածքները: Մանրամասների համար ստուգեք SVG լրացման գույքը:

Պատկեր օգտագործող գործչի սահմանում

Պատկերը օգտագործող գործիչը սահմանելու համար Alpha Channel- ը պետք է ներկա լինի պատկերում, որից զննարկիչը արդյունահանվի պատկերը:

Գործիչը որոշվում է պիքսելներով, որոնց ալֆա արժեքը ավելի բարձր է, քան որոշակի շեմը: Լռելյայն շեմի արժեքը լավ է (ամբողջովին թափանցիկ), կամ կարող եք այն հստակեցնել ուղղակիորեն օգտագործելով ձեւի պատկեր-շեմի գույք: Այսպիսով, ցանկացած անթափանց պիքսելը կարող է օգտագործվել որպես պատկերով սահմանված գործչի մաս:

CSS- ի ապագա մակարդակի թվերը կարող են թույլ տալ փոխարկել պատկերի պայծառության տվյալների օգտագործումը Alpha Channel- ի փոխարեն: Եթե \u200b\u200bդա տեղի ունենա, ձեւի պատկեր-շեմն երկարաձգվի `ներառելու շեմն կամ պայծառության կամ Alpha Channel- ի համար, կախված անջատիչ վիճակից:

Մենք օգտագործում ենք հետեւյալ պատկերը `տարրերի գործիչը որոշելու եւ տեքստը ստիպելու համար այն պնդել.

); Ձեւաթուղթ - մարժա, 15px; Ձեւը - Պատկեր - Շեմ: 0.5; Նախապատմություն. # 009966 URL (ուղի / to / background-image.jpg); Դիմակ-պատկեր, URL (տերեւ .png); )

Իհարկե, եթե ռեժիմի ֆոնին կիրառեք, ապա նախապատմությունը պետք է սահմանափակի նշված ցուցանիշից դուրս: Դիմակների պատկերով գույքը (համապատասխան նախածանցով) Դիմակների մոդուլից կարող է օգնել դրանում, քանի որ Clip-Path- ի գույքը չի ընդունում Alpha Channel- ի արժեքը որպես արժեք: Արդյունքը այսպիսին է.

Եթե \u200b\u200bստեղծում եք բարդ թվեր, գուցե հարմար լինեք նկարը օգտագործելու համար: Սա թույլ կտա օգտագործել Alpha Image Channel- ը Photoshop- ում, փոխարենը միավորներ հավաքելու փոխարեն:

Դուք նաեւ հարմար կլինեք գործչի գործառույթի փոխարեն օգտագործելու պատկերը, երբ տարրերի ներսում ունեք շատ լողացող տարրեր կամ բացօթյա բացառություններ այս պահին Հնարավորություն չկա մի քանի թվեր հայտարարելու մեկ տարր: Բայց եթե պատկերը պարունակում է մի քանի տարածքներ, զննարկիչը կհեռացնի այս տարածքները եւ կօգտագործի դրանք:

CSS թվեր արձագանքող ձեւավորման մեջ

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

Ձեւաձեւի ներսում գտնվող գույքը դեռ պատասխանատու չէ, բայց դա այն է, որ այն տեղափոխվել է 2-րդ մակարդակի մոդուլ: Նրա ներկայիս սահմանափակումներից շատերը կընթանան հաջորդ մակարդակում:

Գործիքներ ստեղծելու համար գործիքներ

Գործառույթների օգտագործմամբ բարդ թվերի ստեղծումը կարող է լինել ժամանակատար առաջադրանք, մանավանդ, եթե ստեղծում եք միավորների բազմակարծություն եւ կոորդինատներ, օգտագործելով բազմակն (): Բարեբախտաբար, Adobe- ի վեբ պլատֆորմի թիմը աշխատում է ինտերակտիվ գործիքների արտադրության վրա, այս գործընթացը շատ ավելի հեշտ դարձնելու համար: Bear Travis- ը ստեղծել է գործիքների հավաքածու `թվեր ստեղծելու համար, որոնք թույլ են տալիս տեսողականորեն ստեղծել բազմակնապահ գործիչներ: Գործիքը առաջացնում է գործչի գործառույթը: Դա կարող է օգտակար լինել, բայց ունի իր սահմանափակումները, եթե գնում եք ստեղծել որոշակի պատկերի հիման վրա գործիչ, քանի որ գործիքը նման հնարավորություն չի տալիս:

Adobe Web Platform- ի կողմից մշակվել է ավելի առաջադեմ եւ ինտերակտիվ գործիք: Վերջերս գործիքը թողարկվեց որպես ընդլայնում փակագծերի անվճար խմբագրի համար: Այն թույլ է տալիս պատկերացնել եւ խմբագրել ձեւերը ճիշտ զննարկչի մեջ եւ առցանց նախադիտման հնարավորություն ունի, որը թարմացնում է ձեւի արժեքները ոճային աղյուսակում: Այն տալիս է ակնթարթային տեսողական հետադարձ կապ Ձեր փոփոխությունները, թույլ տալով տեսնել, թե ինչպես են թվերը շփվում էջի այլ տարրերի հետ:

Խմբագրելով պոլիգոնալ գործիչը հենց զննարկչի մեջ `օգտագործելով նախադիտման ռեժիմը փակագծերում: Էկրանի մուտքը դարձավ Ռազվան Կալիին.

Այս գործիքը կդառնա անփոխարինելի, քանի որ այն հեշտացնում է թվերի ստեղծումը, խմբագրումը եւ տապալումը: Ռազվան Կալիման, որը բացատրում է, թե ինչպես կարելի է զանգահարել փակագծերում ձեւի խմբագրին եւ սկսեք օգտագործել այն:

Ապագա. CSS բացառություններ

Թվերի CSS- ի ճշգրտումը ճշգրտում էր `նվիրված CSS թվերին եւ բացառություններին, բայց բաժանվեց: Չնայած CSS գործիչը նշում է ձեւի ներսից եւ ձեւի դրսի հատկությունները, բացառություն CSS- ը սահմանում է հատկությունները, որոնք բովանդակություն են առաջացնում, օրինակ, բացարձակ դիրքավորմամբ: Նրանք հնարավորություն են տալիս ուժեղացնել ամբողջ գործիչը տարբեր կողմերից բովանդակությամբ, ինչպես ցույց է տրված ստորեւ նշված պատկերում:

Ապագայում CSS բացառությունները թույլ կտան բովանդակությունը սերտեցնել նման գործիչը, ինչպես կտրվածքը, ինչպես ցույց է տրված ամսագրի հերթին: Պղինձը կարող է նաեւ կլոր լինել, եւ տեքստը նույնպես դիպչի դրան:.

Թվերի նոր մակարդակ

Ընթացիկ CSS- ի թվերի ճշգրտումը պարզապես առաջին քայլն է: Շուտով նոր հնարավորություններ մեզ ավելի շատ վերահսկողություն կտան: Անհրաժեշտ է բովանդակություն ստեղծել եւ ամրապնդել, ուստի մեզ համար ավելի հեշտ կլինի դասավորության ձեւավորման մեջ մի քանի տողի միջոցով դասավորությունը վերածել: Մինչ օրս ճշգրտման խմբագիրները կենտրոնացած են արտաքին ձեւի ավարտի վրա, եւ կարող եք տեսնել CSS թվերի աջակցությունը մեծ քանակություն զննարկիչները մինչեւ 2014 թվականի վերջը:

Դուք կարող եք օգտագործել թվերը այսօր որպես առաջադեմ ուժեղացման ռազմավարության մաս, իմանալով, որ նրանք ընդունելի փոխարինում ունեն չօգտագործող զննարկիչներում: Վերջերս ես սկսեցի դրանք կիրառել իմ կայքում եւ փոխարինումը բավականին ընդունելի է թվում: Ավելի բարդ դիզայնի համար դուք կարող եք օգտագործել սցենար `զննարկչի աջակցությունը ստուգելու եւ որեւէ փոխարինում, եթե չլինի աջակցություն: Կարող եք նաեւ օգտագործել Modernizr թեստերը, օգտագործելով այս սցենարը, ստուգելու համար, թե արդյոք պահպանվում է ձեւի դրսի գույքը, թե ներբեռնեք ձեր սեփական ժողովը, որն իր մեջ ներառում է այս թեստը:

CSS թվերը մեզ թույլ են տալիս ստեղծել մեկ այլ կամուրջ տպագրության եւ վեբ ձեւավորման միջեւ: Այս հոդվածի օրինակները պարզ են, բայց դրանք պետք է հիմք տան ձեզ դիզայն ստեղծելու համար `համեմատելի ամսագրի կամ պաստառի հետ, առանց անհանգստանալու այն մասին, թե արդյոք կարող եք այն վերստեղծել էկրանին: Այսպիսով, դուք ուսումնասիրել եք `ոչ ուղղանկյուն նշաններից մինչեւ թվերի անիմացիա, այժմ փորձերի ժամանակը:

Վլադ Մերզեեվիչ

Կայքերում, եռանկյունիները կիրառվում են ընդհանրապես եւ փակվում են որպես դիզայնի տարրերի մաս, օրինակ, նրանք ծառայում են որպես որոշակի օբյեկտի ցուցիչ, ընթերցողի ուշադրությունը ճիշտ տեղում են: Նաեւ եռանկյունները կատարում են դեկորատիվ գործառույթներ, պատրաստելով բլոկներ, որտեղ դրանք օգտագործվում են, ավելի էլեգանտ եւ ժամանակակից: Նկ. 1-ը ցույց է տալիս դիզայնի եռանկյունի օգտագործման օրինակ:

ՆկՂ 1. Եռանկյուններ վեբ ձեւավորման մեջ

Ուղղակիորեն եռանկյուն արեք cSS գործիքներ Դա անհնար է, ուստի երկու մեթոդ թույլ են տալիս ձեզ ավելացնել սահմանը եւ վերափոխվել:

Օգտագործելով սահման:

Չնայած սահմանային ունեցվածքի միջոցով ստեղծված սահմանները ուղղակիորեն կապված չեն եռանկյունների հետ, այն սահմանն է, որ դրա համար ամենից հաճախ օգտագործվի: Եթե \u200b\u200bդուք սահմանում եք տարրի զրոյական լայնությունը եւ բարձրությունը, ինչպես նաեւ տեղադրել բավականաչափ հաստ սահման, մենք կտեսնենք չորս եռանկյունի մի շարք (Նկար 2): Պարզության համար բոլոր կողմերի սահմանները տարբեր գույներ են սահմանվում:

ՆկՂ 2. Սահմանին ավելացնելը

Թողնելով միայն ցանկալի սահմանը, իսկ մնացածը `թափանցիկ գործելով, մենք ստանում ենք ցանկալի գույնի եռանկյուն (Նկար 3):

ՆկՂ 3. Տարրը թափանցիկ սահմաններով

Օրինակ 1-ը ցույց է տալիս եռանկյունի հավելումը բլոկի միջոցով կեղծ տարրերի միջոցով `Pseudo-Element- ի միջոցով:

Օրինակ 1. Բլոկ եռանկյունով

Բացարձակապես տեղադրված տարրերի համար զրոյական լայնությունն ու բարձրությունը անհրաժեշտ չէ:

Սահմանների համադրման պատճառով դուք կարող եք ստանալ եւս չորս եռանկյունի, որոնք, արդեն իսկ նշվել են, մեզ տալիս են ութ տարբերակ: Նրանց տեսքը եւ պահանջվող ծածկագիրը ներկայացված են աղյուսակում: մեկը

Աղյուսակ: 1. Եռանկյունների հնարավոր տեսակներ

Տեղավորել	Ոճ
	Սահման, 20px պինդ թափանցիկ; Սահման-վերեւ, 20px պինդ կանաչ;
	Սահման, 20px պինդ թափանցիկ; Սահմանի աջ, 20px ամուր կանաչ;
	Սահման, 20px պինդ թափանցիկ; Սահմանի հատակը. 20px ամուր կանաչ;
	Սահման, 20px պինդ թափանցիկ; Սահման-ձախ. 20px ամուր կանաչ;
	Սահման, 20px պինդ թափանցիկ; Սահման-վերեւ, 20px պինդ կանաչ; Սահմանի աջ, 20px ամուր կանաչ;
	Սահման, 20px պինդ թափանցիկ; Սահմանի աջ, 20px ամուր կանաչ; Սահմանի հատակը. 20px ամուր կանաչ;
	Սահման, 20px պինդ թափանցիկ; Սահմանի հատակը. 20px ամուր կանաչ; Սահման-ձախ. 20px ամուր կանաչ;
	Սահման, 20px պինդ թափանցիկ; Սահման-ձախ. 20px ամուր կանաչ; Սահման-վերեւ, 20px պինդ կանաչ;

Աղյուսակից կարելի է տեսնել, որ անտեսանելի սահմանները տեղ են գրավում, հաշվի առեք այն, երբ իրերը դիրքավորվեն: Ոճը, ինչպես նաեւ անհրաժեշտ է ավելացնել զրոյական լայնություն եւ բարձրություն, կամ օգտագործել դիրքի գույքը, ինչպես արվեց 1-ին:

Եռանկյունը կարող է իրականացվել մեկ այլ ձեւով, եթե սահմանի սահմանների տարբեր հաստություն: Այսպիսով, FIG- ում ցուցադրված բլոկ ստեղծելու կոդը: 4-ը տրվում է օրինակ 2-ում:

ՆկՂ 4. Սուր եռանկյուն

Օրինակ 2. Սուր եռանկյուն

Սահմանով մենք ստանում ենք ամուր գունավոր եռանկյուններ, ստեղծել FIG- ում ցուցադրված շրջանակ: 5-ը պետք է գնա խորամանկ եւ մեկ տարր պարտադրեն մյուսի վերեւում `մի փոքր տեղաշարժով: Կրկին, կեղծ տարրերը կօգնեն մեզ. Նախքան եւ. Հետո (օրինակ 3):

ՆկՂ 5. Շրջանակ անկյունով

Օրինակ 3. Ծածկույթի եռանկյունիներ

Շնորհիվ այն բանի, որ մենք օգտագործում ենք մեկ մեկ տարր մյուսի վերեւում, այս մեթոդը հարմար է միայն միապաղաղ լրացնելու համար եւ հարմար չէ գրադիենտների կամ ֆոնային նկարների համար:

Փոխակերպման օգտագործումը

Փոխակերպման օգնությամբ մենք կարող ենք քառակուսի տարրը 45 ° -ով պտտեցնել եւ դրանից ռոմբուս ստանալ: Սա որպես այդպիսին չէ, այնպես որ մենք պետք է հեռացնենք դուրս պրծած մասը մեզանից, իսկ մնացածը, մեկ այլ տարրից հետո (օրինակ, 4):

Օրինակ 3. Փոխակերպում

Այս օրինակի արդյունքը ցույց է տրված Նկ. 6.

ՆկՂ 6. Եռանկյունի ստվերով

Առցանց CSS3 գեներատոր `կտրուկ գրաֆիկայի էֆեկտներ ստեղծելու եւ դրանց CSS ծածկագիրը ստանալու համար: Դուք կարող եք առանձնացնել ոճերը տարբեր պետությունների համար, ինչպիսիք են, Հովեր, ակտիվ եւ այլն: Ձեր ձեռքերը ինտերֆեյս են ստանում բարդ ստվերներ, գրադիենտներ, 3D էֆեկտներ, տեքստով էֆեկտներ ստեղծելու համար եւ շատ ավելին: Ծրագիրն ունի իր պատկերասրահի էֆեկտները, որոնցից կարող եք սկսել ձեր զարգացումը: Ծրագրի առանձնահատկությունն այն է, որ դուք կարող եք ոճեր ստանալ Առանձին տարրՕրինակ, ստվերի կամ գրադիենտի համար:

Երբ առաջին անգամ մուտք եք գործում կայք, մենք առաջարկում ենք մեզ ստեղծել մուտքագրման դաշտի, կոճակների, բլոկի կամ ընտրելու պատրաստի օրինակ, պատրաստի պատկերասրահից: Եկեք սկսենք մի բանից մի բանից, օրինակ, երկրաչափական թվերի պատկերասրահից: Ընտրեք պատկերասրահից Են-Յանգը եւ կտտացրեք «Ստացեք կոդը» վերին աջ անկյունում.

Կցուցադրվեն պատրաստի CSS ներկայիս զարգացման, ինչպես նաեւ hTML- ի օրինակ Կոդ: Ծրագրի պատկերասրահն ունի նույնիսկ ավելի քան 20 բաց, CSS տարբեր թվերի եւ, իհարկե, կարող եք ստեղծել ձեր սեփականը:

Պատկերասրահի քայլը մենք տեսնում ենք կոճակները, Տեքստի դաշտեր, Էֆեկտներ ուղղակիորեն տեքստի համար, վերոհիշյալ թվերը եւ գրադիենտների հավաքածուները: Մենք խաղում ենք տեքստի հետեւանքների հետ.

Կայքը - Wow It "S 3D!

Պետք է նկատել, որ CSS- ն զարմանալիորեն շատ մաքուր է եւ ընթեռնելի, ինչը շատ գոհ է: Եկեք նայենք մի տեսակ խելոք կոճակի.

Կայքի զով կոճակը:

Լրացուցիչ հատկանիշները ներառում են տեղական վիճակում ձեր վիճակը խնայել: Եթե \u200b\u200bպատահաբար փակեցիք ներդիրը, ապա հաջորդ անգամ կայք գնալիս ձեր բոլոր փոփոխությունները կմնան ձեր կողքին:

Երբ օգտագործում են ոչ ստանդարտ տառատեսակներ Google տառատեսակներ: Վայելքը ավտոմատ կերպով դրանք ավելացնում է որպես HTML օրինակ: Իմ դեպքում, տեքստի եւ կոճակների համար դա կարծես այսպիսին է.

Վերջնական CSS- ը բավականին ծանրակշիռ է, ուստի ես այն բերում եմ միայն հոդվածի վերջում.

Yin-Yang (
Float: Ձախ;
Լայնությունը `96px;
Բարձրություն, 48px;
Պաշտոն, ազգական;
Սահման, 2px պինդ # F81;
Սահմանի ներքեւի լայնությունը `50px;
-Երբ-Սահման-շառավիղ. 100%;
Սահման-շառավիղ. 100%;
Գույն, RGBA (0,0,1);
-Ո-տեքստ-արտահոսք. Clip;
Տեքստ-արտահոսք. Clip;
-Երբ-վերափոխում. Rotatez (-45deg) մասշտաբով (1) մասշտաբով (1) մասշտաբով (1);
Փոխակերպում. Rotatez (-45deg) մասշտաբով (1) մասշտաբով (1) սանդղակ (1);
ՏՐԱՆՍՊՈՐՏ-ԾՐԱԳԻՐ. 50% 50% 0;

Yin-yang :: առաջ (
Լայնությունը `12px;
Բարձրություն, 12px;
Պաշտոն, բացարձակ;
Բովանդակություն. "";
Վերեւ, 50%;
Ձախ. 0;
Սահման, 18px պինդ # F81;
-Երբ-Սահման-շառավիղ. 100%;
Սահման-շառավիղ. 100%;
Տառատեսակ. Նորմալ նորմալ նորմալ 100% / Նորմալ արիալ, Helvetica, sans-serif;
Գույն, RGBA (0,0,1);
-Ո-տեքստ-արտահոսք. Clip;
Տեքստ-արտահոսք. Clip;
Նախապատմություն. RGBA (255,255,255,1);
Տեքստ-ստվեր. Ոչ մեկը;

-Երբ-վերափոխման-ծագում. 50% 50% 0;
ՏՐԱՆՍՊՈՐՏ-ԾՐԱԳԻՐ. 50% 50% 0;
}

Yin-yang :: Հետո (
Լայնությունը `12px;
Բարձրություն, 12px;
Պաշտոն, բացարձակ;
Բովանդակություն. "";
Վերեւ, 50%;
Ձախ, 50%;
Սահման, 18px պինդ rgba (255,255,25,1);
-Երբ-Սահման-շառավիղ. 100%;
Սահման-շառավիղ. 100%;
Տառատեսակ. Նորմալ նորմալ նորմալ 100% / Նորմալ արիալ, Helvetica, sans-serif;
Գույն, RGBA (0,0,1);
-Ո-տեքստ-արտահոսք. Clip;
Տեքստ-արտահոսք. Clip;
Նախապատմություն. # F81;
Տեքստ-ստվեր. Ոչ մեկը;
-Էբկիտ-վերափոխում. Մասշտացված (1) մասշտաբային (1) մասշտաբ (1);
Փոխակերպում. Մասշտացված (1) մասշտաբային (1) մասշտաբ (1);
-Երբ-վերափոխման-ծագում. 50% 50% 0;
ՏՐԱՆՍՊՈՐՏ-ԾՐԱԳԻՐ. 50% 50% 0;
}

Վայելեք-CSS-3DTEXT (
Կուրսորը `ցուցիչ;
Սահման. Ոչ մեկը;
Տառատեսակ. Նորմալ նորմալ նորմալ 72px / նորմալ «Պասերո մեկ», Helvetica, sans-serif;
Գույն, RGBA (255,255,255,1);
Տեքստի հավասարեցում. Կենտրոն;
-Ո-տեքստ-արտահոսք. Clip;
Տեքստ-արտահոսք. Clip;
Տեքստ-ստվեր. 0.0.0,0980392), 0 0 5px RGBA (0,0,0,0,0980392), 0 1PX 3PX RGBA (0,0,0,0.298039), 0 3PX 5PX RGBA (0,0,0,0, 0,2), 0 5px 10PX RGBA (0.0.0.0.247059), 0 10px 10PX RGBA (0.0.0.0.2), 0 20px 20PX RGBA (0.0.0.0.0.14902);
-Վանակ-անցում. Բոլոր 300ms խորանարդ-բզեզ (0.42, 0, 0,58, 1);
-Մոզ-անցում. Բոլոր 300ms խորանարդ-բզեզ (0.42, 0, 0,58, 1);
-Որանցային անցում. Բոլոր 300ms խորանարդ-բզեզ (0.42, 0, 0,58, 1);
Անցում. Բոլոր 300ms խորանարդ-բզեզ (0.42, 0, 0,58, 1);
-Էբկիտ-վերափոխում. Մասշտացված (1) մասշտաբային (1) մասշտաբ (1);
Փոխակերպում. Մասշտացված (1) մասշտաբային (1) մասշտաբ (1);
-Երբ-վերափոխման-ծագում. 50% 50% 0;
ՏՐԱՆՍՊՈՐՏ-ԾՐԱԳԻՐ. 50% 50% 0;
}

Վայելեք-CSS-3DTEXT. Հովեր (
Գույն, RGBA (169,214,169,1);
Տեքստ-ստվեր. 0 1px 0 RGBA (255,255,25,1,1), 0 2PX 0 RGBA (255,255,25,1,1), 0 3PX 0 RGBA (255,25,2,25,25,25,25,25,25) , 2,1,25,25,1,2,1,25,1), 0 5PX 0 RGBA (255,255,255, 1), 0 6px 1PX RGBA (0,0,0,0,0980392), 0 0 5PX RGBA (0,0,0,0,0980392), 0 1PX 3PX RGBA (0,0,0,0,0,98039), 0 3PX 5PX RGBA (0,0,0,0,0.2), 0 - 5px 10px RGBA (0,0,0,0.247059), 0 -7px 10PX RGBA (0,0,0,0,0.20.2), 0 -15px 20PX RGBA (0.0, 0.0.14902);
-Վանակ-անցում. Բոլոր 200mms խորանարդ-բզեզ (0.42, 0, 0,58, 1) 10MS;
-Մոզ-անցում. Բոլոր 200mms խորանարդ-բզեզ (0.42, 0, 0, 0,58, 1) 10MS;
-Որանցային անցում. Բոլոր 200mms խորանարդ-bezier- ը (0.42, 0, 0, 0,58, 1) 10MS;
Անցում. Բոլոր 200mms խորանարդ-Բեզերը (0.42, 0, 0, 0, 0, 0, 0, 0, 0,58, 1) 10MS;
}

Հետադարձ կապ-կոճակ (
Display ուցադրել, ներածական բլոկ;
Float: Ձախ;
Պաշտոն, ազգական;
Կուրսորը `ցուցիչ;
Մարժան, 0 2% 0 0;
Լիցք, 12px 22px;
Արտահոսք. Թաքնված;
Սահման. Ոչ մեկը;
Տառատեսակ. Նորմալ նորմալ համարձակ 1.6EM / նորմալ «Syncopate», Helvetica, sans-serif;
Գույն, # ECF0F1;
-Ո-տեքստ-արտահոսք. Clip;
Տեքստ-արտահոսք. Clip;


-Մեկ
Նախապատմության ծագում. Պայթ-տուփ;
Background-clip` սահմանի տուփ;
Նախապատմության չափը. Ավտոմատ ավտո;
-Webkit-box-show: 0 10px 0 0 RGBA (178,49,49,1);
Box-Shadow: 0 10px 0 RGBA (178,49,49,1);
Տեքստ-ստվեր. 0 0 0 RGB (196,80,78), 1PX 1PX 0 RGB (196,80,78), 2PX 2PX 0 RGB (196,80,78) 3Px 3Px 0 RGB (196,80,78) ), 4px 4px 0 RGB (196,80,78), 5px 5px 0 RGB (196,80,78), 6px 6px 0 RGB (196,80,78), 8px 8px 0 RGB (196,80,78), 9px 9px 0 RGB (196,80,78), 10px 10px 0 RGB (196,80,78), 11px 11px 0 RGB (196,80,78), 12px 12px 0 RGB (196,80,78), 13px 13px 0 RGB (196,80,78), 14px 14px 0 RGB (196,80,78), 15px 15px 0 RGB (196,80,78), 16px 16px 0 RGB (196,80,78), 17px 17px 0 RGB (196,80,78), 18px 18px 0 RGB (196,80,78), 19px 19px 0 RGB (196) 80,78), 21px 21px 0 RGB (196,80,78), 22px 22px 0 RGB (196,80,78), 23px 23px 0 RGB (196.80, 78) , 25px 25px 0 RGB (196,80,78), 26px 26px 0 RGB (196,80,78), 27px 27px 0 RGB (196,80,78), 29px 29px 0 RGB (196.80.78), 30px 30px 0 RGB (196,80,78), 31px 31px 0 RGB (196,80,78) 0 RGB (196,80,78), 33px 33px 0 RGB ( 196,80,78), 34px 34px 0 RGB (196,80,78 ), 35px 35px 0 RGB (196,80,78), 36px 36px 0 RGB (196,80,78), 37px 37px 0 RGB (196,80,78), 38px 38px 0 RGB (196,80,78), 39px 39px 0 RGB (196,80,78), 40px 40px 0 RGB (196,80,78), 41px 41px 0 RGB (196,80,78), 42px 42px 0 RGB (196,80,78), 43px 43px 0 RGB (196,80,78), 44px 44px 0 RGB (196,80,78), 45px 45px 0 RGB (196,80,78), 46px 46px 0 RGB (196,80,78), 47px 47px 0 RGB (196.80.78), 48px 48px 0 RGB (196,80,78), 1PX 1PX 0 RGBA (196.80,78,0,980392), 2PX 2PX 0 RGBA (196.80,78,0,0,0,960784), 3PX 3PX 0 RGBA (196.80,78,0.941176), 4PX 4PX 0 RGBA (196.80,78,0.921569), 5PX 5PX 0 RGBA (196.80,78,0,901961), 6px 6px 0 RGBA (196.80.78 0.882353), 7px 7px 0 RGBA (196.80,78,0.862745), 8px 8px 0 RGBA (196.80,78,0,78.43137), 9px 9px 0 RGBA (196.80,78, 196.80,78, 0.8), 11px 11px 0 RGBA (196.80,78,0,780392), 12PX 12PX 0 RGBA (196.80,78,0,760784), 13px 13px 0 RGBA (196,80,78,0,0,0,0, 0,0,741,11,80,78,0,0,0,064,1176), 14px 14px 0 RGBA (196.80,78,0,721569), 15px 15px 0 RGBA (196.80,78,0,701961), 16px 16px 0 RGBA ( 196,80,78.0 .682353), 17px 17px 0 RGBA (196,80,78,0.0658824), 18px 18px 0 RGBA (196,80,78,0.0639216), 19px 19px 0 RGBA (196,80,78,0.0619608) ), 20px 20px 0 RGBA (196,80,78,0.6), 21px 21px 0 RGBA (196.80,78,0,580392), 22px 22Px 0 RGBA (196.80,78,0,78,0784), 23px 23px 0 RGBA (196.80,78,0,0,541176), 24PX 24PX 0 RGBA (196.80,78,0,521569), 25px 25px 0 RGBA (196.80,78,0498039), 26px 26px 0 RGBA (196.80,78,0478431), 27px 27px 0 RGBA (196, 80,78.0.458824), 28px 28px 0 RGBA (196.80,78,0.939216), 29px 29px 0 RGBA (196.80,78.0. 419608), 30px 30px 0 RGBA (196.80,78,0.4), 31px 31px 0 RGBA (196,80,78.0.380392), 32px 32px 0 RGBA (196,80, 196,80, 78,0.341176), 34px 34px 0 RGBA (196,80,78,0317647), 35px 35px 0 RGBA (196.80,78,0,98039), 36px 36px 0 RGBA (196.80,78,0,278431) 37px 37px 0 RGBA (196.80,78,0.258824), 38px 38px 0 RGBA (196,80,78,0.239216), 39px 39px 0 RGBA (196.80,78,0.219608), 40px 40px 0 RGBA (196, 80,78,0.2), 41px 41px 0 RGBA (196.80,78,0.080392), 42px 42px 0 RGBA (196,80,78,0.156863), 43px 43px 0 RGBA (196,80,78), 44px 44px 0 RGBA (196,80,78) , 017647), 45px 45px 0 RGBA (196.80,78,0,980392), 46px 46px 0 RGBA (196.80,78.078434), 47px 47px 0 RGBA (196.80,78), 48px 48px 0 RGBA (196.80,78 , 0,792157), 50px 50px 0 RGBA (196,80,78.0);
-Էբկիտ-վերափոխում. Մասշտացված (1) մասշտաբային (1) մասշտաբ (1);
Փոխակերպում. Մասշտացված (1) մասշտաբային (1) մասշտաբ (1);
-Երբ-վերափոխման-ծագում. 50% 50% 0;
ՏՐԱՆՍՊՈՐՏ-ԾՐԱԳԻՐ. 50% 50% 0;
}

Հետադարձ կապ-կոճակ. Հովեր (
Տեքստի հավասարեցում. Կենտրոն;
Նախապատմություն. -Webkit-Linear-gradient (-90deg, # CE6161 0, # EF6664 100%);
Նախապատմություն. -Moz- գծային-գրադիենտ (180deg, # CE6161 0, # EF6664 100%);
Նախապատմություն. Գծային-գրադիենտ (180deg, # CE6161 0, # EF6664 100%);
Նախապատմություն. 50% 50%;
Նախապատմության ծագում. Պայթ-տուփ;
-Webkit-background-clip: Սահմանապահ;
Background-clip` սահմանի տուփ;
-Էբկիթ-ֆոն-չափը. Ավտոմատ ավտո;
Նախապատմության չափը. Ավտոմատ ավտո;
}

Հետադարձ կապ-կոճակ. Ակտիվ (
Վերեւ, 5px;
Background. -Webkit-Linear-gradient (-90deg, # FF8583 0, # FF5350 100%);
Նախապատմություն. -Moz- գծային-գրադիենտ (180deg, # FF8583 0, # FF5350 100%);
Նախապատմություն. Գծային-գրադիենտ (180deg, # FF8583 0, # FF5350 100%);
Նախապատմություն. 50% 50%;
-Webkit-background-Origin: Padding-box;
Նախապատմության ծագում. Պայթ-տուփ;
-Webkit-background-clip: Սահմանապահ;
Background-clip` սահմանի տուփ;
-Էբկիթ-ֆոն-չափը. Ավտոմատ ավտո;
Նախապատմության չափը. Ավտոմատ ավտո;
-Webkit-box-shadow: 0 5px 0 0 RGBA (178,49,49,1);
Box-Shadow: 0 5px 0 0 RGBA (178,49,49,1);