Zmiana wyglądu tytułów gadżetów za pomocą kodu CSS

środa, 29 kwietnia 2015


CSS jest wspaniały. Serio. Czasem może irytować, ale to zazwyczaj przez jakiś nasz błąd, którego nie dostrzegamy, ale bluzgać zaczniemy - jakże by inaczej. Dziś przedstawię wam prosty tutorial, mianowicie jak w prosty sposób za pomocą kodów CSS można zmienić wygląd tytułów gadżetów.
Kiedyś pojawił się post o tym jak dodać własne, graficzne tytuły gadżetów. Jednak potem zrobiłam się leniwa, a może określenie "bardziej wygodnicka" będzie tu trafne.
Oczywiście aby nasze tytuły gadżetów się zmieniły to potrzebujemy kodu, składającego się z selektoru i stylów. Tak naprawdę aby taki kod sobie stworzyć to za wiele nie potrzeba.

Musimy wiedzieć jak oznaczyć nasze kolumny boczne, albo chociaż jedną z nich. Do tego posłuży nam selektor .sidebar, pewnie każdy się zastanawia czym on się różni od selektora .column-right-inner lub .column-left-inner już wyjaśniam poniżej.

.sidebar - odpowiada za wszystkie kolumny, zarówno za lewą jak i prawą
.column-right-inner - jak sama nazwa wskazuje odpowiada  tylko za prawą kolumnę.
.column-left-inner - odpowiada tylko za lewą kolumnę

Nie ma dużej filozofii prawda? Kolejną rzeczą jaką musimy wiedzieć to to jaki selektor mają gadżety. Większość z was posiada smartphony, więc będzie wam łatwo skojarzyć jaki selektor mają gadżety czyli .widget, ale to jeszcze nie koniec. Niestety nie wystarczy nam znajomość .sidebar i .widget, musimy jeszcze wiedzieć jak oznaczyć nagłówki gadżetów. Wiecie, że każdy nagłówek ma jakieś h z cyferką jak np. h3 .post-title, nagłówki gadżetów mają h2 np. h2 .date-header. Nasze kody dotyczące nagłówków w kolumnach bocznych będą wyglądać następująco:

.sidebar .widget h2 - odpowiada za wszystkie nagłówki gadżetów, we wszystkich kolumnach bocznych.
.column-right-inner .widget h2 - odpowiada za wszystkie nagłówki gadżetów, tylko w kolumnie bocznej prawej.
.column-left-inner .widget h2 - odpowiada za wszystkie nagłówki gadżetów, tylko w kolumnie bocznej lewej.

Tak na marginesie to selektor .sidebar .widget h2 widnieje w spisie selektorów CSS na moim blogu.

Skoro mamy już selektor dla naszych tytułów gadżetów, to wypadałoby teraz dopisać kawałek jakiegoś stylu, żeby wyglądało to jakoś przyzwoicie. Tutaj mamy duże pole do popisu, a wiecie dlaczego? Bo możemy dopisać sobie wszystko co chcemy. Poniżej trzy przykłady jak to może wyglądać:

.sidebar .widget h2 {
padding: 10px; - marginesy wewnętrzne, tego warto użyć
background-image: url (LINK DO TŁA);
color: #000; - kolor tekstu
font-family: Lobster; - rodzaj czcionki 
font-size: 20px; - wielkość czcionki
text-align: center; - położenie tytułu gadżetu
}

W moim przypadku to wygląda mniej więcej tak:



.sidebar .widget h2 {
padding: 10px; - marginesy wewnętrzne, tego warto użyć
background: #4eacfa; - kolor tła
color: #000; - kolor tekstu
font-family: Lobster; - rodzaj czcionki 
font-size: 20px; - wielkość czcionki
text-align: center; - położenie tytułu gadżetu
}

W moim przypadku to wygląda mniej więcej tak:



.sidebar .widget h2 {
padding: 10px; - marginesy wewnętrzne, tego warto użyć
border-style: solid; - rodzaj ramki 
border-width: 2px; - grubość ramki
border-color: #4eacfa; - kolor ramki
color: #000; - kolor tekstu
font-family: Lobster; - rodzaj czcionki 
font-size: 20px; - wielkość czcionki
text-align: center; - położenie tytułu gadżetu
}

W moim przypadku to wygląda mniej więcej tak:





Udostępnij ten wpis:
Czytaj dalej »

Tworzenie bokeh w GIMPie

środa, 22 kwietnia 2015


Na pewno każdy z was słyszał o efekcie bokeh jaki możemy uzyskać dzięki światłu na zdjęciach. Dokładnie nie wiem jak on powstaje na zdjęciach, bo na fotografii znam się jak świnia na gwiazdach, ale wiem jak zrobić taki efekt w programie graficznym GIMP. W dzisiejszym tutorialu dowiecie się jak sami możecie stworzyć taki efekt za pomocą paru kliknięć.

