Jakiś czas temu, była opublikowana instrukcja na temat tego, jak zrobić własne buttony/przyciski, więc pomyślałam sobie, że głupio tak tą instrukcję zostawić i nie zrobić nic dodatkowego do niej, a i przy okazji do innych "klikaczy" na naszym blogu.

Przedstawię Wam dzisiaj, 6 efektów dla buttonów z powyższej instrukcji oraz innych przycisków na naszym blogu np. czytaj więcej, etykiety etc. Mogę Wam powiedzieć, że jest to pierwsza część tej instrukcji i jeszcze kilka takich efektów na pewno się pojawi :)

Nie będziemy musieli nic robić w kodzie HTML szablonu, wystarczy nam tylko arkusz CSS.

Motyw - dostosuj - zaawansowane - dodaj arkusz CSS

Zapamiętaj!

Wszystkie elementy w analizie kodu, zaznaczone na kolor i pogrubione są zmienne.

Efekt 1

Efekt pierwszy, jest idealny, jeśli chcemy, aby nasz button/przycisk na coś wskazywał. Po wskazaniu na button kursorem, pojawi nam się mała strzałka.

Podgląd

Najedź na mnie i zobacz jaki mam efekt

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px;
padding:10px 30px;
border-bottom:none;
-webkit-border-radius:0.333em;
-moz-border-radius:0.333em;
border-radius:0.333em;
color:#fff!important;
text-transform:uppercase;
font-size:14px!important;
line-height:24px!important;
letter-spacing: 1px;
cursor:pointer;
font-family: Nunito;
}
.selektor {
background: #000;
}
.selektor {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.selektor:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  border-style: solid;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  left: calc(50% - 10px);
  top: 0;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #000 transparent;
}
.selektor:hover:before, .hvr-bubble-top:focus:before, .hvr-bubble-top:active:before {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}

Zapamiętaj!

Niektóre selektory nie występują razem z kropką tylko z tzw. kratką. Czyli np. .selektor lub #selektor

Analiza fragmentu kodu, który można zmienić:

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px; - marginesy
padding:10px 30px; - marginesy wewnętrzne
border-bottom:none;
-webkit-border-radius:0.333em; - zaokrąglenie narożników
-moz-border-radius:0.333em;
border-radius:0.333em;
color:#fff!important; - kolor fontu/czcionki
text-transform:uppercase; - styl tekstu (tutaj ustawiony na litery drukowane)
font-size:14px!important; - wielkość fontu/czcionki
line-height:24px!important;
letter-spacing: 1px; - odległość między literami
cursor:pointer;
font-family: Open Sans; - rodzaj fontu/czcionki
}
.selektor {
background: #000; - kolor tła buttonu/przycisku
}
.selektor:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
border-style: solid;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
left: calc(50% - 10px);
top: 0;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #000 transparent; - kolor strzałki
}

Efekt 2

Najedź na mnie i zobacz jaki mam efekt

Analiza fragmentu kodu, który można zmienić:

.selektor { position:relative;
display:inline-block;
margin: 10px 5px 10px; - marginesy
padding:10px 30px; - marginesy wewnętrzne
border-bottom:none;
color:#fff!important; - kolor fontu/czcionki
text-transform:uppercase; - styl tekstu (tutaj ustawione na litery drukowane)
font-size:14px!important; - wielkość fontu/czcionki
line-height:24px!important;
letter-spacing: 1px; - odległość między literami
cursor:pointer;
font-family: Nunito; } - rodzaj fontu/czcionki
.selektor { background: #78d9d3; } - kolor tła
.selektor:before { content: '';
position: absolute;
border: #78d9d3 solid 4px; - kolor i grubość obramowania
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: top, right, bottom, left;
transition-property: top, right, bottom, left; }

Efekt 3

Najedź na mnie i zobacz jaki mam efekt

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px;
padding:10px 30px;
border-bottom:none;
color:#fff!important;
text-transform:uppercase;
font-size:14px!important;
line-height:24px!important;
letter-spacing: 1px;
cursor:pointer;
font-family: Nunito;
}
.selektor {
background: #444;
}
@-webkit-keyframes selektor {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
@keyframes selektor {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
.selektor {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.selektor:hover, .selektor:focus, .selektor:active {
  -webkit-animation-name: q3;
  animation-name: q3;
  -webkit-animation-duration: 0.15s;
  animation-duration: 0.15s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

Efekt 4

Najedź na mnie i zobacz jaki mam efekt

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px;
padding:10px 30px;
border-bottom:none;
color:#fff!important;
text-transform:uppercase;
font-size:14px!important;
line-height:24px!important;
letter-spacing: 1px;
cursor:pointer;
font-family: Nunito;
}
.selektor {
background: #ffe599;
}
.selektor {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  background: #f1c232;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.selektor:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffe599;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.selektor:hover, .selektor:focus, .selektor:active {
  color: #fff;
}
.selektor:hover:before, .selektor:focus:before, .selektor:active:before {
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

Analiza fragmentu kodu, który można zmienić:

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px; - marginesy
padding:10px 30px; - marginesy wewnętrzne
border-bottom:none;
color:#fff!important; - kolor fontu/czcionki
text-transform:uppercase; - styl tekstu
font-size:14px!important; - wielkość fontu/czcionki
line-height:24px!important;
letter-spacing: 1px; - odstęp między literami
cursor:pointer;
font-family: Nunito; - rodzaj fontu/czcionki
}
.selektor {
background: #ffe599; - kolor tła
}
.selektor {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
background: #f1c232; - kolor drugiego tła
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.selektor:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #ffe599; - kolor pierwszego tła
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.selektor:hover, .selektor:focus, .selektor:active {
color: #fff; - kolor fontu/czcionki
}

Efekt 5

Najedź na mnie i zobacz jaki mam efekt

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px;
padding:10px 30px;
border-bottom:none;
color:#000!important;
text-transform:uppercase;
font-size:14px!important;
line-height:24px!important;
letter-spacing: 1px;
cursor:pointer;
font-family: Nunito;
}
.selektor {
background: #fff;
}
.selektor {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.selektor:before, .selektor:after {
  pointer-events: none;
  position: absolute;
  content: '';
  left: 0;
  width: 100%;
  box-sizing: border-box;
  background-repeat: no-repeat;
  height: 5px;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.selektor:before {
  bottom: 100%;
  background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}
.selektor:after {
  top: 100%;
  background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}
.selektor:hover:before, .selektor:focus:before, .selektor:active:before, .selektor:hover:after, .selektor:focus:after, .selektor:active:after {
  opacity: 1;
}

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px;
padding:10px 30px;
border-bottom:none;
color:#fff!important;
text-transform:uppercase;
font-size:14px!important;
line-height:24px!important;
letter-spacing: 1px;
cursor:pointer;
font-family: Nunito;
}
.selektor {
background: #9fc5e8;
}
.selektor {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.selektor:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  background: white;
  /* IE9 */
  background: linear-gradient(135deg, white 45%, #aaa 50%, #ccc 56%, white 80%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');
  /*For IE7-8-9*/
  z-index: 1000;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}
.selektor:hover:before, .selektor:focus:before, .selektor:active:before {
  width: 25px;
  height: 25px;
}

Który efekt Wam się najbardziej podoba? :)

Czytaj dalej

Jak zrobić pasek powiadomień/informacyjny na Bloggerze

CSS Tutorial wpis

Jak zrobić pasek powiadomień/informacyjny na Bloggerze

Pasek powiadomień blogger, instrukcja na bloggera

Pewnie nie raz i nie dwa mieliście okazję do tego, aby na blogu (na górze) widzieć u niektórych okienko/pasek z jakąś informacją np. o urlopie, nowych produktach w sklepie, aktualizacjach czy jakiś zmianach na blogu itd. Jak pewnie też wiecie, nie jest to standardowy gadżet Bloggera. Dlatego w tym wpisie, pokażę Wam jak taki pasek informacyjny dodać do Bloggera.

Okej, więc aby dodać nasz pasek informacyjny, będziemy pracować na kodzie HTML szablonu oraz arkuszu CSS. Nie będzie to skomplikowany "zabieg", więc każdy powinien sobie z tym poradzić :)

1. Pierwsze co musimy zrobić to przechodzimy do motyw - edytuj kod HTML

2. Klikamy kursorem, obojętnie jakie miejsce w kodzie i wybieramy ctrl+f na klawiaturze. Pojawi nam się okno wyszukiwania. W okienku, które nam się pojawiło wpisujemy </body>

3. Pod </body> wklejamy odpowiednio uzupełniony kod:

TEKST INFORMACYJNY - wpisujemy w tym miejscu tekst, który ma informować naszych czytelników

LINK - link do strony/podstrony/ wpisu, do którego ma kierować naszych czytelników

TEKST BUTTONU - czyli tekst, który będzie się wyświetlał na naszym przycisku np. kliknij tutaj/przejdź do wpisu lub kliknij tutaj

Mój kod wygląda tak:

Zapisujemy motyw

4. Przechodzimy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS. W arkuszu CSS wklejamy taki oto kod CSS:

Efekt:

Wersja dla osób posiadających menu przyczepione na górze bloga

1. Przechodzimy do układ - dodaj gadżet - HTML/JavaScript

2. W gadżecie wklejamy taki kod:

Zapisujemy

3. Przechodzimy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS

Efekt:

Wszystkie wartości w kodzie CSS są zmienne

Jeśli masz z czymś problem - napisz na maila :)

Czytaj dalej

Darmowe plany lekcji - edycja 2018

grafika do pobrania plany lekcji wpis

Darmowe plany lekcji - edycja 2018

Już niedługo, już za momencik zaczyna się kolejny rok szkolny, a jak rok szkolny to i nowe plany lekcji by się przydały. Żeby tradycji stało się zadość, w tym roku również przygotowałam dla Was darmowe plany lekcji w 6 wzorach - 3 pionowe i 3 poziome.

Poprzednie edycje, cieszyły się dużym zainteresowaniem, więc mam nadzieję, że i ta edycja przypadnie Wam do gustu :)

Pierwsze 3 plany - poziome, to plany z motywem liska, kwiatów oraz kaktusów. Nie wiem czemu, ale motywy z liskami, zawsze kojarzyły mi się z powrotem do szkoły, a kwiaty... no cóż, dobrze, żeby wiosenne klimaty towarzyszyły nam nawet po powrocie do szkoły. Motyw kaktusów, z tej całej trójki jest chyba najbardziej uniwersalny :)

