Gadżety #3 - Strony w kółkach vol. 2

(c)MoherfowaSmerfetka

Hej! Powracam do was z - tak jakby - drugą częścią poprzedniej notki. W tej instrukcji jest więcej do zabawy, więcej kodu, więcej kalkulowania i myślenia, niż w poprzedniej. Jednak efekt jest niczego sobie i prezentuje się dobrze. W tej instrukcji mamy do czynienia z gadżetem HTML/JavaScript oraz z kodem CSS, gdzie w poprzedniej notce był sam CSS. Nie przedłużając i nie zniechęcając dłużej przejdźmy do instrukcji.

Poniższy przykład pokazuje nam efekt, po napisaniu całego kodu:

Musicie powiedzieć, że efekt prezentuje się całkiem nieźle, prawda? Niestety jest z tym trochę więcej pracy, ale nie marudzimy tylko robimy.

I. Wchodzimy w Układ > Dodaj gadżet > HTML/JavaScript. Po czym piszemy(wklejamy już ten gotowy) poniższy kod do gadżetu.

  <a class="circle1" href="#">Link 1</a>
  <a class="circle2" href="#">Link 2</a>
  <a class="circle3" href="#">Link 3</a>
  <a class="circle4" href="#">Link 4</a>
  <a class="circle5" href="#">Link 5</a>
  <a class="circle6" href="#">Link 6</a>

# zmieniacie na swój link, a Link 1, 2... zmieniacie na nazwę linku - najlepiej krótką.

Linków może być tyle ile chcecie, jednak pamiętajcie, że im więcej linków, tym więcej pracy sobie dokładacie! 

II. To już wszystko co do naszego kodu HTML. Następnie przechodzimy do pisania kodu CSS. Pierwsze na czym się skupiamy do wygląd linków przed i po najechaniu na nie kursorem. A więc najpierw wygląd przed, a tak prezentuje się na to kod:

.circle1, .circle2, .circle3, .circle4, .circle5, .circle6 {
  display: block;
  background: #eee;*kolor tła*
  width: 65px;
  height:33px;
  padding: 30px 4px 10px 4px;
  border-radius: 100%;*zaokrąglenie rogów do 100%, oznacza, że zrobimy kółko*
  text-align: center;
  text-transform: uppercase;
  font-family: arial;
  font-size: 10px;
  letter-spacing: 1px;
  overflow-wrap: break-word;
      transition: all .60s;
    -o-transition: all .60s;
    -webkit-transition: all .60s;
    -moz-transition: all .60s;
}

Więc umieszczamy wszystkie klasy (czyli circle1, circle2... etc) po przecinku. I tutaj zaczyna się zabawa jak w poprzedniej notce. Znowu podejmujemy się zabawy z width, height oraz padding, co nie jest najprzyjemniejszą rzeczą na świecie, ale damy radę. Kiedy już jesteśmy po tej zabawie, ustalamy wygląd po najechaniu kursorem na linki, a kod wygląda tak:

.circle1:hover, .circle2:hover, .circle3:hover, .circle4:hover, .circle5:hover, .circle6:hover {
  box-shadow: inset 10px 0px 0px #9C27B0, inset 0px 10px 0px #FF5722, inset -10px 0px 0px #9C27B0, inset 0px -10px 0px #FF5722;
  background:#F3E5F5;
  color: #4A148C;
        transition: all .80s;
    -o-transition: all .80s;
    -webkit-transition: all .80s;
    -moz-transition: all .80s;
}

Ja tutaj pobawiłam się trochę box-shadow, nie dając go na cały link, a tylko na 10px od krawędzi co daje nam ładny efekt ramki.

III. Tu zaczyna się udręka, po ręcznie i po kolei ustawiamy dla wszystkich kółek pozycję, dlatego wcześniej wspominałam, że im mniej linków tym lepiej, a im więcej linków, tym więcej roboty. No i tak właściwie tu mogę pokazać wam jedynie kodziki jakie napisałam, bo tak naprawdę to wy sami przy swoich szablonach ustalacie pozycję kółek, nie ma na to jednego kodu.

.circle1 {
  position: relative;
  top: -25px;
  left: -150px;
}

.circle2 {
  position: relative;
  top: -25px;
  left: -95px;
}

.circle3 {
  position: relative;
  top: -10px;
  left: -85px;
}

.circle4 {
  position: relative;
  top: 0px;
  left: -115px;
}

.circle5 {
  position: relative;
  top: -15px;
  left: -180px;
}

.circle6 {
  position: relative;
  top: -65px;
  left: -265px;
}

Jedyne co zrobiłam do dodałam do kółek pozycję relative, po czym osobno do każdego ustawiałam wartości top i left.

Jest to tyle w tej instrukcji, mam nadzieję, że coś zrozumieliście, jeśli nie to proszę piszcie w komentarzach lub zakładce "Pytania".