środa, 10 czerwca 2015

Prezentacja pliku - efekty cz.2

Element: własny
Stopień trudności: xxxx
Czas wykonywania: -
Były pudełeczka mniejsze, to teraz czas na jedno porządne, które zajmuje trochę więcej miejsca.
Wartość dla szerokości w poniższym przykładzie jest ustawiana automatycznie i powinna dostosować się do każdego bloga. Natomiast wysokość ma zapisaną tylko wartość minimalną, dlatego nie ma problemu w przypadku za małej ilości tekstu.

+ Czcionki użyte w przykładzie to Calibri, Times New Roman i Oswald.
+ Użyłam dwóch przygotowanych odpowiednio obrazków : jeden o rozmiarze 150x150, a także przygotowany wcześniej podgląd szablonu ( obojętny jest tutaj jego rozmiar ).

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 proszę pytać. Możecie też swobodnie korzystać z kodów, modyfikować je i zmieniać. Jednak w tym wypadku konieczna będzie informacja o tym, że je wykorzystujecie.

Efekty zaprezentowane w poście były dostosowane do szablonu Tomorrow (nie został on jeszcze opublikowany) i szablonu głównego Graphical Thoughts

Tomorrow
13.09.2015
Autor: Tyler
Baza: Szablon Simple
Układ: Lewokolumnowy
Inne:
  • Warto kontrolować liczbę gadżetów w stopce;
  • Archiwum należy ustawić jako "menu"

podgląd
pobierz

.szablon3 {background:rgba(0,0,0,0.3);padding:10px;min-height:152px;;background-position:right ;background-size:100%;border:1px solid #eee;font-family:calibri;font-size:10px;text-transform:uppercase; } .szablon3w {background:rgba(255,255,255,0.9);min-height:152px;padding:10px;margin:-10px;} .szablon3 img {float:left;margin-right:10px;box-shadow:2px 2px 10px #ddd;border:1px solid #eee;-webkit-filter: grayscale(00%); filter: grayscale(00%);} .szablon3tytul {font-family:times;font-size:30px;font-style:italic;letter-spacing:5px;padding-left:40px;color:#e4916a;} .data3 {font-family:oswald;font-size:13px;letter-spacing:1px;margin-top:30px;} .szablon3info b{color:#c0a298;font-size:8px;font-family:oswald;font-weight:400;letter-spacing:3px;} .pobierz3 {background:#e2c9c4;padding:1px 22px;color:#333;bottom:22px;position:absolute;right:0px;width:45px;text-align:center;} .podglad3 {background:#eee;padding:1px 22px;color:#333;bottom:38px;position:absolute;right:0px;width:45px;text-align:center;} .szablon3info{text-align:left;} .szablon3info ul li{line-height:5px;}
<div class='szablon3tytul'>Tomorrow</div>
<div class='szablon3' style='background-image:url(http://funkyimg.com/i/Y3yY.png);'>
<div class='szablon3w'>
<img src='http://funkyimg.com/i/deddX.png'/>
<div class='szablon3info'>
<div class='data3'>13.09.2015</div>
<b>Autor:</b> Tyler<br/>
<b>Baza:</b> Szablon Simple<br/>
<b>Układ:</b> Lewokolumnowy<br/>
<b><u>Inne</u></b>:<ul>
<li>Warto kontrolować liczbę gadżetów w stopce;</li>
<li>Archiwum należy ustawić jako "menu"</li>
</ul><br/>
</div>
<div class='podglad3'>podgląd</div>
<div class='pobierz3'>pobierz</div>
</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.

Miłego korzystania!

12 komentarzy:

  1. Podgląd nie jest zalinkowany ;;;

    OdpowiedzUsuń
    Odpowiedzi
    1. Bo to nie szablon dostępny do pobrania, ale pomysł na jego przedstawienie na blogu/stronie lub w galerii.

      Usuń
    2. Wybacz! Nie przeczytałam ze zrozumieniem ^^"

      Usuń
    3. Hej, nic się przecież nie stało. :) Szablon prawdopodobnie niedługo będzie udostępniony tak czy inaczej, więc na pewno dasz radę go jeszcze zobaczyć (o ile wcześniej nie zrobię z niego nowego głównego :p ) .

      Usuń
  2. Świetny pomysł!

    Przepraszam, że się nie odzywam na GG, ale mam z nim jakieś problemy :|

    OdpowiedzUsuń
    Odpowiedzi
    1. A ja już myślałam, że jestem perfidnie olewana. ^o^
      Spoczko Bubo, może niedługo sie ogarnie. :3
      I dziękuję. ^_^

      Usuń
  3. Dziękuję ślicznie, przez te 7 lat zawsze starłam się być takim ewenementem ;)

    OdpowiedzUsuń
  4. Wow! Nie dość, że sam efekt jest ekstra, to jeszcze jest bardzo inspirujący - teraz trzeba będzie pomyśleć nad własnym sposobem prezentacji szablonów ;-)

    OdpowiedzUsuń
  5. Pobrałam szablon WALKING TRAVESTY na bloga lasted-forever.blogspot.com

    OdpowiedzUsuń
  6. Piekna grafika

    Zapraszam do mnie szukam osoby do pomocy lub pare osub : http://graphicnina-grafika.blogspot.co.uk/

    OdpowiedzUsuń
  7. Pobieram cudny szablon WALKING TRAVESTY na mojego (wciąż tworzącego się) bloga http://autorka-nieznana.blogspot.com :)

    OdpowiedzUsuń
  8. Z jakiegoś powodu nie mogę zadać pytania na asku, więc przychodzę tutaj.

    Czy jest jakiś sposób, aby poszerzyć pole wpisywania komentarzy? Kiedyś słyszałam o selektorze .comment-form, ale u mnie nie chce on zadziałać...

    OdpowiedzUsuń

- +
Szablon wykonany przez Tyler