სხვადასხვა ლამაზმანების შექმნამდე პირველი ასეთი სილამაზე ჩარჩო იქნება.

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

მყარი - მყარი ჩარჩო;

წყვეტილი – წერტილოვანი ჩარჩო;

წერტილოვანი – წერტილოვანი ჩარჩო;

ორმაგი – ქვეხაზის ჩარჩო;

ღარი – ჩრდილისგან დამზადებული ჩარჩო;

ქედი – რელიეფით;

მარტივი ჩარჩოების შესაქმნელად საჭიროა კიდევ ორი ​​ძალა - ეს

widht – ჩარჩო tovshchina;

ფერი - ჩარჩოს ფერი;

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

p(
საზღვარი: 2px მყარი #ffff00;
}

padding - შიდა (ჩარჩოში შესვლა სივრცეში);

ზღვარი - გარე (ჩარჩო ექვემდებარება გარე ობიექტებს);

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

ზედა – მხეცთან წვდომა;

მარჯვენა - შესასვლელი მარჯვნივ;

ქვედა - წვდომა ქვემოდან;

მარცხნივ - მარცხენა ხელით წვდომა

ამ ავტორიტეტების მნიშვნელობები იწერება შემცირებულ ვერსიაში სათითაოდ (შეფუთვა: 10px 30px 15px 20px) და პირველ რიგში მოთავსებულია ზედა მნიშვნელობები, შემდეგ კი დანარჩენები მიჰყვებიან წლის ისარს.

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

p(
საზღვარი: 2px მყარი #ffff00;

ზღვარი: 20 პიქსელი;
}

თუ თქვენ გჭირდებათ ტექსტის ან სურათების განთავსება კადრის ცენტრში, შეგიძლიათ დაამატოთ ტექსტის გასწორება: ცენტრი „p“ ამომრჩეველზე;

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

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

p(
საზღვარი: 2px მყარი #ffff00;
padding : 10px 20px 10px 20px;
ზღვარი: 20 პიქსელი;
სიგანე: 400px;
}

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

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

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

p(
საზღვარი: 2px მყარი #ffff00;
padding : 10px 20px 10px 20px;
ზღვარი: 20px ავტო;
სიგანე: 400px;
}

პირველი მაგალითისთვის, ჩვენ ვქმნით html დოკუმენტს და ვქმნით მყარ ჩარჩოს სხეულის ბლოკისთვის (დოკუმენტის სხეული) და ერთი აბზაცისთვის.

მეორე მხარეს, CSS შეიცვლება (ის, რომლებიც განთავსებულია სტილის ტეგში).

Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать Вас на своём сайте.

Результат:

Следующая рамка dashed (пунктир).

