1.Rozmiar trzcionki 42

.tile1 {
font-size: 42px;
}

---

2.Kolor tla

.tile2 {
background-color: #3095d3;
}

---

3.Kolor trzcioinki

.tile3 {
color: red;
}

---

4a.Wyrownaj do Lewej

.tile4a {
text-align: left;
}

---

4b.Wyrownaj do prawej

.tile4b {
text-align: right;
}

---

4c.Wyrownaj do srodka

.tile4c {
text-align: right;
}

---

5.Selektor atrybutu

Przykladowy atrybut data-status

• Zamowienie nr. 7842
• Zamowienie nr. 7844
• Zamowienie nr. 7846
• Zamowienie nr. 7848

[data-status]{
color: green;
}

[data-status="canceled"]{
color: blue;
}

---

6. Pseudoklasy

Zmiana wygladu po najechaniu na odnosnik, brak podkreslenia

Przykladowy text

a {
font-size: 22px;
text-decoration: none;
}

a:hover {
color: red;
background-color: #dedede;
}

---

7. Specialny selektor - co drugi

Przykladowa lista

• Logo
• Metadane
• Zakladka O nas
• Artykuly
• Informacjie kontaktowe

---

li:nth-of-type(2n) {
color: red;
background-color: #dedede;
}

8.Obramowanie

.tile8{
border: 2px solid red;
}

---

9. Pseudoelementy - wyroznienie Pierwszej litery

TYTUL ARTYKULU

Przykladowy text artykulu, Przykladowy text artykulu, Przykladowy text artykulu, Przykladowy text artykulu, Przykladowy text artykulu, Przykladowy text artykulu, Przykladowy text artykulu, Przykladowy text artykulu, Przykladowy text artykulu, Przykladowy text artykulu, Przykladowy text artykulu, Przykladowy text artykulu, Przykladowy text artykulu, Przykladowy text artykulu,

h4 {
color: #777777;
font-size: 24px;
}

h4::first-letter {
color: Red;
font-size: 64px;
}

---

10.Dynamiczne wstawianie za pomoca pseudoelementu

.title10::after {
content: ">>";
}

---

11.Pogrubienie textu

.title11{
font-weight: bold;
}

---

12a. Szerokosciw px

title12a{
font-size: 32px;
margin: 10px;
width: 1000px;
height: 150px;
background-color: red;
text-align: center;
}

---

12b. Szerokosci w %

title12b{
font-size: 32px;
margin: 10px;
width: 50%px;
height: 150px;
background-color: red;
text-align: center;
}

---

13.Wysokosci lini (odstep miedzy liniami) margin - margines

.tile13 p{
line-height: 2;
}

.tile13 h5{
font-size: 26px;
margin-bottom: 0;
margin: 0;
}

---

14. Wewnetrzny margines.

padding
padding-bottom
padding-top
padding-left
padding-right

.title14{
font-size: 26px;
margin: 10px;
width: 400px;
height: 200px;
background-color: red;
padding-top: 100px;
padding-left: 100px;
}

---

15. Font-family

.title15 h1{
font-family: Arial, sans-serif;
}

.title15 p{
font-family: "Arial Narrow", sans-serif;
}

#arialblack{
font-family: "Arial Black", sans-serif;
}

---

16.Rozmiar textu.

.title16{
font-size: 10px;
}

.title16 h1{
font-size: 4rem;
}

.title16 h3{
font-size: 2.4rem;
}

.title16 p{
font-size: 1.5rem;
}

---

17.Wysokosci Lini - od 1.5 do 2

.title17 p{
line-height: 1.5 ;
}

---

18.Odstepy mniedzy slowami i literami

.title18 h1{
letter-spacing: 0.2rem;
}

.title18 h3{
font-size: 24px;
word-spacing: 0.3rem;
}

---

19. Waga oraz style texstu

A.Pochylenie Textu

B. Grubosc Textu -bold lub od 100 do 900(co sto)

