Social Links Slider, to praktyczny przykład zastosowania HTML, CSS oraz ikon Font Awesome do stworzenia ciekawego widgetu na stronę www, który będzie w elegancki sposób promował nasze profile w sieciach społecznościowych. W tym wpisie udostępniam stworzony przeze mnie prosty dodatek do strony (w kilkunastu wersjach!), który wyróżni wszystkie Twoje linki!

Jak zwykle, jest to bardzo elastyczne rozwiązanie, które można łatwo modyfikować, dodawać kolejne linki, oraz dowolnie manipulować kolorami. Dzięki wykorzystaniu czcionki z ikonami – Font Awesome, bez problemu możemy taki slider dopasować do każdej strony, zarówno pod względem ikon jak i ogólnego wyglądu. Warto zaznaczyć, że jest to kolejne rozwiązanie bazujące na samym HTML i CSS z pominięciem JavaScript.

Social Links Slider – Demo 0

Pierwszy slider, to wersja podstawowa – najprostsza. Tak naprawdę jest to tylko układ bloków, ale na jego bazie zbudowałem 6 kolejnych wersji. Poniżej znajduje się link do strony demo tej wersji.

Demo 0

Jest to najuboższa wersja, dlatego przejdźmy od razu do kolejnego dema, na przykładzie którego wyjaśnię, jak coś takiego wykonać na swojej stronie.

Social Links Slider – Demo 1

Facebook Social Links Slider Zacznijmy od kolejnej strony demonstracyjnej, na której slider wygląda już o wiele lepiej:

Demo 1

 

 

Sekcja <head>

Pierwsza sprawa, to dołączenie czcionki z ikonami. W tym celu do sekcji <head> naszej strony musimy dodać taki fragment kodu:

<!-- Font Awesome -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

A następnie następujące reguły CSS (najlepiej tuż nad </head>, albo wkleić na końcu do już istniejącego pliku ze stylami CSS):

<style>
/* Floating Social Links */

#fs-links * {
  box-sizing: border-box; /* Grubość borderów nie będzie dodawana do rozmiaru bloku */
}

/* Główny kontentr linków - lista ul */
#fs-links {
    list-style-type: none; /* usunięcie punktora listy */
    margin: 0; /* reset marginesów zewnętrznych */
    padding: 0;  /* reset marginesów wewnętrznych */
    position: fixed;  /* 'przykleja' linki do okna przegladarki - podczas przewijania strony, linki pozostaną w tym samym miejscu */
    right: 0; /* odległość linków od prawej krawędzi okna przeglądarki - pozycjonuje slider po prawej stronie */
    font-size: 0; /* usuwa odstępy pomiędzy elementami listy */
    top: 30%; /* odległość linków od górnej krawędzi okna przeglądarki */
}

/* Element listy - li */
#fs-links li {
    margin-bottom: 5px; /* zewnętrzny, dolny margines elementu listy - odstępy pomiędzy linkami */
    position: relative; /* nadaje elementowi listy pozycjonowanie relatywne */
    right: -200px; /* Pozycjonuje linki (ich część tekstową) poza widocznym obszarem strony - 
                    * tutaj ustawiamy długość linków, jeżeli zmienimy tę wartość, 
                    * trzeba również zmienić width w #fs-links li a
                    */
    
    /* Płynne wyjechanie linku */
    -webkit-transition: all .3s ease; /* prędkość i rodzaj animacji */
    -o-transition: all .3s ease; /* prędkość i rodzaj animacji */
    transition: all .3s ease; /* prędkość i rodzaj animacji */
}

/* Efekt po najechaniu kursorem na link */
#fs-links li:hover {
    right: 0; /* Po najechaniu kursorem wskazany link w całości powinien pokazać się w widocznej części okna przeglądarki - raczej nie należy zmieniać */
}

/* Link właściwy */
#fs-links li a {
    font-size: 16px; /* rozmiar czcionki */
    white-space: nowrap; /* powstrzymuje lamanie tekstu w przypadku, gdy tekst linku jest dluzszy niz szerokosc bloku w ktorym sie znajduje */
    color: #444; /* kolor czcionki */
    display: inline-block; /* zmienia sposób wyśeitalania elementu listy */
    height: 50px; /* wysokość linku */
    line-height: 50px; /* wysokość lini - pozycjonowanie tekstu linku w pionie - powinien być taki sam jak wysokość linku */
    border: solid #ddd 1px; /* rodzaj, kolor i grubość obramowania, dla pełnego efektu border w #fs-links li i powinno być takie samo */
    border-left: none; /* usuwa lewą linię obramowania */
    width: 200px; /* Długość linków */
    padding-left: 10px; /* margines wewnętrzny, lewy - odleglosc tekstu od ikony */
    background: #fff; /* tło pod linkiem */
}

