html ცხრილის კუთხეების დამრგვალება. როგორ დავამრგვალოთ კუთხეები CSS და HTML-ში. სურათების კუთხეების დამრგვალება. გარე ჩარჩოს ოფსეტური მონახაზი-ოფსეტი

თქვენ ასევე შეგიძლიათ გააკეთოთ მომრგვალებული კიდეები ელემენტის მხოლოდ ზედა ან ქვედა კუთხეებისთვის, ან მისცეთ თითოეულ კუთხეს განსხვავებული დამრგვალების რადიუსი - ბევრი ადგილი ფანტაზიისთვის! მაგალითი:

BorderElement (ფონის ფერი: #EEDDFF; კონტური: 6px მყარი #7922CC; საზღვრის რადიუსი: 25px; ) .borderElement1 (ფონის ფერი: #FFE8DB; კონტური: 6px მყარი #FF5A00; საზღვრის რადიუსი: 15px 100px10px)

მაგრამ ეს ყველაფერი არ არის: მარტივი მრგვალი კუთხეების ნაცვლად, შეგიძლიათ მიუთითოთ ელიფსური დამრგვალება. ამისათვის თქვენ უნდა მიუთითოთ ორი მნიშვნელობა, რომლებიც გამოყოფილია ხაზებით (ელიფსის ჰორიზონტალური და ვერტიკალური ნახევრად ღერძებისთვის). მოდით მივცეთ მაგალითი 150x450 პიქსელის ბლოკზე:

BorderElement (ფონის ფერი: #EEDDFF; კონტური: 6px მყარი #7922CC; საზღვრის რადიუსი: 280px/100px; )

თქვენ შეგიძლიათ აურიოთ მნიშვნელობები (ანუ გამოიყენოთ როგორც ჩვეულებრივი, ისე ელიფსური მომრგვალებული იმავე სტილში), ასევე შეგიძლიათ დაამატოთ პერსონალური სტილი თითოეული კუთხისთვის შესაბამისი თვისებების გამოყენებით:

• საზღვარი-ზედა-მარცხნივ-რადიუსი - ზედა მარცხენა კუთხისთვის;
• საზღვარი-ზემო-მარჯვნივ-რადიუსი - ზედა მარჯვენა კუთხისთვის;
• საზღვარი-ქვედა-მარცხნივ-რადიუსი - ქვედა მარცხენა კუთხისთვის;
• საზღვარი-ქვედა-მარჯვნივ-რადიუსი - ქვედა მარჯვენა კუთხისთვის.

კუთხეების დამრგვალების პრინციპი

ქვემოთ მოყვანილი სურათი გვიჩვენებს, თუ როგორ გამოითვლება კუთხის დამრგვალება CSS-ში. ასე რომ, თუ კუთხისთვის მითითებულია ერთი მნიშვნელობა - მაგალითად, 20 პიქსელი - ეს ნიშნავს, რომ დამრგვალება მოხდება წრის გასწვრივ 20 პიქსელის რადიუსით. იმ შემთხვევაში, როდესაც ორი მნიშვნელობა მითითებულია, გამოყოფილი ხაზებით, მაგალითად, 30px/20px, კუთხეები მრგვალდება ელიფსის გასწვრივ. პირველი მნიშვნელობა ამ შემთხვევაში არის ელიფსის ჰორიზონტალური ნახევრადღერძის სიგრძე - 30px, ხოლო მეორე მნიშვნელობა არის ვერტიკალური ნახევრადღერძის სიგრძე - 20px:

CSS სასაზღვრო რადიუსის თვისება მხარდაჭერილია ყველა თანამედროვე ბრაუზერის მიერ.

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

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

პირდაპირი მარკირება (მეორე ცხრილი განსხვავდება ზედა რიგის უჯრედების განლაგებით):

Pellentesque cursus, nunc ut facilisis hendrerit

1. მოარგეთ კუთხეები პირდაპირ მაგიდასთან (მაგიდის ტეგი).

BCcontentTables( საზღვარი: 1px მყარი #CCCCCC; სიგანე:100%; moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Google Chrome */ -khtml-border-radius : /* KHTML */ -o-border-radius: /* Opera */ -ms-border-radius: 10px */ border-radius: 10px; ზღვარი: 0.7em ავტო ;

2. წაშალეთ ნებისმიერი ფონი პირველი ხაზიდან.

Tr.bCTable_Header (ფონი: არცერთი;)

3. ფსევდოკლასი:first-child და კომბინატორის გამოყენებით აირჩიეთ ცხრილის პირველი უჯრედი. დამრგვალეთ პირველი უჯრედის ზედა მარცხენა კუთხე. პირველი რიგის ფონი შედგება ამ რიგის უჯრედების ფონისგან.

4. ფსევდოკლასი:last-child და კომბინატორის გამოყენებით > აირჩიეთ პირველი სტრიქონის ბოლო უჯრედი. ამისათვის ჩვენ ვამრგვალებთ ზედა მარჯვენა კუთხეში.

Tr.bCTable_Header:first-child > td:last-child( border-radius:0 10px 0 0; -webkit-border-radius:0 10px 0 0; -moz-border-radius:0 10px 0 0; -ms- border-radius:0 10px 0 0 -o-border-radius:0 10px 0 0 -khtml-border-radius: 0 10px 0;

5. ბოლო ხაზის ქვედა კუთხეების დამრგვალება. არ დაგავიწყდეთ ბოლო ხაზის ფონის ამოღება; მწკრივის ფონი დაყენებულია ბოლო რიგის უჯრედების ფონით.

BCcontentTables tr:last-child( border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -ms-border-0dius 10px -o-border-radius:0 0 10px 10px -khtml-border-radius: 0 0 10px 10px;

6. შემდეგ, 3-4 წერტილების ანალოგიით, ბოლო სტრიქონში ვამრგვალებთ პირველი და გარე უჯრედების კუთხეებს.

BCcontentTables tr:last-child td(background-color:#F1F1F2;) .bContentTables tr:last-child td:first-child( border-radius:0 0 0 10px; -webkit-border-radius:0 0 ;0 -moz-border-radius:0 0 0 10px -ms-border-radius:0 0 0 10px -o-border-radius:0 0 0 10px;) . bContentTables tr:last-child td:last-child (border-radius:0 0 10px 0; -webkit-border-radius:0 0 10px 0; -moz-border-radius:0 0 10px 0; -ms-border- რადიუსი: 0 10px 0 -o-border-radius:0 0 10px 0 -khtml-border-radius: 0 0 10px 0;

ბრაუზერის მხარდაჭერა

დილა მშვიდობისა, შუადღე, საღამო თუ ღამე ყველას. დიმიტრი კოსტინი ისევ და ისევ შენთანაა. ერთ დღეს ვუყურებდი სხვადასხვა სურათებს და შემდეგ მომეწონა ზოგიერთი მათგანი. და მათ მოეწონათ ისინი, რადგან მათ ჰქონდათ მომრგვალებული კიდეები. მაშინვე უფრო საინტერესო გამოიყურება. ასე არ ფიქრობ? სწორედ ამიტომ, დღევანდელ გაკვეთილზე მინდა გითხრათ, თუ როგორ დავამრგვალოთ კუთხეები Photoshop-ში, რომ ფოტო უფრო საინტერესო გამოვიდეს.

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

გლუვი საზღვრების გამოყენებით

ეს მეთოდი წინა მეთოდის მსგავსია, მაგრამ მაინც ძალიან განსხვავებული. ჩვენ ყველაფერს გავაკეთებთ იგივე სურათით.

ფორმის შექმნით

მესამე მეთოდი უკვე რადიკალურად განსხვავდება წინა ორისგან. ასე რომ, შეისვენეთ რამდენიმე წამით და გააგრძელეთ. მე არ შევცვლი სურათს და ისევ ჩავტვირთავ ამ მანქანას Photoshop-ში.

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

სცადეთ ყველაფერი თავად გააკეთოთ და ამავდროულად მითხარით, რომელი მეთოდია თქვენთვის უფრო სასურველი.

სხვათა შორის, თუ თქვენ გაქვთ ხარვეზები Photoshop-ში ან უბრალოდ გსურთ მისი სრულად სწავლა უმოკლეს დროში, მაშინ გირჩევთ უყუროთ შესანიშნავი Photoshop კურსი დამწყებთათვის. კურსი კარგად არის შესრულებული, ყველაფერი კარგად არის მოთხრობილი და ნაჩვენები, და თითოეული მასალა დეტალურად არის განხილული.

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

პატივისცემით, დიმიტრი კოსტინი

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

მაგიდაზე 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

ამ მაგალითის შედეგი ნაჩვენებია ნახ. 1.

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

საინტერესო ეფექტის მიღება შესაძლებელია, თუ დამრგვალების რადიუსს დააყენებთ ელემენტის სიმაღლისა და სიგანის ნახევარზე მეტს. ამ შემთხვევაში, თქვენ მიიღებთ წრეს. მაგალითი 2 გვიჩვენებს, თუ როგორ უნდა შექმნათ მრგვალი ღილაკი სურათით.

მაგალითი 2: მრგვალი ღილაკი

HTML5 CSS3 IE 9+ Cr Op Sa Fx

ამ მაგალითის შედეგი ნაჩვენებია ნახ. 2.

ბრინჯი. 2. მრგვალი ღილაკი

Opera ბრაუზერში დამრგვალება გამოიყენება არასწორად, თუ საზღვარი არ არის მითითებული სასაზღვრო საკუთრების მეშვეობით.

საზღვრის რადიუსის თვისება შეიძლება გაერთიანდეს სხვა თვისებებთან, მაგალითად, ელემენტზე ჩრდილის დამატება. მე-3 მაგალითში შედგენილია წრეების ნაკრები, რომელთაგან ერთი ხაზგასმულია box-shadow-ის გამოყენებით. ეს ნაკრები შეიძლება გამოყენებულ იქნას გვერდებზე ან ფოტოებში ნავიგაციისთვის.

მაგალითი 3. ბზინვარება

HTML5 CSS3 IE 9+ Cr Op Sa Fx

ამ მაგალითის შედეგი ნაჩვენებია ნახ. 3.

ბრინჯი. 3. ანათებს წრის ირგვლივ

სასაზღვრო რადიუსის გამოყენებით შეგიძლიათ გააკეთოთ არა მხოლოდ წრე, არამედ ელიფსი, ასევე ელიფსური დამრგვალება ბლოკისთვის. ამისათვის თქვენ უნდა დაწეროთ არა ერთი მნიშვნელობა, არამედ ორი, გამოყოფილი ხაზებით. 20px/10px ჩაწერა ნიშნავს, რომ ფილეს ჰორიზონტალური რადიუსი იქნება 20 პიქსელი, ხოლო ვერტიკალური რადიუსი იქნება 10 პიქსელი. მაგალითი 4 გვიჩვენებს, თუ როგორ უნდა შექმნათ ელიფსური კუთხეები, რომ დაამატოთ კომიქსების სტილის წარწერა ფოტოზე.

მაგალითი 4: ელიფსები

HTML5 CSS3 IE 9+ Cr Op Sa Fx

შენ ხარ საკუთარი თავის მასწავლებელი

ამ მაგალითის შედეგი ნაჩვენებია ნახ. 4.

ბრინჯი. 4. ელიფსური კუთხეების გამოყენება

თქვენ ასევე შეგიძლიათ შეცვალოთ კუთხეების გარეგნობა სურათებზე საზღვრის რადიუსის თვისების დამატებით img ამომრჩეველში, როგორც ეს ნაჩვენებია მაგალით 5-ში.

მაგალითი 5: სურათები

HTML5 CSS3 IE 9+ Cr Op Sa Fx

მომრგვალებული კუთხეები CSS-შიშეიძლება გაკეთდეს მრავალი გზით, ძალიან ბევრი, და ზოგიერთი მათგანი შეიძლება ჩაითვალოს მოძველებულად, რადგან CSS 3-მა შემოიღო ახალი თვისებები, რომლებიც საშუალებას გაძლევთ დამრგვალოთ HTML ელემენტების კუთხეები. თუმცა, ჯერ ერთი, ძველი ბრაუზერები ამ თვისებებს არ უჭერენ მხარს და მეორეც, დიზაინერის კრეატიულ ტვინში ზოგჯერ ისეთი იდეები იბადება, რომლის გადარჩენაც მხოლოდ ძველ მეთოდებს შეუძლიათ. ამიტომ, აქ განვიხილავთ CSS-ში მომრგვალებული კუთხის შექმნის რამდენიმე განსხვავებულ ვარიანტს: უმარტივესიდან საკმაოდ რთულამდე.

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

მომრგვალებული კუთხეები CSS 3-ში სურათების გარეშე

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

HTML და CSS მაგალითი: კუთხეების დამრგვალება CSS 3-ით სურათების გარეშე

კონტენტის დაბლოკვა.

მაგალითის აღწერა

1. კუთხეების დასამრგვალებლად ვიყენებთ CSS 3 თვისებას, რომელიც ესმის ყველა თანამედროვე ბრაუზერს.
2. ძველი ბრაუზერებისთვის Firefox, Chrome და Safari, ჩვენ ვიყენებთ სპეციალურ თვისებებს პრეფიქსებით -moz- და -webkit-, რომლებიც გამოჩნდა მთავარი თვისების მხარდაჭერამდე. სამწუხაროდ, ძველი Opera-სა და IE-სთვის მსგავსი ანალოგები არ არსებობს. გთხოვთ, გაითვალისწინოთ, რომ რთული დამრგვალებების შექმნისას, პრეფიქსების მქონე თვისებები შეიძლება მთლიანად არ იმუშაოს სწორად. სწორედ ამიტომ, CSS კოდში ისინი ჩამოთვლილი იყო მთავარ საკუთრებაზე მაღლა, ასე რომ, შესაბამისად სტილის პრიორიტეტებიმას იყენებდნენ ბრაუზერები, რომლებსაც უკვე ესმით „სუფთა“.

პრეფიქსების მქონე თვისებები არ არის CSS სპეციფიკაციაში, ამიტომ მათი გამოყენება გამოიწვევს არასწორი კოდს.

მომრგვალებული კუთხეები CSS-ში სურათების გარეშე

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

ეს მეთოდი ცუდია, რადგან კოდი "გაფუჭებულია" დამატებითი ბლოკებით, მაგრამ, სამწუხაროდ, ბევრ მაგალითში ასეთი ბლოკები იქნება წარმოდგენილი. კიდევ ერთი მინუსი არის ის, რომ გამრუდების დიდი რადიუსით მოგიწევთ კიდევ უფრო მეტი ბლოკის დამატება, ვიდრე გამოყენებულია მაგალითში.

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

კონტენტის დაბლოკვა.

მაგალითის აღწერა

1. ბლოკის შიგნით კლასით = "ბლოკი" მივუთითებთ ელემენტს ძირითადი შინაარსისთვის ("content_block"), რომლის წინ ვათავსებთ ბლოკებს კუთხეების დამრგვალების სიმულაციისთვის ("b1", "b2" , "b3" ). ამის შემდეგ ჩვენ მათ იგივე ვათავსებთ, მაგრამ საპირისპირო თანმიმდევრობით.
2. ჩვენ დავაყენეთ სიმულაციური ბლოკები საჭირო სიმაღლეზე და გვერდით მინდვრებზე (CSS), რათა შევქმნათ კუთხეების იერსახე. ჩვენ ასევე გადავაყენეთ მათი შრიფტის ზომა (CSS) და დავაყენეთ :hidden - ეს განკუთვნილია ძველი ბრაუზერებისთვის, რომლებმაც შეიძლება გაზარდონ სიმაღლე და გახადონ იგი მითითებულზე დიდი.
3. ამ მაგალითში, გარდა კუთხეების დამრგვალებისა, დაემატა ჩარჩოს იმიტაციაც, თუ ეს არ გჭირდებათ, მაშინ უბრალოდ ამოიღეთ ყველა „საზღვრები“ ელემენტებიდან და ამოიღეთ ფონის ფერი „b3“-დან; ბლოკი.

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

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

მენიუ

მაგალითის აღწერა

1. CSS თვისების გამოყენებით, ჩვენ ბლოკს ვაყენებთ ფონის სურათზე, რომლის რეპროდუცირება აკრძალულია ვერტიკალურად და ჰორიზონტალურად (განმეორების გარეშე), რადგან ამ შემთხვევაში ეს არ არის საჭირო.
2. იმისათვის, რომ ბლოკის შიგნით ტექსტი არ შეეხოს მის კიდეებს, ჩვენ დავაყენეთ მისი padding (CSS) 5 პიქსელზე თითოეულ მხარეს.
3. შემდეგი, თქვენ უნდა დააყენოთ ბლოკი იმავე ზომებზე, როგორც ფონი. ჩვენი ფონის სურათის ზომებია 140x32 პიქსელი, მაგრამ ჩვენ ვაზუსტებთ სიგანეს (CSS) და სიმაღლეს (CSS) თავად ბლოკისთვის, შემცირებული 10 პიქსელით. მომიწია მისი შემცირება იმავე შიდა ბალიშების გამო, რომლებიც ასევე აფართოებენ ელემენტს 5 პიქსელით თითოეული მიმართულებით.

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

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

HTML და CSS მაგალითი: კუთხეების დამრგვალება SideBlocks-ის გამოყენებით

ძირითადი შინაარსი.

მაგალითის აღწერა

1. ბლოკის კლასის შიგნით = "ბლოკი" ვათავსებთ ორ ელემენტს - "left_bok" და "right_bok", რომლებზეც ვაყენებთ გვერდითი ნაწილების სურათებს ფონად (CSS) და კრძალავს მათ რეპროდუქციას (განმეორების გარეშე). თავად მთავარი ბლოკისთვის ჩვენ ვაყენებთ ფონს ცენტრალური ნაწილიდან და ვაძლევთ საშუალებას მისი დუბლირება მხოლოდ ჰორიზონტალურად (გამეორება-x).
2. ფონის ზომის შესაბამისი გვერდითი ბლოკების სიგანე ჩვენთვის არის 14x32 პიქსელი. მაგრამ მთავარი ბლოკისთვის, როგორც წინა მაგალითში, ჩვენ დავაყენეთ სიმაღლე 22 პიქსელზე ვერტიკალური ბალიშის კომპენსაციისთვის.
3. ჩვენ განვათავსებთ ჩვენს გვერდებს "ბლოკთან" მიმართებაში, ამიტომ ვაკონკრეტებთ :relative-ს და აბსოლუტს თავად გვერდებზე. კარგად, შემდეგ ვაჭერთ მათ მშობლის შესაბამის გვერდებზე CSS თვისებების გამოყენებით და .
4. იმისათვის, რომ ბლოკის შიგთავსი არ იყოს დამალული გვერდითი სურათების ქვეშ, ჩვენ დავაყენეთ „ბლოკი“, რომ ჰქონდეს გვერდითი ბალიშები (CSS), რომელიც შეიძლება იყოს ტოლი ან ოდნავ უფრო დიდი ვიდრე თავად მხარეები. ჩვენ ასევე ვაყენებთ მცირე მინდვრებს ზემოდან და ქვემოდან, რათა ტექსტი კიდეებს არ „წებდეს“.

IE6-ში არის პატარა შეცდომა ამ მეთოდით:

თუ "ბლოკის" სიგანე ან სიმაღლე უცნაურია, მაშინ 1px უსიამოვნო ჩაღრმავება გამოჩნდება ბლოკის შიდა კიდესა და მარჯვნივ განლაგებულ გვერდითა ზოლს შორის, რომელიც გააფუჭებს მთელ სურათს. ამ ხარვეზის გამოსწორება შესაძლებელია გამოყენებით CSS ჰაკიგარკვეული გამონათქვამით, მაგრამ აქ ასეთ მაგალითსაც არ მოვიყვან, რადგან ის ხშირად ყინავს ბრაუზერს და უმჯობესია არ გამოიყენოთ იგი.

მოდი სხვანაირად მოვიქცეთ. მოდით დავაყენოთ "right_bok" მარცხენა ზღვარი (CSS) 100%-ზე ისე, რომ ის გადავიდეს მთავარი ბლოკის მარჯვენა საზღვრებს მიღმა და შემდეგ დავაბრუნოთ უკან, გადავიტანოთ მარცხნივ რამდენიმე პიქსელის სიგანის ტოლი. IE6 სწორად მუშაობს ამ თვისებების მნიშვნელობებთან, ამიტომ მას სხვა არჩევანი არ აქვს გარდა იმისა, რომ მოათავსოს ბლოკი იქ, სადაც გვჭირდება.

კუთხეების დამრგვალების ეს მეთოდი წინას მსგავსია, მაგრამ მისგან განსხვავებით, აქ არ არის HTML ელემენტები, რომლებიც განთავსებულია გვერდებზე, არამედ მთავარ ბლოკში დამატებული. ფსევდო ელემენტები. ამ მიდგომის წყალობით, შესაძლებელი გახდა გვერდის არასაჭირო HTML კოდის მოშორება.

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

ძირითადი შინაარსი.

მაგალითის აღწერა

1. CSS-ის ფსევდოელემენტების გამოყენებით ჩვენ მივუთითებთ, რომ გვინდა დავამატოთ რაღაც მთავარი ბლოკის დასაწყისსა და ბოლოს. და CSS თვისების გამოყენებით, ჩვენ უბრალოდ ვამატებთ მომრგვალებული კუთხეების, უფრო სწორად გვერდების აუცილებელ სურათებს. ასე რომ, ჩვენ შევქმენით ორი ფსევდოელემენტი სურათებით.
2. კარგად, მაშინ ჩვენ ვაკეთებთ ზუსტად იგივეს, რაც წინა მაგალითში, მხოლოდ ჩვენ ვმუშაობთ შექმნილ ფსევდოელემენტებთან.

IE6-ისთვის და IE7-ისთვის, ამ მაგალითში გამოყენებულია შემდეგი "ყავარჯნები":

1. მოგეხსენებათ, IE6 და IE7 არ ესმით აქ გამოყენებული ფსევდოელემენტები, ამიტომ ჩვენ ვაკეთებთ შემდეგს. ჩვენ ვიყენებთ გამოხატვას, რომელიც აერთიანებს ორ ტეგს მთავარი ელემენტის შიგნით და მათ იგივე სტილებს ვაძლევთ, როგორც წინა მაგალითში. გაითვალისწინეთ, რომ ინექციური კოდი, რომელიც მოდის პირველი innerHTML-ის შემდეგ, ემატება გახსნის "ბლოკის" ტეგის შემდეგ, ხოლო მეორე innerHTML-ის შემდეგ ემატება დახურვის ტეგამდე. დიახ, ჩვენს შემთხვევაში ამას არ აქვს მნიშვნელობა, რადგან აბსოლუტური პოზიციონირება გამოიყენება, მაგრამ ზოგჯერ სასარგებლოა ამის შესახებ ცოდნა.
2. სხვა ბრაუზერებისთვის ამ კოდის ხილვის თავიდან ასაცილებლად, ჩვენ მასში ვურთავთ პირობითი კომენტარები. უკეთესი იქნება თუ ცალკე CSS ფაილში ჩადებ, რომელიც დაკავშირებულია იგივე კომენტარებით დახურულ ტეგთან.

მომრგვალებული კუთხეები CSS-ში ბლოკის შეფუთვის გამოყენებით

ამ მეთოდის არსი ის არის, რომ ჯერ გამოსახულების კუთხეები ამოიჭრება. შემდეგ მთავარი ბლოკის შიგნით მოთავსებულია კიდევ რამდენიმე ბლოკი (კუთხეების რაოდენობის მიხედვით), რომლებიც ბუდობენ ერთმანეთში. თითოეულ მათგანს ეძლევა ერთი გამოსახულების კუთხე, როგორც ფონი. სურათების რეპროდუცირება აკრძალულია და კოორდინატები მოცემულია ისე, რომ ისინი მდებარეობდნენ ბლოკების კუთხეებში. ასე მიიღება მომრგვალებული კუთხეების ეფექტი.

HTML და CSS მაგალითი: კუთხეების დამრგვალება Block Wrap-ის გამოყენებით

კონტენტის დაბლოკვა.

მაგალითის აღწერა

1. კიდევ ოთხს ვათავსებთ მთავარ ბლოკში. ვინაიდან არცერთ ამ ბლოკს არ აქვს მინდვრები ან საზღვრები და მხოლოდ ყველაზე შიდა ბლოკს აქვს ჩაღრმავები, ისინი ყველა თანაბარია სიმაღლეში და სიგანეში.
2. CSS თვისების გამოყენებით, ჩვენ ვაყენებთ თითოეულ შიდა ბლოკს კუთხეში, როგორც ფონზე, ვუკრძალავთ მათ რეპროდუცირებას და განვათავსებთ მათ ბლოკების კუთხეებში. და რადგან ელემენტების ფონის ფერი გამჭვირვალეა, ფონის ოთხივე კუთხე ჩანს გვერდზე.
3. დაამატეთ სასურველი ფონის ფერი გარე ბლოკში კუთხით. ყველაფერი მზადაა.

თქვენ შეგიძლიათ ცალსახად დააყენოთ ბლოკის სიგანე class="block"-ში სასურველი თვისების მითითებით, მაგრამ სიმაღლის შესაცვლელად თქვენ უნდა გამოიყენოთ ყველაზე შიდა ელემენტი (ჩვენთვის ეს არის "rb").

დამრგვალებული კუთხეები CSS-ში პოზიციონირების გამოყენებით

აქაც ფონისთვის ამოჭრილია კუთხეები, რომლებიც მითითებული იქნება პატარა ბლოკებზე. CSS აბსოლუტური პოზიციონირების გამოყენებით, ეს ბლოკები მოთავსებულია მთავარი ელემენტის კუთხეებში, რომელსაც ენიჭება სასურველი ფონის ფერი.

HTML და CSS მაგალითი: კუთხეების დამრგვალება პოზიციონირების გამოყენებით

კონტენტის დაბლოკვა.

მაგალითის აღწერა

1. მთავარი ელემენტის შიგნით (class= "block") ვათავსებთ ოთხ ტეგს კლასებით "corn_lt" , "corn_rt" , "corn_lb" , "corn_rb" , რომლებიც იმოქმედებენ როგორც კუთხის ბლოკები.
2. CSS თვისების გამოყენებით, ჩვენ ვაკავშირებთ ჩვენს საკუთარ ფონის სურათს თითოეულ კუთხის ბლოკს და ვაყენებთ მათ სიგანეს და სიმაღლეს, რომ ტოლი იყოს ამ ფონის სურათების ზომით. ყოველი შემთხვევისთვის, ჩვენ აღვადგენთ შრიფტის ზომას (CSS) და ვჭრით ჭარბს (CSS).
3. ჩვენ განვსაზღვრავთ ფარდობით განლაგებას ძირითადი ელემენტისთვის (CSS:relative), რადგან ჩვენ განვათავსებთ კუთხის ბლოკებს მის მიმართ, ხოლო თავად კუთხეებისთვის - აბსოლუტური (აბსოლუტური).
4. CSS თვისებების გამოყენებით და , ჩვენ ვაზუსტებთ ვერტიკალურ და ჰორიზონტალურ დისტანციებს კუთხის ბლოკებისთვის ისე, რომ ისინი განლაგდეს მთავარი ბლოკის კუთხეებში.

IE6-ში ამ მეთოდთან დაკავშირებით რამდენიმე პრობლემაა:

1. თუ "ბლოკის" სიგანე ცალსახად არ არის მითითებული, მაშინ მარცხნივ კუთხეები არ დაეცემა თავის ადგილზე. ამის მიზეზი ბლოკში შიდა ბალიშის არსებობაა. პრობლემის გადასაჭრელად უმარტივესი გზაა ჩაღრმავების ამოღება და „ბლოკის“ ძირითადი შინაარსის (კუთხის გარეშე) ჩასმა დამატებით ბლოკის შეფუთვაში და შემდეგ შეფუთვაზე საჭირო ჩაღრმავების მითითება. მაგრამ მე აქ სხვაგვარად გავაკეთე, განლაგების ჩართვით zoom :1 თვისების გამოყენებით, რომელიც ეუბნება IE6-ს აჩვენოს ელემენტი მისი ბუნებრივი ზომით. ეს თვისება არასწორია, ასე რომ, თუ გადაწყვეტთ მის გამოყენებას, გირჩევთ დაკავშირება მეშვეობით პირობითი კომენტარები.
2. იგივე ერთი პიქსელიანი შეცდომა, რომელიც ზემოთ იყო განხილული. მაგრამ აქ ხარვეზები შეიძლება ჩამოყალიბდეს არა მხოლოდ მარჯვენა კუთხეებსა და ბლოკის მარჯვენა მხარეს შორის, არამედ ბოლოში. და თუ ჩვენ მოვიშორეთ ხარვეზები მარჯვნივ, მაშინ ეს არ იმუშავებს ქვედა ნაწილებთან. გამოსავალი არის ცალსახად მიუთითოთ ძირითადი ელემენტის თანაბარი სიგანე და სიმაღლე. თქვენ ასევე შეგიძლიათ დააყენოთ კენტი მნიშვნელობები, მაგრამ შემდეგ თქვენ უნდა დააყენოთ დისტანციები ქვევით და მარჯვნივ გადაადგილებისთვის, რომ იყოს არა ნული, არამედ -1 პიქსელი.

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

Sprite არის სურათი, რომელიც აერთიანებს რამდენიმე სურათს, რომლებიც გამოიყენება ვებსაიტის ელემენტების ფონად. Sprite-ის რომელი ნაწილი იქნება კონკრეტული HTML ელემენტის ფონი, დამოკიდებულია სპეციალურ CSS თვისებებში მითითებულ კოორდინატებზე.

HTML და CSS მაგალითი: კუთხეების დამრგვალება პოზიციონირებისა და შპრიტების გამოყენებით

კონტენტის დაბლოკვა.

მაგალითის აღწერა

1. CSS თვისების გამოყენებით, ჩვენ ვაკავშირებთ ფონის სპრაიტის სურათს კუთხის ბლოკებს, რომელსაც აქვს მრგვალი ფორმა 22x22 პიქსელის ზომებით (11x11 პიქსელი თითოეული მეოთხედი კუთხისთვის).
2. CSS თვისების გამოყენებით, ჩვენ ვაზუსტებთ ფონის ოფსეტური კოორდინატებს. მაგალითად, მნიშვნელობა -11px 0 ნიშნავს, რომ ფონი გადაინაცვლებს მარცხნივ 11px-ით X ღერძზე, მაგრამ არ გადაინაცვლებს Y ღერძზე. ამრიგად, სპრაიტის მარცხენა ნახევარი სცილდება ელემენტის საზღვარს და რჩება მხოლოდ მარჯვენა. მაგრამ ის მხოლოდ ნახევრად ჩანს, რადგან მისი სიმაღლეა 22 პიქსელი, ხოლო თავად კუთხის ბლოკის სიმაღლე მხოლოდ 11 პიქსელია. ასე რომ, გამოდის, რომ ამ მნიშვნელობით, ელემენტის ფონი იქნება სპრაიტის ზედა მარჯვენა მეოთხედი.

IE6-თან არის იგივე პრობლემები, როგორც წინა მაგალითში.

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

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

და კიდევ ერთი რამ. წინა მაგალითებში კუთხეები ამოჭრილი იყო შიგნით ფონთან ერთად და ეს ყოველთვის არ არის საჭირო, მით უმეტეს, თუ მოსალოდნელია, რომ მომრგვალებული კუთხეებით ბლოკის ფონი არაერთგვაროვანი იქნება. ამიტომ, აქ ჩარჩოს შიგნით ფონი გამჭვირვალე გახდა (PNG ფორმატი ამის საშუალებას იძლევა) და როდესაც კუთხეები ამოიჭრა, მათი შიგნითაც გამჭვირვალე აღმოჩნდა. საჭიროების შემთხვევაში, თქვენ ასევე შეგიძლიათ გამოიყენოთ მსგავსი მიდგომა წინა მაგალითებში.

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

კონტენტის დაბლოკვა.

ფონი , და მისი დახმარებით ვათავსებთ მათ მარჯვენა მხარეს და კრძალავთ "გამრავლებას". ესე იგი, კუთხეები მზადაა.

მას შემდეგ, რაც ჩვენ დავაზუსტეთ ბლოკი "ბლოკისთვის" (CSS), ფსევდოელემენტები და, შესაბამისად, კუთხეები არ არის განთავსებული ბლოკის კუთხეებში, მაგრამ 15 პიქსელით არის დაშორებული კიდეებიდან. ამის გამოსწორების მიზნით, ჩვენ ვაძლევთ ფსევდოელემენტებს უარყოფით მინდვრებს (CSS) აუცილებელ გვერდებზე, რათა განლაგდეს ისინი შეწევის თავზე. მაგრამ მინდვრებს ვაკეთებთ არა 15, არამედ 17 პიქსელის ტოლი, ეს აუცილებელია ჩარჩოს დასაფარად (CSS), რომლის სიგანე არის 2 პიქსელი (15+2=17). ეს არის ახლა.

IE6-ისთვის და IE7-ისთვის ჩვენ გამოვიყენეთ უკვე ნაცნობი "ყავარჯნები" HTML კოდის ინექციით, რადგან ამ ბრაუზერებს არ ესმით აქ გამოყენებული ფსევდოელემენტები:

1. გამოხატვის გამოყენებით, ჩვენ ვაერთიანებთ ორ ტეგს მთავარი ელემენტის შიგნით, რომლებსაც ასევე ვაქცევთ ბლოკებად. შემდეგ მათში ვათავსებთ ერთ ტეგს. და შემდეგ ამ ტეგებს აქვთ იგივე თვისებები, რაც ფსევდოელემენტებს. ერთადერთი ის არის, რომ დამატებით დავამატებთ CSS თვისებას :relative, რომლის გარეშეც ჩარჩო გადაფარავს კუთხეებს.

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

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

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

HTML და CSS მაგალითი: მომრგვალებული კუთხეები, სადაც შეგიძლიათ შეცვალოთ ბლოკის სიმაღლე

კონტენტის დაბლოკვა.

და ისევ, IE6-ისთვის და IE7-ისთვის, ჩვენ ვამატებთ რამდენიმე დამატებით ელემენტს მთავარ ბლოკში გამოხატვის გამოყენებით და ვხურავთ კოდს პირობით კომენტარებში. მხოლოდ ამჯერად ჩვენ არც კი შევეცდებით ფსევდოელემენტების მიბაძვას, არამედ ამას უფრო მარტივად გავაკეთებთ.

1. ჩვენ ვამატებთ ოთხ ტეგს "ბლოკის" შიგნით და ვაყენებთ მათ პოზიციონირებას. შემდეგ კი უბრალოდ ვაჩვენებთ მათ გამოსახულების კუთხეებს, როგორც ფონი და ვათავსებთ მათ მთავარი ელემენტის კუთხეებში. ანუ ჩვენ ვიმოქმედებთ ზუსტად ისე, როგორც ზემოთ განხილულ მეთოდებში.
2. ერთი პიქსელიანი ხარვეზის მოსაშორებლად (რომელიც ზემოთ უკვე არაერთხელ იყო ნახსენები), მარჯვენა კუთხის ელემენტებს დაამატეთ მარცხენა ზღვარი (CSS) 100% მნიშვნელობით და უარყოფითი ოფსეტი -9 პიქსელი. ზოგადად, თუ გახსოვთ, ეს ოფსეტი ტოლი უნდა იყოს კუთხის ბლოკის სიგანეზე (ჩვენთვის ეს არის 11 პიქსელი), მაგრამ არ დაივიწყოთ 2 პიქსელი საზღვარი, რომელიც აქ გვაქვს - კუთხეები უნდა დავაყენოთ მის თავზე. (11px-2px=9px).

სხვათა შორის, ფაქტობრივად, უფრო ადვილი იქნებოდა ფსევდოელემენტების ემულაცია, როგორც ეს გავაკეთეთ წინა მაგალითში - ამ გზით ნაკლები დამატებითი კოდი იქნებოდა. მაგრამ არა IE6-ში, ამ ბრაუზერს დასჭირდება კიდევ რამდენიმე „ყავარჯნები“ და, შედეგად, უნდა დაწეროს ორი ცალკე პირობითი კომენტარები- IE6-ისთვის და IE7-ისთვის და ეს მხოლოდ კოდს აფუჭებს...

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