Skróty klawiaturowe Windows

26.08.2018


Skróty klawiaturowe - jak ja ich nie doceniałam, zaczęłam je doceniać w momencie, kiedy się okazało, że przyśpieszają moją pracę, a na studiach, nie raz naprawdę nie było czasu na to, aby podczas projektowania, szukać w opcjach komendy "cofnij" lub "wklej", o wiele szybciej szło to skrótami klawiaturowymi.

Dlatego, kiedy później zaczynałam pracę na komputerze, która nie była związana z projektowaniem, zapragnęłam korzystać ze skrótów klawiaturowych nie tylko w danej aplikacji/programie, ale również w danym systemie.

Przyznam się, że przez długi czas nie wiedziałam, jakie skróty klawiaturowe, są w systemie Windows, znałam tylko kilka i zagłębiałam tę wiedzę odpowiednio, do moich potrzeb, aż w końcu stwierdziłam, że zrobię sobie plakaty, które mi to ułatwią.

Takie plakaty, udostępnię dzisiaj i Wam i mam nadzieję, że komuś one ułatwią i przyśpieszą pracę tak samo jak mi :)




Poniżej znajdziecie link, pod którym możecie pobrać plik przygotowany do druku w formacie pdf z rozpiską tych skrótów klawiaturowych :)

Pobierz rozpiskę skrótów klawiaturowych

Zasady pobierania 

  • Pliki można pobierać na własny użytek
  • Pliki w rozmiarze A4
  • Jeśli chcesz się podzielić planami - nie kopiuj, udostępnij link :) 
  • Nie udostępniaj plików w formie zmienionej 

Czytaj więcej >
Udostępnij ten wpis:

Efekty dla przycisków/buttonów

22.08.2018


Jakiś czas temu, była opublikowana instrukcja na temat tego, jak zrobić własne buttony/przyciski, więc pomyślałam sobie, że głupio tak tą instrukcję zostawić i nie zrobić nic dodatkowego do niej, a i przy okazji do innych "klikaczy" na naszym blogu.

Przedstawię Wam dzisiaj, 6 efektów dla buttonów z powyższej instrukcji oraz innych przycisków na naszym blogu np. czytaj więcej, etykiety etc. Mogę Wam powiedzieć, że jest to pierwsza część tej instrukcji i jeszcze kilka takich efektów na pewno się pojawi :)

Nie będziemy musieli nic robić w kodzie HTML szablonu, wystarczy nam tylko arkusz CSS.

Motyw - dostosuj - zaawansowane - dodaj arkusz CSS

Zapamiętaj!
Wszystkie elementy w analizie kodu, zaznaczone na kolor i pogrubione są zmienne.

Efekt 1


Efekt pierwszy, jest idealny, jeśli chcemy, aby nasz button/przycisk na coś wskazywał. Po wskazaniu na button kursorem, pojawi nam się mała strzałka.

Podgląd

Najedź na mnie i zobacz jaki mam efekt



Zapamiętaj!
Niektóre selektory nie występują razem z kropką tylko z tzw. kratką. Czyli np. .selektor lub #selektor

Analiza fragmentu kodu, który można zmienić:

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px; - marginesy
padding:10px 30px; - marginesy wewnętrzne
border-bottom:none;
-webkit-border-radius:0.333em; - zaokrąglenie narożników 
-moz-border-radius:0.333em;
border-radius:0.333em; 
color:#fff!important; - kolor fontu/czcionki
text-transform:uppercase; - styl tekstu (tutaj ustawiony na litery drukowane)
font-size:14px!important; - wielkość fontu/czcionki
line-height:24px!important;
letter-spacing: 1px; - odległość między literami
cursor:pointer;
font-family: Open Sans; - rodzaj fontu/czcionki
}
.selektor {
background: #000; - kolor tła buttonu/przycisku
}
.selektor:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  border-style: solid;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  left: calc(50% - 10px);
  top: 0;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #000 transparent; - kolor strzałki
}

Efekt 2


Najedź na mnie i zobacz jaki mam efekt



Analiza fragmentu kodu, który można zmienić:

.selektor { position:relative;
display:inline-block;
 margin: 10px 5px 10px;  - marginesy
padding:10px 30px;  - marginesy wewnętrzne
border-bottom:none;
 color:#fff!important; - kolor fontu/czcionki
 text-transform:uppercase; - styl tekstu (tutaj ustawione na litery drukowane)
 font-size:14px!important; - wielkość fontu/czcionki
line-height:24px!important;
letter-spacing: 1px;  - odległość między literami
cursor:pointer;
font-family: Nunito; } - rodzaj fontu/czcionki
 .selektor { background: #78d9d3; } - kolor tła
 .selektor:before { content: '';
 position: absolute;
 border: #78d9d3 solid 4px; - kolor i grubość obramowania
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-property: top, right, bottom, left;
 transition-property: top, right, bottom, left; }

Efekt 3


Najedź na mnie i zobacz jaki mam efekt



Analiza fragmentu kodu, który można zmienić: 

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px; - marginesy
padding:10px 30px; - marginesy wewnętrzne
border-bottom:none;
color:#fff!important; - kolor fontu/czcionki
text-transform:uppercase; - styl tekstu
font-size:14px!important; - wielkość fontu/czcionki
line-height:24px!important;
letter-spacing: 1px; - odległość między litterami
cursor:pointer;
font-family: Nunito; - rodzaj fontu/czcionki
}
.selektor {
background: #444; - kolor tła
}

Efekt 4


Najedź na mnie i zobacz jaki mam efekt




Analiza fragmentu kodu, który można zmienić:

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px; - marginesy
padding:10px 30px; - marginesy wewnętrzne
border-bottom:none;
color:#fff!important; - kolor fontu/czcionki
text-transform:uppercase; - styl tekstu
font-size:14px!important; - wielkość fontu/czcionki
line-height:24px!important;
letter-spacing: 1px; - odstęp między literami 
cursor:pointer;
font-family: Nunito; - rodzaj fontu/czcionki
}
.selektor {
background: #ffe599; - kolor tła
}
.selektor {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  background: #f1c232; - kolor drugiego tła
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.selektor:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffe599; - kolor pierwszego tła
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.selektor:hover, .selektor:focus, .selektor:active {
  color:  #fff; - kolor fontu/czcionki
}

Efekt 5


Najedź na mnie i zobacz jaki mam efekt



Analiza fragmentu kodu, który można zmienić:

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px; - marginesy
padding:10px 30px; - marginesy wewnętrzne
border-bottom:none;
color:#000!important; - kolor fontu/czcionki
text-transform:uppercase; - styl tekstu
font-size:14px!important; - rozmiar fontu/czcionki
line-height:24px!important;
letter-spacing: 1px; - odstęp między literami
cursor:pointer;
font-family: Nunito; - rodzaj fontu/czcionki
}
.selektor {
background: #fff; - kolor tła
}

Efekt 6

Najedź na mnie i zobacz jaki mam efekt




Analiza fragmentu kodu, który można zmienić:

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px; - marginesy
padding:10px 30px; - marginesy wewnętrzne
border-bottom:none;
color:#fff!important; - kolor fontu/czcionki
text-transform:uppercase; - styl tekstu
font-size:14px!important; - wielkość fontu/czcionki
line-height:24px!important;
letter-spacing: 1px; - odstęp między literami
cursor:pointer;
font-family: Nunito; - rodzaj fontu/czcionki
}
.selektor {
background: #9fc5e8; - kolor tła
}

Który efekt Wam się najbardziej podoba? :)
Czytaj więcej >
Udostępnij ten wpis:

Jak zrobić pasek powiadomień/informacyjny na Bloggerze

17.08.2018

Pasek powiadomień blogger, instrukcja na bloggera

Pewnie nie raz i nie dwa mieliście okazję do tego, aby na blogu (na górze) widzieć u niektórych okienko/pasek z jakąś informacją np. o urlopie, nowych produktach w sklepie, aktualizacjach czy jakiś zmianach na blogu itd. Jak pewnie też wiecie, nie jest to standardowy gadżet Bloggera. Dlatego w tym wpisie, pokażę Wam jak taki pasek informacyjny dodać do Bloggera.

Okej, więc aby dodać nasz pasek informacyjny, będziemy pracować na kodzie HTML szablonu oraz arkuszu CSS. Nie będzie to skomplikowany "zabieg", więc każdy powinien sobie z tym poradzić :)

1. Pierwsze co musimy zrobić to przechodzimy do motyw - edytuj kod HTML

2. Klikamy kursorem, obojętnie jakie miejsce w kodzie i wybieramy ctrl+f na klawiaturze. Pojawi nam się okno wyszukiwania. W okienku, które nam się pojawiło wpisujemy </body>

3. Pod </body> wklejamy odpowiednio uzupełniony kod:



TEKST INFORMACYJNY - wpisujemy w tym miejscu tekst, który ma informować naszych czytelników

LINK - link do strony/podstrony/ wpisu, do którego ma kierować naszych czytelników

TEKST BUTTONU - czyli tekst, który będzie się wyświetlał na naszym przycisku np. kliknij tutaj/przejdź do wpisu lub kliknij tutaj

Mój kod wygląda tak:


Zapisujemy motyw

4. Przechodzimy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS. W arkuszu CSS wklejamy taki oto kod CSS:



Efekt:



Wersja dla osób posiadających menu przyczepione na górze bloga


1. Przechodzimy do układ - dodaj gadżet - HTML/JavaScript

2. W gadżecie wklejamy taki kod:



Zapisujemy

3. Przechodzimy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS



Efekt:



Wszystkie wartości w kodzie CSS są zmienne

Jeśli masz z czymś problem - napisz na maila :) 

Czytaj więcej >
Udostępnij ten wpis:

Darmowe plany lekcji - edycja 2018

14.08.2018


Już niedługo, już za momencik zaczyna się kolejny rok szkolny, a jak rok szkolny to i nowe plany lekcji by się przydały. Żeby tradycji stało się zadość, w tym roku również przygotowałam dla Was darmowe plany lekcji w 6 wzorach - 3 pionowe i 3 poziome.

Poprzednie edycje, cieszyły się dużym zainteresowaniem, więc mam nadzieję, że i ta edycja przypadnie Wam do gustu :)

Pierwsze 3 plany - poziome, to plany z motywem liska, kwiatów oraz kaktusów. Nie wiem czemu, ale motywy z liskami, zawsze kojarzyły mi się z powrotem do szkoły, a kwiaty... no cóż, dobrze, żeby wiosenne klimaty towarzyszyły nam nawet po powrocie do szkoły. Motyw kaktusów, z tej całej trójki jest chyba najbardziej uniwersalny :)

plan lekcji

Pobierz plan z liskiem Pobierz plan kwiatowy


Pobierz plan z kaktusami Pobierz plan z motywem roweru


Kolejne 3 plany jakie dla Was mam to plany w pionie. Utrzymane w letnim klimacie, a jeden z nich - plan z motywem roweru, jest przygotowany dla osób, które cenią sobie minimalizm. Oprócz tego jest to plan z grafiką, którą można samemu pokolorować, jeśli ktoś jednak by wolał dodać trochę koloru :)




Liście palm i morskie klimaty - od razu na myśl przywołują wakacje, a kto nie chciałby powrócić do wakacji (nawet myślami), podczas roku szkolnego? Od razu zaczyna się lepiej pracować :)

Pobierz plan z motywem morskim Pobierz plan z motywem liści palm

Plany lekcji są gotowe do druku, wystarczy kliknąć i pobrać.

Informacje o pobieraniu

  • Pliki można drukować na dowolnym papierze i na dowolnej drukarce. 
  • Pliki w formacie PNG

Zasady pobierania 

  • Pliki można pobierać na własny użytek
  • Jeśli chcesz się podzielić planami - nie kopiuj, udostępnij link :) 
  • Plany lekcji, nie są przeznaczone na sprzedaż 
  • Nie udostępniaj ich w formie zmienionej 

Informacja dla nauczycieli/opiekunów

Przy ostatnich edycjach planów lekcji, dostawałam pytania czy można pobrać plany dla dzieci ze szkoły lub domów dziecka - tak, można pobierać :) 


Plany lekcji - edycja 2017 Plany lekcji - edycja 2016 Plany lekcji - edycja 2015
Czytaj więcej >
Udostępnij ten wpis:

Czas pożegnać Blonparię. Zmiana nazwy bloga.

11.08.2018


Zacznijmy od tego, że kiedy tworzyłam Blonparię, miałam lat naście. Nie wiedziałam czego chce, za co się chwytać. Pierwsze kroczki bloga były pod nazwą Parma i prowadziłam na spółę z koleżanką. Pisałyśmy o wszystkim i o niczym. W pewnym momencie ona stwierdziła, że to dla niej za dużo, a ja stwierdziłam, że w takim razie chce się odciąć i podczas choroby i bawienia się słowami i wymyśliłam "Blonparia".

Były różne tematy, aż w końcu, ktoś kiedyś powiedział, abym skupiła się tylko na instrukcjach i grafice. Wszystkie stare wpisy usunęłam, czego później mniej lub bardziej żałowałam.

Żałowałam, bo zauważyłam, że w jakimś stopniu zawiodłam Was, zawiodłam siebie. Byłam na siebie zła, że pod wpływem jednej osoby, tak siadłam i wszystko zaczęłam zmieniać, a przecież, właśnie dla tych tematów, które były (nie tylko instrukcje i grafika) Wy byliście ze mną.

Dlaczego nazwa bloga się zmieniła?


