Կարիերա 

Ինչու չամուսնացած աղջիկները չպետք է քնեն հայելու առաջ. Ինչու չեք կարող քնել հայելիների առաջ. սարսափելի պատճառներ

1 ձայն

Բարի օր, սիրելի սկսնակ կայքերի մշակողներ: Ես վերջապես սկսում եմ խոսել այն մասին, թե ինչ տեխնիկա օգտագործել հիանալի կայքեր ստեղծելու համար: Այսօր ես ձեզ կասեմ, թե ինչպես մշակել լուսանկարը մի քանի րոպեում և դրանով իսկ ավելի գեղեցիկ դարձնել պորտալը, իսկ այցելությունների տևողությունը զգալիորեն ավելի երկար է: Չե՞ք հավատում ինձ: Բայց իզուր...

Վեբ կայքերի վաճառքի հայտնվելուց ի վեր, խոշոր ընկերությունները սկսել են ուշադիր ուսումնասիրել իրենց լսարանի ճաշակը: Նրանք զգուշորեն փորձում են թաքցնել իրենց որոշ հայտնագործություններ, քանի որ տեխնիկան չափազանց լավ է աշխատում, մինչդեռ մյուսները բավականին դժվար է թաքցնել, դրանք շատ հաճախ են օգտագործվում:

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

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

Այսօր դուք կսովորեք Photoshop-ում անկյունները կլորացնելու բոլոր մեթոդները: Եթե ​​մտածում եք ուշադրությունը գրավելու և գրավելու մասին, ապա օգտագործեք պարզեցված ձևեր, իսկ եթե լուրջ պորտալ եք ստեղծում և ցանկանում եք ինչ-որ պատնեշ ստեղծել ձեր և ընթերցողի միջև, ապա ավելի լավ է օգտագործել ուղղանկյուն պատկերներ. լուրջ տղերք, եթե որակ եք ուզում՝ մեզ»։

Լուսանկարը կլորացնելու արագ միջոց

Այսպիսով, մենք աշխատելու ենք Photoshop-ում։ Բացեք պատկերը:

Գտեք «Կլորացված ուղղանկյուն» գործիքը:

Եթե ​​չեք կարողանում գտնել այն, ապա մի քանի վայրկյան սեղմեք մկնիկի ձախ կոճակը ցանկի կոճակների վրա՝ լրացուցիչ ընտրանքներ բացելու համար:

Կարևոր չէ, թե ինչ գույն եք ընտրում: Քաշեք օբյեկտը նկարի վրայով այնպես, որ ձեզ անհրաժեշտ տարածքը լինի ձևի ներսում:

Ուշադրություն դարձրեք հատկություններին. Դուք կարող եք «խաղալ» նկարում նշված ցուցիչների հետ և ավելի թեքել եզրերը։ Մուտքագրեք ձեր համարը և սեղմեք enter՝ արդյունքը տեսնելու համար: Երբ դուք գոհ եք դրանից, կրկին սեղմեք enter:

Այժմ, սեղմած պահելով CTRL կոճակը, սեղմեք այն շերտի կենտրոնի վրա, որը պարունակում է հենց նոր գծած ուղղանկյունը: Զգույշ եղեք, եթե սեղմեք տեքստի վրա, ոչինչ չի ստացվի։ Դուք պետք է սեղմեք հենց պատկերակի կենտրոնում մանրանկարչության պատկերով:

Այժմ մենք հեռացնում ենք տեսանելիությունը: Դա անելու համար կտտացրեք շերտի կողքին գտնվող «աչքը»:

Անցնենք շերտի հետ աշխատելուն, ընտրեք այն՝ սեղմեք կա՛մ տեքստի, կա՛մ պատկերակի վրա: Կարևոր չէ: Մի շրջանցեք այս քայլը, այլապես կախարդանքը տեղի չի ունենա:

Պատրաստ. Եթե ​​պատրաստվում եք նկար ցուցադրել կայքում, կարող եք պահպանել այն, գլխավորը ֆորմատի հետ չսխալվելն է։