/* Ikona */
#fs-links li i {
    display: inline-block;
    border: solid #ddd 1px; /* Styl obramowania */
    border-right: none; /* Usunięcie obramowania z prawej strony */
    height: 50px; /* Wysokość ikony - najlepiej, aby była równa wysokości linka */
    line-height: 50px; /* Wyrównanie wertykalne - powinno być równe wysokości ikony */
    width: 50px; /* szerokość ikony */
    text-align: center; /* wyrównanie horyzontalne ikony - środkowanie */
    font-size: 18px; /* rozmiar ikony */
    vertical-align: top;
    font-size: 22px; /* rozmiar ikony */
    color: #fff; /* kolor ikony */
    position: relative;
    border-radius: 50px 0 0 50px; /* Zaokrąglenie kantów ikony z lewej strony */
    background: #fff; /* Tło ikony */
}

/* Obramowanie ikony */
#fs-links li i:after {
    content: "";
    display: block;
    border: solid #ddd 1px;
    position: absolute;
    top: 3px; bottom: 3px; left: 3px; right: 3px; /* dzięki temu obramowanie ikony mieści się idealnie w środku */
    border-radius: 50%; /* przekształca kwadrat w koło */
    background: #ddd; /* tło koła */
    z-index: -1; /* ustawia warstwę z tłem koła poniżej ikony */
}

/* Link: facebook */
#fs-links-facebook:hover i:after {
    background: #44629e;
    border-color: #44629e;
}

/* Link: twitter */
#fs-links-twitter:hover i:after {
    background: #48c8f1;
    border-color: #48c8f1;
}

/* Link: google-plus */
#fs-links-google-plus:hover i:after {
    background: #dd4b39;
    border-color: #dd4b39;
}
</style>

Najważniejsze rzeczy, te które ktoś chciałby zmienić, oraz to w jaki sposób tego dokonać  oznaczyłem komentarzami.

Sekcja <body>

Pozostało jeszcze dodanie kodu HTML, kopiujemy całość i wklejamy gdzieś w obrębie sekcji <body>:

 <ul id="fs-links">
    <li id="fs-links-facebook">
        <i class="fa fa-facebook"></i>
        <a href="#link-do-fb">Polub nas na Facebooku</a>
    </li>
    <li id="fs-links-twitter">
        <i class="fa fa-twitter"></i>
        <a href="#link-do-twittera">Śledź nas na Twitterze</a>
    </li>
    <li id="fs-links-google-plus">
        <i class="fa fa-google-plus"></i>
        <a href="#link-do-google">Dodaj nas na Google+</a>
    </li>
</ul>

 

Bardzo lubię tworzyć na listach chociaż wymagają dodania dodatkowych reguł resetujących chociażby marginesy, to w pewien sposób ułatwiają czytanie kodu i widać gdzie zaczynają się jej kolejne elementy. Jest to również dobrze widoczne w CSS.

Jako kontener nadrzędny, w którym znajdują się kolejne linki, wykorzystałem listę – <ul>. Każdy element listy <li>, to kolejny link. W jego obrębie, obok linku właściwego <a>, mamy także tag <i>, który odpowiada za ikonę.

Dostosowywanie linków do własnych potrzeb

Aby po najechaniu kursorem na dany link sterować jego kolorami, musimy nadać im różne identyfikatory: #fs-links-facebook, #fs-links-twitter, #fs-links-google-plus, dzięki temu będziemy mogli odwoływać się do wybranego linku i ustawiać na przykład indywidualne kolory.

Do zmiany ikony przydatna będzie ściąga w postaci pełnej listy wszystkich dostępnych ikon. Po przejściu pod link zauważysz, że obok każdej ikony znajduje się jej nazwa. Kopiujemy ją i dodajemy jako klasę do elementu <i> , pamiętamy tylko o dodaniu przedrostku fa-, oraz o drugiej obowiązkowej klasie fa.

Przykładowo, aby uzyskać ikonę dla YouTube, nasz element <i> powinien wyglądać następująco:

<i class="fa fa-youtube"></i>

 

Ostatnią, ale właściwie najważniejszą rzeczą, którą trzeba ustawić to atrybuty href dla linków, oraz hasło zachęcające użytkownika do odwiedzenia naszej strony społecznościowej.

Przykładowo dla linku do profilu na Facebooku, zmieniamy:

<a href="#link-do-fb">Polub nas na Facebooku</a>

