ფაილი მარკეტინგული
CSS3 ფუნქციები, რომლებიც შეიძლება არ იცოდეთ: Flexbox, ბადის განლაგება, მორგებული თვისებები, გადასვლები, ანიმაციები და მრავალი ფონი
კასკადური სტილის ფურცლები (CSS) განაგრძეთ განვითარება და უახლეს ვერსიებს შეიძლება ჰქონდეს ისეთი ფუნქციები, რომლებიც შესაძლოა არც კი იცოდეთ. აქ არის რამოდენიმე ძირითადი გაუმჯობესება და მეთოდოლოგია, რომელიც შემოვიდა CSS3-ით, კოდის მაგალითებთან ერთად:
- მოქნილი ყუთის განლაგება (Flexbox): განლაგების რეჟიმი, რომელიც საშუალებას გაძლევთ შექმნათ მოქნილი და საპასუხო განლაგება ვებ გვერდებისთვის. flexbox-ით თქვენ შეგიძლიათ მარტივად გაასწოროთ და გაანაწილოთ ელემენტები კონტეინერში. ამ მაგალითში,
.container
კლასის გამოყენებაdisplay: flex
flexbox-ის განლაგების რეჟიმის გასააქტიურებლად. Thejustify-content
ქონება დაყენებულიაcenter
ბავშვის ელემენტის ჰორიზონტალურად ცენტრირება კონტეინერში. Thealign-items
ქონება დაყენებულიაcenter
ბავშვის ელემენტის ვერტიკალურად ცენტრირება. The.item
class ადგენს ფონის ფერს და ბალიშს ბავშვის ელემენტისთვის.
HTML
<div class="container">
<div class="item">Centered Element</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.item {
background-color: #ddd;
padding: 20px;
}
შედეგი
ცენტრალური ელემენტი
- ბადის განლაგება: განლაგების სხვა რეჟიმი, რომელიც საშუალებას გაძლევთ შექმნათ რთული ბადეზე დაფუძნებული განლაგება ვებ გვერდებისთვის. ბადის საშუალებით შეგიძლიათ მიუთითოთ რიგები და სვეტები და შემდეგ განათავსოთ ელემენტები ბადის კონკრეტულ უჯრედებში. ამ მაგალითში,
.grid-container
კლასის გამოყენებაdisplay: grid
ქსელის განლაგების რეჟიმის გასააქტიურებლად. Thegrid-template-columns
ქონება დაყენებულიაrepeat(2, 1fr)
შექმნას ორი თანაბარი სიგანის სვეტი. Thegap
თვისება ადგენს მანძილს ქსელის უჯრედებს შორის. The.grid-item
class ადგენს ფონის ფერს და ბალიშს ბადის ელემენტებისთვის.
HTML
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
შედეგი
საქონელი 1
საქონელი 2
საქონელი 3
საქონელი 4
- გადასვლები: CSS3-მა შემოიტანა მრავალი ახალი თვისება და ტექნიკა ვებ გვერდებზე გადასვლების შესაქმნელად. მაგალითად,
transition
თვისება შეიძლება გამოყენებულ იქნას CSS თვისებების ცვლილებების ანიმაციისთვის დროთა განმავლობაში. ამ მაგალითში,.box
class ადგენს ელემენტის სიგანეს, სიმაღლეს და საწყისი ფონის ფერს. Thetransition
ქონება დაყენებულიაbackground-color 0.5s ease
ფონის ფერის თვისებაზე ცვლილებების ანიმაცია ნახევარ წამზე მეტი დროით შეყვანის ფუნქციით. The.box:hover
კლასი ცვლის ელემენტის ფონის ფერს, როდესაც მასზე მაუსის მაჩვენებელია, რაც იწვევს გადასვლის ანიმაციას.
HTML
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}
შედეგი
Hover
Აქ!
Აქ!
- ანიმაციები: CSS3-მა შემოიტანა მრავალი ახალი თვისება და ტექნიკა ვებ გვერდებზე ანიმაციების შესაქმნელად. ამ მაგალითში, ჩვენ დავამატეთ ანიმაცია გამოყენებით
animation
ქონება. ჩვენ განვსაზღვრეთ ა@keyframes
ანიმაციის წესი, რომელიც განსაზღვრავს, რომ ყუთი უნდა ბრუნავდეს 0 გრადუსიდან 90 გრადუსამდე 0.5 წამის განმავლობაში. როდესაც ყუთი ზემოდან არის გადაკიდებული,spin
ანიმაცია გამოიყენება ყუთის როტაციისთვის. Theanimation-fill-mode
ქონება დაყენებულიაforwards
იმის უზრუნველსაყოფად, რომ ანიმაციის საბოლოო მდგომარეობა შენარჩუნებულია მისი დასრულების შემდეგ.
HTML
<div class="rotate"></div>
CSS
.rotate {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
/* Add animation properties */
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
/* Define the animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(90deg); }
}
.rotate:hover {
animation-name: spin;
}
შედეგი
Hover
Აქ!
Აქ!
- CSS მორგებული თვისებები: აგრეთვე ცნობილი, როგორც CSS ცვლადები, მორგებული თვისებები დაინერგა CSS3-ში. ისინი საშუალებას გაძლევთ განსაზღვროთ და გამოიყენოთ თქვენი საკუთარი პერსონალური თვისებები CSS-ში, რომლებიც შეიძლება გამოყენებულ იქნას მნიშვნელობების შესანახად და ხელახლა გამოყენებისთვის თქვენს სტილის ფურცლებზე. CSS ცვლადები იდენტიფიცირებულია სახელით, რომელიც იწყება ორი ტირეთი, მაგ
--my-variable
. ამ მაგალითში ჩვენ განვსაზღვრავთ CSS ცვლადს სახელწოდებით –primary-color და ვაძლევთ მას მნიშვნელობას#007bff
, რომელიც არის ლურჯი ფერი, რომელიც ჩვეულებრივ გამოიყენება როგორც ძირითადი ფერი მრავალ დიზაინში. ჩვენ გამოვიყენეთ ეს ცვლადი დასაყენებლადbackground-color
ღილაკის ელემენტის თვისება, გამოყენებითvar()
ფუნქცია და გადაცემა ცვლადის სახელში. ეს გამოიყენებს ცვლადის მნიშვნელობას, როგორც ღილაკის ფონის ფერს.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- მრავალი ფონი: CSS3 გაძლევთ საშუალებას მიუთითოთ მრავალი ფონის სურათი ელემენტისთვის, მისი პოზიციონირებისა და დაწყობის რიგის კონტროლის შესაძლებლობით. ფონი შედგება ორი სურათისგან,
red.png
მდეblue.png
, რომლებიც იტვირთება გამოყენებითbackground-image
ქონება. პირველი სურათი,red.png
, განლაგებულია ელემენტის ქვედა მარჯვენა კუთხეში, ხოლო მეორე სურათი,blue.png
, განლაგებულია ელემენტის მარცხენა ზედა კუთხეში. Thebackground-position
თვისება გამოიყენება თითოეული სურათის პოზიციონირების გასაკონტროლებლად. Thebackground-repeat
თვისება გამოიყენება გამოსახულების გამეორების გასაკონტროლებლად. პირველი სურათი,red.png
, დაყენებულია არ განმეორდეს (no-repeat
), ხოლო მეორე სურათი,blue.png
, დაყენებულია განმეორებაზე (repeat
).
HTML
<div id="multibackground"></div>
CSS
#multibackground {
background-image: url(red.png), url(blue.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height: 200px;
width: 200px;
}