#title19a{
font-style: italic;
}

#title19b{
font-weight: bold;
font-weight: 900;
}

---

20. Transformacjia textu

A. Przeksztalcenie tekstu na duze litery

#title20a{
text-transform: uppercase;
}

B. Przeksztalcenie tekstu na male litery

#title20b{
text-transform: lowercase;
}

C. Przeksztalcenie tekstu na pierwsze duze litery w wyrazie

#title20c{
text-transform: capitalize;
}

D. Linie pod tekstem

#title20d{
text-decoration: underline;
}

E. Linie nad tekstem

#title20e{
text-decoration: overline;
}

F. Przekreslienie textu

#title20f{
text-decoration: line-through;
}

---

21. Cienie dla textu.

1. Dodatnie lidzby - prawo i dol
2. Ujemne lidzby - gora i lewo
3. Trzecia jednostka - rozmycie
4. Czwarta kolor cienia

Przykladowy text z dodanym cieniem

.title21{
text-shadow: 2px 2px 10px rgba(0,0,0,1);
}

---

22. Formatowanie list

A. Okrag.

• Logo
• Metadane
• Zakladka O nas
• Artykuly
• Informacjie kontaktowe

#okrag{
list-style-type: circle;
}

B.Kwadrat.

• Logo
• Metadane
• Zakladka O nas
• Artykuly
• Informacjie kontaktowe

#kwadrat{
list-style-type: square;
}

C. Litery male.

1. Otworz klienta FTP
2. Wprowadz dane swojego konta
3. Wybierz katalog z plikami lokalnymi
4. Wybierz katalog docelowy na serwer
5. Zaznacz wybrany plik lokalne i przesli je na serwer

#litery-male{
list-style-type: lower-latin;
}

D. Litery duze.

1. Otworz klienta FTP
2. Wprowadz dane swojego konta
3. Wybierz katalog z plikami lokalnymi
4. Wybierz katalog docelowy na serwer
5. Zaznacz wybrany plik lokalne i przesli je na serwer

#litery-duze{
list-style-type: upper-latin;
}

E. Rzymskie male.

1. Otworz klienta FTP
2. Wprowadz dane swojego konta
3. Wybierz katalog z plikami lokalnymi
4. Wybierz katalog docelowy na serwer
5. Zaznacz wybrany plik lokalne i przesli je na serwer

#rzymskie-male{
list-style-type: lower-roman;
}

F. Rzymskie duze.

1. Otworz klienta FTP
2. Wprowadz dane swojego konta
3. Wybierz katalog z plikami lokalnymi
4. Wybierz katalog docelowy na serwer
5. Zaznacz wybrany plik lokalne i przesli je na serwer

#rzymskie-duze{
list-style-type: upper-roman;
}

---

23. Wysokosci, szerokosc, margines, ramka, odstep

A. Ramka solidna

.title23a{
background-color: #086375;
color: #ffffff;
margin; 30px;
padding: 20px 30px;
width: 50%;
min-height: 200px;
border: 10px solid #e4572e;
}

B. Ramka Kreskowana

.title23b{
background-color: #086375;
color: #ffffff;
margin; 30px;
padding: 20px 30px;
width: 50%;
min-height: 200px;
border: 10px dashed #e4572e;
}

C. Ramka Kropkowana

.title23c{
background-color: #086375;
color: #ffffff;
margin; 30px;
padding: 20px 30px;
width: 50%;
min-height: 200px;
border: 10px dotted #e4572e;
}

D. Ramka gora

.title23d{
background-color: #086375;
color: #ffffff;
margin; 30px;
padding: 20px 30px;
width: 50%;
min-height: 200px;
border-top: 10px solid #e4572e;
}

E. Ramka zaokroaglona

.title23e{
background-color: #086375;
color: #ffffff;
margin; 30px;
padding: 20px 30px;
width: 50%;
min-height: 200px;
border-top: 10px solid #e4572e;
border-radius: 10px;
}

