8 darmowych pastelowych tekstur do pobrania za darmo

15.09.2018


Ostatni wpis, w którym udostępniałam Wam darmowe patterny do pobrania był w listopadzie 2017 roku! Kawał czasu. Od tamtego momentu, zbierałam się do tego, aby kolejny taki wpis zrobić, zwłaszcza, że ten z darmowymi patternami, znajduje się w top 3, najchętniej czytanych wpisów :) 

Dlaczego pastelowe tekstury? 
Powiem tak, nie ma to nic wspólnego z nazwą bloga, chociaż...może i trochę ma, ponieważ, pomysł na pastelowe tekstury powstał w momencie kiedy szukałam odpowiednich jasnych tekstur dla siebie i dla bloga. 

Fakt, faktem, żadnej tekstury nie wykorzystałam na blogu, ale zrobiłam, mam i teraz dziele się nimi z Wami :) 

Mam nadzieję, że przypadną Wam one tak samo do gustu, jak darmowe patterny i będzie się Wam miło z nich korzystać :) 

Pobierz pastelowe tekstury

Zasady pobierania: 


  • Tekstury pobierasz tylko na użytek własny 
  • Zakaz sprzedawania ich 
  • Zakaz udostępniania ich w formie zmienionej lub skróconej 
  • Jeśli chcesz się podzielić tymi materiałami - udostępnij link do tego wpisu :) 
Czytaj więcej >
Udostępnij ten wpis:

Jak dodać grafikę na górze bloga

10.09.2018


Każdy z nas chce, aby szablon jego bloga był tym idealnym i tym wyróżniającym się, niektórzy idą w minimalizm, inni w kolory, a jeszcze inni w nietypowe efekty/gadżety.
To jest jak najbardziej okej, wszystko jest dla ludzi - oczywiście z umiarem, jak ze wszystkim :)

Dlatego w tej instrukcji chce Wam pokazać prostą instrukcje, która odmieni każdego bloga, niby nic, a jednak ma w sobie "to coś" i potrafi chwytać za oko.

Instrukcja będzie się opierać na kodzie CSS.

1. Przechodzimy do motyw - dostosuj - zaawansowane - tła - główne tło - przezroczyste

2. Wybieramy odpowiednią grafikę lub robimy samodzielnie.

Wytyczne do grafiki:

  • Wymiar: szer. 1556 px x wys. 110 px (wysokość, może być mniejsza) 
  • Format: PNG
  • Zapis z tłem przezroczystym 
  • Rozdzielczość: 300 dpi 
Grafiki do pobrania: 

Oczywiście grafika, zawiera tylko motyw na górze, bez nagłówka, powyższe zdjęcia są tylko zobrazowaniem tego, jak się prezentuje z danymi grafikami góra naszego bloga :)

3. Przechodzimy do arkusza CSS i wklejamy kod:




Zapamiętaj!
Link do grafiki można uzyskać, wgrywając grafikę na Bloggera. Tworzymy nową stronę, w którą wrzucamy naszą grafikę i ustawiamy na rozmiar oryginalny. Przechodzimy do HTML naszego wpisu i kopiujemy link, klikamy opublikuj, ale nie publikujemy linku do tej strony w menu itd. Skopiowany link grafiki, wrzucamy do naszego kodu w odpowiednim miejscu.


Czytaj więcej >
Udostępnij ten wpis:

logo, logotyp, sygnet czyli co, gdzie i z czym

06.09.2018



Logo - większość z Was pomyśli "no logo, oznaczenie marki, wielkie mi rzeczy" i oczywiście macie racje. Nie da się zaprzeczyć, że logo to oznaczenie np. sklepów, marki odzieżowej itd. ale nie wiem czy wiecie, ale do logo nie ma jednego kroku, aby logo stało się logo, to musi się składać z innych elementów.

W skrócie przybliżę Wam, jak rozpoczyna się pracę nad logo.

  1. Przychodzi klient, opowiada nam o swojej firmie i mówi jaką ma mniej więcej wizje. Uwaga! Bardzo często (ale nie zawsze) nie ma kolorystyki firmy - kolorystyka firmy jest dobierana przy tworzeniu logo. Jeśli jednak trafi nam się klient już z wybraną kolorystyką, to jest nam łatwiej.
  2. Zaczynamy działać - robimy szkice, dużo rysujemy, aż w końcu mamy od 2-4/5 dobrych propozycji. 
  3. Nie, nie dobieramy kolorów, na razie nasze szkice przekładamy na wektory w kolorze czarnym lub odcieniach szarości.
  4. Mamy już sygnet w wektorze, teraz, dobieramy odpowiedni font do niego. 
  5. Po doborze fontu do sygnetu, zaczynamy dobór kolorów. 
  6. Mamy już logo, ale czeka nas jeszcze trochę pracy
  7. Tworzymy księgę znaku do logo
Powyższy opis jest naprawdę bardzo schematyczny i może się wydawać, że to prosta sprawa zrobić logo, ale nie do końca tak jest. Teraz rozbije Wam to, co najważniejsze (to co związane z tytułem tego wpisu) na odpowiednie elementy, abyście dobrze zrozumieli, kiedy logo, jest logo.


Sygnet


Jest to nic innego jak nasza grafika - symbol graficzny/znak graficzny i właściwie można powiedzieć, że to wszystko, a jeszcze dokładniej możemy powiedzieć, że występuje z logotypem, gdzie razem z nim tworzy jedną całość, ale do tego zaraz dojdziemy.

Zapamiętaj!
Sygnet nie występuje sam, zazwyczaj (bo nie zawsze, o czym zaraz się dowiecie) jest połączony z logotypem. Są tylko dwa wyjątki kiedy sygnet występuje samodzielnie bez logotypu - sygnet mający logotyp, ale pojawiający się sam to wersja skrócona logo i tak też jest opisany w księdze znaku. Drugi wyjątek, kiedy od początku jest założone, że sygnet zostaje sam bez logotypu, wtedy sygnet nie jest sygnetem a logo, przykład - Nike.



Logotyp 


Jest to dodatek (lub nie, ale o tym za chwile) do naszego sygnetu. Prościej mówiąc - nazwa marki. Logotyp może występować samodzielnie, wtedy jest uznawany jako logo, takim przykładem jest np. Coca-Cola, Nivea. Jest to jedyny wyjątek, kiedy logotyp można nazwać logo, natomiast, jeśli logotyp jest przypisany do jakiegoś sygnetu, to już go logo nie nazwiemy tzn. nazwiemy oczywiście że tak, bo sygnet + logotyp = logo, ale nie można wtedy nazywać logotypu jako logo. 

Logo


Czyli jak możemy wywnioskować z tego co przeczytaliście wcześniej, logo to nic innego jak połączenie sygnet + logotyp, z pewnymi wyjątkami ;)



Tagline (opcjonalnie)


Dlaczego opcjonalnie? Bo to naprawdę nie jest istotna część, można ją umieścić, ale zazwyczaj się tego nie robi, jest to bardzo rzadki zabieg. No dobra, ale co to jest ten tagline? Jest to hasło reklamowe firmy, które umieszcza się pod sygnetem i logotypem lub pod logotypem.


Schemat: 



Krótkie podsumowanie: 


  • Logo składa się z sygnetu, logotypu oraz (opcjonalnie) tagline
  • Sygnet jest logo, kiedy nie występuję (nigdy nie występował i nie ma zamiaru być rozbudowane) z logotypem 
  • Logotyp jest logo, kiedy w projekcie nie występuje z sygnetem 
  • Tagline jest to hasło reklamowe, danej firmy 
  • Tagline nie może być logo 
Czego chcielibyście się jeszcze dowiedzieć? Dajcie znać w komentarzu :) 
Czytaj więcej >
Udostępnij ten wpis:

Darmowe wrześniowe tapety na pulpit

01.09.2018

tapety na pulpit
No i mamy wrzesień, pamiętam, że kiedyś nadejście września było dla mnie koszmarem, a teraz? No cóż, za bardzo mi to różnicy nie robi, po za tym, że zawsze we wrześniu zaczyna się więcej pracy i ogromne korki na mieście, jednak to wszystko da się jakoś ogarnąć pod koniec września ;) 

Pamiętam, że zawsze wrzesień był dla mnie takim nowym początkiem wszystkiego - nawet Nowy Rok i ten szampan w kieliszku tak na mnie nie działały z chęcią zmian jak właśnie wrzesień. 

Więc skoro wrzesień i nowy rok szkolny, koniec lata, to może zacznijmy wprowadzać jakieś zmiany przed jesienią od czegoś mniejszego - np. zmiana tapety na pulpicie, a ja z chęcią Wam w tym pomogę ;) 

Przygotowałam dla Was 4 wzory tapet do pobrania - 3 z kalendarzem na wrzesień i jedna z motywem liska - ten sam co mogliście zobaczyć na planach lekcji z tegorocznej edycji ;) 




Pobierz



Pobierz



Pobierz



Pobierz

Czytaj więcej >
Udostępnij ten wpis:

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:

Copyright © Szablon wykonany przez My pastel life