Twórczy notatnik

Animowana data wpisu

Dzisiaj mam dla Was kolejny wpis ze stylem dla dat. Animowana data - po najechaniu myszki może nam się zmienić kolor tła, kształt daty lub font. Taki efekt uzyskacie za pomocą kodu CSS.

1. Przechodzimy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS
2. Wklejamy kod:

STYL 1

h2.date-header span {
background-image: url(LINK DO OBRAZKA)
width: 50px;
cursor:pointer;
padding: 20px 8px;
color: #fff;
font-family: Open Sans;
text-align:center;
letter-spacing:2px;
font-size:7.5px;
text-transform:uppercase;
z-index:5;
position: absolute;
top: -15px;
left: -75px;
box-shadow: #fff -3px -3px 0px inset ;
border-radius: 0px 90px 90px 90px ;
transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
}
h2.date-header span:hover {
font-family: Open Sans;
box-shadow: inset 0px 20px 0px #a64d79 , inset 0px -50px 0px #a64d79;
color: #fff ;
}

Zobacz efekt

STYL 2

h2.date-header span {
background: #a64d79;
width: 50px;
cursor:pointer;
padding: 20px 8px;
color: #fff;
font-family: Open Sans;
text-align:center;
letter-spacing:2px;
font-size:7.5px;
text-transform:uppercase;
z-index:5;
position: absolute;
top: -15px;
left: -75px;
border-radius: 90px 90px 90px 90px ;
transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
}
h2.date-header span:hover {
font-family: Open Sans;
box-shadow: inset 30px 0px 0px #d5a6bd , inset -40px 0px 0px #d5a6bd;
color: #fff ;
}

Zobacz efekt

Link do obrazka, który będzie pełnił rolę tła/Kolor tła
Szerokość
Marginesy wewnętrzne
Kolor fontu
Rodzaj fontu
Położenie tekstu
Odstęp między literami
Wielkość fontu
Transformacja tekstu
Położenie - góra
Położenie - lewa strona
Cienie
Zaokrąglone rogi
Font po najechaniu na niego myszką
Kolor tła po najechaniu myszką
Kolor fontu

Czytaj dalej

do pobrania - photoshop grafika photoshop wpis

4 pędzle bokeh do Photoshopa za darmo

Wiecie, że wszystkie posty Photoshopowe pokrywają się z tymi, które zostały opublikowane już dla GIMPa, jednak ten będzie małym odstępstwem, bo postu z darmowymi pędzlami do GIMPa jeszcze nie było :)

W dzisiejszym wpisie mam dla Was do pobrania za darmo 4 pędzle, dzięki którym będziecie mogli stworzyć efekt bokeh.

Pobierz pędzle

Zasady pobierania

Udostępnienie pliku w postaci oryginalnej lub zmienionej jest zabronione. Chcesz się z kimś podzielić - podaj link do wpisu.
Plik pobierasz tylko na użytek własny

Czytaj dalej

CSS Tutorial wpis

Jak zmienić wygląd gadżetu "obserwuj przez e-mail" - część 3 - okno newslettera

Na blogu już były dwa wpisy poświęcone gadżetowi "obserwuj przez e-mail". Dziś pokażę Wam jak w prosty sposób, bo za pomocą kodu CSS, zmienić wygląd tego gadżetu tak, aby przypominał okienko newslettera. Dzięki tej instrukcji, będziecie mogli dodać tekst do Waszego gadżetu "obserwuj przez e-mail", który zaprosi Waszych potencjalnych czytelników do subskrypcji.

1. Motyw (kiedyś szablon) - dostosuj - zaawansowane - dodaj arkusz CSS
2. Wklejamy kod:

.widget.FollowByEmail {
text-align: center;
padding: 0 !important;
}
.FollowByEmail h2.title{
display: none;
}
.FollowByEmail .widget-content {
background: #fafafa;
padding: 20px;
}
.FollowByEmail .widget-content:before {
content: "Newsletter";
color: #161616;
text-align: center;
font: normal bold 14px 'Playfair Display', serif;
font-size: 20px;
font-style: normal;
}
.FollowByEmail .follow-by-email-inner {
display: block;
overflow: hidden;
}
.FollowByEmail .follow-by-email-inner:before {
content: "TU WPISZ TEKST";
color: #161616;
font-size: 13px;
font-style: italic;
line-height: 1.7;
margin: 10px;
display: block;
opacity: .7;
}
.FollowByEmail .follow-by-email-inner td {
display: block;
width: 100%;
}
.FollowByEmail input.follow-by-email-address {
display: block;
padding: 10px;
width: 100% !important;
font-style: italic;
border: 0 !important;
}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit {
margin-right: 0;
padding: 0;
border: 0;
color:#ffffff;
background-color: #000;
font:normal normal 12px Open Sans !important;
text-transform: uppercase;
letter-spacing: 2px;
height: 42px;
z-index: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
font-size:90% !important;
margin: 0 -1% 0px;
width: 100%;
}
.follow-by-email-inner .follow-by-email-submit:hover {
background: #fbe2dd;
color: #4e4d4c;
}

Tło całego okienka
Marginesy wewnętrzne całego okienka
Tytuł
Kolor tytułu
Font tytułu
Wielkość fontu
Tekst, który ma się pojawiać nad okienkiem wpisywania maila
Kolor tekstu
Wielkość tekstu
Styl tekstu
Odstęp między liniami w tekście
Margines
Marginesy wewnętrzne okna do wpisywania maila
Kolor tekstu przycisku "subskrybuj"
Kolor tła przycisku
Font przycisku
Transformacja tekstu
Odstęp między literami
Wysokość przycisku
Kolor tła po najechaniu na przycisk myszką
Kolor tekstu po najechaniu na przycisk myszką

Efekt:

Czytaj dalej

grafika photoshop wpis

Jak zrobić napis z obrazu na obrazie - Photoshop

Ten temat był już poruszany na blogu, ale dotyczył on programu GIMP. Teraz pokażę Wam jak zrobić ten sam efekt w Photoshopie. Jednak jeśli bardziej interesuje Was instrukcja w GIMPie, to link do niej macie poniżej.

Przejdź do wpisu z instrukcją w GIMPie
1. Odpalamy Photoshopa
2. Otwieramy wybrane zdjęcie za pomocą plik-otwórz lub przy użyciu skrótu klawiszowego ctrl+O (PC)/cmd+O (MAC).
3. Tworzymy nową warstwę i wypełniamy ją białym kolorem