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

KOD CSS

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

KOD HTML

<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!