Menu

Back to top - jak zrobić strzałkę zmieniającą kolor - pokazującą poziom przejrzanej strony

Back to top - jak zrobić strzałkę zmieniającą kolor - pokazującą poziom przejrzanej strony



Już od jakiegoś czasu dostaje od Was dużo wiadomości typu "jak zrobić strzałkę zmieniającą kolor", "jak zrobić strzałkę, która pokazuje poziom przeczytanej strony", więc w końcu postanowiłam się za to zabrać i przygotować instrukcję :)

1. Jeśli nie mamy na swoim blogu zainstalowanego font awesome, to musimy go zainstalować. Przechodzimy do motyw - edytuj kod HTML. Klikamy obojętnie w jakie miejsce w kodzie i wybieramy ctrl+f. wpisujemy <head>. Nad <head> wklejamy poniższy skrypt:



2. Teraz wyszukujemy </head> i NAD wklejamy:



3. Teraz wyszukujemy </body> i NAD wklejamy:



4. Przechodzimy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS lub pozostając cały czas w HTML wyszukujemy ]]></b:skin> i nad ]]></b:skin> lub w arkuszu CSS wklejamy:




Wszystkie wartości są zmienne, oprócz ostatniego fragmentu kodu, który zaczyna się od .fa-angle-up:before

Efekt? Macie u mnie na blogu :)
Czytaj dalej

Minimalistyczne tapety na pulpit do pobrania za darmo!

Minimalistyczne tapety na pulpit do pobrania za darmo!


Robiąc małe rozeznanie na blogu, zobaczyłam, że dawno nie było tapet na pulpit do pobrania za darmo. Dlatego przygotowałam dla Was 3 rodzaje minimalistycznych tapety z 3 różnymi hasłami takimi jak: "Just smile", "Live in the moment" oraz "Say yes to new adventures".

Tapeta "Just smile"



1024x768 1280x800 1280x1024 1366x768 1440x900 1600x900 1920x1080

Tapeta "Live in the moment"




1024x768 1280x800 1280x1024 1366x768 1440x900 1600x900 1920x1080

Tapeta "Say yes to new adventures"



1024x768 1280x800 1280x1024 1366x768 1440x900 1600x900 1920x1080

Czytaj dalej

Jak zrobić napis z obramowaniem

Jak zrobić napis z obramowaniem


Na blogu, przedstawiłam Wam już kilkanaście sposobów na to jak poprawić wygląd swojego bloga oraz jak wyróżnić dany element za pomocą prostych zapisów w CSS. Dzisiaj przedstawię Wam kolejny sposób na to, jak można wyróżnić dane elementy na naszym blogu, a dokładnie - jak wyróżnić nasz tekst za pomocą obramowania, a to wszystko powstanie za pomocą CSSa :)

Zaczynamy!

1. Pierwsze i najważniejsze - wybieramy, co ma być wyróżnione - nagłówki gadżetów, tytuł posta, czy może podtytuł we wpisie.

2. Teraz musimy znaleźć selektor do naszego elementu. W tym wypadku pomoże nam wpis z selektorami CSS.

3. Przechodzimy do motyw - zaawansowane - dodaj arkusz CSS

W arkuszu CSS dodajemy taki kod:




Jak widzicie, nie ma on selektora. Selektor dla naszego elementu musimy dodać przed { i tak o to, kod dla tytułu wpisu będzie prezentował się tak:



Zróbmy sobie analizę naszego kodu:

font-family - rodzaj fontu
letter-spacing - odstęp między literami
test-transform - transformacja tekstu - w kodzie ustawione jest na duże litery. Wystarczy wpisać none zamiast uppercase, aby pozbyć się tego efektu
font-weight - grubość fontu
-webkit-text-fill-color: - kolor naszego tekstu (wypełnienie)
-webkit-text-stroke-width: - grubość naszego obramowania
-webkit-text-stroke-color: - kolor naszego obramowania
font-size: - wielkość naszego fontu

Wszystkie wartości są zmienne.

Efekty dla niektórych elementów na blogu 


Tytuł wpisu


Data

Tytuł gadżetu 


Zapamiętaj!
Efekt, zależny jest od tego, jaką ustawimy grubość obramowania oraz grubość fontu :)

Czytaj dalej
Subskrybuj: Posty (Atom)

Copyright © Twórczy notatnik