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

20 lutego 2017


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. 

Czytaj dalej »

Tytuły gadżetów na boku

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;}


Czytaj dalej »

Jak zrobić pager bloga z ikonkami Font Awesome - Blogger

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.


Czytaj dalej »

MałgoLINKI - podsumowanie stycznia

3 lutego 2017


Dawno nie było żadnego podsumowania, ale ostatnio naprawdę nie mam czasu na przejrzenie porządnie sieci. Styczeń był pod tym względem zdecydowanie lepszy.
Trochę mi się ten miesiąc dłużył i muszę powiedzieć, że czekałam na to, aż w końcu się skończy, nie mówię, że był zły - był bardzo dobry i muszę Wam powiedzieć, że dzięki temu czuję, że ten rok będzie naprawdę dobrym rokiem :)


  1. Były już darmowe banki zdjęć, to teraz pora na darmowe banki z...filmikami! W którymś podsumowaniu (już nawet nie pamiętam którym - przyznaje się bez bicia), wspomniałam tam o banku zdjęć Pexels, to teraz polecam wam ich bank Pexels videos
  2. Chcecie stworzyć swój unikalny pattern? Ta strona Wam to zapewni.
  3. Wacom spełnił moje marzenie...nie tak do końca, bo nie mam tego jeszcze u siebie, ale grunt, że jest już dostępne na rynku, a ja zaczynam już zbierać na to moje marzenie. Mowa tutaj o inteligentnym notatniku. Więcej informacji, znajdziecie TUTAJ
  4. Jeśli lubicie oglądać fantastyczne prace, to te od Natalie Shau Was naprawdę zachwycą.

Popularne wpisy na blogu w styczniu 



No cóż, w styczniu statystyki marne, w grudniu było jeszcze gorzej, a w tym miesiącu mam zamiar sobie to odbić - zobaczymy jak mi to wyjdzie :) 
Czytaj dalej »

CSS + tekst - Blogger

31 stycznia 2017


W dzisiejszym wpisie, chce Wam pokazać jak możemy bawić się tekstem za pomocą CSSa. Dla niektórych pewnie to nie będzie żadna nowość, a inni może dowiedzą się z tego wpisu czegoś nowego, tak czy siak, potraktujcie ten wpis jako ściągawkę :)

Ustalenie koloru tekstu

selektor {
color: #990000;
}

Dekoracja tekstu 


selektor { text-decoration: underline; } - podkreślenie
selektor { text-decoration: overline; } - nad kreślenie
selektor { text-decoration: line-through; } - przekreślenie
selektor { text-decoration: none; } - brak efektu

Cień + jego kolor


selektor { text-shadow: 1px 1px 1px #a64d79; }

Odstęp między literami 


selektor {letter-spacing: 3px;}

Odstęp między wierszami


selektor { line-height: 1.6; }

Odstęp między wyrazami


selektor { word-spacing: 20px;}

Transformacja tekstu 


selektor { text-transform: lowercase; } - wszystkie litery w tekście będą małe
selektor { text-transform: uppercase; } - wszystkie litery w teście są wielkie
selektor { text-transform: capitalize; } - pierwsze litery, każdego wyrazu są wielkie
selektor { text-transform: none; } - bez efektu transformacji 
Czytaj dalej »

Archiwum w menu/stronach - Blogger

24 stycznia 2017


Już jakiś czas temu, parę osób prosiło o to, aby zrobić instrukcję umieszczenia archiwum w rozwijanym menu. Tak naprawdę nie będzie to dla Was nowość, bo ta instrukcja powstanie na bazie już istniejących instrukcji na blogu.

1. Przechodzimy sobie do instrukcji dotyczącej, rozwijanego menu i wykonujemy wszystkie punkty po kolei

Przejdź do - Jak zrobić rozwijane menu

2. Edytujemy część kodu odpowiadającą za kategorie rozwijane (ja wybrałam drugie kategorie):

Przed


<li><a href='#'>KATEGORIE2</a>
<ul>
<li><a href='LINK'>PODKATEGORIA</a></li>
<li><a href='LINK'>PODKATEGORIA</a></li>
<li><a href='LINK'>PODKATEGORIA</a></li>
</ul>
</li>

Po


<li><a href='#'>Archiwum</a>
<ul>
<li><a href='LINK DO ARCHIWUM'>ROK</a></li>
<li><a href='LINK DO ARCHIWUM'>ROK</a></li>
<li><a href='LINK DO ARCHIWUM'>ROK</a></li>
</ul>
</li>

3. Z instrukcji, jak wykonać archiwum z podziałem rocznym, wykonujemy punkt "LINK DO ARCHIWUM"

Przejdź do - Archiwum z podziałem rocznym

4. Po edycji, nasza część kodu z menu będzie wyglądać mniej więcej tak:

<li><a href='#'>Archiwum</a>
<ul>
<li><a href='http://blonparia.blogspot.com/search?updated-min=2017-01-01T00:00:00%2B01:00&updated-max=2018-01-01T00:00:00%2B01:00&max-results=4'>2015</a></li>
<li><a href='http://blonparia.blogspot.com/search?updated-min=2016-01-01T00:00:00%2B01:00&updated-max=2017-01-01T00:00:00%2B01:00&max-results=50'>2016</a></li>
<li><a href='http://blonparia.blogspot.com/search?updated-min=2017-01-01T00:00:00%2B01:00&updated-max=2018-01-01T00:00:00%2B01:00&max-results=4'>2017</a></li>
</ul>
</li>

Aby dodać kolejny rok, wystarczy po ostatnim </a> dodać <li><a href='LINK DO ARCHIWUM'>ROK</a></li>

To wszystko, nie ma żadnych nowości, ale mam nadzieję, że osobom, które na to czekały taki wpis, co jak i gdzie troszkę pomógł ;)
Czytaj dalej »