na

<a href="https://www.facebook.com/ziemekpr0">Odwiedź nas na Facebooku</a>

I to wszystko, teraz masz swój własny Social Links Slider.

 

Modyfikowanie, dostosowywanie i zmienianie wyglądu slidera

Slider ze strony demo 1 nie jest szczytem możliwości, nie jest może brzydki, ale najpiękniejszy też nie, jest zwyczajnie nijaki. Cóż, w tym momencie ważne jest, że działa, bo w tej części artykułu zajmiemy się jego modyfikowaniem. Postaram się pokazać kilka różnych efektów końcowych, bazując na początkowym kodzie.

Slider z linkami do płaskiego designu

W ostatnim czasie modne są kafelki i tzw. flat design, wiele stron zbudowanych jest właśnie w ten sposób. Do tego typu stron bardziej pasowałby slider bez zaokrągleń.

Aby tego dokonać wystarczy w CSS odszukać wszystkie reguły typu border-radius, a następnie albo je wykomentować, albo skasować, albo ustawić na 0;

Opcjonalnym krokiem, aby pozbyć się białej ramki wokół ikon, jest ustawienie właściwości: top, bottom, left i right na 0px w #fs-links li i:after.

Demo 1b

Slider z fajną czcionką i małymi zaokrągleniami

Facebook social links sliderTym razem do linków dodamy kolorowe tła, wokół nich zostawimy małe zaokrąglenia, oraz zmienimy czcionkę na nieco ciekawszą.

Zacznijmy od czcionki:

  • Wchodzimy na stronę Google Fonts, z listy Script w lewej kolumnie koniecznie wybieramy opcję Latin Extended, dzięki temu będziemy widzieć tylko czcionki wspierające polskie ogonki.
  • Następnie, gdy już znaleźliśmy ciekawą czcionkę, klikamy na przycisk Quick Use (strzałka w kwadracie skierowana w prawo).
  • Na następnej stronie przechodzimy do punku 3 i kopiujemy znajdującą się tam linijkę, aby móc używać wybraną czcionkę na naszej stronie. Linijkę wklejamy do sekcji <head>, podobnie jak wcześniej dodawaliśmy czcionkę Font Awesome, ja wybrałem czcionkę Racing Sans One:
    <!-- Font -->
    <link href='http://fonts.googleapis.com/css?family=Racing+Sans+One&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  • Wracamy do strony fontów Google i kopiujemy linijkę z punktu 4 do #fs-links li a, w moim przypadku:
    font-family: 'Racing Sans One', cursive;
  • Jeszcze ostatnie szlify związane z czcionką. W tej samej sekcji CSS co ostatnio, edytujemy:
    #fs-links li a {
        font-size: 18px; /* rozmiar czcionki */
        width: 220px; /* długość linków */
        text-decoration: none; /* usuniecie podkreślenia linku */
    }

Ponieważ czcionka jest sporo większa niż poprzednia, to prawdopodobnie cały napis nam się nie zmieści w jednej linii, dlatego od razu zmieniamy tutaj długość linków na 220px i tyle samo, tylko że z minusem, ustawiamy dla właściwości right w #fs-links li.

Zmiana teł:

#fs-links li:hover a {
    color: #fff;
}
#fs-links-facebook:hover a {
    background: #405e94;
}
#fs-links-twitter:hover a {
    background: #66cbf9;
}
#fs-links-google-plus:hover a {
    background: #ea514b;
}

Dodajemy na końcu stylów CSS slidera.

Aby dodać zaokrąglenia z lewej strony, szukamy w CSS #fs-links li i i edytujemy:

border-radius: 5px 0 0 5px; /* Zaokrąglenie kantów ikony z lewej strony */
overflow: hidden;
Demo 1c

 

 

Inny efekt kolorystyczny

Następna demonstracja to właściwie tylko kolejna wariacja.

Demo 2

W tym demie, w porównaniu do pierwszej wersji – ustawiamy czcionkę i kolor tła aktywnego linku, zmienimy kolory aktywnej ikony, oraz wszystko nieco powiększamy.

Czcionka – jak poprzednio skorzystamy z czcionek w serwisie Google Fonts. Tym razem wybrałem czcionkę Lobster, aby dodać ją do naszego projektu, dopisujemy poniższą linijkę do sekcji <head> strony:

<!-- Font -->
<link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

Następnie edytujemy reguły CSS:

#fs-links li a {
    font-size: 22px; /* rozmiar czcionki */
    font-family: "Lobster", Helvetica, sans-serif; /* krój czcionki */
}