1. Otwieramy GIMPa i wybieramy plik - nowy. Ustalamy sobie wielkość naszego obrazu i klikamy ok. 




2. Wybieramy ikonkę kubełka i klikamy nim na nasz obraz. Dobrze wybrać sobie czarny kolor jako kolor bazowy. Jednak jeśli chcemy mieć inny kolor bazowy to klikamy na nasz prostokąt z czarnym kolorem i wybieramy inny.



3.  Teraz klikamy na "nową warstwę" i ustawiamy na "przezroczysta" 


4. Wybieramy "Gradient" i zmieniamy kolor na taki jaki nam odpowiada, a kolor drugi zmieniamy na kolor naszego tła (w tym przypadku czarny). Następnie zmieniamy nasz gradient na kolor pierwszoplanowy i ustawiamy go na "promienisty", następnie rozciągamy go na naszym obrazie.


4a. Kiedy już nasz gradient się pojawi na obrazie to zmieniamy jego krycie.


5. Powtarzamy krok z punktu 3 i zmieniamy nazwę naszej warstwy. Następnie klikamy na "Pędzel" i wybieramy rodzaj pędzla - koło i zmieniamy kolor pierwszoplanowy na biały. Następnie rysujemy kółka.



6. Zmieniamy krycie naszych kółeczek i przechodzimy do filtry - rozmycie - rozmycie Gaussa... rozmycie ustawiamy na 40,0 w jednym i drugim okienku, po ustawieniu klikamy ok. 




7. Powtarzamy punkty 3, 5 (rysowanie kółek) i 6. Jedyne co nam się tu zmieni to ustawienie rozmycia z 40,0 na 10,0. Oczywiście pamiętamy o tym, żeby nasza warstwa miała inną nazwę niż poprzednie.


8. Powtarzamy punkty 3, 5 (rysowanie kółek) i 6. Jedyne co nam się tu zmieni to ustawienie rozmycia z 10,0 na 1,0. Oczywiście pamiętamy o tym, żeby nasza warstwa miała inną nazwę niż poprzednie.


9. Tworzymy nową warstwę, zmieniamy nazwę i tym razem zmieniamy ustawienia z "przezroczyste" na "białe"


10. Wszystko zostanie pokryte białym kolorem, ale nie panikujemy. Tak właśnie ma być. Przechodzimy do filtry - renderowanie - chmury - różnica chmur... Wyskoczy nam okienko, w którym musimy ustawić parę rzeczy. Zaznaczamy "wylosuj", "kafelkowe" i zmieniamy rozmiar na 4,0. Klikamy ok.




11. Pojawi się nam biało-szare tło. Przechodzimy teraz do trybu i zmieniamy ze "zwykły" na "pokrywanie" 


12. Wykonujemy polecenie z punktu 3. Pamiętamy o zmianie nazwy dla warstwy. Wybieramy opcje gradient, ustawiamy  go na liniowy i wybieramy jeden z tęczowych gradientów.




13. Rozciągamy nasz gradient na obrazie, zmniejszamy krycie i wybieramy tryb "pokrywanie" 





14. Zaznaczamy sobie 2 warstwę z naszymi kółeczkami i wybieramy tryb "twarde światło". Teraz zaznaczamy sobie 3 warstwę z naszymi kółeczkami i wybieramy tryb  "połączenie ziarna". 





15. Teraz musimy tylko przełączyć w dół wszystkie warstwy zaczynając od dołu. Aby to wykonać musimy najpierw kliknąć prawym przyciskiem myszki na daną warstwę.



16. Zapisujemy. Plik - wyeksportuj jako... 


17. Efekt końcowy.






Udostępnij ten wpis:
Czytaj dalej »

Jak przenieść stopkę wpisu na bok

środa, 15 kwietnia 2015


W poniedziałek przedstawiłam Wam proste DIY, a dziś zaprezentuje jak w prosty sposób możemy przenieść stopkę naszego wpisu (pole, na którym znajduje się autor, komentarze itd.) na bok - obojętnie lewy czy prawy. Nie musimy grzebać w HTML, a jedyne co musimy zrobić to pobawić się trochę CSSem. 
Przechodzimy: szablon - dostosuj - zaawansowane - dodaj arkusz CSS. teraz zaczyna się nasza zabawa. Musimy stworzyć sobie kod, a do tego będą potrzebne nam selektory, która znajdziecie tutaj. Ja stwierdziłam, że całej stopki nie będę przenosić. Przenosić będę tylko autora i komentarze.

