Małgolinki - podsumowanie czerwca + wasze linki

30.06.2016


Mamy podsumowanie czerwca - szybko mi to zleciało, ale od początku. Czerwiec nie był dla mnie najlepszym miesiącem. Zakończenie roku przeglądem, ostatnie warsztaty, nasilenie się alergii, zmiana alergologa. Właśnie zmiana alergologa. Wiecie czasem nam zapala się taka kontrolka, że coś jest nie tak. W moim wypadku również tak było, kiedy alergolog nie chciał mi zlecić dodatkowych badań. Zmieniłam lekarza i co się okazało? Miałam dobrane złe leczenie i wyszła mi astma sezonowa, więc czerwiec nie był zbyt ciekawym miesiącem. Tak to wyglądało u mnie. W komentarzach piszcie jaki czerwiec był u Was, a teraz czas na linki :) 

  1. Zbiór darmowych ikon (wektory) 
  2. Jesteście ciekawi nowości typograficznych? Ta strona pokaże Wam wszystko co aktualnie pachnie świeżością. [ENG]
  3. Mockup MacBook Pro - 15 Mockupów z różnymi ułożeniami MacBooka do pobrania za darmo. 
  4. Photl - darmowy bank zdjęć 
  5. Darmowe pędzle do Photoshopa
  6. Kolejna strona z darmowymi pędzlami do Photoshopa
  7.  Justyna na swoim blogu, opublikowała ciekawą listę stron dla artystów i nie tylko. Interesujesz się rysunkiem, ale nie wiesz jak coś na rysować? No, to co tu jeszcze robisz? Leć na bloga Justyny zobaczyć jej listę przydatnych stron. 
Czerwiec marny w linkach, ale mam nadzieję, że Wy uzupełnicie tą listę swoimi linkami, bo po raz pierwszy na blogu pojawiła się opcja dodania swojego najciekawszego wpisu z danego miesiąca! Pokaż innym (oraz i mi) swój tekst, z którego jesteś najbardziej dumny! 

Jednak za nim do tego dojdziemy, kolejna część podsumowania czyli ostatnio na blogu i statystyka. 

Ostatnio na blogu 



Wasze linki


kliknij "Add your link"

Czytaj dalej »

Jak zrobić gradient za pomocą CSS

28.06.2016


Chyba każdy z Was wie co to jest gradient i wie jak wygląda. Dla tych co nie wiedzą - to nic innego jak płynne przejście między dwoma kolorami. Niektórzy nazywają to efektem ombre (podobno ładniej brzmi). W dzisiejszym wpisie pokaże Wam jak zrobić gradient za pomocą kodu CSS na naszym blogu.

Jedynce co będziemy musieli zrobić to przejść do:

szablon - dostosuj - zaawansowane - dodaj arkusz CSS 

LISTA SELEKTORÓW

Ramka z gradientem (ombre) 


Żeby stworzyć ramkę z gradientem potrzebny nam będzie taki kod:

.selektor {
    width: 250px;
    height: 20px;
text-align: center;
text-transform: uppercase;
padding: 10px;
    background: #fff;
    border: 10px solid transparent;
    -moz-border-image: -moz-linear-gradient(top, #dcd2e3  0%, #9581a1 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #dcd2e3 0%, #9581a1 100%);
    border-image: linear-gradient(to bottom, #dcd2e3 0%, #9581a1 100%);
    border-image-slice: 1;
}
Szerokość 
Wysokość 
Położenie tekstu
Wygląd tekstu (tutaj ustawione na drukowane)
Marginesy wewnętrzne 
Kolor tła
Grubość obramowania 

Wszystkie pogrubione wartości są zmienne. To co na czerwono to kolor pierwszy, naszego gradientu.

W moim wypadku zastosowałam ten kod do tytułów gadżetów, więc prezentuje się on tak:

.sidebar h2 {
    width: 250px;
    height: 20px;
text-align: center;
text-transform: uppercase;
padding: 10px;
    background: #fff;
    border: 10px solid transparent;
    -moz-border-image: -moz-linear-gradient(top, #dcd2e3  0%, #9581a1 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #dcd2e3 0%, #9581a1 100%);
    border-image: linear-gradient(to bottom, #dcd2e3 0%, #9581a1 100%);
    border-image-slice: 1;
}

Efekt: 


No dobrze, wiemy już jak zrobić ramkę z gradientem, a jak zrobić tło? To nic trudnego! Musimy po prostu dodać taki kod:

.selektor {
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
font-color: #fff;
padding: 10px;
    background: #fff;
    background: -webkit-linear-gradient(#dcd2e3, #9581a1);
    background: -o-linear-gradient(#dcd2e3, #9581a1);
    background: -moz-linear-gradient(#dcd2e3, #9581a1);
    background: linear-gradient(#dcd2e3, #9581a1);
}

Wygląd tekstu
Położenie tekstu
Odstęp między literami
Kolor czcionki
Wewnętrzne marginesy 

Wszystkie pogrubione wartości są zmienne. To co na czerwono, to kolor pierwszy naszego gradientu.

W moim wypadku, znowu zastosowałam ten kod, dla tytułów gadżetów i wygląda on tak:

.sidebar h2 {
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
fony-color: #fff;
padding: 10px;
    background: #fff;
    background: -webkit-linear-gradient(#dcd2e3, #9581a1);
    background: -o-linear-gradient(#dcd2e3, #9581a1);
    background: -moz-linear-gradient(#dcd2e3, #9581a1);
    background: linear-gradient(#dcd2e3, #9581a1);
}

Efekt: 


Jak możecie zauważyć, części odpowiadające za gradient w pierwszym i drugim kodzie są takie:

background: #fff;
    border: 10px solid transparent;
    -moz-border-image: -moz-linear-gradient(top, #dcd2e3  0%, #9581a1 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #dcd2e3 0%, #9581a1 100%);
    border-image: linear-gradient(to bottom, #dcd2e3 0%, #9581a1 100%);
    border-image-slice: 1;


oraz

 background: #fff;
    background: -webkit-linear-gradient(#dcd2e3, #9581a1);
    background: -o-linear-gradient(#dcd2e3, #9581a1);
    background: -moz-linear-gradient(#dcd2e3, #9581a1);
    background: linear-gradient(#dcd2e3, #9581a1); 

Jak możecie zauważyć - w jednym oraz w drugim kodzie zapisaliśmy po prostu dwa wybrane kolory przy background, które się "zatarły" - innej magii w tym nie ma. Proste prawda? ;)
Czytaj dalej »

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

27.06.2016


Na początek mała informacja - od poniedziałku (czyli od dzisiaj) wpisy prawdopodobnie będą pojawiać się codziennie, ponieważ muszę nadrobić ten stracony czas. W tym czasie pojawi się instrukcja na bloga, podsumowanie miesiąca oraz wpis o jeździectwie, ale trochę nietypowy i wiele, wiele więcej, a dzisiaj jak widzicie poznamy trochę Illustratora.

Co to jest Adobe Illustrator?
Program graficzny z rodziny Adobe do tworzenia grafiki wektorowej( czyli do tego co widnieje na głównym zdjęciu tego wpisu - tak, te komputerki to są wektory, ale o tym jaka jest różnica po między grafiką wektorową,  a bitmapową kiedy indziej). Podobne programy do Illustatora to CorelDraw (płatny tak samo jak Illustrator) oraz darmowy Inkscape.

Narzędzia programy Illustrator

Gdzie znaleźć okno narzędzi, jeśli nie pojawi nam się od razu po uruchomieniu programu?
Przechodzimy do okno - narzędzia.

 Narzędzie zaznaczania (V) - służy do zaznaczania całych obiektów.

 Narzędzie zaznaczania bezpośredniego (A) - dzięki niemu możemy zaznaczyć punkty/segmenty ścieżek obiektów. 

Jak widzicie przy białej strzałce mamy drugą, małą strzałkę w rogu. Po kliknięciu tej strzałki rozwinie nam się lista innych narzędzi i takim o to sposobem przy białej strzałce mamy jeszcze jedno narzędzie. 

 Narzędzie zaznaczania grupowego - dzięki temu możemy zaznaczyć obiekty lub grupy wewnątrz grup. 

 Różdżka (Y) - dzięki niej możemy zaznaczać obiekty.

 Lasso (Q) - dzięki niemu możemy zaznaczyć punkty i segmenty ścieżek wewnątrz obiektów. 

 Pióro (P) - dzięki temu narzędziu możemy rysować krzywe. 

 Narzędzie dodawania punktów kontrolnych (+) - dzięki temu narzędziu możemy dodać dodatkowe punkty do ścieżek. 

 Narzędzie usuwania punktów kontrolnych (-) - dzięki temu narzędziu możemy odejmować punkty kontrolne ze ścieżek.

 Narzędzie konwertowania punktów kontrolnych (Shift+C) - dzięki temu narzędziu możemy zmienić punkty ścieżki, które są ostre na okrągłe i okrągłe na ostre. 

 Narzędzie tekstu (T) - służy do wprowadzenia tekstu. 

 Narzędzie tekst akapitowy - dzięki niemu, możemy zamienić zamknięte ścieżki w ramki tekstowe czyli np. wewnątrz koła, serca etc. 

 Narzędzie tekstu na ścieżce - dzięki temu narzędziu, możemy zmienić ścieżki na ścieżki tzw. tekstowe, na których możemy wpisywać tekst. 

 Narzędzie tekstu pionowego -  dzięki niemu możemy tworzyć tekst pionowy. 

 Narzędzie tekstu pionowego akapitowego - dzięki temu narzędziu, możemy zmienić ścieżki na ścieżki tzw. tekstowe i wpisywać tekst pionowo. 

 Narzędzie tekstu pionowego na ścieżce - dzięki temu narzędziu możemy zamienić ścieżki na ścieżki tekstowe pionowe. 

 Narzędzie linia (\) - dzięki temu narzędziu możemy rysować proste linie 

 Narzędzie łuk - dzięki temu narzędziu możemy rysować wygięte linie. 

 Narzędzie spirala - dzięki temu narzędziu możemy rysować spiralę. 

 Narzędzie siatka prostokątna - narzędzie do rysowania siatki. 

 Narzędzie siatka biegunowa - rysuje siatki okrągłe. 

 Narzędzie prostokąta (M) - dzięki niemu możemy stworzyć prostokąt. 

 Narzędzie prostokąt zaokrąglony - dzięki niemu możemy stworzyć prostokąt z zaokrąglonymi rogami. 

 Narzędzie elipsa (L) - dzięki niemu możemy stworzyć elipsę. 

 Narzędzie wielokąta - dzięki niemu możemy stworzyć wielokąt. 

 Narzędzie gwiazda - dzięki niemu możemy narysować np. gwiazdkę lub trójkąt. 

 Narzędzie flara - dzięki niemu możemy stworzyć efekt rozbłysku. 

 Narzędzie pędzel (B) - narzędzie umożliwiające nam malowanie. 

 Narzędzie ołówek (N) - dzięki temu narzędziu możemy rysować krzywe. 

 Narzędzie gładzik - narzędzie wygładzania ścieżek czyli ostre krawędzie będą wygładzone. 

 Narzędzie gumka - dzięki niemu możemy usunąć ścieżki.

 Narzędzie kropla (Shift +B) - dzięki temu narzędziu możemy modyfikować ścieżki pędzla kaligraficznego, zmienia nam kształt po przez rozszerzanie i scalanie.

 Narzędzie gumka (Shift+E) - dzięki temu narzędziu możemy usunąć dowolny obszar naszej grafiki. 

 Narzędzie nożyczki (C) - dzięki temu narzędziu możemy ciąć ścieżki na punktach. 

 Narzędzie nóż - dzięki temu możemy ciąć grafikę (obiekt) oraz ścieżki. 

W tej części to tyle. W drugiej części reszta narzędzi z AI, ponieważ jakbym dziś zrobiła listę wszystkich narzędzi, to wpis by był zdecydowanie za długi. 
Czytaj dalej »

3 wakacyjne tapety na pulpit i telefon do pobrania za darmo

23.06.2016


Wakacje już nadeszły, więc czas na wprowadzenie zmian na naszych pulpitach i telefonach. W dzisiejszym wpisie, przygotowałam dla Was w sumie 6 tapet do pobrania całkowicie za darmo. 3 rodzaje tapet na pulpit oraz telefon.


Informacje


  • Tapety pobierasz tylko i wyłącznie na swój własny użytek - nie można udostępniać ich dalej 
  • Grafiki, które widnieją na tapetach są mojego autorstwa 

Tapety na pulpit

Tapeta Summer Time 


Czytaj dalej »

Szablon Art blog do pobrania za darmo na Bloggera

17.06.2016


Szablon Art blog to darmowy szablon na Bloggera. Jest utrzymany w kolorystyce filetu, żółci i mięty. Jest stworzony tak, abyś bez problemu mógł dostosować go do swoich potrzeb po przez zmianę koloru poszczególnych elementów, a nawet czcionek. Do szablonu jest dodana instrukcja, którą warto przeczytać - tam jest cały opis co, gdzie i jak. Szablon stworzony z myślą o tych osobach, które lubią mieć trochę koloru u siebie na stronie.

Info o szablonie


  • Szablon zawiera automatyczne skracanie wpisów 
  • W szablonie znajduje się funkcja automatycznego dopasowania zdjęć we wpisie oraz w rubryce "o mnie" w kolumnie bocznej. Dzięki temu możesz wstawiać zdjęcia w oryginalnym rozmiarze. Mniejsze zdjęcia we wpisie, zostaną tej samej wielkości. 
  • Menu na stronie to standardowe strony Bloggera 
  • Można zmienić kolory, czcionki, usuwać ikonki w kolumnie bocznej 
  • Dodana instrukcja instalacji 

Uwagi 

  • Szablon oraz grafiki dodawane do szablonu są tylko i wyłącznie na użytek własny. Udostępnianie szablonu osobom trzecim w postaci oryginalnej lub zmienionej jest zabronione
  • Szablon posiada nieusuwalną stopkę z podpisem autora. Po usunięciu jej, zostaniesz automatycznie przeniesiony na stronę blonparia.blogspot.com
  • Nie wolno modyfikować wyglądu stopki tzn. zmieniać jej koloru tak, aby nie była widoczna i podpisywać się pod szablonem jako autor 
  • W razie jakichkolwiek problemów/pytań napisz na maila blonparia@gmail.com
  • Nie proś osób trzecich o pomoc przy szablonie w razie powstania problemu - istnieje ryzyko, że dana osoba źle podejdzie do Waszego problemu, a wtedy szablon może zostać uszkodzony lub całkowicie zniknąć z bloga. Pamiętaj! Zawsze zwracaj się z prośbą o pomoc do autora szablonu 

To może Ci się przydać 





Chcesz indywidualny szablon?


Zawsze możesz zamówić szablon, jeśli te, które udostępniam do pobrania Ci nie odpowiadają. Wystarczy, że zajrzysz na stronę.


Pobierz Podgląd
Czytaj dalej »

Jak zmienić wygląd gadżetu obserwuj przez e-mail

07.06.2016


Lubię mieć ładne gadżety. Wiecie, takie, które wpasowują się wyglądem do szablonu i nie odstraszają ludzi, którzy zdecydowali się zajrzeć na bloga. Lubię też, jak coś jest łatwe i przyjemne do zmiany i wiem, że Wy też lubicie. Pokażę Wam jak na dwa sposoby za pomocą CSSa, można nadać nowy wygląd naszemu gadżetowi obserwuj przez e-mail.

Od razu powiem, że wzięłam sobie do serca uwagi niektórych osób na temat tego, żeby instrukcje były jeszcze bardziej dokładnie tłumaczone, więc mam nadzieję, że nikt nie będzie miał z niczym już wątpliwości :)

Jeśli nie chcesz czytać całego wpisu i zależy Ci tylko na samym kodzie, to wersja dla leniuszków jest na samym końcu wpisu ;)

Aby dodać gadżet musimy przejść do układ - dodaj gadżet - Obserwuj bloga przez e-mail
Aby dodać kod CSS musimy przejść do szablon - dostosuj - zaawansowane - dodaj arkusz CSS

Dla przypomnienia, poniżej macie przedstawione, jak gadżet prezentuje się bez modyfikacji

Przykład pierwszy


Przy pierwszym przykładzie skupimy się na dwóch elementach tego gadżetu czyli przycisku i pole, w które wpisujemy e-amil



Na powyższym schemacie macie wszystko zaznaczone i wypisane selektory dla danego elementu gadżetu.

Żeby zmienić nasze pole do wpisywania maili, selektor musi wyglądać tak:

.FollowByEmail .follow-by-email-inner .follow-by-email-address 

Dlaczego? Ponieważ jeśli damy samo .FollowByEmail to cały kod z tym selektorem odpowiada tylko za to co jest za gadżetem czyli tło + tytuł gadżetu.

Jeśli dodamy do .FollowByEmail jeszcze .follow-by-email-inner to zadzieje się to samo co w pierwszym wypadku tylko bez tytuły gadżetu.

Jeśli wrzucimy sam selektor .follow-by-email-address to owszem załapie nam pole do wpisywania maili, ale pozostanie ten okropny cień wewnątrz pola

Skoro mamy już nasz selektor, to co dalej? Robimy to, co zawsze czyli dopisujemy nasze nawiasy czyli będzie to wyglądać teraz tak:

.FollowByEmail .follow-by-email-inner .follow-by-email-address  {} 


Po między nawiasami, wpisujemy styl dla naszego pola czyli w moim wypadku wygląda to tak:

.FollowByEmail .follow-by-email-inner .follow-by-email-address  {width: 160px;font: 12px Verdana;text-align: center;
text-transform: uppercase;
background: #fcf6e5;
letter-spacing: 2px;
border-style: solid;
border-width: 1px;
border-color: #fff2cc;
padding: 5px;}


Już tłumaczę co tu się zadziało. Dodałam:

  • Długość pola
  • Wielkość i rodzaj fontu 
  • Wyśrodkowanie (tekstu, który znajduje się w polu czyli "Email address..."
  • Ustaliłam, jak ma wyglądać tekst czyli w moim wypadku są to drukowane litery 
  • Tło pola 
  • Odstęp między literami 
  • Rodzaj obramowania
  • Grubość obramowania 
  • Kolor obramowania 
  • Wewnętrzne marginesy 
Wszystkie pogrubione wartości są zmienne, a moje pole po dodaniu tego kodu prezentuje się tak: 

Skoro mamy już nasze pole, to teraz czas na button czyli przycisk "Submit". Selektor musi wyglądać tak: 

.FollowByEmail .follow-by-email-inner .follow-by-email-submit

Dlaczego nie może być samo .FollowByEmail lub czemu nie może być taki układ .FollowByEmail .follow-by-email-inner - wyjaśnienie znajdziecie powyżej. 

Jeśli wrzucimy sam selektor .follow-by-email-submit - to tak naprawdę nic nam się nie zmieni oprócz czcionki (oczywiście po dodaniu CSSa) 

I tak jak w poprzednim przypadku do selektora (a właściwie selektorów) dopisujemy nawiasy, tak aby wszystko prezentowało się w ten sposób: 

.FollowByEmail .follow-by-email-inner .follow-by-email-submit {}

Po między nawiasami, wpisujemy nasz CSS. W moim wypadku prezentuje się to tak: 

.FollowByEmail .follow-by-email-inner .follow-by-email-submit
{width:110px;
margin: 12px 10px 12px 1px;
background: #fff2cc;
color:#999;
height:34px;
font-size: 13px;
letter-spacing: 2px;
text-transform:uppercase;
font-family: Verdana;}

W tym kodzie znajduje się: 
  • Długość przycisku 
  • Marginesy
  • Tło
  • Kolor czcionki 
  • Wysokość
  • Wielkość czcionki 
  • Odstęp między literami 
  • Ustaliłam jak ma wyglądać tekst 
  • Rodzaj czcionki 
Wszystkie pogrubione wartości są zmienne, a przycisk prezentuje się tak: 


Dodatkowo, możemy zrobić tak, aby nasz przycisk zmienił kolor po najechaniu na niego myszką. Selektor będzie wyglądał tak:
.follow-by-email-inner .follow-by-email-submit:hover

Dodanie :hover lub w niektórych przypadkach a:hover umożliwia nam zmianę koloru po najechaniu muszą na dany element. 

CSS prezentuje się tak: 

.follow-by-email-inner .follow-by-email-submit:hover
{width:110px;
margin: 12px 10px 12px 1px;
background: #ded7dc;
color:#fff;
height:34px;
font-size: 13px;
letter-spacing: 2px;
text-transform:uppercase;
font-family: Verdana;}

Wszystkie pogrubione wartości są zmienne, a przycisk po najechaniu na niego myszą, prezentuje się tak: 


Przykład drugi 


Tutaj za wiele się nie zmienia pierwszy selektor to jest ten sam co w pierwszym przykładzie i wielkiej filozofii tu nie ma. U mnie całość prezentuje się tak: 


.FollowByEmail .follow-by-email-inner .follow-by-email-address {
height: 40px;
font: 10px Verdana;
text-transform: uppercase;
color: #000;
width: 210px;
margin: 20px 10px 10px;
text-align:center;
border: 1px solid #f5f5f5;
letter-spacing: 1px;
}

Nasze pole na razie prezentuje się tak, jak w poprzednim przykładzie - żadna zmiana wielka nie została wprowadzona.
Jak już wiemy po selektorze - powyższy kod odpowiada za pole do wpisywania maila. 


Kolejny kod i selektor, również będzie nam już znajomy, ponieważ odpowiada za przycisk 

.FollowByEmail .follow-by-email-inner .follow-by-email-submit {
width: 53px;
color:#ffffff;
background-color: #000;
font: 12px Verdana;
text-transform: uppercase;
letter-spacing: 2px;
height: 42px;
margin: 0 10px 20px;
width: 210px;
}

Tutaj nasz button będzie wyglądał ciut inaczej, ponieważ, będzie oddalony od pola wpisywania maila i wyżej, ale to tak ma być. 

Kolejny kod, który znamy to hover dla przycisku. W tym wypadku prezentuje się tak:

.follow-by-email-inner .follow-by-email-submit:hover {
background: #999;
color:#ffffff;
}

W tym momencie następuje nowość, bo będziemy przerzucać przycisk "submit" pod pole do wpisywania maila i będziemy dodawać tło, w tym celu będziemy potrzebowali takich selektorów:
.follow-by-email-inner td

oraz

.follow-by-email-inner tr

Pierwszy selektor odpowiadać nam będzie za przeniesienie przycisku, a drugi za tło. Całość w CSS, będzie prezentować się tak:

.follow-by-email-inner td{
display: block;
width: 100%;
}
.follow-by-email-inner tr{
background-color:#FAFAFA;
}

Efekt da nam taki:



Wszystkie pogrubione wartości są zmienne 

Wersja dla leniuszków 


Opcja pierwsza: 


.FollowByEmail .follow-by-email-inner .follow-by-email-address  {width: 170px;
font: 12px Verdana;
text-align: center;
text-transform: uppercase;
background: #fcf6e5;
letter-spacing: 2px;
border-style: solid;
border-width: 1px;
border-color: #fff2cc;
padding: 5px;}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit  {width:110px; margin: 12px 10px 12px 1px; background: #fff2cc; color:#999; height:34px; font-size: 13px;letter-spacing: 2px;text-transform:uppercase; font-family: Verdana;}
.follow-by-email-inner .follow-by-email-submit:hover {width:110px; margin: 12px 10px 12px 1px; background: #ded7dc; color:#fff; height:34px; font-size: 13px; letter-spacing: 2px;text-transform:uppercase; font-family: Verdana;}

Opcja druga:

.FollowByEmail .follow-by-email-inner .follow-by-email-address {
height: 40px;
font: 10px Verdana;
text-transform: uppercase;
color: #000 !important;
width: 210px;
margin: 20px 10px 10px;
text-align:center;
border: 1px solid #f5f5f5;
letter-spacing: 1px;
}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit {
width: 53px;
color:#ffffff;
background-color: #000;
font: 12px Verdana;
text-transform: uppercase;
letter-spacing: 2px;
height: 42px;
margin: 0 10px 20px;
width: 210px;
}
.follow-by-email-inner .follow-by-email-submit:hover {
background: #999;
color:#ffffff;
}
.follow-by-email-inner td{
display: block;
width: 100%;
}
.follow-by-email-inner tr{
background-color:#FAFAFA;
}
Czytaj dalej »