TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak tworzyć efekty podpisów obrazów CSS?

0

Gdy przesyłasz obraz na serwer, ma on właściwości, takie jak adres URL, tytuł, podpis, tekst alternatywny i opis. Jednak obraz i podpis można zobaczyć tylko na opublikowanej stronie internetowej. Generalnie webmasterzy skupiają się na prezentacji obrazu i zapominają o znaczeniu napisów. W tym artykule pokażemy, jak tworzyć efekty podpisów obrazów CSS, aby w atrakcyjny sposób zaprezentować podpisy pod zdjęciami.

Naucz się WordPressa: sprawdź ponad 400 bezpłatnych samouczków dotyczących WordPressa.

Efekt podpisów obrazów CSS

Widgety będą wyglądać jak poniżej.

Podpis pod obrazem – styl przesuwania w dół

Przesuń podpis. Możliwe połączenie.

Podpis pod obrazem – Styl podziału poziomego

Podpis w stylu podziału horyzontalnego.

Podpis pod obrazem – Styl podziału w pionie

Podpis w stylu podziału pionowego

Podpis pod obrazem – Styl wysuwania

Podpis przesuwania obrazu

4 różne style

Jak widać w demie, istnieją cztery różne efekty, dzięki którym można utworzyć podpis obrazu.

  • Zjechać w dół
  • Podział poziomy
  • Podział pionowy
  • Wślizgiwać się

HTML dla efektów podpisów graficznych

Najpierw wyjaśnijmy część HTML z efektem przesuwania w dół, aby łatwiej było zrozumieć część CSS. Poniżej znajduje się kod HTML dla efektu przesuwania w dół.

<div class="common slidedown"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Slidedown"> <div class="pic-caption">Slide down caption. <a href="#">Link</a> possible.</div> </div>

Posiada następujące klasy CSS:

  • common – jest to ogólny zestaw stylów mający zastosowanie do wszystkich czterech efektów.
  • slidedown – jest to styl ustawiony do tworzenia efektu slide down. Dla pozostałych trzech efektów użyliśmy klas CSS split-horiz, split-vert i slideup. Możesz po prostu zastąpić tę klasę, aby uzyskać inny efekt.
  • pic-caption – to klasa definiuje efekt związany z podpisem obrazu.

Uwaga: używany jest obraz o rozmiarze 300×300 pikseli, aby nie wymagały dodatkowych korekt na urządzeniach mobilnych.

CSS dla efektów podpisów graficznych

W powyższym kodzie HTML użyliśmy pliku „imagecaption.css" do zaimportowania wszystkich wymaganych CSS z zewnętrznego pliku. Poniżej znajduje się CSS dla efektu przesuwania w dół i możesz pobrać kompletne pliki CSS i HTML, klikając poniższy przycisk.

/* General Style */ .common{ margin: 0; padding: 0; display: inline-block; position: relative; overflow: hidden; } .common::before, .common::after{ content: ''; width: 100%; height: 100%; background: black; position: absolute; opacity: 0.3; top: 0; left 0; -moz-transform: translate3d(0, -100%, 0); -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); -moz-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; } .pic-caption { position: absolute; text-align: center; background: lightyellow; z-index: 999; width: 100%; max-height: 100%; overflow: hidden; top: 50%; -webkit-transform: translate3d(-100%, -50%, 0); transform: translate3d(-100%, -50%, 0); -webkit-transition: all 0.5s; transition: all 0.5s; line-height: 30px; font-size: 16px; } .pic-caption a{ text-decoration: none; } img { display: block; } /* Slidedown Caption */ .slidedown:hover::before{ -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slidedown:hover .pic-caption{ opacity: 1; -moz-transform: translate3d(0, -50%, 0); -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); -moz-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; -moz-transition-delay: 0.5s; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }
  • W sekcji ogólnego stylu utworzyliśmy bloki wbudowane do wyświetlania każdego bloku obrazu.
  • Pseudoelementy (::before i ::after) służą do tworzenia efektu suwaka na obrazie.
  • Podpis jest widoczny tylko po najechaniu kursorem i jest niewidoczny po załadowaniu strony.
  • Klasa „pic-caption” przypisuje jasnożółty kolor podpisu i ładuje podpis o 50% od góry pozycji obrazu.
  • Przejście i transformacja CSS pomaga przesuwać podpis od lewej do prawej strony obrazu.
  • Sekcja w sekcji „Podpis slajdu” pomaga wyświetlić suwak, a następnie podpis przy użyciu właściwości transformacji CSS i przejścia.

Wykorzystanie na Twojej stronie internetowej

Pobierz plik zip „Image Caption Effects.zip” zawierający kompletne kody HTML i CSS dla wszystkich czterech stylów efektów podpisów graficznych.

Archiwum zip zawiera dwa pliki „imagecaption.css” i „Imagecaption.html”.

  • Prześlij plik CSS w tym samym folderze co HTML lub podaj pełny link do pliku CSS w kodzie HTML.
  • Możesz także wstawić CSS w sekcji head HTML za pomocą … tagów.
  • Umieść kod HTML między tagami body swojej strony internetowej.
  • Możesz używać tylko sekcji div HTML odpowiedniej dla danego efektu.

Pełny kod HTML dla wszystkich czterech stylów powinien wyglądać jak poniżej:

<!DOCTYPE html> <html> <head> <title>CSS Image Caption Effects</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="imagecaption.css"> </head> <body> <div class="common slidedown"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Slidedown"> <div class="pic-caption">Slide down caption. <a href="#">Link</a> possible.</div> </div> <div class="common split-horiz"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Split Horizontal"> <div class="pic-caption">Horizontl Split Style Caption.</div> </div> <div class="common split-vert"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Split Vertical"> <div class="pic-caption">Vertical Split Style Caption</div> </div> <div class="common slideup"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Slideup"> <div class="pic-caption">Image Slide Up Caption</div> </div> </body> </html>

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów