CSS3 , ის რასაც ველოდით

 

CSS ყველასთის კარგად ცნობილი ენაა , რომელიც საიტების გასასკინად გამოიყენება. css3  შეიცავს მრავალ ახალ ფუნქციას რომლებიც  დროის დაზოგვის საშუალებას მოგვცემს და უფრო მარტივს გახდის სტილების დაწერას. რაოდენ სამწუხაროც არ უნდა იყოს , ჯერ-ჯერობით მხოლოდ ყველაზე თანამედროვე ბროუზერები აღიქვავენ , IE-ზე ლაპარაკი საერთოდ ზედმეტია , მართალია გვპირდებიან რომ მეცხრე ვერსიაში ყველაფერი იმუშავებს, მაგრამ ეს შორეული პერსპექტივაა. მოდით პირდაპირ საქმეზე გადავიდეთ , ვეცდები განახოთ რამდენიმე CSS3-ის ტექნიკა.

დღეს ჩვენ გავეცნობით შემდეგ ფუნქციებს:

  • მომრგვალებული კუთხეები
  • ინდივიდუალური მომრგვალებული კუთხეები
  • ჩრდილები
  • ზომის შეცვლა

 

  1. მომრგვალებული კუთხეები

    ყველას გახსოვთ ალბათ რამდენ დროს ვკარგავდით რომ მომრგვალებული კონტეინერი გაგვეკეთებინა , ვიყენებდით ან ჯავასკრიპტს ან სამი დივის ტექნიკას .

    ბარემ აქვე გავიხსენებ 3 დივის ტექნიკას. იჭრებოდა კონტეინერის თავი , შუა ნაწილი და ბოლო . შუა ნაწილი მეორდებოდა და საბოლოოდ ვიღებდით მომრგვალენულ კონტეინერს. საკმაოდ მარტივია მაგრამ ზედმეტი დროის კარგვაა .

    გადავიდეთ უშუალოდ css3-ის მაგალითზე. მომრგვალებული კუთხეების ფუნქციას ქვია “border radius” .

    პირველ რიგში შექმენით კონტეინერი,  ფონად მიეცით ნებისმიერი ფერი და გაუკეთეთ ნებისმიერი ფერის ჩარჩო.

    .round_example {
    background:#FFF;
    border:1px solid #000;
    }

    ახლა დროა ჩვენი
    მოვამრგვალოთ . ამას მხოლოდ კოდის 3 ხაზი დასჭირდება .

    .round_example {
    background:#FFF;
    border:1px solid #000;
    border-radius:10px; /* For Opera*/
    -moz-border-radius:10px; /*For FireFox*/
    -webkit-border-radius:10px; /* Form Safari And Chrome*/
    }

    როგორც ხედავთ border-radius-ს წინ დავუმატეთ ორი ფრეფიქსი “-moz-” და “-webkit-” .  “-webkit-”  ფრექისი ამუშავებს

    border-radius-ს  საფარიში და გუგლ ხრომში . “-moz-” მელაკუდას ცვლადია , ხოლო ოპერა მხოლოდ border-radius-ითაც კმაყოფილდება. border-radius-ს აუცილებლად ჭირდება პიქსელების მითითება , რაც უფრო დიდ პიქსელს მივუთითებ მით უფრო მომრგვალდება კუთხე , რამდენადაც ვიცი ზღვარი არ არსებობს . აქ უკვე თქვენ მოგანდობთ ექსპერიმენტების ჩატარებას.

    ახლა კი უფრო გემრიელ მონაკვეთზე გადავიდეთ

  2. ინდივიდუალური მომრგვალებული კუთხეები

    CSS3 ისევ ზრუნავს ჩვენზე და გვაძლებს საშუალებას ყველა კუთხეს მივცეთ ინდივიდუალური მნიშვნელობა, როგორც ყოველთვის ესეც უმარტივესია.

    საფარისთვის და ხრომისთვის განკუთვნილი კოდი გამოიყურება ასე:

    -webkit-border-top-left-radius: 55px;
    -webkit-border-top-right-radius: 80px;
    -webkit-border-bottom-right-radius: 40px;
    -webkit-border-bottom-left-radius: 100px;

    მელაკუდა (FireFox)

    -moz-border-radius-topleft: 55px;
    -moz-border-radius-topright: 80px;
    -moz-border-radius-bottomright: 40px;
    -moz-border-radius-bottomleft: 100px;

    ოპერა:

    border-top-left-radius: 55px;
    border-top-right-radius: 80px;
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 100px;

    საბოლოო კოდი :

    /*     Form Safari And Chrome Start       */
    -webkit-border-top-left-radius: 55px;
    -webkit-border-top-right-radius: 80px;
    -webkit-border-bottom-right-radius: 40px;
    -webkit-border-bottom-left-radius: 100px;
    /* Form Safari And Chrome End */
    /* For FireFox Start */
    -moz-border-radius-topleft: 55px;
    -moz-border-radius-topright: 80px;
    -moz-border-radius-bottomright: 40px;
    -moz-border-radius-bottomleft: 100px;
    /* For FireFox End */
    /* For Opera Start */
    border-top-left-radius: 55px;
    border-top-right-radius: 80px;
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 100px;
    /* For Opera End */

    ყველასთვის “საყვარელი” ინტერნეტ ექსპლორერი როგორც ყოველთვის ისვენებს მძიმე სამუშაო დღის შემდეგ.

  3. გამჭვირვალობა (opacity), ისე როგორც CSS3-ს ეკადრება

    ადრე, გამჭვირვალობას ყველა ბროუზერში რომ ემუშავა , გვჭირდებოდა კოდის რამდენიმე ხაზი. CSS3-მა ამაშიც გვიშველა . უკვე ყველა თანამედროვე ბროუზერი აღიქვავს 1 ცვლადს !  მინდა წარმოგიდგინოთ “opacity” (opa-ზე მახვილი) .

    ესეც კოდი:

    .opacity {
    background:#000;
    opacity:0.1;
    }

    ჩვენს შემთხვევაში გამჭვირვალობამ დაიწია 10%-მდე.

  4. ჩრდილები


    ალბათ ყველას გიწვალიათ ჩრდილების რეალიზაციის დროს. ჯერ ვჭრით პსდ-დან , ვინახავთ სურათი სახით , მერე ბექგრაუნდათ ვუსვავთ div-ს.  მგონი გვეშველა , ამ ყველაფერს უკვე css3-ით შევძლებთ.

    ჩვენი მაგალითის მიხედვით განგიმარტავთ პიქსელების მნიშვნელობებს :

  • პირველი არის ჰორიზონტალური დაშორება კონტეინერსა და ჩრდილს შორის
  • მეორე არის ვერტიკალური დაშორება კონტეინერსა და ჩრდილს შორის
  • მესამე თვითონ ჩრდილის მაშტაბი (ჩვენს შემთხვევასი 10 პიქსელი).
  • მეოთხე კი ჩრდილის ფერი.