Ձեզ անհրաժեշտ է հենց png:

Այս դեպքում շաշկի հետ եզրերը թափանցիկ կլինեն։ Ընտրեք jpeg և դրանք կփոխարինվեն ոչ գրավիչ սպիտակ եզրագծով:

Այս նկարը կարող եք նաև ավելացնել ձեր լուսանկարին։ Այս դեպքում խնայողությունը և նորից բացելը պարտադիր չէ։

Պարզապես ընտրեք այն (Ctrl+A), այնուհետև պատճենեք (Ctrl+C) և տեղադրեք այն մեկ այլ պատկերի մեջ (Ctrl+V):

Դիզայներների համար կլորացում, նախագծի վրա աշխատելու գործընթացի արագացում

Ենթադրենք, դուք աշխատում եք ինչ-որ կարևոր հետաքրքիր նախագծի վրա: Ամեն ինչ գրեթե պատրաստ է, և դուք ուզում եք տեսնել, թե ինչպես այն կանդրադառնա կլորացված անկյուններով։ Պետք չէ հարյուր հազար ներդիր բացել՝ կտրել, կպցնել և այլն։ Ամեն ինչ կարելի է անել շատ ավելի արագ և հեշտ։

Ահա իմ օրինակին: Ի դեպ, եթե ցանկանում եք, կարող եք ներբեռնել այս psd ֆայլը, բացել այն Photoshop-ում և զբաղվել ( բեռնել ).

Ընտրեք մեզ անհրաժեշտ շերտը: Ես աշխատելու եմ բուի մեծ պատկերով: Հետևաբար, ես սեղմում եմ Ctrl-ը և սեղմում այս շերտի մանրապատկերի կենտրոնի վրա: Ոչ տեքստով կամ աչքով: Ըստ նկարի հետ նկարի. Կներեք տավտոլոգիայի համար։

Նախ նշեք «կիրառել էֆեկտը սահմանների վրա» վանդակը: Այնուհետև մենք սահմանում ենք շառավիղը:

Ցավոք, դուք պետք է ընտրեք աչքով: Այստեղ, որպես կանոն, սահմանում են 15, սա է ստանդարտը, բայց, ինչպես հասկանում եք, կարող եք շեղվել դրանից։

Մենք ընտրում ենք իդեալական տարբերակը։

Այնուհետև «Ընտրություն» ներդիրում մենք գտնում ենք «Inversion»:

Սեղմեք «del» կոճակը ստեղնաշարի վրա և վերջ:

Եզրերի երկայնքով սողացող մրջյունները հեռացնելու համար հարկավոր է միաժամանակ սեղմել Ctrl և D:

Եթե ​​ձեզ դուր եկավ այս դասերը, կարող եք գտնել ավելին: Դա անելու համար պետք չէ Youtube-ում փնտրել այն, ինչ մտքովդ անցնի: Կարելի է ուսումնասիրել բոլոր չիպսերը «A-ից Z» ըստ տեսադասերի. Ստացեք դասընթացի վերջին տարբերակի անվճար շնորհանդես ռուսերեն Photoshop-ով: Այս դեպքում դուք ոչ միայն կկարողանաք կատարել տարրական գործեր, այլև կսովորեք բարդ աշխատանք կատարել, տեսնել, թե իրական մասնագետներն ինչպես են կիրառում պարզ հմտությունները և ինչ է ստացվում դրանից:

Նայեք, օրինակ, այն, ինչ այսօր սովորեցիք, կարող է կիրառվել ոչ միայն անկյունները կտրելու համար:

Դուք արդեն գիտեք, թե ինչպես կարելի է նկարել եռանկյուններով: Չեմ հասկանում? Ամեն ինչ շատ պարզ է.

Որպես հիմք վերցրեք այս հոդվածից բերման առաջին մեթոդը, բայց ուղղանկյունի հետ աշխատելու փոխարեն ընտրեք բազմանկյուն:

Մի մոռացեք վերևի վահանակի վրա դնել «երեք կողմ», որպեսզի չխաբեք ձեզ կերպարը փոխակերպելով:

Եվ եթե դուք չեք ցանկանում, որ անկյունները լինեն նույնքան սուր, որքան իմը, պարզապես կարգավորումներում դրեք հակաալիզինգը:

Դուք կարող եք ներբեռնել այս նկարը psd ձևաչափով անմիջապես իմ բլոգից և աշխատել դրա հետ ( բեռնել ) Կարծում եմ՝ դա բարելավելը խնդիր չէ։

Եթե ​​այս հոդվածը օգտակար էր, խնդրում եմ բաժանորդագրվեք իմ բլոգի տեղեկագրին: Ձեզ դեռ շատ հետաքրքիր բաներ են սպասում։ Եվ վերջապես տեսանյութ այն մասին, թե ինչպես կարելի է աղջկան պիցցայի վերածել Photoshop-ի միջոցով։ Դիտեք մինչև վերջ, ծիծաղելի է։

Լուսանկարում կլորացված անկյունները բավականին հետաքրքիր ու գրավիչ տեսք ունեն։ Ամենից հաճախ նման պատկերներն օգտագործվում են կոլաժներ պատրաստելիս կամ շնորհանդեսներ ստեղծելիս։ Նաև կլորացված անկյուններով նկարները կարող են օգտագործվել որպես կայքի գրառումների մանրապատկերներ: Օգտագործման շատ տարբերակներ կան, բայց կա միայն մեկ ճանապարհ (ճիշտ) նման լուսանկար ստանալու համար։ Այս ձեռնարկում մենք ձեզ ցույց կտանք, թե ինչպես կլորացնել անկյունները Photoshop-ում:

Կլորացված անկյունները Photoshop-ում

Արդյունքի հասնելու համար մենք օգտագործում ենք խմբի գործիքներից մեկը «Ձևեր», ապա պարզապես հեռացրեք այն ամենը, ինչ ավելորդ է:

  1. Բացեք լուսանկարը Photoshop-ում, որը պատրաստվում եք խմբագրել:

  2. Այնուհետև ստեղծեք ջրվեժի շերտի պատճենը, որը կոչվում է «Հետին պլան». Ժամանակ խնայելու համար օգտագործեք թեժ ստեղներ CTRL + J. Պատճենը ստեղծվել է բնօրինակ պատկերը անփոփոխ թողնելու համար: Եթե ​​(հանկարծ) ինչ-որ բան սխալ է, կարող եք ջնջել ձախողված շերտերը և սկսել նորից:

  3. Շարունակիր. Եվ հետո մեզ անհրաժեշտ է գործիք «Ուղղանկյուն կլորացված անկյուններով».

    Այս դեպքում մեզ հետաքրքրում է միայն կարգավորումներից մեկը՝ կլորացման շառավիղը: Այս պարամետրի արժեքը կախված է պատկերի չափից և կարիքներից: Մենք արժեքը կսահմանենք 30 պիքսել, այնպես որ արդյունքն ավելի լավ տեսանելի կլինի:

  4. Հաջորդը, կտավի վրա նկարեք ցանկացած չափի ուղղանկյուն (մենք ավելի ուշ կմեծացնենք այն):

  5. Այժմ դուք պետք է ձգեք ստացված գործիչը ամբողջ կտավի վրա: Զանգահարելով գործառույթը «Ազատ փոխակերպում»թեժ ստեղներ CTRL + T. Ձևի վրա կհայտնվի շրջանակ, որը կարող եք օգտագործել օբյեկտը տեղափոխելու, պտտելու և չափափոխելու համար:

  6. Մենք շահագրգռված ենք մասշտաբով: Ձգեք գործիչը՝ օգտագործելով սքրինշոթում նշված մարկերները: Սանդղակի ավարտից հետո սեղմեք ՄՏՆԵԼ.

    Խորհուրդ.հնարավորինս ճշգրիտ մասշտաբավորելու համար, այսինքն՝ առանց կտավից այն կողմ անցնելու, պետք է միացնել այսպես կոչված. «Պարտադիր». Նայեք սքրինշոթին, այն ցույց է տալիս, թե որտեղ է գտնվում այս գործառույթը: Այն ստիպում է օբյեկտները ավտոմատ կերպով «կպչել» օժանդակ տարրերին և կտավի եզրագծերին:

  7. Հաջորդը մենք պետք է ընտրենք ստացված գործիչը: Դա անելու համար սեղմեք ստեղնը CTRLև կտտացրեք ուղղանկյունով շերտի մանրապատկերին:

  8. Ինչպես տեսնում եք, նկարի շուրջ ընտրություն է ձևավորվել: Այժմ անցեք պատճենահանման շերտ և հեռացրեք տեսանելիությունը շերտից ձևով (տես սքրինշոթը):

  9. Ջրվեժի շերտն այժմ ակտիվ է և պատրաստ է խմբագրման: Մոնտաժը բաղկացած է նկարի անկյուններից ավելորդ իրերը հեռացնելուց։ Ընտրության շրջում թեժ ստեղների միջոցով CTRL + SHIFT + I. Այժմ ընտրությունը մնում է միայն անկյուններում։

Իմ կայքի այս բաժնում ես որոշեցի տեղադրել ֆոտոշոփի դասեր, որը կարող է օգտակար լինել ձեզ կայքի դիզայն ստեղծելիս: Կարծում եմ, իմ կողմից ավելորդ չի լինի, մինչ Photoshop սովորել սկսելը, ներկայացնել ձեզ Photoshop թեժ ստեղներ. Օգտագործելով Photoshop թեժ ստեղներ, դուք կհեշտացնեք ձեր աշխատանքը և կխնայեք ժամանակը։ .

Իմ առաջին Photoshop դասձեզ կասի, թե ինչպես կլոր անկյուններըլուսանկար.

Կայքեր ստեղծելիս հաճախ պետք է զբաղվես այն խնդրի հետ, թե ինչպես կլորացնել նկարի անկյունները կամ ինչպես կլոր անկյուններըլուսանկար. Այս դասին PhotoshopԵս ձեզ կսովորեցնեմ, թե ինչպես կլոր անկյուններընկարչություն ֆոտոշոփ. Նաև այս մեկը Photoshop դասթույլ կտա ձեզ կլոր անկյուններընկարներ. Հուսով եմ, որ սա ձեզ համար պարզ է: Ի վերջո, համար Photoshopև՛ նկարը, և՛ լուսանկարը նույնն են: Իմ աշխատանքում ես օգտագործում եմ Adobe-ը Photoshop SC5, ռուսերեն տարբերակ։ Դե, ես լեզուներից լավ չեմ:

Այսօրվա դասը Photoshop-ում լուսանկարի անկյունները կլորացնելու մասին է: Եկեք միասին լուսանկարվենք իմ նկարի նման կլորացված անկյուններով։

1. Իրականացնել կլորացնել անկյունները Photoshop-ում, բացել հետ Photoshopնկարը (լուսանկար) մեզ անհրաժեշտ. Որպես օրինակ՝ ես վերցրեցի լուսանկարներից մեկը իմ ֆոտոարխիվից։

2. Գծագրի չափերը բերում ենք մեզ անհրաժեշտ պարամետրերին։ Դա անելու համար սեղմեք ALT+CTRL+I: Պատկերի չափի պատուհանը բացվում է: Մենք սահմանում ենք մեզ անհրաժեշտ չափերը: Դուք կարող եք պարզապես կտրել պատկերը ցանկալի չափի:

3. Ընտրեք նկարը (CTRL+A) (պարագծի շուրջ կետավոր գիծ կհայտնվի) և պատճենեք այն (CTRL+C); Մենք պատճենում ենք լուսանկարն այնպես, որ սկզբնական պատկերը մնա անփոփոխ՝ ավարտելուց հետո կլորացնել անկյունները Photoshop-ում. Թեև մենք կարող ենք աշխատել բնօրինակի վրա, երբ կլորացված անկյունները պատրաստ լինեն, մենք պարզապես կպահենք լուսանկարը որպես այլ պատկեր։

4. Բացեք նոր պատուհան (CTRL+N), սահմանեք նկարի պահանջվող չափերը և սեղմեք «OK»: Խնդրում ենք նկատի ունենալ, որ ես ֆոնը դրել եմ «թափանցիկ»: Դուք կարող եք անմիջապես սահմանել ֆոնը ձեր պահանջած գույնին.

5. Տեղադրեք պատճենված պատկերը նոր պատուհանում (CTRL+V) և ստեղծեք նոր շերտ (CTRL+SHIFT+N): Այս շերտում օգտագործեք Rectangle Tool-ը կլորացված անկյուններ«Նկարեք անհրաժեշտ չափի ուղղանկյուն: Ուղղանկյունի գույնը նշանակություն չունի: Գործիքը ընտրվում է մկնիկի աջ կոճակի վրա սեղմելով: Կամ պարզապես սեղմելով ստեղնը (U): Մենք մեր հայեցողությամբ սահմանում ենք կորության շառավիղը ( տես ստորև նկարը);

Անհրաժեշտության դեպքում կարող եք տեղափոխել գծված ձևը՝ օգտագործելով ստեղնաշարի սլաքները կամ օգտագործելով մկնիկը ձախ ստեղնը սեղմած պահելով: Նախ, մի մոռացեք ակտիվացնել «տեղափոխել» գործիքագոտու վրա (վերևի կոճակը): Դուք կարող եք նաեւ չափափոխելթվեր. Դա անելու համար սեղմեք (CTRL+T) և մկնիկի միջոցով ձգեք ձևը ցանկալի չափի` ձախ ստեղնը սեղմած պահելով: Եթե ​​ցանկանում եք փոխել չափը` պահպանելով համամասնությունները, ապա պետք է պահեք SHIFT-ը և քաշեք ձևի անկյունով:

6. Գնացեք շերտերի վահանակ: CTRL-ը պահելիս ձախ սեղմեք ուղղանկյուն շերտի նախադիտման (նկարի) վրա: Հայտնվում է ձևի կետավոր ուրվագիծ:

7. Անցեք դեպի ստորին շերտ: Դա անելու համար կտտացրեք պատկերի աջ կողմում շերտերի վահանակում: Մեր դեպքում՝ շերտ 1։ Կապույտ ընդգծումը կգնա 1-ին շերտ։

8. Սեղմեք CTRL+ SHIFT+I: Կետավոր ընտրություն կհայտնվի նկարի այն հատվածի եզրագծի երկայնքով, որը գտնվում է մեր ուղղանկյունից դուրս կլորացված անկյուններ.

9. Ստեղնաշարի վրա սեղմեք DEL: Պատկերի այն մասը, որը գտնվում է ուղղանկյունից դուրս, կջնջվի:

10. Վերակտիվացրեք ուղղանկյուն շերտը: Ջնջեք այն՝ սեղմելով աղբարկղի պատկերակը:

11. Սեղմեք «M» ստեղնը և ձախ սեղմեք պատկերի ցանկացած կետում: Ընտրությունը հանվել է։ պատրաստ. Դուք կարող եք պահպանել պատկերը, որը մենք ստացել ենք կլորացնել անկյունները Photoshop-ում, մեզ անհրաժեշտ ձևաչափով։

Եթե ​​նման պատկերը կօգտագործվի կայքի դիզայն ստեղծելու համար, պահպանեք այն վեբ և սարքերի համար (ALT+SHIFT+CTRL+S):

12. Ուշադրություն. Եթե ​​դուք ունեք պատկերներ շուրջ եզրերի հետ կլորացված անկյուններԴեռևս կան թափանցիկ պիքսելներ, դուք պետք է կատարեք կտրում: Դա անելու համար սեղմեք «Պատկեր», ընտրեք «Կտրում», երևացող պատուհանում դրեք կարգավորումները ինչպես իմ նկարում և սեղմեք «Լավ»: Կտավի չափը կփոխվի ըստ պատկերի չափի, և լրացուցիչ թափանցիկ պիքսելները կհեռացվեն:

Այն ֆոտոշոփի դասկարող է օգտագործվել ինչպես օվալաձև, այնպես էլ ձևավորված լուսանկարների համար: Դա անելու համար 5-րդ քայլում «ուղղանկյունի հետ կլորացված անկյուններընտրեք «էլիպս», «բազմանկյուն» կամ «ազատ ձև» գործիքը: Այնուհետև մենք կատարում ենք նույն գործողությունները, ինչ արեցինք ստանալու համար: կլորացնելով անկյունները.

Բոլոր ժամանակակից բրաուզերներն աջակցում են HTML5 հիպերտեքստի նշագրման ստանդարտներին և CCS3 դիզայնի ոճերին: Եվ եթե ձեր կայքը (կաղապարը) աջակցում է ժամանակակից չափանիշներին, ապա դուք կարող եք փոփոխություններ կատարել դիզայնում, ինչպիսիք են անկյունների կլորացումը, ստվերները, գրադիենտ լցոնումները՝ առանց գրաֆիկական խմբագրիչների դիմելու:

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

Որպեսզի հոդվածում բերված օրինակները ճիշտ ցուցադրվեն ձեր էկրանին, դուք պետք է օգտագործեք բրաուզերների վերջին տարբերակները՝ FireFox, Chrome և դրանց վրա հիմնվածները՝ Yandex.Browser, Amigo և այլն։

DIV բլոկների կլորացված անկյունները

CSS3 ստանդարտի համաձայն, որպեսզի բլոկը DIVուներ կլորացված անկյուններ, այն պետք է հարդարել սահման-շառավիղ, օրինակ այսպես.

Սահման-շառավիղ՝ 10px;

Պարզության համար եկեք գծենք երկու բլոկ ուղիղ և կլորացված անկյուններով.

Բլոկ ուղիղ անկյուններով

Բլոկ կլորացված անկյուններով

Նկարների կլորացված անկյունները

Վերոնշյալ օրինակի անալոգիայի համաձայն՝ դուք կարող եք կլորացնել կայքի պատկերների անկյունները, օրինակ՝ լուսանկարները: Պարզության համար եկեք կլորացնենք էջից լուսանկարի անկյունները

Ահա պատկերն առանց CSS մշակման

Եվ հիմա կլորացված անկյուններով.

Սահման-շառավիղ՝ 10px;

Որպեսզի այն իսկապես «գեղեցիկ» լինի, եկեք սկզբից մի եզրագիծ ավելացնենք...

Սահման-շառավիղ՝ 10px; եզրագիծ՝ 5px #ccc պինդ;

իսկ հետո ստվերները.

Սահման-շառավիղ՝ 10px; եզրագիծ՝ 5px #ccc պինդ; տուփ-ստվեր՝ 0 0 10px #444;

Ստորև ներկայացված տարբերակը (կլորացված անկյունները ստվերով առանց եզրագծով) շատ նման է մկնիկի պահոցին.

Սահման-շառավիղ՝ 10px; տուփ-ստվեր՝ 0 0 10px #444;

Եվ վերջապես կերպարի կատարյալ ծաղր