Selektor dla autora to .post-author, a komentarzy to .comment-link. Musimy pamiętać o tym, że każdy element naszej stopki musimy zakodować oddzielnie, jeśli zrobimy wszystko na raz, to wszystkie pozycje będą jedna na drugiej. Kiedy mamy już nasze selektory to trzeba coś z nimi zrobić - no niestety sam selektor nie wystarczy więc najprościej jest zacząć od pozycjonowania 
.post-author {
position: absolute; - nie wpisujcie tu fixed czy innej pozycji, bo one się wam najzwyczajniej w świecie nie sprawdzą - nie będzie oczekiwanego efektu, a po mailach, które do mnie wysyłacie "bo kod mi nie działa" widzę, że duża część osób zmienia to, dlatego kod nie działa. 
Następnie pod spodem możemy (ale nie musimy) ustawić sobie szerokość, ja zawsze wolę tą szerokość dodać aby lepiej sobie wszystko dopasować. 
szerokość to width: 0px; - 0px jest wartością zmienną. Czyli nasz kod obecnie prezentuje się tak: 
.post-author {
position: absolute;
width: 0px;
Na razie nic się nie dzieje, oprócz tego, że autor nam się trochę w stopce przesuną, ale spokojnie, zaraz do wszystkiego dojdziemy. Następnie pod width możemy dodać top - odpowiada nam to za dany element w pionie, jest to przydatne, bo dzięki temu możemy ustalić sobie położenie danego elementu - nie musi on być np. na wysokości tytułu wpisu, możemy ustawić go na wysokości daty wpisu. 
Kod prezentuje się obecnie tak: 
.post-author {
position: absolute;
width: 100px;
top: 10px;
Pamiętajmy o tym, że przy top, również mamy wartość zmienną. Tutaj akurat poruszyło nam się znacznie więcej, bo nasz autor poszedł w górę i jest w okolicach tytułu wpisu, ale to nadal nie jest to o co nam chodziło, bo nasz autor znajduje się gdzieś na środku po między wpisem a tytułem wpisu, lub zlewa się z tekstem. Następnie co musimy zrobić to ustalić, z której strony ma nasz autor być z lewej czy prawej. Ja sobie wybrałam lewą stronę, a więc pod top: 10px; dopisuje left: -100px; Oczywiście pamiętamy o tym, że wartość jest zmienna. Kod prezentuje się tak: 
.post-author {
position: absolute;
width: 100px;
top: 10px;
left: -100px;
Już jesteśmy blisko końca, nasz autor powinien być już po lewej stronie, ale żeby to jeszcze jakoś lepiej wyglądało to możemy dodać sobie wyśrodkowanie tekstu. Pod left -100px; wpisujemy text-align: center; Kod prezentuje się tak: 
.post-author {
position: absolute;
width: 100px;
top: 10px;
left: -100px;
text-align: center;
Kolejny element jaki jest dla nas istotny to wielkość czcionki w tym celu pod text-align: center; piszemy font-size: 7px - wartość zmienna. Nasz kod prezentuje się tak: 
.post-author {
position: absolute;
width: 100px;
top: 10px;
left: -100px;
text-align: center;
font-size: 7px;
W tym momencie możemy zakończyć nasz kod, ale żeby nie było nudno, to pobawimy się jeszcze trochę. Do naszego kodu dodamy rodzaj czcionki czyli pod font-size: 7px; dopiszemy sobie font-family: Verdana; - oczywiście rodzaj czcionki możemy zmienić. Nasz kod będzie wyglądał teraz tak: 
.post-author {
position: absolute;
width: 100px;
top: 10px;
left: -100px;
text-align: center;
font-size: 7px;
font-family: Verdana;
Do tego kodu dodałam jeszcze kolor czcionki color: #000 !important; - kolor oczywiście też możemy zmienić, następnie dodałam ozdobny paseczek z lewej strony za pomocą border-left: solid 4px #3a717d; - możemy ustawić ten paseczek również z prawej, zamieniając border-left na border-right oraz dodałam położenie dla tego ozdobnego paseczka padding-left: -10px; Teraz mój kod wygląda tak: 
.post-author {position: absolute;
width: 100px; 
top: 10px;
left: -100px;
text-align: center;
font-size:10px; 
font-family: Verdana;
color: #000 !important;  
border-left: solid 4px #3a717d; 
padding-left: -10px;}

A wygląda to tak: 


Pomyliłam się jeśli chodzi o podanie wyników dotyczących konkursu. Wyniki pojawią się nie 16.04 (jutro) tylko 17.04 (piątek) Przypominam również o ankiecie, którą znajdziecie w kolumnie bocznej. 
Udostępnij ten wpis:
Czytaj dalej »

Copyright © Szablon wykonany przez My pastel life