Jakby to powiedzieć, w moim życiu się pozmieniało przez ten czas, kiedy Blonparia sobie istniała.
Zaręczyłam się, wyszłam za mąż, zaczęłam żyć całkowicie samodzielnie, skończyłam studia graficzne, kończę drugi kierunek studiów, zaczęłam pracę na etacie, zrobiłam prawo jazdy, kupiłam samochód, zaczęłam więcej wyjeżdżać w trasy i uczyć się na nowo jak to jest żyć z drugim człowiekiem pod jednym dachem.

My pastel life


Skąd się wzięła ta nazwa? To proste, ostatnio zrobiłam ankietę na temat tego, co chcielibyście czytać na blogu i moje przypuszczenia się potwierdziły - tęsknicie za poprzednią wersją bloga, a i mi tego brakowało, a ankieta to takie potwierdzenie tego, co chodziło mi od dawna po głowie. Skoro teraz na blogu będzie grafika i instrukcję oraz lifestyle i DIY (postaram się aby wszystko było jak najbardziej spójne) to stwierdziłam, że nazwa "My pastel life" będzie adekwatna, do tej całej sytuacji. W końcu można powiedzieć, że na blogu naprawdę będzie kolorowo i pastelowo - znając moje zamiłowanie do pasteli :)

Nowy szablon 


Myślałam, że wejdę z nowym szablonem, ale niestety, zmieniłam tylko niektóre elementy, a nowy szablon, jeszcze się robi - trochę się przeliczyłam z czasem pracy nad nim.

Stary szablon


Stary szablon znika, zostawiam go sobie, ale w związku z tym, że raczej już do niego nie powrócę - był to szablon, który gościł tu już dość długo - to chętnie go komuś oddam, warunek jest taki, aby napisać ciekawy komentarz/maila, a ja wylosuję jedną osobę :)



Czytaj więcej >
Udostępnij ten wpis:

Mów do mnie jeszcze - czyli jak źle przekręcałam element z ceną i kiedy dowiedziałam się, że czarny kolor, nie jest czarnym

05.08.2018


Uwielbiam swoją pracę, a w szczególności ludzi, z którymi współpracuje - serio, nie ważne jacy by nie byli, zawsze mnie zaskakują i usiłują ode mnie potwierdzenia, że ja jako grafik będę działać cuda i ich pomysły - nawet te najbardziej nietypowe zostaną zrealizowane :)

Projekt z tabliczkami, na których mają być ceny. Miesiąc się już to ciągnęło, w końcu dostałam wiadomość:

"No już prawie, prawie, tylko trochę źle pani tą cenę przekręciła, miało być w lewo, ale to drugie"

No tak, jak mogłam się pomylić!

Rozmawiam już drugi tydzień z klientem na temat projektu, nadal nie wiem jaka to firma i tak właściwie do kogo ma być celowana dana forma reklamy. Pytam się klienta kto jest jego grupą docelową i czym zajmuje się jego firma.

"Proszę pani moja firma zajmuje się wszystkim i grupa docelowa, to też wszyscy"

Jesteście ciekawi jaki finalny był projekt? Projekt z produktami dla niemowląt.

"Proszę o baner z informacją o sprzedaży działki, ale taki z efektem WOW!"

"Właściwie to ja nie wiem co jeszcze chce, ale może już Pani zacząć robić projekt" 

Kiedy czarny, nie jest czarnym i istnieje jeszcze jakiś inny czarny kolor :)

"- Napisy mają być czarne
- Proszę pana, one są czarne
- Nie, to nie jest czarny
- To jest czarny
- Proszę pani, nie o taki czarny mi chodziło, chodziło mi o inny czarny"

"To ja za zdjęcia muszę jeszcze płacić?"

"Czy można tego pana obrócić, aby stał do nas przodem, a nie profilem?" 

"Niech pani się nie śpieszy, nie potrzebuje tego na już, tylko na środę" - był poniedziałek. 

"- Podsyłam mój projekt na plakat
- Proszę pana, ale to jest plakat innej firmy
- No właśnie, podoba mi się, niech pani to odtworzy, tylko dane zmieni"

"Proszę pani, ja przeczytałem książkę o designie i to nie powinno tak być, ja zaraz pani napiszę zasadę projektowania" 

"- Proszę pani, ten projekt powinien do mnie mówić, krzyczeć, a on nic do mnie nie mówi, jest beznadziejny
- Proszę pani, ale to jest realizacja pani projektu i wprowadzone zmiany, które również pani zaproponowała
- Projekt jest świetny! Akceptuje go"

Mimo wszystko, nadal uwielbiam swoją pracę i klientów, jestem im wdzięczna za poprawianie mi humoru ;)
Czytaj więcej >
Udostępnij ten wpis:

Copyright © Szablon wykonany przez My pastel life