My Edu Way

Ճշմարտությունը քո՛նն է, հաղթանակը՝ քո՛նը, ապագան՝ քո՛նը: (Հրանտ Մաթևոսյան)

CSS սփրայթեր

Թողնել մեկնաբանություն


Տեսական նյութ, օգտակար կայքեր

Առաջադրանքներ

Վարժություն 1.

Պատրաստել մենյու, ստորև պատկերվածի պես ։ Մենյուն պատրաստել  չկարգավորված ցուցակի հիմքի վրա,  սփրայթերի տեխնիկայի օգնությամբ։

Screenshot from 2014-05-25 20:42:28

Սփրայթի համար օգտագործել հետևյալ ֆայլը

cssexample

Վարժություն 2.

Պատրաստել պատկերվածի պես էջ։ Ուշադրություն դարձնելով հետևյալ կետերին․

  • կենտրոնում պիտի լինի որևէ պայմանական լայնությամբ div (օրինակ 800px), կապույտ գույնի ետնագույն (background), և կարմիր սահմաններով (border)
  • բոլոր վերնագրերը և ենթավերնագրերը ունեն սև գույնի ստվեր
  • պատկերը և պատկերի նկարագրությունը հավասարեցված են արտաքին սպիտակ div-ի կենտրոնով։
  • պարագրաֆները ունեն սպիտակ ետնագմաս և տեքստը կպած չի սահմանին պարագրաֆի սահմանին։

exercise 6 css padding margin

Վարժություն 3.

Պատրաստել պատկերասրահ , այն պիտի աշխատի այնպես, ինչպես ցուցադրված է տեսանյութում։

 

Վարժություն 4.

Պատրաստել պատկերվածի պես մուտքի ֆորմա։
Ուշադրություն դարձնել մանրապատկերներին (icons), դրանք տեղադրել օգտագործելով սփրայթերի տեխնիկան։

Ուշադրություն դարձնել նաև գույներին, բեքգրաունդներին, գրադիենտներին և սահմանների կլորացումներին և ֆոնտերին։

login_form

Որպես սփրայթ օգտագործել հետևյալ պատկերը՝

sprite

Վարժություն 5.

Պատրաստել հետևյալ  դրոշները CSS3-ի միջոցներով։ Պատկերների օգտագործումը արգելվում է։

am

de

 

jp

kr

pk

sr

Հեղինակ՝ Հերմինե Անտոնյան

«Մխիթար Սեբաստացի» կրթահամալիրում դասավանդում եմ մաթեմատիկա:

Թողնել պատասխան

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Փոխել )

Google photo

You are commenting using your Google account. Log Out /  Փոխել )

Twitter picture

You are commenting using your Twitter account. Log Out /  Փոխել )

Facebook photo

You are commenting using your Facebook account. Log Out /  Փոխել )

Connecting to %s