Efekty CSS #3 - Efekty ::after i ::before

(c) prettysmilex

Hejo! W dzisiejszym poście, pokaże wam jak zrobić tzw. "ozdobniki", na przykład przy tytule posta. Jest to powiedziałabym, że całkiem proste, więc nie macie się czym przejmować. Warto zapoznać się z artykułem na temat ::after i ::before. [artykuł] Przedstawię wam dzisiaj, kilka efektów, jakie można uzyskać za pomocą pseudo elementów.

I. Efekt pierwszy

Powyżej przedstawiony efekt, jest jednym z najczęściej używanych. A więc zabierzmy się do omówienia, tego efektu.

1. Ustalamy mniej więcej, wygląd tytuły posta

h3.post-title a, h3.post-title, .post-title {
  text-align: center;
  font-size: 40px;
  color: #006064;
}

2. Teraz dodamy ramkę na dole tytułu

.post-title {
  border-bottom: 1px solid #000;
  padding-bottom: 8px;
}

3. Na samym końcu zajmujemy się naszymi "ozdobnikami", w tym przypadku kwadracikami

.post-title::before {
  content:"";
  position: absolute;
  top: 86px;
  left: 0px;
  background: #000;
  width: 15px;
  height: 15px;
  transform: rotate(45deg);
}

.post-title::after {
  content:"";
  position: absolute;
  top: 86px;
  right: 0px;
  background: #000;
  width: 15px;
  height: 15px;
  transform: rotate(45deg);  
}

Tak wygląda gotowy kod na ozdobniki tytułu posta.

II. Efekt drugi

Tutaj z pomocą ::before, utworzyliśmy efekt, gdzie po najechaniu na kółeczko tekst "spada" nam na miejsce listy linków. A jak to zrobiliśmy? Bardzo prostu efekt, więc zabierzmy się do kodu.

1. Wygląd gadżetu tekstu

#Text1 {
  position: absolute;
  top: -500px;
  background: #ddd;
  padding: 10px 40px;
  text-align: justify;
  font-size: 12px;
  letter-spacing: .5px;
  word-spacing: 1px;
  line-height: 1.4;
  transition: all .5s;
}

Od razu po napisaniu wyglądu, wpisujemy gdzie ma być tekst. W tym przypadku spada nam z góry, więc ustawiamy wartość top na minusie.

2. Nasze kółeczko, czyli :before

#Text1::before {
  position: fixed;
  top: 150px;
  left: 300px;
  content: "";
  background: linear-gradient(to right bottom, #AD1457, #4A148C);
  background-size: 20px;
  width: 20px;
  height: 20px;
  border-radius: 100%;
}

Najlepiej ustawić pozycje naszego before na fixed, następnie ustawiamy ją tam gdzie chcemy. Ustalamy wielkość w width oraz height. Ja, jak widzicie, żeby zrobić kółeczko, zrobiłam takie samo width i height, a do tego dodałam border-radius co zaokrągliło mi rogi i zrobiło się kółeczko.

3. Spadanie tekstu

#Text1:hover {
  top: 0;
  transition: all .5s;
}

Tutaj nie ma nic nadzwyczajnego, dodajemy tranisition oraz wartość do top.
!Pamiętajcie, żeby dodać transition: all .5s; również w gadżecie #Text1 bez tego :hover!

Z takich efektów, to by było na tyle. Jeśli macie jakieś pytania możecie zadawać je w komentarzach tutaj lub w zakładce "Pytania" ^^