p{
text-indent : 30px ;
border : 2px dashed #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Результат:

Рамка dotted :

p {
text-indent : 30px ;
border : 3px dotted #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка double :

p {
text-indent : 30px ;
border : 5px double #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка groove :

p {
text-indent : 30px ;
border : 7px groove #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка ridge :

p {
text-indent : 30px ;
border : 10px ridge #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Для этого уберём border , и добавим border-radius и box-shadow .

p {
border-radius : 10px ;
box-shadow : 0 0 0 3px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Размоем внешний край рамки. Для этого в свойстве box-shadow , увеличим третью цифру.

p {
border-radius : 10px ;
box-shadow : 0 0 7px 3px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Сделаем разноцветную рамку. Для этого в свойство box-shadow , через запятую, добавим ещё несколько комплектов значений с разными цветами.

p {
border-radius : 10px ;

0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Можно сделать круг в рамке. Для этого зададим абзацу одинаковую высоту и ширину, то есть сделаем квадрат, изменим значение border-radius

p {
border-radius : 50%/50% ;
box-shadow : 0 0 0 3px #ff4f00 ,
0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
padding : 40px ;
margin : 20px auto ;
width : 130px ;
height : 130px ;
text-align : center;
}

Влад Мержевич

С помощью CSS можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border , как наиболее универсальное, а также outline и, как ни удивительно, box-shadow , основная задача которого - создание тени. Далее рассмотрим эти методы и их различия между собой.

Свойство outline

Самое простое свойство для создания рамок. Имеет те же параметры, что и border , но существенно отличается от него некоторыми деталями:

• outline выводится вокруг элемента (border внутри);
• outline не влияет на размеры элемента (border добавляется к ширине и высоте элемента);
• outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах (border можно использовать для любой стороны или всех сразу);
• на outline не действует радиус скругления, заданный свойством border-radius (на border действует).

Возникает вопрос - в каких случаях нужен outline , когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border ? Ситуаций не так и много, но они встречаются:

• создание сложных разноцветных рамок;
• добавление рамки к элементу при наведении на него курсора мыши;
• сокрытие рамки, добавляемой браузером автоматически для некоторых элементов при получении фокуса;
• для outline можно задать расстояние от края элемента до рамки с помощью свойства outline-offset , для создания .

Разноцветные рамки

Надо понимать, что outline ни в коей мере не заменяет border и вполне может существовать вместе с ним, как показано в примере 1.

Пример 1. Создание рамки

ამ შემთხვევაში, ელემენტის გვერდით არის შავი ჩარჩო, რომელიც ფონზე გამაგრებულია თეთრი მორთვით (პატარა 1).

ბრინჯი. 1. ჩარჩო ელემენტის გარშემო

ჩარჩო ვიკორისტანის საათის ქვეშ: hover

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

კონდახი 2. ჩარჩო საჩვენებელი საათის ქვეშ

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

კონდახი 3. ჩარჩო საჩვენებელი საათის ქვეშ

ჩარჩო ფორმის ველების გარშემო

ზოგიერთ ბრაუზერში (Chrome, Safari, Opera-ს სხვა ვერსიები), ფოკუსის გათავისუფლებისას ფორმის ველების გვერდით ნაჩვენებია პატარა ფერადი ჩარჩო (პატარა 2). ამისათვის საკმარისია დაამატოთ დენის მონახაზის მნიშვნელობა არცერთზე, როგორც ნაჩვენებია ილუსტრაცია 4-ში.

ბრინჯი. 2. ჩარჩო კიდეების გარშემო

კონდახი 4. ჩარჩოს აღება

ჩარჩოები ყუთი-ჩრდილის მეშვეობით

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

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

ილუსტრაცია 4 გვიჩვენებს ორი ჩარჩოს დამატებას და ერთი მემარჯვენეებს შორის ერთი ყუთი-ჩრდილოვანი დენის დახმარებით.

კონდახი 4. Vikoristannya ყუთი-ჩრდილი

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

ბრინჯი. 3. Power box-shadow-ით შექმნილი ჩარჩოები

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

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

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

მეთოდი 1: საზღვარი და მონახაზი

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

ერთი (კონტური: მყარი 6px #fff; მონახაზი: მყარი 6px #888; )

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

მეთოდი 2: ფსევდო ელემენტი

ეს მეთოდი ეყრდნობა ჩარჩოს აბსოლუტურ განლაგებას:

ორი ( კონტური: მყარი 6px #fff; პოზიცია: ფარდობითი; z-ინდექსი: 1; ) .ორი: ადრე ( შინაარსი: ""; ჩვენება: ბლოკი; პოზიცია: აბსოლუტური; ზედა: -12 პიქს; მარცხნივ: -12 პიქსელი; კონტური: მყარი 6px #888; სიგანე: 312px; padding-ქვედა: 12px; min-სიმაღლე: 100%; z-ინდექსი: 10;

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

მეთოდი 3: ჩრდილი

უმოკლეს გზაზე, თქვენ გჭირდებათ მხოლოდ ერთი რიგის კოდი box-shadow პარამეტრებით.

სამი (ყუთი-ჩრდილი: 0 0 0 6px #fff, 0 0 0 12px #888; )

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

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

რა თქმა უნდა, box-shadow მხარდაჭერა შემოიფარგლება ახალი ბრაუზერებით.

მეთოდი 4: დამატებითი div ელემენტი

რომელ მეთოდს აქვს გარე ელემენტი?