F. Ramka zaokroaglona gora

.title23f{
background-color: #086375;
color: #ffffff;
margin; 30px;
padding: 20px 30px;
width: 50%;
min-height: 200px;
border-top: 10px solid #e4572e;
border-radius: 10px 10px 0 0;
}

G. Minimalna szerokosc - min-height: 200px;

.title23g{
background-color: #086375;
color: #ffffff;
margin; 30px;
padding: 20px 30px;
width: 50%;
min-height: 200px;
}

---

24.Sztywna szerokosci z ramkami i marginesem
box-sizing: border-box

.title24b{
background-color: #086375;
color: #ffffff;
margin; 30px;
padding: 20px 30px;
width: 500px;
border: 30px solid #e4572e;
box-sizing: border-box;
}

---

25.Elementy pudelkowe i Elementy liniowe

25A. Elementy pudelkowe - zmiana na liniowo-blokowe

Przykladowy text

Przykladowy text

Przykladowy text

.title25a{
background-color: red;
margin: 10px;
width: 100px;
height: 100px;
display: inline-block;
}

25B. Elementy liniowe - zmiana na blokowe

google Strefa kursow

.title25b{
margin: 10px;
display: block;
}

25C. Elementy pudelkowe
float: left - pojawiaj po lewej
na koniec dodajemy "div style="clear:both;"

