Style ձեր նկարները եւ օգտագործել պատկերներ Styles- ում
Շատերը օգտագործում են CSS- ի տեքստը հարմարեցնելը, փոխելով տառատեսակը, գույնը, չափը եւ այլն: Բայց մի բան, որ շատերը հաճախ մոռանում են, այնուամենայնիվ կարող եք օգտագործել CSS- ով պատկերներ:
Պատկերը փոխելով
CSS- ն թույլ է տալիս հարմարեցնել, թե ինչպես է պատկերը ցուցադրվում էջում: Սա կարող է օգտակար լինել ձեր էջերի հետեւողական պահելու համար: Բոլոր պատկերների ոճերը կարգավորելով, դուք ստեղծում եք ստանդարտ տեսք ձեր պատկերների համար: Որոշ բաներ կարող եք անել.
- Ավելացրեք պատկերների շուրջ սահմանագիծ կամ ուրվագիծ
- Հեռացրեք կապված պատկերների շուրջ գունավոր սահմանը
- Պատկերների լայնությունը եւ / կամ բարձրությունը կարգավորելը
- Ավելացնել կաթիլ ստվեր
- Պտտեցնել պատկերը
- Փոխեք ոճերը, երբ պատկերը վերածվում է
Ձեր պատկերի սահմանը տալը հիանալի վայր է սկսելու համար: Բայց դուք պետք է ավելի շատ մտածեք, քան սահմանը `մտածեք ձեր պատկերը ամբողջ եզրին, ինչպես նաեւ հարմարեցնել ծածկույթները եւ լրացնել նաեւ: Բարակ սեւ եզրով պատկերը գեղեցիկ է, սակայն սահմանի եւ պատկերի միջեւ որոշակի լիցք կարող է ավելի լավ նայել:
img {
սահման: 1px կոշտ սեւ;
padding: 5px;
}
Լավագույն գաղափարը, երբ հնարավոր է, ոչ-դեկորատիվ պատկերները կապել հնարավորության դեպքում: Բայց երբ կատարում ես, հիշեք, որ շատ բրաուզերների պատկերը ավելացնում է գունավոր սահման: Նույնիսկ եթե դուք օգտագործում եք վերը նշված կոդը, սահմանը փոխելու համար, հղումը կվերանայվի, եթե ոչ հեռացնեք կամ անջատեք հղման վրա սահմանը: Դա անելու համար հարկավոր է օգտագործել CSS- ի երեխայի կանոն, կապված պատկերների շուրջ սահմանը հեռացնելու կամ փոխելու համար.
img> a {
սահման: ոչ;
}
Կարող եք նաեւ օգտագործել CSS- ը ձեր պատկերների բարձրությունը եւ լայնությունը փոխելու կամ սահմանելու համար: Թեեւ զարմանալի չէ, թե զննարկիչից օգտվելով պատկերների չափսերը հարմար բեռնման արագության պատճառով, նրանք ավելի լավ են ստանում պատկերները չափափոխելու համար, որպեսզի նրանք դեռ լավը լինեն: Իսկ CSS- ով դուք կարող եք նկարներ կազմել բոլորին որպես ստանդարտ լայնություն կամ բարձրություն կամ նույնիսկ սահմանել չափերը, որոնք վերաբերում են կոնտեյների:
Հիշեք, երբ պատկերները չափափոխելիս լավագույն արդյունքների համար պետք է միայն չափափոխել մեկ չափս `բարձրությունը կամ լայնությունը: Սա կնպաստի, որ պատկերը պահպանում է իր տեսանկյունից հարաբերակցությունը, եւ այդպես էլ տարօրինակ չէ: Սահմանեք մյուս արժեքը ավտոմատ կամ թողեք այն, որպեսզի դիտարկիչին ասեմ, որ պահեստային հարաբերակցությունը հետեւողական է:
img {
լայնությունը `50%;
բարձրությունը `ավտո;
}
CSS3- ը այս խնդրի լուծումը առաջարկում է նոր օբյեկտների օբյեկտի տեղադրման եւ օբյեկտի դիրքորոշում: Այս հատկություններով դուք կկարողանաք որոշել ճշգրիտ պատկերի բարձրությունը եւ լայնությունը եւ ինչպես պետք է կողմնորոշման հարաբերակցությունը կարգավորվի: Դա կարող է ստեղծել ձեր պատկերների շուրջ նամակագրության ազդեցություն կամ խուզել, որպեսզի պատկերը համապատասխան լինի չափսին:
Չնայած CSS3 օբյեկտի տեղադրման եւ օբյեկտի դիրքորոշման հատկությունները դեռ լայնորեն չեն աջակցվում, կան CSS3- ի այլ հատկություններ, որոնք լավ են աջակցում ժամանակակից բրաուզերներում, որոնք կարող եք օգտագործել ձեր պատկերները փոփոխելու համար: Նայելու նման ստվերները, կլորացված անկյունները եւ վերափոխումները, պտտելու, շեղելու կամ տեղափոխելու ձեր բոլոր պատկերները հենց հիմա աշխատում են ժամանակակից բրաուզերներում: Այնուհետեւ կարող եք օգտագործել CSS- ի անցումը, պատկերների փոփոխության համար, երբ սեղմված, կամ կտտացրեց կամ ժամանակից հետո:
Օգտագործելով պատկերներ, որպես նախապատմություն
CSS- ն հեշտացնում է պատկերներ ստեղծել ֆանտաստիկ ծագմամբ:
Դուք կարող եք ավելացնել բոլոր էջերը կամ միայն կոնկրետ տարր: Հեշտ է ֆոնային պատկեր ստեղծել էջում, ֆոնային-պատկերային հատկությամբ:
մարմին {
background-image: url (background.jpg);
}
Փոխեք մարմնի ընտրիչը էջի որոշակի տարրին, ֆոնի վրա ընդամենը մեկ տարր ընդգրկելու համար:
Մեկ այլ զվարճալի բան, որը կարող եք անել պատկերներով, ստեղծում է ֆոնային պատկեր, որը էջի մյուս էջերի հետ ոլորող չէ, ինչպես ջրի մակարդակի նշագիծ: Դուք պարզապես օգտագործում եք ոճը ֆոնային հավելվածը. Ֆիքսված; ինչպես նաեւ ձեր ֆոնի պատկերով: Ձեր ծագման մյուս ընտրանքները ներառում են դրանք սալիկի ուղղանկյուն կամ ուղղահայաց օգտագործելով ֆոնային կրկնվող գույքը:
Գրեք ֆոնային կրկնություն `կրկնել-x; նկարը կլորացրեք հորիզոնական եւ կրկնօրինակը `կրկնել-y; ուղղահայաց կղմինդր: Եվ դուք կարող եք տեղադրել ձեր ֆոնային պատկերը ֆոնային դիրքի գույքի հետ:
Եվ CSS3- ը ավելացնում է նաեւ ձեր ոճերի ոճերը: Դուք կարող եք ձգվել ձեր պատկերները, որպեսզի համապատասխանի ցանկացած չափի ֆոնին կամ պատնեշի պատկերի սահմանել պատուհանը չափելու համար : Դուք կարող եք փոխել դիրքորոշումը, ապա կրկնօրինակեք ֆոնային պատկերը: Բայց CSS3- ի մասին ամենալավ բաներից մեկն այն է, որ այժմ կարող եք շերտավորել բազմակի ֆոնային պատկերներ `ավելի խճճված էֆեկտներ ստեղծելու համար:
HTML5- ը օգնում է ոճերի պատկերներ
HTML5- ի FIGURE տարրը պետք է տեղադրվի ցանկացած պատկերների շուրջ, որոնք կարող են միայնակ մնալ փաստաթղթում: Այս մասին մտածելու ձեւերից մեկն այն է, եթե պատկերը կարող է հայտնվել հավելվածում, ապա այն պետք է լինի FIGURE տարրի ներսում: Այնուհետեւ կարող եք օգտագործել այդ տարրը եւ FIGCAPTION տարրը ձեր պատկերների ոճերը ավելացնել: