29 lip 2013

013. Biting words like a wolf howling


Cześć wszystkim. Minęło już trochę od ostatniej notki, a w tym czasie sporo się u mnie działo. Dorobiłam sobie trochę na roznoszeniu ulotek, ale oczywiście nie obyło się bez przeszkód. Jak co roku spiekłam się na czerwono. Niestety, co roku mam tak, że kiedy tylko posiedzę parę godzin na słońcu (nie mówię tutaj nawet o opalaniu się na plaży, po prostu zwykły spacer po mieście), na drugi dzień wyglądam okropnie. Moje ręce z wewnętrznej strony są białe jak ściana, a z drugiej opalone na raka.. patriotycznie można by rzec, jednak to wcale nie jest takie śmieszne ja jakie się wydaje. 
Coraz więcej czasu spędzam poza domem, chociaż upał robi się naprawdę nieznośny. Wczoraj na szczęście byłam w klimatyzowanym kinie na filmie pt. Obecność. Jak dla mnie naprawdę mocny horror, polecam każdemu.
Nie wiem, czy mogę się już pochwalić, ale zaryzykuję.. zostałam przyjęta na staż na szablonownicę. Jeszcze w tym tygodniu powinna pojawić się tam moja notka powitalna. Stoję właśnie przed dosyć trudnym zadaniem prowadzenia trzech blogów na raz, ale mam nadzieję, że sobie poradzę. Przede wszystkim obiecuję, że nie pozwolę sobie na zaniedbanie maudlaisy, tego możecie być pewni.


Instrukcja CSS
Jak wstawić obrazki pod przyciskami pagera bloga (starsze posty, nowsze posty, strona główna)? Potrzebne do tego nam będą 3 selektory:
a.blog-pager-older-link - starsze posty
a.home-link - strona główna
a.blog-pager-newer-link - nowsze posty

Mamy już przygotowany obrazek ze strzałką, co teraz zrobić, aby go ustawić pod przyciskiem ze starszymi postami? Oto odpowiedni kod:
a.blog-pager-older-link{
background-image: url("link do obrazka");
background-position: 50% 50%;
background-repeat: no-repeat;
color: transparent !important
padding: 30px 10px 30px 10px;
}
Właściwość padding ustawiamy tak, aby cała nasza strzałka była widoczna. Wartości są uporządkowane zgodnie z ruchem wskazówek zegara (góra, prawo, dół, lewo). Ten sam kod możemy wykorzystać przy wstawianiu tła pod przycisk z nowszymi postami, wystarczy zamienić selektor.

Według mnie najlepiej to wygląda, kiedy usuniemy przycisk ze stroną główną następującym kodem:
a.home-link{
display: none;
}
Jak zawsze mam nadzieję, że wszystko jest dobrze wytłumaczone. W razie pytań - pisać, zawsze chętnie odpowiem :)

Nagłówki PSD


Koloryzacje 

Zamówienia

dla Andromeda C.
Rozmawiałam z Tobą podczas robienia tego szablonu, więc wiem, że Ci się podoba. Jednakże w razie jakichś problemów technicznych - pisz.
UWAGA: Do pobrania szablonu uprawniona jest tylko osoba go zamawiająca. Będzie on zaliczony do kategorii szablonów wolnych, dopiero kiedy autorka bloga bloodlusts zmieni wygląd swojego opowiadania.

dla Ophelia
Dodałam swoje zdjęcia, ponieważ te które Ty zaproponowałaś, były dosyć małe i w dosyć niskiej jakości. Kolorystyka jest jasna, szablon przejrzysty, ogólnie starałam się zastosować do twoich zaleceń. Koniecznie daj mi znać, co myślisz o tym szablonie w komentarzu pod notką. 
UWAGA: Do pobrania szablonu uprawniona jest tylko osoba go zamawiająca. Będzie on zaliczony do kategorii szablonów wolnych, dopiero kiedy autorka bloga listy--do--charliego zmieni wygląd swojego opowiadania.

dla #Brill
pobierz szablon
Miało być w środę, a dodaję w sobotę, tak to już jest z tym moim planowaniem w czasie. Miało być ładnie, a wyszło jak zawsze - dziwnie. Przepraszam, że nie trzymałam się kolorystyki podanego przez Ciebie szablonu, ale CSS jest w miarę podobny. Ogólnie to mówiłaś, że Ci się podoba, ale.. sama nie wiem, po prostu jakoś tak dziko wyszedł.
UWAGA: Do pobrania szablonu uprawniona jest tylko osoba go zamawiająca. Będzie on zaliczony do kategorii szablonów wolnych, dopiero kiedy autorka bloga brillammente zmieni wygląd swojego opowiadania.