.title25c{
background-color: red;
margin: 10px;
width: 100px;
height: 100px;
float: left;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

<div style="clear:both"> </div>

---

26.Kontrola Przepelnienia

26A. Widoczna

.title26a{
background-color: red;
margin: 10px;
width: 300px;
height: 250px;
overflow: visible;
}

26B. Przewijanie

.title26b{
background-color: red;
margin: 10px;
width: 300px;
height: 250px;
overflow: scroll;
}

26C.Ukrycie

.title26c{
background-color: red;
margin: 10px;
width: 300px;
height: 250px;
overflow: hidden;
}

---

27. 4 rodzaje pozycjonowania (top, bottom, left, right)

27A. Statyczne (domyslne)

.box1{
background-color: #3e2f5b;
width: 200px;
height: 50px;
position: static;
}

27B. Wzgledne - relative

.box2{
background-color: #3e2f5b;
width: 200px;
height: 50px;
position: relative;
top: 25px;
left: 100px;
}

27C. Absolutne - wzgledem calej strony

.box3{
background-color: #3e2f5b;
width: 200px;
height: 50px;
position: absolute;
top: 24000px;
right: 35px;
}

27D. Stale - zakotwiczone

.box4{
background-color: #3e2f5b;
width: 100%;
height: 50px;
position: fixed;
top: 0;
left: 0;
right: 0;
font-size: 32px;
text-align: center;
padding-top: 10px;
}

---

28. Obrazek w tle.

28A. Obrazek w tle.

.title28a{
background-color: #3e2f5b;
width: 100%;
height: 200px;
background-image: url('tlo.PNG');
}

28B. Obrazek powtarzajacy sie w x

.title28a{
background-color: #3e2f5b;
width: 100%;
height: 200px;
background-image: url('tlo.PNG');
background-repeat: repeat-x;
}

28C. Obrazek powtarzajacy sie w y

.title28a{
background-color: #3e2f5b;
width: 100%;
height: 200px;
background-image: url('tlo.PNG');
background-repeat: repeat-y;
}

28D. Jeden obrazek

.title28d{
background-color: #3e2f5b;
width: 100%;
height: 200px;
background-image: url('tlo.PNG');
background-repeat: no-repeat;
}

28E. Jeden obrazek na srodku

.title28e{
background-color: #3e2f5b;
width: 100%;
height: 200px;
background-image: url('tlo.PNG');
background-repeat: no-repeat;
background-position: 50% 50%;
}

28F. Wszystko w jednym kodzie

.title28f{
width: 100%;
height: 200px;
background: url('tlo.png') 50% 50% no-repeat #3e2f5b;
}

---

29. Grandient

29A. Grandient podstawowy

.title29a{
background-color: #086375;
width: 100%;
height: 200px;
background-image: linear-gradient(to bottom, red, green);
}

29B. Grandient z obrazkiem

.title29b{
background-color: #086375;
width: 100%;
height: 200px;
background: url('tlo.png') 50% 50% no-repeat, linear-gradient(to bottom, #482630, #a54657);
}

---

30. Cien do elemetow pudelkowych- box-shadow

.title30{
width: 40%;
padding: 20px;
margin-left: 40px;
background-color: #f8d6bb;
box-shadow: 10px 10px 12px rgba(0,0,0,0.9);
}

---

31. Filtry dla obrazkow

A. Rozmycie

.title31a{
filter: blur(7px);
}

B. Negatyw

.title31b{
filter: invert(100%);
}

C. Nasycenie

.title31c{
filter: saturate(15%);
}

D. Kontrast

.title31d{
filter: contrast(200%);
}

---

32.Inne Gradienty

31A. Liniowy z dolu do gory

.title32a{
width: 500px;
height: 500px;
background: linear-gradient(to top, red, blue);
}

31B. 45 stopni

.title32b{
width: 500px;
height: 500px;
background: linear-gradient(45deg, red, blue);
}

31C. Z uzyciem przezroczystosci

.title32c{
width: 500px;
height: 500px;
background: linear-gradient(red, rgba(0,0,0,0));
}

31D. Kolowy

.title32d{
width: 500px;
height: 500px;
background: radial-gradient(red, yellow, blue, green);
}

---

33.TABELA

Lista klientow

i.d	imie	Nazwisko	Email
1	Jan	Nowak	janowak@yahoo.pl
2	Jan	kowalk	jankowak@yahoo.pl
3	Jan	kwiat	jankwiat@yahoo.pl
4	Jan	kawir	jankawir@yahoo.pl

Tabela klientow

table-layout: fixed; - poprawia wyglad tabeli
th:first-child - pierwsza kolumna szerokosc 15 %
th:first-child - scalenie obramowania
border: 1px solid #000000; - obramowanie
tr:nth-child(odd) - parzyste zmiana koloru
tr:nth-child(even) - nieparzyste zmiana koloru

table{
width: 50%;
font-size: 20px;
table-layout: fixed;
border-collapse: collapse;
}

td {
border: 1px solid #000000;
}

th{
background-color: #191919;
color: #ffffff;
text-align: left;
}

th:first-child{
width: 15%;
}

tr:nth-child(odd){
background-color: #dedede;
}

tr:nth-child(even){
background-color: #acacac;
}

---

34.Transformacjie 2D

34A. Przesuniecie X

.title34a{
transform: translateX(140px);
}

34B. Przesuniecie Y

.title34b{
transform: translateY(140px);
}

34C. Rotacjia

.title34c{
transform: rotate(40deg);
}

34D. Skalowanie

.title34b{
transform: scale(1.2,.5);
}

---

35.Transformacjie 3D

35A. Perspektywa

.title35a{
transform: perspective(200px) rotateY(30deg) scale(0.3,0.3);
}

35B. Perspektywa

.title35b{
transform: perspective(500px) rotateY(30deg) rotateX(40deg) scale(0.4,0.4);
}

---

36. Animacjie

.title36{
width: 300px;
height: 160px;
padding: 20px;
background-color: #FC814A;
position: relative;
top: 25px;
left: 100px;
transform: scale(1,1);
transition: all 1.5s;
}

.title36:hover {
background-color: #564256;
transform: scale(1.1,1.1);
}

---

37.Funkcjie - Wielkosci mniejsze od 100%

.title37{
width: calc(100% - 200px);
height: 160px;
background-color: #28587b;
}

---

38. Zapytanie o media - jesli szerokosc jest wieksza niz 800px artykuly beda pojawiac sie w kolumnach, jesli mniej to pod spodem

Przydatne techniki pracy

Trendy w UX dla małych e-sklepów

Według raportu „Barometr e-commerce 2016” Sociomantic Labs, wartość polskiego rynku e-commerce może osiągnąć wartość 35,8 mld zł na koniec bieżącego roku, czyli o 15% więcej niż w roku 2015. Jednocześnie liczba e-sklepów, szczególnie małych, może wzrosnąć o 7%. To oznacza, że konkurencja pomiędzy sprzedawcami online będzie jeszcze większa. Sklepy internetowe maja o co walczyć. Firma analityczna Gemius wyliczyła, że w ubiegłym roku 54% polskich internautów robiło zakupy online, a 13% korzystało również z oferty zagranicznych e-sklepów

7 niezbędnych elementów strony internetowej

odobnie jak w przypadku góry lodowej, to co widać w przeglądarce, to jedynie jej wierzchołek. Aby strona WWW była bez problemu odczytywana nie tylko przez ludzi, ale i wyszukiwarki internetowe (boty, roboty), należy pamiętać o odpowiednim opisaniu witryny i jej zawartości. Tytuł witryny (ok. 40-60 znaków) oraz opis (150-160 znaków) powinny zawierać najważniejsze informacje o zawartości strony z wkomponowanymi słowami kluczowymi. Warto zadbać także o nadanie zdjęciom alternatywnego opisu (tzw. atrybut ‘alt’), by roboty wiedziały co przedstawiają zdjęcia.

@media (min-width: 800px) {
article {
float: left;
width: 47%;
}
}

---

39. Zmiana kursora

39a. Pointer

.title39a{
cursor: pointer;
}

39b. Wait

.title39b{
cursor: wait;
}

39c. not-allowed

.title39c{
cursor: not-allowed;
}

---

40. Odbicie lustrzane - eksperymentalne

.title40{
-webkit-box-reflect: below;
}

---

41. Rozna wielkosci textu zalezne od rozmiaru wyswietlania ekranu.

Według raportu „Barometr e-commerce 2016” Sociomantic Labs, wartość polskiego rynku e-commerce może osiągnąć wartość 35,8 mld zł na koniec bieżącego roku, czyli o 15% więcej niż w roku 2015. Jednocześnie liczba e-sklepów, szczególnie małych, może wzrosnąć o 7%. To oznacza, że konkurencja pomiędzy sprzedawcami online będzie jeszcze większa. Sklepy internetowe maja o co walczyć. Firma analityczna Gemius wyliczyła, że w ubiegłym roku 54% polskich internautów robiło zakupy online, a 13% korzystało również z oferty zagranicznych e-sklepów. Według raportu „Barometr e-commerce 2016” Sociomantic Labs, wartość polskiego rynku e-commerce może osiągnąć wartość 35,8 mld zł na koniec bieżącego roku, czyli o 15% więcej niż w roku 2015. Jednocześnie liczba e-sklepów, szczególnie małych, może wzrosnąć o 7%. To oznacza, że konkurencja pomiędzy sprzedawcami online będzie jeszcze większa. Sklepy internetowe maja o co walczyć. Firma analityczna Gemius wyliczyła, że w ubiegłym roku 54% polskich internautów robiło zakupy online, a 13% korzystało również z oferty zagranicznych e-sklepów

@media screen and (min-width: 1024px) {
#text{
font-size: 24px;
} }

---

42. Logo zajmujace 20% miejsca.

.logo-bar img {
max-width: 20%;
}

---

43. Obrazek tla - skaluje sie do rozmiaru

Importowanie obrazka na tlo;
Rozciagniecie obrazka do danego rozmiaru;

.title43{
background: url('img/header_photo_small.jpg') 0 0;
background-size: cover;
}

---