Wstęp

Witam na blogu xnstrukcje. Blog stworzony został z zamiarem pomocy początkującym szabloniarzom. Instrukcje piszę sama, czasami podaje linki do innych potrzebnych stron. Główne posty dotyczą w szczególności CSSa i podstawowego HTMLu.
!!ważna ankieta!!

Popularne posty

Aktualności

Nowe instrukcje:
- Animacja, czyli @keyframes
- Level up #2
- Tworzenie szablonów - cz. 3

AKTUALIZACJA: 10.06.2019

Strony - gotowe kody vol.1

Kod CSS:
#PageList1 li {
  list-style-type: none;
}

#PageList1 li a:link, #PageList1 li a:visited {
  display: block;
  text-decoration: none;
  background: #E57373;
  color: #B71C1C;
  font-family: arial;
  font-size: 7pt;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 0;
  margin: 1px 0;
  transition: all .50s ease-in-out;
-o-transition: all .50s ease-in-out;
-webkit-transition: all .50s ease-in-out;
-moz-transition: all .50s ease-in-out;
}

#PageList1 li a:hover {
  background: #AB47BC;
  color: #F3E5F5;
  border-radius: 6px;
    transition: all .80s ease-in-out;
-o-transition: all .80s ease-in-out;
-webkit-transition: all .80s ease-in-out;
-moz-transition: all .80s ease-in-out;
}




Kod CSS:

#PageList1 li {
  list-style-type: none;
}

#PageList1 li a:link, #PageList1 li a:visited {
  display: block;
  text-decoration: none;
  background: #1E88E5;
  color: #E3F2FD; 
  font-family: arial;
  font-size: 7pt;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 0;
  margin: 1px 0;
  transition: all .50s ease-in-out;
-o-transition: all .50s ease-in-out;
-webkit-transition: all .50s ease-in-out;
-moz-transition: all .50s ease-in-out;
}

#PageList1 li a:hover {
  box-shadow: inset 0 30px 0 #4DB6AC, inset 0 -30px 0 #4DB6AC;
  color: #E0F2F1;
  transition: all .80s ease-in-out;
-o-transition: all .80s ease-in-out;
-webkit-transition: all .80s ease-in-out;
-moz-transition: all .80s ease-in-out
}






Kod CSS:
#PageList1 li {
  list-style-type: none;
}

#PageList1 li a:link, #PageList1 li a:visited {
  display: block;
  text-decoration: none;
  background: #FF7043;
  color: #BF360C; 
  font-family: arial;
  font-size: 7pt;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 0;
  margin: 1px 0;
  transition: all .50s ease-in-out;
-o-transition: all .50s ease-in-out;
-webkit-transition: all .50s ease-in-out;
-moz-transition: all .50s ease-in-out;
}

#PageList1 li a:hover {
  background: #E65100;
  color: #FFECB3;
  transform: scale(1.05);
  box-shadow: 0px 0px 51px -2px #DD2C00;
  transition: all .80s ease-in-out;
-o-transition: all .80s ease-in-out;
-webkit-transition: all .80s ease-in-out;
-moz-transition: all .80s ease-in-out;
}



Kod CSS:
#PageList1 li {
  list-style-type: none;
}

#PageList1 li a:link, #PageList1 li a:visited {
  display: block;
  text-decoration: none;
  background: #C51162;
  border: 2px solid #C51162;
  color: #E3F2FD; 
  font-family: arial;
  font-size: 7pt;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 0;
  margin: 1px 0;
  transition: all .50s ease-in-out;
-o-transition: all .50s ease-in-out;
-webkit-transition: all .50s ease-in-out;
-moz-transition: all .50s ease-in-out;
}

#PageList1 li a:hover {
  background: #880E4F;
  border: 2px dashed #C2185B;
  color: #E0F2F1;
  transition: all .80s ease-in-out;
-o-transition: all .80s ease-in-out;
-webkit-transition: all .80s ease-in-out;
-moz-transition: all .80s ease-in-out
}

Brak komentarzy:

Prześlij komentarz

scroll to top