Cienie

Sprawdź angielską wersje tej lekcji w naszym rozszerzonym tutorialu Bootstrap.

W tej lekcji poświęcimy trochę czasu na naukę teorii związanej ze cieniami.

Tak jak w projekcie Material Design, cienie odgrywają dużą rolę w Material Minimal (systemie projektowym MDB). Jednak tutaj są one zdecydowanie bardziej subtelne - mają jaśniejsze kolory i często są bardziej rozległe.

W odróżnieniu od Material Design, Material Minimal nie boi się korzystać z kolorowych cieni, co można zobaczyć na przykładzie naszych przycisków. Jednakże zawsze są to delikatne akcenty, ponieważ Material Minimal ceniony jest za subtelność i unika przesady.

Cienie są niewątpliwie jednym z najbardziej charakterystycznych elementów Material Minimal i nadają mu specyficzny charakter.

Domyślne cienie

W jasnym projekcie i jasnych kompozycjach Material Minimal stosuje delikatne cienie w pięciostopniowej skali. Możesz je dodać za pomocą następujących klas:

Dla większości komponentów (takich jak karty czy okna modalne) Material Minimal używa standardowych, delikatnych cieni o poziomie 4 (takich samych jak klasa shadow-4).

/* Default, soft shadow of level 4 */
box-shadow: 0 2px 15px -3px rgb(0 0 0 / 7%), 0 10px 20px -2px rgb(0 0 0 / 4%)

Są one dodawane domyślnie do komponentu.

Cienie przycisków delikatnie zostają przyozdobione kolorem, który pasuje do koloru tła przycisków.

Mocne cienie

W ciemnym projekcie i ciemnych elementach użyj mocnych cieni, dodając do klasy cienia -strong. Na przykład .shadow-2-strong

Efekt cienia przy najechaniu myszką

Dodając klasę .hover-shadow do elementu, możesz zastosować efekt cienia przy najechaniu myszką.

<img
  src="https://mdbcdn.b-cdn.net/img/new/standard/nature/029.webp"
  class="img-fluid rounded-4 hover-shadow"
  alt="Winter forest"
/>

Obrazy z cieniem

Teoretycznie, w zależności od jasności obrazu powinieneś używać standardowego lub silnego cienia. Jednak praktyczne doświadczenie pokazuje, że mocne cienie w większości przypadków lepiej się sprawdzają przy obrazach.

<div class="container">

  <!--Grid row-->
  <div class="row">
    <!--Grid column-->
    <div class="col-lg-4 col-md-12 mb-4">
      <img
        src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
        class="img-fluid rounded-4 shadow-2-strong"
        alt="Hollywood Sign on The Hill"
      />
    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-lg-4 col-md-6 mb-4">
      <img
        src="https://mdbcdn.b-cdn.net/img/new/standard/city/031.webp"
        class="img-fluid rounded-4 shadow-2-strong"
        alt="Five Lands National Park"
      />
    </div>

    <!--Grid column-->

    <!--Grid column-->
    <div class="col-lg-4 col-md-6 mb-4">
      <img
        src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp"
        class="img-fluid rounded-4 shadow-2-strong"
        alt="Los Angeles Skyscrapers"
      />
    </div>
    <!--Grid column-->
  </div>
  <!--Grid row-->

  <!--Grid row-->
  <div class="row">
    <!--Grid column-->
    <div class="col-lg-4 col-md-12 mb-4">
      <img
        src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
        class="img-fluid rounded-4 shadow-2-strong"
        alt="Skyscrapers"
      />
    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-lg-4 col-md-6 mb-4">
      <img
        src="https://mdbcdn.b-cdn.net/img/new/standard/city/045.webp"
        class="img-fluid rounded-4 shadow-2-strong"
        alt="New York City"
      />
    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-lg-4 col-md-6 mb-4">
      <img
        src="https://mdbcdn.b-cdn.net/img/new/standard/city/046.webp"
        class="img-fluid rounded-4 shadow-2-strong"
        alt="American Home"
      />
    </div>
    <!--Grid column-->
  </div>
  <!--Grid row-->

</div>

Dodaj cienie do obrazów w karuzeli

Na podstawie tego, co przeczytałeś powyżej, powinno być dla ciebie jasne, że powinniśmy użyć mocnych cieni w naszej karuzeli.

Zdjęcia w karuzeli mają intensywne, ciemne kolory, więc domyślne, jasne cienie byłyby praktycznie niewidoczne.

Podobnie jak klasę dla zaokrąglonych narożników, musimy również dodać klasę dla cieni do elementu carousel-inner.

<!-- Inner -->
<div class="carousel-inner rounded-6 shadow-4-strong">

I to wszystko. Po zapisaniu pliku i odświeżeniu przeglądarki powinieneś zobaczyć, że cień został dodany do karuzeli.

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Previous Next