Level up #1 - Podpis w szablonie

(c) Absolute-A

Hejka! Dziś zajmiemy się dodaniem swojego podpisu do szablonu. Wkradniemy się do kodu HTML i dodamy prosty CSS, w moim stylu. Dlaczego mówię, że w moim stylu? Bo nie wszyscy robią to tak samo, więc niektóre, rzeczy mogą się różnić od tego jak inni robią podpisy. Nie przedłużając, przejdźmy dalej.

1. Wchodzimy w Motyw > Edytuj kod HTML i wyszukujemy frazę content-cap-bottom

2. Następnie obojętnie pomiędzy którymi znacznikami </div> dodajemy swój div, który wygląda tak:

<center><div id="podpis">Szablon wykonany przez <a href="#">unique graphic</a></div></center>

<center> - ustala pozycję naszego div na środku strony

3. Kolejną rzeczą jest już tylko kod CSS, którym zrobimy ładny wygląd naszego podpisu.

#podpis {
  margin: 20px 0;
  text-transform: uppercase;
  font-size: 10px;
  font-family: arial;
  letter-spacing: 2px;
  background: #ddd;
  width: 50%;
  padding: 4px 0;
}

#podpis a {
  color: #7CB342;
  font-style: italic;
  transition: all .5s ease-in-out;
}

#podpis a:hover {
  color: #FFC107;
  transition: all .5s ease-in-out;
}

Dodajemy zwykłe komendy i wartości, po czym ustalamy jak będą wyglądać linki w naszym div podpis.

Więc to jest podstawa, można powiedzieć "baza", do tego jak robię podpisy. Poniżej wrzucę wam gotowe kody do różnych podpisów.

Przykład 1

Kod CSS:

#podpis {
  position: fixed;
  bottom: 1em;
  left: 1em;
  display: block;
  width: 90px;
  text-transform: uppercase;
  font-size: 8px;
  font-family: arial;
  letter-spacing: 1px;
  background: #ddd;
  text-align: center;
  padding: 4px 8px;
}

#podpis a {
  color: #6A1B9A;
  font-style: italic;
  transition: all .5s ease-in-out;
}

#podpis a:hover {
  color: #FFC107;
  transition: all .5s ease-in-out;
}

Przykład 2
Kod CSS:

#podpis {
  position: fixed;
  bottom: -6em;
  left: 2.8em;
  display: block;
  width: 90px;
  text-transform: uppercase;
  font-size: 8px;
  font-family: arial;
  letter-spacing: 1px;
  background: #ddd;
  text-align: center;
  padding: 4px 8px;
  transition: all .8s;
}

#podpis:hover {
  bottom: 1em;
  transition: all .8s;
}

#podpis:before {
  content:"";
  position: fixed;
  bottom: 1em;
  left: 1em;
  width: 10px;
  height: 10px;
  background: #880E4F;
  transform: rotate(45deg);
}

#podpis a {
  color: #6A1B9A;
  font-style: italic;
  transition: all .5s ease-in-out;
}

#podpis a:hover {
  color: #FFC107;
  transition: all .5s ease-in-out;
}

Przykład 3
Kod CSS:

#podpis {
  position: fixed;
  bottom: 1em;
  left: -14em;
  display: block;
  width: 90px;
  text-transform: uppercase;
  font-size: 8px;
  font-family: arial;
  letter-spacing: 1px;
  background: #ddd;
  text-align: center;
  padding: 4px 8px;
  transition: all .8s;
}

#podpis:hover {
  left: 3em;
  transition: all .8s;
}

#podpis:before {
  content:"";
  position: fixed;
  bottom: 1em;
  left: 1em;
  width: 10px;
  height: 10px;
  background: #0288D1;
  transform: rotate(45deg);
}

#podpis a {
  color: #0288D1;
  font-style: italic;
  transition: all .5s ease-in-out;
}

#podpis a:hover {
  color: #FFC107;
  transition: all .5s ease-in-out;
}

Przykład 4
Kod HTML:

<div id="podpis" title="tytuł linku pojawiający się po najechaniu"><a href="#"><img src="adres linky do zdjęcia/ikonki/etc"/></a></div>

Kod CSS:

#podpis {
  position: fixed;
  bottom: .3em;
  left: -.8em;
  display: block;
  width: 90px;
  text-transform: uppercase;
  font-size: 12px;
  font-family: arial;
  letter-spacing: 1px;
  text-align: center;
  opacity: .4;
  transition: all .8s;
}

#podpis:hover {
  opacity: 1;
  transition: all .8s;
}

#podpis img {
  width: 60px;
}