Pobierz plan z liskiem Pobierz plan kwiatowy

Pobierz plan z kaktusami Pobierz plan z motywem roweru

Kolejne 3 plany jakie dla Was mam to plany w pionie. Utrzymane w letnim klimacie, a jeden z nich - plan z motywem roweru, jest przygotowany dla osób, które cenią sobie minimalizm. Oprócz tego jest to plan z grafiką, którą można samemu pokolorować, jeśli ktoś jednak by wolał dodać trochę koloru :)

Liście palm i morskie klimaty - od razu na myśl przywołują wakacje, a kto nie chciałby powrócić do wakacji (nawet myślami), podczas roku szkolnego? Od razu zaczyna się lepiej pracować :)

Pobierz plan z motywem morskim Pobierz plan z motywem liści palm
Plany lekcji są gotowe do druku, wystarczy kliknąć i pobrać.

Informacje o pobieraniu

Pliki można drukować na dowolnym papierze i na dowolnej drukarce.
Pliki w formacie PNG

Zasady pobierania

Pliki można pobierać na własny użytek
Jeśli chcesz się podzielić planami - nie kopiuj, udostępnij link :)
Plany lekcji, nie są przeznaczone na sprzedaż
Nie udostępniaj ich w formie zmienionej

Informacja dla nauczycieli/opiekunów

Przy ostatnich edycjach planów lekcji, dostawałam pytania czy można pobrać plany dla dzieci ze szkoły lub domów dziecka - tak, można pobierać :)

