piątek, 22 maja 2015

Prezentacja szablonu/pliku - efekty

Element: własny
Stopień trudności: xxxx
Czas wykonywania: -
Dosłownie parę dni temu wpadłam na ten pomysł. Dlaczego? Po pierwsze, wydaje mi się, że coraz więcej blogerów zwraca uwagę na to jak prezentowane są jego prace. Dalej, uznałam, że post będzie idealny dla początkujących grafików, którzy nie do końca wiedzą jak się za takie "pudełeczko" zabrać. No i na koniec, może kogoś uda mi się zainspirować i zachęcić do stosowania takich właśnie "pudełeczek" dla jego prac.

Uwaga
Jako, że jest to post pokazujący efekty, nie ma tutaj typowej instrukcji krok po kroku. Jakby ktoś był ciekawy konkretnych efektów, to oczywiście służę pomocą. Możecie też swobodnie korzystać z kodów, modyfikować je i zmieniać. Jednak w tym wypadku konieczna będzie informacja, że je wykorzystujecie.
Efekty zaprezentowane w poście były dostosowane do szablonu You My Everything i szablonu głównego Graphical Thoughts
Sneaky
11.05.2015
Autor: Tyler
Baza: Szablon Podróże
Układ: prawokolumnowy

Pobierz
Monster

13.05.2015
Autor: Tyler
Baza: Szablon Simple
Układ: jednokolumnowy
Pobierz
Efekt 1
Pełny kod - Cholerstwo się nie chciało całe zmieścić.
.szablon {box-shadow:0px 0px 10px #f5f5f5, inset 0px 00px 0px #fbfbfb;;margin-bottom:5px;border:1px solid #eee;margin-right:3px;background:#f5f5f5;margin-bottom:px;margin-top:4px;display:inline-block;width:232px;text-align:center;padding-top:10px;} .nazwa {color:#555;font-family:Oswald;text-transform:uppercase;font-size:31px;text-shadow:1px 1px 0px #fff;line-height:100%;text-align:center;} .szablon img {border:1px solid #ddd;padding:10px;box-shadow:0px 0px 10px #ddd;} .infosz {font-family:calibri;text-transform:uppercase;font-size:10px;line-height:13px;} .opis{text-align:left;padding:10px;padding-left:15px;margin-right:65px;}
<div class="szablon">
<div class="nazwa">
Quit Playing</div>
<a href="http://funkyimg.com/i/UBr3.png"><img src="http://funkyimg.com/i/WYUd.png" /></a>
<br />
<div class="opis">
<div class="infosz">
<i>13.05.2015</i><br />
<b>Autor</b>: Tyler<br />
<b>Baza</b>: Szablon Simple<br />
<b>Układ</b>: jednokolumnowy
</div>
<a href='http://graphical-thoughts.blogspot.com/' class="pobierz">
Pobierz</a>
</div>
</div>
Efekt 2

.szablon1 {box-shadow:0px 0px 10px #f5f5f5, inset 0px 00px 0px #9f9f9;border:1px solid #eee;margin-right:3px;background:#f5f5f5;margin-bottom:px;display:inline-block;width:232px;text-align:center;padding-top:10px;margin-top:4px;} .nazwa1 {text-shadow:1px 1px 0px #fff;font-size: 10px;letter-spacing:2px; font-style: italic; padding:3.5px; color: #999; letter-spacing: 0px; border-bottom: 1px solid #eee;} .opis1 {padding-top:3px;padding-bottom:2px;text-transform:uppercase;font-size:6pt;letter-spacing:2px;font-family:calibri;text-align:left;padding-left:30px;line-height:10px;} .pobierz1 {transition: all 1s;-webkit-transition: all 1s;-moz-transition: all 1s;-o-transition: all 1s;text-transform:uppercase;font-size:6pt;letter-spacing:2px;font-family:calibri;text-align:left;padding-left:30px;padding:6.5px;margin:-1px;line-height:10px;padding-left:30px;box-shadow:inset 00px 0px 0px #999;} .pobierz1:hover {box-shadow:inset 300px 0px 0px #9958A6;color:#eee;} .szablon1 img {border:16px solid #fbfbfb;margin-top:3px;margin-bottom:-2px;width:200px;padding:0px;}
<div class="szablon1">
<div class="nazwa1">
I NEED U</div>
<div class="opis1">
<div class="infosz1">
<i>11.05.2015</i><br />
<b>Autor</b>: Tyler<br />
<b>Baza</b>: Szablon Podróże<br />
<b>Układ</b>: prawokolumnowy
</div>
</div>
<a href="http://graphical-thoughts.blogspot.com/"><img src="http://funkyimg.com/i/WZ1c.png" /></a>
<div class='pobierz1'><a href='http://graphical-thoughts.blogspot.com/' >
Pobierz</a></div>
</div>
Kody prezentowane w instrukcji mogą się nieznacznie różnić od tych użytych w podglądzie.
Używając lub modyfikując podane powyżej kody proszę o informację w komentarzu lub w mejlu + umieszczenie linku do instrukcji na blogu, gdzie została ona użyta.

Wydaje mi się, że tak przygotowane "pudełeczka" mogą Wam posłużyć jako ciekawa prezentacja szablonu lub innej pracy w poście lub być użyte w galerii. Możecie je swobodnie powielać i dodawać nowe szczegóły do opisu. W powyższych przykładach została zdefiniowana szerokość, więc jeśli chcielibyście dostosować ją pod swój blog, oczywiście konieczna jest jej zmiana!
Mam nadzieję, że się podoba. Jeszcze mam parę pomysłów na poziome "pudełeczka", więc piszcie czy chcecie! A może macie pomysł na coś innego? Jestem otwarta na propozycje :3

2 komentarze:

  1. To jest genialne ! Od dawna zastanawiałam się, jak zrobić takie cudo, ale moje umiejętności władania kodami znacznie mnie ograniczały. Fantastyczne te efekty ! Naprawdę ! Na pewno z nich skorzystam. Twój blog znajduje się u mnie na s1k w zakładce "credits", ale jeśli wykorzystam kod, dam znać o tym w najnowszym poście :)
    Jesteś wielka :*

    OdpowiedzUsuń
  2. To jest świetne. <3 Pozwoliłam sobie z tego skorzystać. ;-)

    OdpowiedzUsuń

- +
Szablon wykonany przez Tyler