Twórczy notatnik: stycznia 2015

Wszytko da się zmienić tak aby było dopasowane do naszego szablonu. Lubię jak wszystko ze sobą współgra,strasznie mnie denerwuje jak coś ze sobą się gryzie. Dlatego przy tworzeniu szablonu staram się dbać o najmniejszy szczegół. w dzisiejszym tutorialu pokażę wam jak zmienić wygląd gadżetu "Obserwuj przez e-mail"

Gadżet "Obserwuj przez e-mail" przed zmianami wygląda tak:

Po zmianach może wyglądać różnie - wszystko zależy od nas. Najlepsze w tym jest to, że aby zmienić wygląd naszego gadżetu nie musimy szperać w kodzie HTML,który przeraża sporą część osób. Do zmian wystarczy nam kod CSS,który wstawiamy w projektancie szablonu.
Kod wygląda tak:

.FollowByEmail .follow-by-email-inner .follow-by-email-address {width: 140px; height:34px; font: 10px Verdana; background: #fff; letter-spacing: 1px; border-style: solid; border-width: 1px; border-color: #000; padding: 5px; margin-bottom: 25px; border-radius: 10px 10px 10px 10px;}

.FollowByEmail .follow-by-email-inner .follow-by-email-submit {width:70px; margin: 10px 10px 15px 10px; background:#000; color:#fff; height:34px;z-index:0; font-size: 12px;letter-spacing: 1px;text-transform:none; font-family: Verdana; border-radius: 10px 10px 10px 10px;}

.follow-by-email-inner .follow-by-email-submit:hover {width:70px; margin: 10px 10px 15px 10px; background:#ccc; color:#fff; height:34px;z-index:0; font-size: 12px;letter-spacing: 1px;text-transform:none; font-family: Verdana; border-radius: 10px 10px 10px 10px;}

Przeanalizujmy nasz kod krok po kroku (wszystkie wartości zaznaczone na kolorowo są zmienne):

Pierwsza cześć kodu dotyczy pola do wpisywania adresu e-mail

.FollowByEmail .follow-by-email-inner .follow-by-email-address {width: 140px; height:34px; font: 10px Verdana; background: #fff; letter-spacing: 1px; border-style: solid; border-width: 1px; border-color: #000; padding: 5px; margin-bottom: 25px; border-radius: 10px 10px 10px 10px;}

Długość pola
Szerokość pola
Wielkość i rodzaj czcionki w polu
Tło pola
Odstęp między literami
Rodzaj ramki
Grubość ramki
Kolor ramki
Dopełnienie
Margines dolny
Zaokrąglenia narożników

Druga cześć kodu dotyczy przycisku "submit"

.FollowByEmail .follow-by-email-inner .follow-by-email-submit {width:70px; margin: 10px 10px 15px 10px; background:#000; color:#fff; height:34px;z-index:0; font-size: 12px;letter-spacing: 1px;text-transform:none; font-family: Verdana; border-radius: 10px 10px 10px 10px;}

Długość
margines górny
margines lewy
margines dolny
margines prawy
Tło
Kolor tekstu
Szerokość
Rozmiar czcionki
Odstęp między literami
Rodzaj tekstu
Rodzaj czcionki
Zaokrąglenia narożników

Trzecia część kodu przycisku submit po najechaniu na niego myszą (jeśli ktoś nie chce aktywnego przycisku to tą część może pominąć)

.follow-by-email-inner .follow-by-email-submit:hover {width:70px; margin: 10px 10px 15px 10px; background:#000; color:#fff; height:34px;z-index:0; font-size: 12px;letter-spacing: 1px;text-transform:none; font-family: Verdana; border-radius: 10px 10px 10px 10px;}

Długość
margines górny
margines lewy
margines dolny
margines prawy
Tło
Kolor tekstu
Szerokość
Rozmiar czcionki
Odstęp między literami
Rodzaj tekstu
Rodzaj czcionki
Zaokrąglenia narożników

Czytaj dalej

Zmiana koloru poszczególnych elementów w GIMPie

Zmiana koloru poszczególnych elementów w GIMPie

W dzisiejszym wpisie przedstawię wam jak w trzech prostych krokach zmienić kolor danego elementu (np. kolor tęczówki, paznokci etc.) w GIMPie. Osobiście takiej opcji użyłam tylko parę razy do uwydatnienia koloru tęczówek, jednak można fajnie się pobawić tą opcją w przypadku kiedy chcemy aby poszczególne elementy na naszym zdjęciu były np. neonowe.

1. Otwieramy zdjęcie w GIMPie i wybieramy jedno z trzech zaznaczeń, które są zaznaczone na poniższym zdjęciu

Zaznaczenie eliptyczne bardzo nam się przyda przy zmianie koloru tęczówek, natomiast przy innych nieregularnych kształtach wybieramy zaznaczenie odręczne.

2. Zaznaczamy element, który będzie miał zmieniany kolor.