Lista graficznych gier

poniedziałek, 14 grudnia 2015


O graficznych grach wspomniałam już przy ostatnim podsumowaniu miesiąca. Planowałam ten wpis opublikować wcześniej, ale więcej osób chciało plakaty. Nie ukrywam, że wyszło to tylko na lepsze, bo miałam akurat okazję do tego, aby poszerzyć tę listę o nowe gry. Takim oto sposobem, mam dla Was zbiór 10 gier, które pomogą Wam obsługiwać się krzywymi (trzeba pamiętać o tym, że każda grafika jest robiona na podstawie krzywych), będziecie mogli sprawdzić swoją wiedzę na temat fontów oraz będziecie mogli przekonać się o tym, czy wiecie co to znaczy estetyka. Oczywiście nie zabraknie zabawy z kolorami i logo. Wszystkie gry przetestowałam i wybrałam te, które (według mnie) są warte uwagi.

Brandseen - Sprawdź, jak bardzo jesteś spostrzegawczy i spróbuj dopasować prawidłowo kolory do danego logo.

RGB Challenge - Sprawdź, czy potrafisz odgadnąć jaki kolor w RGB jest przedstawiony.


Shape Type - za pomocą różowych punkcików (krzywych) popraw kształt liter


The Bezier Game - dzięki tej grze nauczysz się obsługiwać krzywych czyli inaczej narzędzia pióra w programach graficznych. Dzięki temu poznasz jak to działa.


The color - Sprawdź czy masz dobre oko i umiesz odróżnić jaśniejszy odcień danego koloru od reszty (uwaga, po paru planszach kolory zaczynają się zlewać)


Pen Tool Game - Gra od Adobe. Za pomocą krzywych trzeba ustalić trasę dla kosmity, aby trafił do swojej planety.


Font Game - odgadnij jaki to font.


Kern Type - Spróbuj optymalnie ustawić pary znaków w słowie tak, aby tworzyły harmonijną całość

Color - Jak dokładnie umiesz dopasować kolor na palecie koloru do tego, który się pojawi.


LogoQuiz - Odgadnij logo znanych firm


Lubicie takie gry? 

NEWSLETTER



Bulk email software by FreshMail










Udostępnij ten wpis:
Czytaj dalej »

Jak zrobić kolorowy element na czarno-białym tle w Photoscape

czwartek, 3 grudnia 2015


Dzisiaj przygotowałam dla Was bardzo prostą i krótką instrukcje, dzięki której możecie zrobić kolorowy element na czarno-białym tle. Taka instrukcja już się pojawiła na blogu, ale w programie GIMP, dziś chce Wam zaprezentować tą instrukcje w programie Photoscape. Efekt kolorowego elementu na czarno-białym tle uzyskamy w łatwiejszy sposób niż w GIMPie, ponieważ tutaj omija nas praca na warstwach i nie musimy bawić się w zaznaczenie danego elementu.

1. Otwieramy program Photoscape i wybieramy "Edytor".


2. Wybieramy zdjęcie i klikamy na zakładkę "Tools".


3. Następnie wybieramy "Effect Brush" i "Skala szarości".


4. Wybieramy rozmiar pędzla i "malujemy" nasze elementy na zdjęciu, które mają być czarno-białe. Polecam użyć narzędzia lupki, aby nasza przeróbka była bardziej precyzyjna.



5. Efekt końcowy:


Zdjęcie do instrukcji powstało dzięki uprzejmości Oli.


NEWSLETTER


Email








                                                                        



Udostępnij ten wpis:
Czytaj dalej »

Jak utworzyć ankietę i wstawić ją na bloga

poniedziałek, 23 listopada 2015


Ostatnio na blogu pojawiła się ankieta, która powstała za pomocą formularza Google. Parę dni później, po opublikowaniu ankiety na blogu, pojawiła się nowsza wersja formularzy. Nie wiem ile osób chciałoby umieścić taką ankietę u siebie na stronie, ale postanowiłam pokazać, jak wykonać taki formularz w nowszej wersji i umieścić go np. we wpisie.

1. Na początek wchodzimy na nasz dysk Google.


2. Przeniosło nas na nasz dysk. Wybieramy: Nowy - Więcej - Formularze Google


3. Otworzy nam się nowy formularz gdzie możemy zacząć zabawę ze wstawianiem pytań i z ich dostosowaniem.



4. Jeśli mamy już gotowe pytania odpowiedzi, to czas zabrać się za wygląd naszej ankiety. Na samej górze mamy ikonki. Jeśli chcemy zmienić wygląd naszego formularza wybieramy tą z paletą.


Mój formularz prezentuje się tak:


5. Skoro już dopracowaliśmy nasz formularz, to teraz będziemy wstawiać go do wpisu.


Teraz przechodzimy do wpisu i wybieramy HTML



Udostępnij ten wpis:
Czytaj dalej »

Jak zrobić rozwijane menu

czwartek, 12 listopada 2015


Nie wiem czy pamiętacie, jak napisałam kiedyś wpis o tym, jak zrobić rozwijane menu na podstawie profilki.pl. Ta opcja bez wątpienie jest szybka i nie ma strachu o to, że coś popsujemy. Jednak, słyszałam od Was, że nie zawsze menu ze strony profilki.pl działa poprawnie, dlatego w dzisiejszym wpisie pokażę Wam, jak takie menu wykonać samemu. Nie musicie się o nic martwić, ponieważ będziemy pracować tylko na gadżecie HTML/JavaScript i kodach CSS. Oprócz tego na końcu tego wpisu znajdziecie ankietę, dotyczącą bloga. Bardzo proszę o wypełnienie jej, ponieważ pomoże mi to w usprawnieniu mojej strony.

1. Tradycyjnie przechodzimy do układu naszego bloga. Pamiętajmy o tym, aby usunąć gadżet strony. Układ - dodaj gadżet - HTML/Javascript



2. Wklejamy kod i klikamy "zapisz":



<!-- START MENU -->
<div id='NavMenu'>
<div id='NavMenuleft'>
<ul id='nav'>
<li><a href='LINK'>NAZWA STRONY</a></li>
<li><a href='LINK'>NAZWA STRONY</a></li>
<li><a href='LINK'>NAZWA STRONY</a></li>
<li><a href='#'>KATEGORIE</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>
<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>
</ul></div>
</div>
<!-- KONIEC MENU -->

3. Teraz przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS  i wklejamy kod:


/* MENU */
.tabs-inner .section:first-child ul { margin-top: 0px; border: 0 solid #eee; }
.tabs-inner .widget ul { background:#fff;  text-align: center !important;  }
.tabs-inner .widget li a { font-family:'Lato',sans-serif; text-transform: uppercase; font-size:12px;
letter-spacing: 3px; color:#222222; border: 0px solid #ffffff; }
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: #888888;  text-decoration: none; }
.tabs .widget li, .tabs .widget li{ display: inline; float: none;}
#NavMenu {
width: 100%;
height: 45px;
position: relative;
margin: 0 auto;
padding: 0;
}
#NavMenuleft {
width: 100%;
float: none;
margin: 0 auto;
padding: 0;
}
#nav {
margin: 0 auto;
padding: 0;
}
#nav ul {
float: right;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #222222;
display: block;
margin: 0;
padding: 15px;
}
#nav li a:hover, #nav li a:active {
color: #888888;
margin: 0;
padding: 15px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 150px;
color: #222222;
float: none;
margin: 0;
padding: 7px 10px;
text-align:left;
}
#nav li li a:hover, #nav li li a:active {
color: #888888;
padding: 7px 10px;
width:147px;
border-left:3px solid #888888;transition: all 0.3s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;}
#nav li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
border: 0px solid black;
}
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out; }
#nav li ul a { width: 140px;  }
#nav li ul ul { margin: -32px 0 0 171px;  }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover {position: static;}

Analiza kodu:
Wszystkie pogrubione wartości są zmienne!