Jak zmienić kolor linku po najechaniu na niego kursorem pokazałem w poprzedniej metodzie, dlatego zajmijmy się teraz ikoną:

#fs-links-facebook:hover i {
    color: #44629e; /*Kolor ikony*/
    border-color: #44629e; /* kolor obramowania linku */
}
#fs-links-facebook:hover i:after {
    background: #fff; /*tło wewnetrznego tla ikony*/
    border-color: #44629e; /*tło wewnetrznego obramowania ikony*/
}
#fs-links-twitter:hover i {
    color: #48c8f1; /*Kolor ikony*/
    border-color: #48c8f1; /* kolor obramowania linku */
}
#fs-links-twitter:hover i:after {
    background: #fff; /*tło wewnetrznego tla ikony*/
    border-color: #48c8f1; /*tło wewnetrznego obramowania ikony*/
}
#fs-links-google-plus:hover i {
    color: #dd4b39; /*Kolor ikony*/
    border-color: #dd4b39; /* kolor obramowania linku */
}
#fs-links-google-plus:hover i:after {
    background: #fff; /*tło wewnetrznego tla ikony*/
    border-color: #dd4b39; /*tło wewnetrznego obramowania ikony*/
}

Na koniec została nam jeszcze zmiana rozmiaru linka, ikony. Długość linku robiliśmy już poprzednio, natomiast aby link był szerszy/wyższy musimy edytować następujące linijki CSS:

/* Link właściwy */
#fs-links li a {
   height: 64px; /* wysokość linku */
   line-height: 64px; /* wysokość linii - pozycjonowanie tekstu linku w pionie - powinien być taki sam jak wysokość linku */
}
/* Ikona */
#fs-links li i {
   height: 64px; /* Wysokość ikony - najlepiej, aby była równa wysokości linka */
   line-height: 64px; /* Wyrównanie wertykalne - powinno być równe wysokości ikony */
}
/* Obramowanie ikony */
#fs-links li i:after {
   top: 3px; bottom: 3px; left: 3px; right: 3px; /* dzięki temu obramowanie ikony mieści się idealnie w środku */
}

Efektem tych wszystkich zabiegów powinien być slider podobny do tego ze strony demonstracyjnej

Demo 3 Demo 3b

Dodatkowe snippety

G+ social links sliderNa zakończenie chciałbym dodać jeszcze kilka krótkich reguł CSS, dzięki którym można bardzo poprawić wygląd slidera i nieco urozmaicić efekt końcowy.

W niektórych przypadkach, szczególnie jeżeli mamy stronę z jasnym tłem, bardzo dobrym pomysłem będzie dodanie cienia. Oprócz cienia pod każdym linkiem, można dodać jeszcze cień wewnątrz linka, tuż przy krawędzi okna przeglądarki, osiągniemy wtedy bardzo ciekawy efekt:

#fs-links li a {
    box-shadow: inset -10px 0px 10px -5px rgba(50, 50, 50, 0.5); /* wewnetrzny cien z prawej strony inku */
}
#fs-links li:hover{
    box-shadow: 7px 7px 5px -5px rgba(50, 50, 50, 0.5); /* cień pod linkiem */
    border-radius: 50px 0 0 50px; /* aby cień przylegał ładie do linku trzeba zaokrąglić krawędzie */
}

 

Możemy także sprawić, że ikona zmieni się na całkowicie inną (jest to pokazane na poprzednim obrazku). Dodaj poniższy fragment na końcu sekcji z CSS-em:

/* Podmiana ikony */
#fs-links li:hover i:before {
    content: "\f14c"; /* kod ikony (unicode), można go znaleźć na stronie FA po kliknięciu na szczegóły ikony */
}

Zakończenie

CSS HTML Facebook Tabs Slider

Na koniec warto wspomnieć że podane przykłady można z powodzeniem ze sobą mieszać.

Jeżeli masz jakieś pytania, nie możesz sobie z tym poradzić pisz w komentarzu a postaram się coś pomóc, doradzić!

Już wkrótce dodam artykuł(y) dotyczące pozostałych stron demo 4, 5, 7 w których znajduje się slideshow linków społecznościowych i inne podejście do slidera zakładek.

Poza tym zapraszam do polubienia mojej strony na FB, gdyż niedługo zostanie ogłoszony konkurs, w którym będzie można zdobyć wybrany, płatny motyw ze strony partnera. Szczegóły wkrótce. Polub stronę, aby niczego nie przegapić!

 

Wpis otagowano:

Komentarze do wpisu (Jeden komentarz)

Pomogłem? Dodaj coś od siebie! Skomentuj ten wpis:

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *