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

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:





Czytaj dalej »

Małe, domowe biuro za mniej niż 200 zł

27 kwietnia 2015


Warto jest przeznaczyć kawałek konta w naszym mieszkaniu na nasze miejsce pracy. Nasze domowe biuro powinno znajdować się w oddzielnym miejscu, mieć swoje typowo biurowe przeznaczenie. Przez jakiś czas moja przestrzeń biurowa nie miałam swojego konta. Moim miejscem pracy, było łóżko, stolik, kuchnia, salon - wszędzie gdzie się dało. Po pewnym czasie postanowiłam popracować nad swoim kątem biurowym. Wiecie, używanie laptopa i wykonywanie różnych prac gdzie popadnie robi się w pewnym momencie bardzo uciążliwe, niewygodne. Dlatego postanowiłam popracować nad swoim mini biurem.
Na mojej liście planów znajdowały się trzy główne punkt: tanio, biurko pasujące do regału, skromnie. Nie lubię jak wokół mnie jest przytłaczająco i coś do siebie nie pasuje, dlatego punkty "skromnie" i "biurko pasujące do regału" były tymi priorytetowymi. Poniżej przedstawiam Wam moje inspiracje:



Jeśli chodzi o kwestię biurka to tu były dwie opcje: robione na zamówienie albo szukać, szukać i jeszcze raz szukać. Meble mam ciemne (kolor orzech) z jasnymi frontami (kolor wanilia) i takie biurko było poszukiwane i najlepiej jakby było w rozsądnej cenie. Bardzo zależało mi aby w biurku była szuflada i niewielka półka. Bez żadnych dodatkowych szafek. Biurko znalazłam w rozsądnej cenie, więc długo się nie zastanawiałam nad zakupem.


Kolejną rzeczą, na której bardzo mi zależało to wygodne krzesło. W tym wypadku nie musiałam szukać długo, bo już takie posiadałam. Kupiłam je parę lat temu i nawet nie za bardzo z niego korzystałam - do tej pory nie wiem czemu. Jest plastikowe, rewelacyjnie wyprofilowane, dzięki czemu można siedzieć w nim wygodnie przez wiele godzin.


Oświetlenie - bardzo źle mi się pracuje przy złym oświetleniu, dlatego szukałam dobrej lampki na biurko. Regulowana, prosty design, dobrze rozprowadzająca światło - tym się kierowałam. Byłam w takiej desperacji (nigdy nie udało mi się posiadać dobrej lampki) że na lampkę miałam przeznaczoną kwotę od 50 do 60 zł. Byłam w niebo wzięta, kiedy znalazłam idealną lampkę za mniej niż 40 zł.


Organizacja - Jak już wspomniałam, nie lubię jak wokół mnie jest przytłaczająco, dlatego rzeczy na biurku ograniczyłam do zupełnego minimum. Wiązało się to z  tym, że musiałam pomyśleć o jakimś ciekawym organizerze na długopisy, wkłady do pióra, kolorowe cienkopisy itd. W tym celu przywróciłam do łask swoją tablicę korkową, którą jakiś czas temu odnawiałam. Jeśli jesteście ciekawi jak zrobić tablicę korkową z organizerem to wpis macie tutaj. Niedługo pewnie znowu będzie odnawiana ponieważ szykuję już plany na niewielki remont moich czterech ścian. Kolejną rzeczą, która bardzo mi pomaga w organizacji to kalendarz, dlatego ściana przy oknie została zagospodarowana właśnie na kalendarz i modem. Na biurku został tylko metalowy pojemnik z motywem Nowego Jorku, który zawiera małe karteczki. Reszta część potrzebnych mi rzeczy wylądowała na półce i w szufladzie. Dodatkowo do szuflady wstawiłam pojemniczki, dzięki którym przedmioty takie jak kable USB do telefonu i aparatu lub słuchawki, których nie używam nie walały się po szafce.







Cały kąt biurowy prezentuje się tak: (muszę jeszcze znaleźć jakiś ciekawy sposób na ukrycie kabli)



Wycena poszczególnych rzeczy:

Biurko, sklep meblowy Bodzio - 68 zł
Krzesło Ikea Snille - kupione 6 lat temu na promocji za 40 zł
Pojemniki metalowe Ikea - 2 szt 8 zł (4 szt. 16 zł)
Lampka na biurko, Leroy merlin - 35 zł
Duża tablica korkowa - 20 zł
Metalowe pudełko - ja dostałam w nim prezent, ale widziałam, że można takie pudełka dostać w Pepco za 5 zł.

Razem: 184 zł. 
(wszystkie ceny podane są w zaokrągleniu)

Jak widać można stworzyć swoje mini biuro za mniej niż 200 zł, wystarczy tylko się trochę postarać.

Jak wam się podoba nowy szablon? Potrzebuje jeszcze kilku małych poprawek, ale to się zrobi w tzw. międzyczasie :)
Czytaj dalej »

Zniszcz ten dziennik - malowanie taśmą

25 kwietnia 2015


Nie wyrobiłam się ze wczorajszym wpisem - niestety, ale zaczęłam robić małą rewolucje w swoich czterech ścianach. Jednak nie będę się rozwodzić tu nad tym co mi wczoraj przeszkadzało w napisaniu wpisu. Dzisiaj dodaje piątkowy wpis i coraz częściej się zastanawiam nad tym aby zrezygnować z wpisów piątkowych i przenieść je na sobotę. Postanowiłam, że tak na weekend sprawdzi się tutaj taki luźny wpis z dziennikiem, szczególnie, że ostatnio go tutaj nie było.

Ostatnio nie mam za bardzo czasu na to aby zajmować się dziennikiem czy nie-książką. Od ostatniego wpisu z dziennikiem, zrobiłam tylko 3 zadania, w tym jedno bardzo czasochłonne. Dzisiejszy wpis nie będzie długi, nie będzie zmuszał do głębszego myślenia, wyciągnięcia jakiś wniosków. Po prostu siądź, oglądaj zdjęcia, może akurat któreś cię zainspiruje.

Oblej, rozlej, nakap, napluj, chluśnij kawą tutaj. Jak wiecie nie zniosłabym niszczenia tego dziennika, więc wszystko u mnie powstaje za pomocą materiałów papierniczych. Niestety nie zobaczycie oplutej przeze mnie strony.



Wyrwij tę stronę. Włóż ją do kieszeni. Nie wyjmuj podczas prania. Potem wklej z powrotem. 


Pokryj tę stronę taśmą (stwórz jakiś wzór). Ja stworzyłam pumę i rekina. Może uda wam się dojrzeć te zwierzęta.


Jeśli chcecie zobaczyć zdjęcia ze wszystkich zadań to zapraszam na mojego pinteresta.

Mała informacja na koniec. Jeśli ktoś napisał do mnie maila, a nie dostał odpowiedzi to bardzo prawdopodobne, że wiadomość mi nie doszła. W tym celu proszę o napisanie ponownej wiadomości na maila blonparia@wp.pl 


Czytaj dalej »

Tworzenie bokeh w GIMPie

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.






Czytaj dalej »