Jak zrobić aktywne przyciski we wpisie

CSS Tutorial wpis

Jak zrobić aktywne przyciski we wpisie

W dzisiejszym wpisie pokażę Wam jak w prosty sposób za pomocą edytora HTML we wpisach oraz kodu CSS można stworzyć aktywny przycisk, który umożliwi nam podpięcie np. linku, pod którym kryje się nasz element do pobrania. Pokażę Wam, dwie wersje - z wykorzystaniem ikonki font awesome oraz tekstem + ikonka font awesome.

UWAGA! Jeśli chcesz mieć w swoim przycisku ikonkę font awesome skorzystaj z wpisu:


Dowiedz się jak zainstalować font awesome

Przycisk z ikonką font awesome + tekst

1. Przechodzimy do wpisu, w którym chcemy umieścić nasz przycisk. Wybieramy HTML, klikamy kursorem w wybrane miejsce,  w którym ma być umieszczony nasz przycisk i wklejamy taki kod:

<center> <a class="przycisk" href="LINK" target="_blank">TEKST</a> </center>

2. Następnie przechodzimy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS i wklejamy taki kod:


.twój selektor { position:relative; display:inline-block; margin: 10px 5px 10px; padding:10px 30px; border-bottom:none; -webkit-border-radius:0.333em; -moz-border-radius:0.333em; border-radius:0.333em; color:#fff!important; text-transform:uppercase; font-size:14px!important; line-height:24px!important; letter-spacing: 1px; cursor:pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, .3); -webkit-transition:background-color 0.3s linear,color 0.3s linear; -moz-transition:background-color 0.3s linear,color 0.3s linear; transition:background-color 0.3s linear,color 0.3s linear; } .twój selektor { background: #FBD9DE; } .twój slektor:hover { background: #D1EDFF; } .twój slektor:before { content: "\f25a"; font-family: FontAwesome; margin-right: 10px; }

Analiza kodu (elementy do zmiany):

.twój selektor - miejsce na Twój selektor
margin: 10px 5px 10px; - marginesy
padding:10px 30px; - wewnętrzne marginesy
border-bottom:none; - obramowanie i zaokrąglenie narożników
-webkit-border-radius:0.333em;
-moz-border-radius:0.333em;
border-radius:0.333em;
color:#fff!important; - color tekstu
text-transform:uppercase; - transformacja tekstu (tutaj ustawione na drukowane litery)
font-size:14px!important; - wielkość fontu
letter-spacing: 1px; - odstęp między literami
cursor:pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, .3); - cień pod przyciskiem

.twój selektor - ten sam co przy powyższych kodach
background: #FBD9DE; - kolor tła naszego przycisku

.twój slektor:hover - ten sam selektor co wcześniej (dopisujemy przed :hover. :hover odpowiada za efekt po najechaniu kursorem myszy na przycisk)

background: #D1EDFF; - tło naszego przycisku po najechaniu na niego myszką

.twój slektor:before - ten sam selektor (dopisujemy przed :before. :before odpowiada za naszą ikonkę)
content: "\f25a"; - numer ikonki font awesome
margin-right: 10px; - margines prawy

Jak zdobyć numer ikonki? 

I. Wchodzimy na stronę Font Awesome (link podany w podlinkowanym wpisie na początku wpisu)
II. Wybieramy zakładkę "Icons"
III. Wyszukujemy ikonki
IV. Klikamy na naszą wybraną ikonkę i pod ikonką na szarym tle będziemy mieli unicode: (tutaj jakiś numer) i kopiujemy nasz numer i wstawiamy do kodu między "\..."

Efekt:

Pod tym przyciskiem zobaczysz jak wygląda najnowszy szablon do pobrania

Przycisk z samą ikonką font awesome

1. Powtarzamy krok z poprzedniego przycisku i w HTML wklejamy taki kod:
<center> <a class="twoj selektor" href="twoj link" target="_blank"></a> </center>

2. Przechodzimy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS

.twoj selektor { position:relative; display:inline-block; margin: 10px 5px 10px; padding:10px 30px; border-bottom:none; -webkit-border-radius:0.333em; -moz-border-radius:0.333em; border-radius:0.333em; color:#444!important; font-size:24px!important; line-height:40px!important; cursor:pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, .3); -webkit-transition:background-color 0.3s linear,color 0.3s linear; -moz-transition:background-color 0.3s linear,color 0.3s linear; transition:background-color 0.3s linear,color 0.3s linear; } .twoj selektor { background: #FBD9DE; } .twoj selektor:hover { background: #D1EDFF; } .twoj selektor:before { content: "\f25a"; font-family: FontAwesome; margin-right: 5px; }

Analiza kodu (elementy do zmiany)

.twoj selektor - miejsce na Twój selektor
padding:10px 30px; - marginesy wewnętrzne
border-bottom:none; - obramowanie i zaokrąglenie narożników
-webkit-border-radius:0.333em;
-moz-border-radius:0.333em;
border-radius:0.333em;
color:#444!important; - color ikonki
font-size:24px!important; - rozmiar ikonki
line-height:40px!important;
cursor:pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, .3); - cień pod przyciskiem

.twoj selektor - miejsce na Twój selektor
background: #FBD9DE; - tło przycisku

.twoj selektor:hover -  ten sam selektor co wcześniej (dopisujemy przed :hover. :hover odpowiada za efekt po najechaniu kursorem myszy na przycisk)

background: #D1EDFF; - tło naszego przycisku po najechaniu na niego myszką

.twoj selektor:before - ten sam selektor (dopisujemy przed :before. :before odpowiada za naszą ikonkę)

content: "\f25a"; - numer naszej ikonki
font-family: FontAwesome;
margin-right: 5px; - margines prawy

Efekt

Czytaj dalej

Jak zrobić podkreślenie za tytułami gadżetów

CSS HTML Tutorial wpis

Jak zrobić podkreślenie za tytułami gadżetów

Parę razy otrzymywałam wiadomości e-mail z pytaniem "jak zrobić podkreślenie za tytułami gadżetów". Nigdy tej instrukcji nikomu nie podawałam, bo jak wiecie nie mam w zwyczaju podawania instrukcji indywidualnie. Zbierałam się trochę z tym, aby tę instrukcję Wam tutaj opublikować. Serio. Jakoś wydawało mi się, że jest ona tak mało istotna, że będę ją sobie przekładać i przekładać, aż w końcu wybije jej moment. Pewnie by tak było nadal gdyby nie kolejna wiadomość o treści "jak zrobić podkreślenie za tytułami gadżetów", więc o to jest odpowiedź :)

Wiem, że najważniejsza informacja dla Was to to, gdzie te zmiany będą się odbywać, a więc w tym wypadku będzie to CSS i HTML.

1. Przechodzimy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS i wklejamy kod:

.sidebar h2 { position: relative; text-align: center; } .sidebar h2 span { background: #fff; padding: 0 15px; position: relative; z-index: 1; } .sidebar h2:before { background: #ddd; content: ""; display: block; height: 1px; position: absolute; top: 50%; width: 100%; } .sidebar h2:before { left: 0; }

Jak zobaczycie, Wasz tytuł gadżetu został przekreślony, a teraz trzeba jakoś go "schować". W tym celu zapisujemy nasz arkusz CSS i przechodzimy do motyw - edytuj kod HTML.

2. Klikamy kursorem obojętnie jakie miejsce w kodzie i wybieramy ctrl+f. Pojawi nam się okno wyszukiwania, w które wklejamy:

<h2> <data:title/></h2>

Takich części kodu jest parę w szablonie - są one przy każdej sekcji odpowiadającej za dany gadżet i jego tytuł. Musimy tą część kodu zamienić na:

<h2> <span><data:title/></span></h2>

Jeśli nie wszystkie tytuły gadżetów nam się zamieniły, szukamy tej części kodu:

<h2 class='title'> <data:title/></h2>

Zamieniamy ją na:

<h2> <span><data:title/></span></h2>

Efekt:

Czytaj dalej