I to już wszystko, co przygotowałam dla was na dzisiaj. Postaram się niebawem zaktualizować spis selektorów, także możecie na niego zaglądać co jakiś czas, aby zobaczyć, czy czasem nie pojawiło się nic nowego.
Nadal czekam na wasze zamówienia w dziale zamawialnia, jak zawsze z ogłoszeń możecie się dowiedzieć ile zamówień, oraz dla kogo, pojawi się w następnej notce. Jeśli wszystko pójdzie zgodnie z planem, widzimy się za tydzień. 

16 lip 2013

012. I can't drown my demons, they know how to swim


Cześć wszystkim. Dzisiejsza notka z lekkim opóźnieniem, jak zresztą przeważnie to bywa jeśli chodzi o moje dotrzymywanie terminów. Tak czy inaczej, specjalnie zarwałam którąś to już na tych wakacjach nockę, aby popracować sobie spokojnie w photoshopie. Nie wiem dlaczego, ale w dzień jakoś trudniej mi się do tego zabrać. Zdecydowanie wolę spokojnie usiąść sobie z kubkiem herbaty nad laptopem tak mniej więcej koło 3 nad ranem. Efekty takich sesji wieczorowych bywają co prawda różne, ale mam nadzieję, że te, które przygotowałam dla was na dzisiaj, przypadną wam to gustu. 
U mnie właściwie nic się nie dzieje, ostatnio praktycznie całe dnie przesiaduję w domu, pogoda jest tak paskudna, że żal gdziekolwiek wyjść. Jak co roku spędzam "piżamowe wakacje", wieczorami szukając rozrywki na kinomaniaku. Na szczęście wygląda na to, że dzisiaj w końcu słońce wyszło zza chmur, zobaczymy tylko na jak długo. Przysięgam, że jeśli w przyszłym roku znowu nigdzie nie pojadę i będę kisić się 2 miesiące w domu, to zwariuję. 

Szablon wolny

Sygnatury



Zamówienia

dla Miniza
Muszę się przyznać, że zamówienie to robiłam w lekkim kryzysie twórczym i nie wiem jeszcze dokońca dlaczego, ale coś mi w nim nie pasuje. Jeśli będziesz miała jakieś uwagi, daj mi znać, a postaram się nieco poprawić ten szablon. 
UWAGA: Do pobrania szablonu uprawniona jest tylko osoba go zamawiająca. Będzie on zaliczony do kategorii szablonów wolnych, dopiero kiedy autorka el-amor-jugadors zmieni wygląd swojego bloga.


dla Irresistible
Kolorystyka miała być kremowa i starałam się ją taką utrzymać, dodając jedynie parę czerwonych akcentów. Bardzo dawno nie robiłam szablonu otwartego, ale myślę, że tutaj taki układ dobrze się sprawdzi. Ogółem, ja jestem z tej pracy zadowolona, a to rzadko mi się zdarza. Koniecznie daj mi znać, co myślisz!
UWAGA: Do pobrania szablonu uprawniona jest tylko osoba go zamawiająca. Będzie on zaliczony do kategorii szablonów wolnych, dopiero kiedy autorka be-my-shelter zmieni wygląd swojego bloga.

Stocki


Instrukcja CSS
Pytaliście o efekt przejścia, który możecie zauważyć np. na etykietach na obecnym szablonie głównym bloga. Postaram się w miarę przystępnie wszystkim to wytłumaczyć. Przykładowy kod wyglądałby następująco:
#PageList1 a:hover{
box-shadow: inset 50px 0px 0px #ffffff;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
}
Jak pewnie zauważyliście właściwość to box-shadow, czyli po prostu cień danego elementu. Inset przed wartościami liczbowymi oznacza, że cień będzie rozprowadzał się wewnątrz danego elementu, zamiast na zewnątrz. Jeśli chodzi o wartości liczbowe, pierwsza z nich to cień przesuwający się z lewej strony do prawej i jego wartość w pikselach (u mnie 50px). Jeśli chcielibyśmy uzyskać cień z prawej do lewej strony, możemy użyć wartości ujemnej (np. -50px). Druga wartość to rozprowadzanie się cienia z góry na dół. Jeśli chcielibyśmy uzyskać cień z dołu do góry analogicznie powinniśmy użyć wartości ujemnej, tak jak w poprzednim przykładzie. Ostatnia wartość liczbowa ta rozmycie cienia, a za nią kolor cienia.