.tabs-inner .section:first-child ul { margin-top: 0px; border: 0 solid #eee; }
.tabs-inner .widget ul { background:#fff;  text-align: center !important;  } - kolor tła i wyrównanie.tabs-inner .widget li a { font-family:'Lato',sans-serif; text-transform: uppercase; font-size:12px;letter-spacing: 3px; color:#222222; border: 0px solid #ffffff; } - rodzaj fontu, wygląd tekstu (tutaj ustawione na tekst pisany wielkimi literami, jeśli nie chcemy tej opcji w miejsce uppercase wpisujemy none), wielkość fontu, odległość między literami, kolor teksu, grubość, rodzaj i kolor ramki.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: #888888;  text-decoration: none; } - kolor fontu, po najechaniu myszą.tabs .widget li, .tabs .widget li{ display: inline; float: none;}
#NavMenu {
width: 100%;
height: 45px; - wysokośćposition: relative;
margin: 0 auto;
padding: 0;
}
#NavMenuleft {
width: 100%;
float: none;
margin: 0 auto;
padding: 0;
}
#nav {
margin: 0 auto;
padding: 0;
}
#nav ul {
float: right;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #222222; - kolor odwiedzonego linkudisplay: block;
margin: 0;
padding: 15px}
#nav li a:hover, #nav li a:active {
color: #888888; - kolor tekstu po najechaniu mysząmargin: 0;
padding: 15px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;  - kolor tła, rozwijanej części menu width: 150px;
color: #222222; - kolor tekstu, rozwijanej części menu float: none;
margin: 0;
padding: 7px 10px;
text-align:left; - wyrównanie}
#nav li li a:hover, #nav li li a:active {
color: #888888; - kolor tekstu po najechaniu myszą w rozwijanej części menu padding: 7px 10px;
width:147px;
border-left:3px solid #888888; transition: all 0.3s ease-in-out; - efekt (pasek z lewej strony) przy najechaniu myszą na tekst w rozwijanej części menu. Grubość, rodzaj i kolor-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;}
#nav li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
border: 0px solid black;
}
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out; }
#nav li ul a { width: 140px;  }
#nav li ul ul { margin: -32px 0 0 171px;  }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover {position: static;}

4. Efekt końcowy:



Na koniec (tak jak wspomniałam na początku wpisu) chciałabym Was prosić o wypełnienie ankiety, która znajduje się poniżej :)

Udostępnij ten wpis:
Czytaj dalej »

Zmiana wyglądu popularnych wpisów

poniedziałek, 28 września 2015


Każdy zna Bloggerowy gadżet "popularne posty" i każdy zapewne wie, jak on wygląda bez pomocy kodu. Swoim wyglądem nie przyciąga zbyt wielkiej uwagi, jest bardzo tradycyjny, ale w dzisiejszym wpisie pokażę Wam jak w prosty sposób możemy zmienić jego wygląd.

1. Pamiętaj, żeby popularne wpisy wyświetlały się poprawnie po zastosowaniu tego kodu, musisz ustawić je w ten sposób:


2. Przechodzimy do szablon - edytuj kod HTML 


3. Klikamy kursorem w dowolne miejsce w kodzie i wybieramy ctrl +f, a następnie w okno wyszukiwania, które nam się pojawi wpisujemy </body> i klikamy enter.

4. Nad </body> wklejamy kod:


<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
 $(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
</script>
    <script type='text/javascript'>
    //<![CDATA[
    // Popular Posts customization by AllBloggerTricks.com
    // Trim Code by MS-potilas 2012
    $('.popular-posts ul li .item-snippet').each(function(){
     var txt=$(this).text().substr(0,120);
      var j=txt.lastIndexOf(' ');
      if(j>10)
         $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
    });
    //]]>
    </script>

5. Zapisujemy szablon. Teraz wyszukujemy ]]></b:skin> 

6. Nad ]]></b:skin> wklej kod:


.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0 0 0 -10px; overflow: hidden; position: relative; width: 100%; }
.PopularPosts .item-title { position: relative; }
.PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }
.item-title a { background:rgba(255, 255, 255, 0.95); color: #95c6e8; font-family: Josefin Sans; font-size: 17px;  padding: 10px 0; position: absolute; right: 10px; text-align: center; top: 100px; width: 100%; }
.item-snippet {display: none;}
.item-content:hover img {
opacity: 0.70;
transition:opacity 0.4s ease-in-out;
-o-transition:opacity 0.4s ease-in-out;
-moz-transition:opacity 0.4s ease-in-out;
-webkit-transition:opacity 0.4s ease-in-out;}
.item-content {position: relative; }

Zapisz szablon.

7. Efekt końcowy:


Udostępnij ten wpis:
Czytaj dalej »

Copyright © Szablon wykonany przez My pastel life