Plany lekcji - edycja 2017 Plany lekcji - edycja 2016 Plany lekcji - edycja 2015

Czytaj dalej

Mów do mnie jeszcze - czyli jak źle przekręcałam element z ceną i kiedy dowiedziałam się, że czarny kolor, nie jest czarnym

lifestyle wpis

Mów do mnie jeszcze - czyli jak źle przekręcałam element z ceną i kiedy dowiedziałam się, że czarny kolor, nie jest czarnym

Uwielbiam swoją pracę, a w szczególności ludzi, z którymi współpracuje - serio, nie ważne jacy by nie byli, zawsze mnie zaskakują i usiłują ode mnie potwierdzenia, że ja jako grafik będę działać cuda i ich pomysły - nawet te najbardziej nietypowe zostaną zrealizowane :)

Projekt z tabliczkami, na których mają być ceny. Miesiąc się już to ciągnęło, w końcu dostałam wiadomość:

"No już prawie, prawie, tylko trochę źle pani tą cenę przekręciła, miało być w lewo, ale to drugie"

No tak, jak mogłam się pomylić!

Rozmawiam już drugi tydzień z klientem na temat projektu, nadal nie wiem jaka to firma i tak właściwie do kogo ma być celowana dana forma reklamy. Pytam się klienta kto jest jego grupą docelową i czym zajmuje się jego firma.

"Proszę pani moja firma zajmuje się wszystkim i grupa docelowa, to też wszyscy"

Jesteście ciekawi jaki finalny był projekt? Projekt z produktami dla niemowląt.

"Proszę o baner z informacją o sprzedaży działki, ale taki z efektem WOW!"

"Właściwie to ja nie wiem co jeszcze chce, ale może już Pani zacząć robić projekt"

Kiedy czarny, nie jest czarnym i istnieje jeszcze jakiś inny czarny kolor :)

"- Napisy mają być czarne
- Proszę pana, one są czarne
- Nie, to nie jest czarny
- To jest czarny
- Proszę pani, nie o taki czarny mi chodziło, chodziło mi o inny czarny"

"To ja za zdjęcia muszę jeszcze płacić?"

"Czy można tego pana obrócić, aby stał do nas przodem, a nie profilem?"

"Niech pani się nie śpieszy, nie potrzebuje tego na już, tylko na środę" - był poniedziałek.

"- Podsyłam mój projekt na plakat
- Proszę pana, ale to jest plakat innej firmy
- No właśnie, podoba mi się, niech pani to odtworzy, tylko dane zmieni"

"Proszę pani, ja przeczytałem książkę o designie i to nie powinno tak być, ja zaraz pani napiszę zasadę projektowania"

"- Proszę pani, ten projekt powinien do mnie mówić, krzyczeć, a on nic do mnie nie mówi, jest beznadziejny
- Proszę pani, ale to jest realizacja pani projektu i wprowadzone zmiany, które również pani zaproponowała
- Projekt jest świetny! Akceptuje go"

Mimo wszystko, nadal uwielbiam swoją pracę i klientów, jestem im wdzięczna za poprawianie mi humoru ;)

Czytaj dalej

Efekty dla przycisków/buttonów

Efekty dla przycisków/buttonów

Efekt 1

Efekt 2

Efekt 3

Efekt 4

Efekt 5

Jak zrobić pasek powiadomień/informacyjny na Bloggerze

Jak zrobić pasek powiadomień/informacyjny na Bloggerze

Wersja dla osób posiadających menu przyczepione na górze bloga

Darmowe plany lekcji - edycja 2018

Darmowe plany lekcji - edycja 2018

Informacje o pobieraniu

Zasady pobierania

Informacja dla nauczycieli/opiekunów

Mów do mnie jeszcze - czyli jak źle przekręcałam element z ceną i kiedy dowiedziałam się, że czarny kolor, nie jest czarnym

Mów do mnie jeszcze - czyli jak źle przekręcałam element z ceną i kiedy dowiedziałam się, że czarny kolor, nie jest czarnym

Archiwum

Etykiety