ფაილი მარკეტინგული

CSS3 ფუნქციები, რომლებიც შეიძლება არ იცოდეთ: Flexbox, ბადის განლაგება, მორგებული თვისებები, გადასვლები, ანიმაციები და მრავალი ფონი

კასკადური სტილის ფურცლები (CSS) განაგრძეთ განვითარება და უახლეს ვერსიებს შეიძლება ჰქონდეს ისეთი ფუნქციები, რომლებიც შესაძლოა არც კი იცოდეთ. აქ არის რამოდენიმე ძირითადი გაუმჯობესება და მეთოდოლოგია, რომელიც შემოვიდა CSS3-ით, კოდის მაგალითებთან ერთად:

  • მოქნილი ყუთის განლაგება (Flexbox): განლაგების რეჟიმი, რომელიც საშუალებას გაძლევთ შექმნათ მოქნილი და საპასუხო განლაგება ვებ გვერდებისთვის. flexbox-ით თქვენ შეგიძლიათ მარტივად გაასწოროთ და გაანაწილოთ ელემენტები კონტეინერში. ამ მაგალითში, .container კლასის გამოყენება display: flex flexbox-ის განლაგების რეჟიმის გასააქტიურებლად. The justify-content ქონება დაყენებულია center ბავშვის ელემენტის ჰორიზონტალურად ცენტრირება კონტეინერში. The align-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 ქსელის განლაგების რეჟიმის გასააქტიურებლად. The grid-template-columns ქონება დაყენებულია repeat(2, 1fr) შექმნას ორი თანაბარი სიგანის სვეტი. The gap თვისება ადგენს მანძილს ქსელის უჯრედებს შორის. 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 ადგენს ელემენტის სიგანეს, სიმაღლეს და საწყისი ფონის ფერს. The transition ქონება დაყენებულია 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 ანიმაცია გამოიყენება ყუთის როტაციისთვის. The animation-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, განლაგებულია ელემენტის მარცხენა ზედა კუთხეში. The background-position თვისება გამოიყენება თითოეული სურათის პოზიციონირების გასაკონტროლებლად. The background-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;
    }

    შედეგი

    Douglas Karr

    Douglas Karr არის CMO of OpenINSIGHTS და დამფუძნებელი Martech Zone. დუგლასი დაეხმარა ათეულობით წარმატებულ MarTech სტარტაპს, დაეხმარა 5 მილიარდ დოლარზე მეტის შეძენისა და ინვესტიციების გამომუშავებაში და აგრძელებს კომპანიებს მათი გაყიდვებისა და მარკეტინგული სტრატეგიების განხორციელებაში და ავტომატიზაციაში. დუგლასი არის საერთაშორისოდ აღიარებული ციფრული ტრანსფორმაციის და MarTech ექსპერტი და სპიკერი. დუგლასი ასევე არის Dummie's-ის სახელმძღვანელოს და ბიზნეს ლიდერობის წიგნის გამოქვეყნებული ავტორი.

    დაკავშირებული სტატიები

    დაბრუნება ღილაკზე
    დახურვა

    Adblock აღმოჩენილია

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