Połyskujący napis z użyciem styli

|
Robert
| komentarze | CSS

Wpis na szybko który piszę zainspirowany, a może zniesmaczony, pewnym logo które jest gifem. Niby nic, ale wydaje mi się, że to rozwiązanie jest archaiczne rodem z minionej web-epoki. Pokażę, jak za pomocą prostego CSS'a stworzyć efekt połysku na napisie. Wykorzystamy również sztuczkę z przezroczystością i png, chociaż jeśli ktoś umie w svg również nie powinno być problemów.

Zacznijmy od kodu html, ma być on możliwie prosty. Przedstawia on odnośnik z obrazkiem w środku.

<a href="#">
   <img src="./logo.png" />
</a>

 A tak prezentuje się obrazek. Plik png z białym tłem i przezroczystością w ramach tekstu.

Aby elementy wyświetlały się poprawnie, dla odnośnika ustawiamy display "inline-block" a dla obrazka "block". Formalności mamy już za sobą, teraz gwóźdź programu - gradient. Aby za pomocą opisu kaskadowego arkuszy stylów wstawić w ramach tła dowolny gradient należy skorzystać z funkcji linear-gradient(). Parametrami jakie przyjmuje ta funkcja może być kąt nachylenia gradientu, kolory przejścia (również w rgba), szerokość obszarów itd. Na potrzeby tego wpisu przyjmijmy czarno-złoto-czarny gradient, gdzie obszar złoty będzie dosyć wąski oraz pochylony o 125 stopni w prawo.

/* kąt, kolor(1-czarny), pozycja środka(1-czarny), kolor(2-złoty), pozycja środka(2-złoty), kolor(3-czarny), pozycja środka(3-czarny) */
background: linear-gradient(125deg, rgba(0,0,0,1) 40%, rgba(244,220,82,1) 50%, rgba(0,0,0,1) 60%);
background-size: 200% 200%;

Ważne jest, aby ów gradient był dwa razy większy niż obszar dla którego jest stosowany, ponieważ cała sztuczka polega na animacji gradientu w tle, a będzie on widoczny poprzez "napis".

Następną operacją jest zdefiniowanie animacji. CSS oferuje taką właściwość jak animation. Może ona przyjmować takie parametry jak nazwa animacji, długość, ilość powtórzeń, sposób przejścia itd. Nasza animacja nazywa się AnimLogoGradient, trwa 5 sekund, jest liniowa oraz nieskończona.

-webkit-animation: AnimLogoGradient 5s linear infinite;
-moz-animation: AnimLogoGradient 5s linear infinite;
animation: AnimLogoGradient 5s linear infinite;

Teraz zdefiniujemy poszczególne etapy animacji. Za to odpowiada keyframes. Składnia jest dosyć prosta, odwołuje się do wyżej nazwanej animacji i opisujemy w niej etapy animacji, mogą to być dowolne właściwości oferowane przez css.

@-webkit-keyframes AnimLogoGradient {
    0%{background-position:100% 100%}
    40%{background-position:0% 0%}
    100%{background-position:0% 0%}
}
@-moz-keyframes AnimLogoGradient {
    0%{background-position:100% 100%}
    40%{background-position:0% 0%}
    100%{background-position:0% 0%}
}
@keyframes AnimLogoGradient {
    0%{background-position:100% 100%}
    40%{background-position:0% 0%}
    100%{background-position:0% 0%}
}

Na powyższym listingu opisaliśmy trzy etapy animacji poprzez manipulację właściwością background-position odpowiadającą za pozycję tła, dla tego tło jest powiększone dwukrotnie. Przez 40% czasu (z 5 sekund) animacja się przesuwa, pozostałe 60% czasu daje efekt "zatrzymania".

Sposób wykonania jest dosyć prosty, nie wymaga używania JavaScriptu oraz jest obsługiwany przez najpopularniejsze przeglądarki internetowe.

DEMO

Całość kodu prezentuje się tak:

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>ShinyEffect</title>
    <link rel="icon" href="images/favicon.png" />
    <style type="text/css">
      a {
        display: inline-block;
        background: linear-gradient(125deg, rgba(0,0,0,1) 40%, rgba(244,220,82,1) 50%, rgba(0,0,0,1) 60%);
        background-size: 200% 200%;
        -webkit-animation: AnimLogoGradient 5s linear infinite;
        -moz-animation: AnimLogoGradient 5s linear infinite;
        animation: AnimLogoGradient 5s linear infinite;
      }
      @-webkit-keyframes AnimLogoGradient {
          0%{background-position:100% 100%}
          40%{background-position:0% 0%}
          100%{background-position:0% 0%}
      }
      @-moz-keyframes AnimLogoGradient {
          0%{background-position:100% 100%}
          40%{background-position:0% 0%}
          100%{background-position:0% 0%}
      }
      @keyframes AnimLogoGradient {
          0%{background-position:100% 100%}
          40%{background-position:0% 0%}
          100%{background-position:0% 0%}
      }
      img {
        display: block;
      }
    </style>
  </head>

  <body>
    <a href="#">
      <img src="./logo.png" />
    </a>
  </body>
</html>

Rozwiązania tego problemu są mnogie. Jednym z pomysłów jest tekst z nałożonymi odpowiednio filtrami (css), ale to już zależy od Ciebie, czy zależy Ci na obrazku w logo, czy wolisz czysty tekst, efekt końcowy w rezultacie może być bardzo podobny.