კოდი გამოიყურება ასე :

-moz-box-shadow:0px 0px 10px #333333;
-webkit-box-shadow:0px 0px 10px #333333;
-o-box-shadow:0px 0px 10px #333333;

როგორც უკვე ვიცით “-moz-” მელაკუდასთვის,  “-webkit-” საფარისთვის და ხრომისთვის ,  “-o-” -კი ამ შემთხვევაში ოპერასთვის.

ჩაატარეთ ექსპერიმენტები , ცვალეთ პიქსელები .

 

  1. შეჯამება
    თქვენთვის მომინდია იმაზე ფიქრი მართებულია თუ არა css-3 ის გამოყენება. მაგრამ , წარმოიდგინეთ რა იქნება 1-2 წელიწადში , css3-ის საშუალებით გვერდები ჩაიტვირთება უფრო მალე , თქვენც უფრო მეტი დრო მოგეცემათ გასართობად ან ოჯახთან დროის გასატარებლათ. მგონი ჯობია აქედანვე დავიწყოთ ახალი ტექნიკის შესწავლა რათა 1-2 წელიწადში როცა ყველა ბროუზერი შეძლებს მის აღქმას , ჩვენ მომზადებულები ვიყოთ . ვერც იმაში ვხედავ ვერაფერ ცუდს რომ თანამედროვე ბროუზერებისთვის უკვე დავიწყოთ ზოგი ფუნქციის გამოყენება .
ძიება საიტზე
 
 
ITDC _ს მივმართეთ ბანკისთვის ახალი ვებ-საიტის დამზადებისთვის.კომპანიამ ოპერატიულად და პროფესიონალურად შეასრულა დაკისრებული სამუშაო.

გიორგი გოგუა
სს ბანკი "კონსტანტა"