30 sierpnia 2016

Pomysł na oryginalne strony, etykiety i wiele więcej..


Witam, dziś na prawdę dobra instrukcja na fajny i oryginalny efekt, który możecie zastosować do kart/stron, etykiet czy czego sobie tak zapragniecie :)

Przedstawię kilka efektów, a to już wy sami zdecydujecie, którego użyjecie:

Efekt 1:


Instrukcja:
1. Dodajecie gadżet HTML/JAVA SCRIPT i wklejacie to:
<div id="menu"><div class="strony">
<a href="link strony">Karta 1</a>
<a href="link strony">Karta 2</a>
<a href="link strony">Karta 3</a>
<a href="link strony">Karta 4</a>
<a href="link strony">Karta 5</a>
<a href="link strony">Karta 6</a>
<a href="link strony">Karta 7</a>
<a href="link strony">Karta 8</a>
</div><div id="menu-m"></div><br /></div>
2. Przechodzimy do arkusza CSS i wklejamy to:
#menu{
  z-index:100;
  line-height: 15pt;
  width:240px;
  top:0px;
  right: 0px;
  padding:0px;
  position:relative;}
#menu a:link{
  display: inline-block !important;
  background: #804070;
  color: #eee;
  font-family: verdana;
  font-size: 6pt;
  width: 125px;
  height: 19px;
  text-align: center;
  padding: 0px;
  text-decoration: none;
  letter-spacing: 2px;
 text-transform: uppercase;
}
#menu a:hover{
  background: #80A0A0;
  color: #eee;
  font-family: verdana;
  font-size: 6pt;
  text-align: center;
  padding: 0px;
  text-decoration: none;
  letter-spacing: 2px;
 text-transform: uppercase;
 -moz-transition:all 2s;
 -webkit-transition:all 2s;
 -o-transition:all 2s;}
#menu-m {visibility:hidden;} 
Efekt 2:


Instrukcja:
1. Dodajecie gadżet HTML/JAVA SCRIPT i wklejacie to:
<div id="menu"><div class="strony">
<a href="link strony">Karta 1</a>
<a href="link strony">Karta 2</a>
<a href="link strony">Karta 3</a>
<a href="link strony">Karta 4</a>
<a href="link strony">Karta 5</a>
<a href="link strony">Karta 6</a>
<a href="link strony">Karta 7</a>
<a href="link strony">Karta 8</a>
</div>
2. Przechodzimy do arkusza CSS i wklejamy to:
#menu{
  z-index:100;
  line-height: 15pt;
  width:240px;
  top:0px;
  right: 0px;
  padding:0px;
  position:relative;}
#menu a:link{
  display: inline-block !important;
  background: #0080E0; /* Kolor tła */
  color: #eee; /* Kolor czcionki */
  font-family: verdana; /* Czcionka stron */
  font-size: 6pt; /* Wielkość Czcionki */
  width: 125px; /*Szerokość*/
  height: 19px; /*Długość*/
  text-align: center; /*Wyśrodkowanie*/
  padding: 0px;
  text-decoration: none;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 0px 20px 20px 0px; }
#menu a:nth-child(odd) {
  width: 165px;
  background: #FF8040; }
#menu a:hover{
  color: #fff; /* Kolor czcionki */
  font-family: verdana; /* Czcionka stron */
  font-size: 6pt; /* Wielkość Czcionki */
  text-align: center; /*Wyśrodkowanie*/
  width: 145px; /*Szerokość*/
  padding: 0px;
  text-decoration: none;
  letter-spacing: 2px;
  text-transform: uppercase;
 -moz-transition:all 2s;
 -webkit-transition:all 2s;
 -o-transition:all 2s;}
#menu a:nth-child(odd):hover {width: 145px; } 

Efekt 3:


Instrukcja:
1. Dodajecie gadżet HTML/JAVA SCRIPT i wklejacie to:
<div id="menu"><div class="strony">
<a href="link strony">Karta 1</a>
<a href="link strony">Karta 2</a>
<a href="link strony">Karta 3</a>
<a href="link strony">Karta 4</a>
<a href="link strony">Karta 5</a>
<a href="link strony">Karta 6</a>
<a href="link strony">Karta 7</a>
<a href="link strony">Karta 8</a>
</div>
2. Przechodzimy do arkusza CSS i wklejamy to:
#menu{
  z-index:100;
  line-height: 15pt;
  width:340px;
  top:0px;
  right: 0px;
  padding:0px;
  position:relative;}
#menu a:link{
  display: inline-block !important;
  background: #FF2070; /* Kolor tła */
  color: #eee; /* Kolor czcionki */
  font-family: verdana; /* Czcionka stron */
  font-size: 6pt; /* Wielkość Czcionki */
  width: 125px; /*Szerokość*/
  height: 19px; /*Długość*/
  text-align: center; /*Wyśrodkowanie*/
  padding: 0px;
  text-decoration: none;
  letter-spacing: 2px;
 text-transform: uppercase;}
#menu a:hover{
  background: #FF8040; /* Kolor tła */
  color: #eee; /* Kolor czcionki */
  font-family: verdana; /* Czcionka stron */
  font-size: 6pt; /* Wielkość Czcionki */
  text-align: center; /*Wyśrodkowanie*/
  padding: 0px;
  text-decoration: none;
  letter-spacing: 2px;
 text-transform: uppercase;
 -moz-transition:all 2s;
 -webkit-transition:all 2s;
 -o-transition:all 2s;}

Efekt 4:

 Instrukcja:
1. Dodajecie gadżet HTML/JAVA SCRIPT i wklejacie to:
<div id="menu"><div class="strony">
<a href="link strony">Karta 1</a>
<a href="link strony">Karta 2</a>
<a href="link strony">Karta 3</a>
<a href="link strony">Karta 4</a>
<a href="link strony">Karta 5</a>
<a href="link strony">Karta 6</a>
<a href="link strony">Karta 7</a>
<a href="link strony">Karta 8</a>
</div>

2. Przechodzimy do arkusza CSS i wklejamy to:
#menu{
  z-index:100;
  line-height: 15pt;
  width:340px;
  top:0px;
  right: 0px;
  padding:0px;
 position:relative;}
#menu a:link{
  display: inline-block !important;
  background: #C0A090; /* Kolor tła */
  color: #eee; /* Kolor czcionki */
  font-family: verdana; /* Czcionka stron */
  font-size: 6pt; /* Wielkość Czcionki */
  width: 125px; /*Szerokość*/
  height: 19px; /*Długość*/
  text-align: center; /*Wyśrodkowanie*/
  padding: 0px;
  text-decoration: none;
  letter-spacing: 2px;
 text-transform: uppercase;}
#menu a:nth-child(1), #menu a:nth-child(4), #menu a:nth-child(5), #menu a:nth-child(8) {background:#80A0B0;}
#menu a:hover{
  background: #80C0FF; /* Kolor tła */
  color: #eee; /* Kolor czcionki */
  font-family: verdana; /* Czcionka stron */
  font-size: 6pt; /* Wielkość Czcionki */
  text-align: center; /*Wyśrodkowanie*/
  padding: 0px;
  text-decoration: none;
  letter-spacing: 2px;
 text-transform: uppercase;
 -moz-transition:all 2s;
 -webkit-transition:all 2s;
 -o-transition:all 2s;
transform:perspective(400px) rotateY(360deg);}
#menu a:nth-child(1):hover, #menu a:nth-child(4):hover, #menu a:nth-child(5):hover, #menu a:nth-child(8):hover {
  background: #2b667f;
  -moz-transition:all 2s;
  -webkit-transition:all 2s;
  -o-transition:all 2s;}

Brak komentarzy:

Prześlij komentarz