Wszystko jasne? W takim razie zdradzę wam jeszcze jeden swój sekret. Co zrobić, aby cień później płynnie wracał na swojej miejsce? Nic prostszego:
#PageList1 a{
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
}
Właściwość transition odpowiada za efekt przejścia, więc teraz wszystkie animacje które napisaliśmy, będą łagodnie wracać do poprzedniego wyglądu.
Piszcie, czy ta instukcja wam się przydała, mam nadzieję, że wszystko jest w miarę zrozumiałe. Czy jeszcze jakiś efekt, jest dla was niejasny? Śmiało, pytać!



Jak pewnie widzicie, niedawno zmienił się wygląd bloga i ten z pewnością zagości tu dłużej, niż poprzedni. Jednak szablon, to nie jedyna rzecz, która uległa zmianie. Nastąpiła zmiana haseł w regulaminie, ciekawa jestem ile z was naprawdę czyta moje wypociny, zaraz się okaże. Zmienił się także sposób składania zamówień.
UWAGA: Od dzisiaj służy ku temu specjalny dział, czyli zamawialnia. Możecie tam bez żadnych limitów składać mi swoje propozycje lub zamówienia, które będę na bieżąco realizować. Kiedy podam listę zamówień, które przyjęłam i dla kogo je wykonam, zawsze możecie dowiedzieć się z ogłoszeń na blogu.

Na sam koniec mam dla was jeszcze jedną wiadomość: możliwe, że w przyszłym tygodniu na maudlaisy nie ukaże się nowa notka, ponieważ od teraz, aż do przyszłej środy będę zajęta organizowaniem z Misao imprezy graficznej na blogu natt-liv, którego jestem współautorką. Jednocześnie serdecznie na nią zapraszam - dla niedoinformowanych - 24 lipca godzina 20:00. Musisz tam być! :)
To chyba byłoby na tyle, czekajcie cierpliwie na nowy post! Do napisania. 

5 lip 2013

011. I'll never be good enough


Cześć wszystkim. Po pierwsze: bardzo cieszę się, że impreza się wam podobała. Być może uda mi się zorganizować jeszcze jedną pod koniec wakacji, ale to na razie nic pewnego. Zauważyliście zmiany na blogu? Chodzi mi o nowy szablon, który chyba zresztą długo tu nie zagości. Kiedy zrobiłam nagłówek, strasznie mi się on podobał, ale był on dość trudny dla mnie w połączeniu z CSS'em. Im dłużej na ten szablon patrzę, tym bardziej mi coś w nim nie pasuje. Życzcie mi weny, aby szybko udało mi się zrobić coś nowego, ponieważ po ostatnim jej napływie teraz czuję się nieco wypalona. 

Szablony wolne



Tutorial


Zamówienie

Wybrałam niebieską kolorystykę, ponieważ lepiej pasowała do zdjęć postaci. Układ dosyć prosty, ale myślę, że dobrze sprawdzi się na blogu z opowiadaniem. W razie jakichkolwiek problemów kontaktuj się ze mną na blogu lub prywatnie. Koniecznie daj mi znać, co myślisz o wykonaniu w komentarzu pod notką. :)
UWAGA: Do pobrania szablonu uprawniona jest tylko osoba go zamawiająca. Będzie on zaliczony do kategorii wolnych, dopiero kiedy autorka bloga siatkarskie-szczęście zmieni ten szablon na nowy.


Arkusze CSS
#PageList1 a:hover{
margin-left: 50px !important;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
}
Strony wysuwające się o 50px w prawo po najechaniu na nie
________________
#PageList1 a:hover{
margin-right: 50px !important;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
}
Strony wysuwające się o 50px w lewo po najechaniu na nie
________________
.post-body{
background-image: url("link do obrazka");
}
Obrazek pod samym obszarem notki
________________
.post-body{
background-color: #ffffff;
color: #000000;
padding: 10px;
border-radius: 30px;
text-align: center;
}
Pod samym obszarem notki od góry:
- kolor tła
- kolor tekstu
- margines wewnętrzny
- zaokrąglenie rogów
- wyśrodkowanie tekstu
________________
.post-body
.post-body img{
background-color: #ffffff;
}
Tło pod wszystkimi obrazkami w notce
________________
.post-body img{
border-radius: 30px;
}
Zaokrąglenie wszystkich obrazków w poście
________________
.footer-outer{
display: none;
}
Całkowite usunięcie stopki bloga
________________
.Attribution{
display: none;
}
Usunięcie napisów ze stopki bloga


Czekam na propozycje dotyczące nowej notki. Możecie składać zamówienia w komentarzach, postaram się wykonać wszystkie. Widzimy się za tydzień. 

Archiwum bloga

Obserwatorzy