Սահման-շառավիղ` 50%; եզրագիծը՝ 5px #cfc ամուր; տուփ-ստվեր՝ 0 0 10px #444;

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

Փոքրիկ քնարական շեղում

Ոճ սահմանմեծացնում է պատկերի չափը եզրագծի չափով: Եթե ​​նշված է արժեք եզրագիծը՝ 5px, ապա վերջնական պատկերը կդառնա ավելի լայն և բարձր 10 պիքսելով: Հիշեք սա, որոշ դեպքերում կայքի դասավորությունը կարող է չաշխատել:

Մի ոճ տուփ-ստվերչի ազդում նկարի չափի վրա, ստվերը կարծես անցնում է հարևան տարրերի վրա: Այն օգտագործելիս կայքի դասավորությունը չի տուժում։

Ինչպես կլորացնել պատկերների անկյունները WordPress-ում

Վերոնշյալ բոլոր օրինակներում ես ոճերը գրել եմ անմիջապես html կոդի պիտակներում։ Օրինակ, վերջինն այսպիսի տեսք ունի.

Սա լավ է, երբ դուք պետք է վերադասավորեք մեկ նկար կամ լուսանկար: Իսկ եթե ուզում ես ամեն ինչ փոխել: Դե, դուք չեք բարձրանա ձեր ամբողջ կայքը՝ յուրաքանչյուրի ցուցադրումը խմբագրելու համար: Շատ դեպքերում WordPress պիտակը IMGսահմանում է մի քանի ոճերի դասեր. Մեկը՝ պատկերի ֆայլի եզակի անունով, մյուսը՝ ըստ չափի, և մյուսը՝ ըստ հավասարեցման: Դուք կարող եք լրացնել դրանցից մեկը վերը նշված պարամետրերով:

Օրինակ, բոլոր պատկերների համար, որոնց համար հավասարեցում նշված չէ, ֆայլում style.cssՁեր WordPress թեմայի համար մուտքագրեք հետևյալը.

Հավասարեցված (սահման-շառավիղ՝ 10px; եզրագիծ՝ 5px #cfc ամուր; տուփ-ստվեր՝ 0 0 10px #444; )

Կամ կայքի բոլոր նկարների համար ամենախիստ մեթոդը: Եկեք վերասահմանենք ոճը բոլոր թեգերի համար IMG:

Img (սահման-շառավիղ՝ 10px; եզրագիծ՝ 5px #cfc ամուր; տուփ-ստվեր՝ 0 0 10px #444; )

Վերջին տարբերակը հարմար է ոչ միայն WordPress-ի, այլ ցանկացած CMS-ի համար։ Եվ նույնիսկ պարզի համար HTMLէջերը այն դեպքում, երբ պատկերները ցուցադրելիս պիտակ IMGոճի դասեր չեն նշանակվում: Բայց զգույշ եղեք. Եթե ​​դուք անտեսում եք պիտակների ցուցադրման ընտրանքները IMGդու կփոխվես տեսքըԲՈԼՈՐ նկարները կայքում!

Եզրակացության փոխարեն

Հոդվածի բոլոր օրինակները պայմանական են և նախատեսված են միայն ցուցադրելու CSS-ի որոշ հնարավորություններ պատկերների մշակման համար և ցույց տալու, թե որքան պարզ է դա:

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

Աղյուսակում 1-ը ցույց է տալիս արժեքների տարբեր քանակություն և բլոկի տեսակը, որը ստացվում է այս դեպքում:

Կոդ Նկարագրություն Դիտել
div (սահմանային շառավիղ՝ 10px;) Կլորացման շառավիղը միանգամից բոլոր անկյունների համար:
div (սահմանային շառավիղ՝ 0 10px; ) Առաջին արժեքը սահմանում է վերևի ձախ և ներքևի աջ անկյունների շառավիղը, երկրորդ արժեքը սահմանում է վերևի աջ և ներքևի ձախ անկյունների շառավիղը:
div (սահմանային շառավիղ՝ 20px 10px 0;) Առաջին արժեքը սահմանում է վերին ձախ անկյունի շառավիղը, երկրորդը և՛ վերին աջը, և՛ ստորին ձախը, իսկ երրորդ արժեքը՝ ստորին աջը:
div (սահմանային շառավիղ՝ 20px 10px 5px 0;) Հերթականորեն սահմանում է վերին ձախ, վերին աջ, ստորին աջ և ստորին ձախ անկյունների շառավիղը:

Օրինակ 1-ը ցույց է տալիս, թե ինչպես ստեղծել կլորացված անկյուններով բլոկ:

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

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Շառավիղ

Ես I-ի մեղադրական գործի լրացվող ձևն է։


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

Բրինձ. 1. Բլոկ կլորացված անկյուններով

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

Օրինակ 2. Կլոր կոճակ

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Կոճակ

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

Բրինձ. 2. Կլոր կոճակ

Opera բրաուզերում, կլորացվում է դեպի

սխալ:Բովանդակությունը պաշտպանված է!!