Darmowy kurs projektowania UI/UX

Dowiedz się, jak tworzyć wyjątkowe projekty, czytając mój nowy samouczek.

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:

.shadow-0 usuwa cień

.shadow-1

.shadow-2

.shadow-3

.shadow-4

.shadow-5

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.

Card example

Some quick example text to build on the card title and make up the bulk of the card's content.

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

Uwaga: Ten sam cień dodany do ciemnego elementu będzie znacznie mniej zauważalny niż cień dodany do jasnego lub białego elementu.

Widoczność cienia jest również zmniejszana przez tło - im ciemniejsze, tym mniej widoczne, a im jaśniejsze, tym bardziej widoczne.

Wszystko to związane jest z kontrastem.

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>

Uwaga: Aby dowiedzieć się więcej o cieniach, przeczytaj stronę dokumentacji cieni.

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.

Demo i kod źródłowy do tej lekcji

Zadaj pytanie

Wróć Dalej

O autorze

Michal Szymanski

@ascensus_mdb

Współzałożyciel MDBootstrap / Umieszczony na liście Forbes „30 under 30” / Entuzjasta oprogramowania open-source / Tancerz, miłośnik wiedzy i książek.

Autor setek artykułów na temat programowania, biznesu, marketingu i efektywności. W przeszłości pracował jako edukator z młodzieżą z problemami w sierocińcach i zakładach karnych.

Podstawy

Bootstrap