Adobe Illustrator część druga - podstawy, poznajemy narzędzia

poniedziałek, 20 lutego 2017

Illustrator

Dzisiaj mam dla Was kolejną część dotycząca narzędzi w Illustratorze. Trochę czasu minęło od publikacji pierwszej części, ale po prostu zawsze było coś ważniejszego do opublikowania. Jeśli jeszcze nie widzieliście pierwszej części, to teraz możecie do niej przejść:

Adobe Illustrator część pierwsza

Pozostałą część z Was, zapraszam do tego wpisu :)

 Narzędzie Gradient (G) 

 Narzędzie Kroplomierz (I) i Narzędzie Miarka - Kroplomierz pozwala na pobieranie koloru. Narzędzie miarki, służy do mierzenie odległości między dwoma punktami.

 Narzędzie lupa (Z) 
 Narzędzie Generator kształtów (Shift+M), Narzędzie Aktywne wiadro z farbą (K) i Narzędzie Zaznaczenia aktywnego malowania (Shift+L) - Generator kształtów służy do tworzenia własnych kształtów, które powstają za pomocą łączenia prostych utworzonych kształtów. Aktywne wiadro z farbą maluje zaznaczone elementy. Narzędzie zaznaczenia aktywnego malowania, służy do zaznacza obiekt, który malowaliśmy. 

 Narzędzie obszaru roboczego (Shift+O) - pozwala na stworzenie nowego obszaru roboczego, obok tego, na którym już pracujemy o tej samej wielkości. 

 Narzędzie Tworzenia przejść (W) - możemy tworzyć przejścia między obiektami o różnych kolorach oraz kształtach. 

 Narzędzie Przekształcanie Swobodne (E) 
 Narzędzie Obracania (R) i Narzędzie Odbijania (O) 

Została jeszcze 3 część Illustratorowych narzędzi, którym poświęcimy trochę więcej uwagi. 

Udostępnij ten wpis:
Czytaj dalej »

Tytuły gadżetów na boku

czwartek, 16 lutego 2017


Dzisiaj mam dla Was kolejną prosta instrukcję (a raczej gotowca) która będzie się opierać tylko na kodzie CSS.
Skupimy się dzisiaj na tytułach gadżetów -  zmienimy ich położenie tak, aby były na boku naszego gadżetu. Na koniec tego wpisu, będziecie mieli gotowe style do użycia.

1. Przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS
2. W arkuszu CSS wklejamy kod:
.sidebar .widget h2 {
border-radius:22px 22px 0 0;
width:170px;
position:absolute;
top:100px;
left:220px;
background:#a64d79;
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-moz-transform:rotate(90deg);
font-family: Open Sans;
font-size:11px;
padding: 10px;
text-transform:uppercase;
text-align:center;
letter-spacing:2px;
color:#fff;}

Analiza kodu: 
Zaokrąglenie narożników 
Szerokość 
Położenie 
Odsunięcie do lewej 
Kolor tła
Rodzaj fontu 
Wielkość fontu
Marginesy wewnętrzne
Transformacja tekstu
Położenie tekstu 
Odstęp między literami 
Kolor napisu 

Wszystkie pogrubione i kolorowe wartości są zmienne. 
Pewnie niektórzy zastanawiają się za co odpowiada ta część kodu:

-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-moz-transform:rotate(90deg);

To właśnie ona pozwala nam na zmianę położenia naszych tytułów gadżetów.

Gotowe style do użycia


Styl 1
.sidebar .widget h2 {
width:170px;
border: solid 1px #999;
position:absolute;
top:100px;
left:220px;
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-moz-transform:rotate(90deg);
font-family: Open Sans;
font-size:11px;
padding: 10px;
text-transform:uppercase;
text-align:center;
letter-spacing:2px;
color:#444;}



Styl 2
.sidebar .widget h2 {border-radius: 20px 20px 20px 20px;
width:170px;
background: #9fc5e8;
position:absolute;
top:100px;
left:220px;
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-moz-transform:rotate(90deg);
font-family: Open Sans;
font-size:11px;
padding: 10px;
text-transform:uppercase;
text-align:center;
letter-spacing:2px;
color:#fff;}



Styl 3 
.sidebar .widget h2 {border-radius: 0px 20px 0px 20px;
width:170px;
background: #f4cccc;
position:absolute;
top:100px;
left:220px;
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-moz-transform:rotate(90deg);
font-family: Open Sans;
font-size:11px;
padding: 10px;
text-transform:uppercase;
text-align:center;
letter-spacing:2px;
color:#fff;}


Udostępnij ten wpis:
Czytaj dalej »

Jak zrobić pager bloga z ikonkami Font Awesome - Blogger

poniedziałek, 13 lutego 2017


Chodzi mi tutaj o taki efekt:


Nie jest to trudne do zrobienia, nie trzeba się bawić w HTMLu - wystarczy nam do tego CSS, a jeśli ominął Cię pierwszy wpis o Font Awesome, to zapraszam Cię do na niego właśnie teraz. Tam pokrótce opowiadam o zasadzie działania, gdzie znajdziesz ikonki i jak zrobić za pomocą nich gadżet z ikonkami społecznościowymi.

Pierwszy wpis o Font Awesome

1. Przechodzimy do szablon - edytuj kod HTML
2. Nad <head> wklejamy:
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

3. Zapisujemy szablon
4. Przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS
5. Wklejamy kod:

#blog-pager {
background: transparent;
margin:60px 0 0 0;
text-align:center;
}
#blog-pager-older-link {
letter-spacing: 1px;
}
#blog-pager-newer-link {
letter-spacing: 1px;
}
.home-link {
letter-spacing: 1px;
}
.blog-pager span,.home-link {
display:inline-block;
}
.blog-pager span a,.home-link {
text-transform:uppercase;
display: inline-block;
font:normal bold 12px 'Open Sans', sans-serif;
color: #4e4d4c;
letter-spacing:1px;
}
.blog-pager span a:hover,.home-link:hover {
text-decoration:none;
color: #fbe2dd;
}
#blog-pager-older-link a:after {
content:'\f101';
font-family:'FontAwesome';
padding-left:5px;
}
#blog-pager-newer-link a:before {
content:'\f100';
font-family:'FontAwesome';
padding-right:5px;
}
.home-link:before {
content: '\f015';
font-family:'FontAwesome';
padding-right:5px;
}

Analiza kodu:


#blog-pager {
background: transparent;
margin:60px 0 0 0;
text-align:center;
}
#blog-pager-older-link {
letter-spacing: 1px;
}
#blog-pager-newer-link {
letter-spacing: 1px;
}
.home-link {
letter-spacing: 1px;
}
.blog-pager span,.home-link {
display:inline-block;
}
.blog-pager span a,.home-link {
text-transform:uppercase;
display: inline-block;
font:normal bold 12px 'Open Sans', sans-serif;
color: #4e4d4c;
letter-spacing:1px;
}
.blog-pager span a:hover,.home-link:hover {
text-decoration:none;
color: #fbe2dd;
}
#blog-pager-older-link a:after {
content:'\f101';
font-family:'FontAwesome';
padding-left:5px;
}
#blog-pager-newer-link a:before {
content:'\f100';
font-family:'FontAwesome';
padding-right:5px;
}
.home-link:before {
content: '\f015';
font-family:'FontAwesome';
padding-right:5px;
}

Część odpowiadająca za font - rodzaj, wielkość, grubość 
Kolor linków w pagerze
Kolor linków po najechaniu 
Ikonki z Font Awesome 

Jak wyszukać numerków ikonek Font Awesome?


Przechodzimy na tę stronę - KLIK
Wyszukujemy ikonkę, jaką chcemy użyć


Po wyszukaniu, klikamy na daną ikonkę - przeniesie nas na podstronę. Na dole pod ikonką będziemy mieli numerek.


Udostępnij ten wpis:
Czytaj dalej »

Copyright © Szablon wykonany przez My pastel life