wtorek, 16 lipca 2013

Czarno-białe miniaturki gliterów (po najechaniu kolorowe)

Dziś postanowiłem dodać kod na takie miniaturki:

Przed najechaniem:


Po najechaniu (pierwszy gliter):


Kod:

.smallImg {-webkit-filter: grayscale(1);-moz-filter: grayscale(1);-o-filter: grayscale(1);-ms-filter: grayscale(1);-webkit-transition:all 300ms;-moz-transition:all 300ms;-o-transition:all 300ms;-ms-transition:all 300ms;}.smallImg:hover {-webkit-filter: grayscale(0);-moz-filter: grayscale(0);-o-filter: grayscale(0);-ms-filter: grayscale(0);}



poniedziałek, 15 lipca 2013

Upragnione wysuwane menu

Cześć! Dawno mnie nie było... Jednak postanowiłem udostępnić wam ten kod. :D

Uwaga! Usunąłem przycisk "WYSPA". 


Kod:

#pToffg [href="wszystkie-kategorie"]:hover, #pToffg [href="rankingDay.php"]:hover, #pToffg [href="gry"]:hover, #pToffg [href="dowcipy"]:hover, #pToffg [href="tablica"]:hover, #pToffg [href="forum.php"]:hover, #pToffg [href="wiersze"]:hover, #pToffg [href="all_contests.php"]:hover, #pToffg [href="pytajka"]:hover {top: 59px !important;}#pToffg div {color: #E6E6E6;font-size: 13px;top: 55px !important;position: relative;left: 10px;}.hand img {opacity: 0;}#pToffg a span.onFriends {visibility:hidden;}#pToffg a span {border-right: 1px solid rgba(0, 182, 233, 0);background:transparent !important;}.hmCont {left: 50px;top: -60px;background: transparent;width: 1000px;position: fixed;height: 34px;z-index:999999999;}#pToffg [href="rankingDay.php"] {-webkit-transition:all 300ms;-moz-transition:all 300ms;-o-transition:all 300ms;-ms-transition:all 300ms;border: 1px solid #DADADA !important;background-size: 70% !important;border-radius: 0 0 10px 10px;border: 1px solid #DADADA;left: 135px;position: absolute;height: 100px;width: 100px;background: url(http://cdn1.iconfinder.com/data/icons/SEO-sampler/rank_64.png) #464646 no-repeat 15px -8px !important;padding-left: 10px;background-size: 70% !important;box-shadow: 0 0 5px black;}#pToffg [href="wszystkie-kategorie"] {-webkit-transition:all 300ms;-moz-transition:all 300ms;-o-transition:all 300ms;-ms-transition:all 300ms;border: 1px solid #DADADA !important;background-size: 70% !important;border-radius: 0 0 10px 10px;border: 1px solid #DADADA;left: 10px;position: absolute;height: 100px;width: 100px;background: url(http://cdn1.iconfinder.com/data/icons/cologne/32x32/category.png)#464646 no-repeat 35px 9px !important;padding-left: 10px;background-size: 40% !important;box-shadow: 0 0 5px black;}#pToffg [href="tablica"] {-webkit-transition:all 300ms;-moz-transition:all 300ms;-o-transition:all 300ms;-ms-transition:all 300ms;background-size: 70% !important;border-radius: 0 0 10px 10px;border: 1px solid #DADADA;left: 1000px;position: absolute;height: 100px;width: 100px;background: url(http://cdn1.iconfinder.com/data/icons/checkout-icons/48x48/clipboard.png)#464646 no-repeat 30px 4px !important;padding-left: 10px;box-shadow: 0 0 5px black;}#pToffg [href="all_contests.php"] {--webkit-transition:all 300ms;-moz-transition:all 300ms;-o-transition:all 300ms;-ms-transition:all 300ms;border: 1px solid #DADADA !important;background-size: 70% !important;border-radius: 0 0 10px 10px;border: 1px solid #DADADA;border-radius: 0 0 10px 10px;left: 880px;position: absolute;height: 100px;width: 100px;background: url(https://cdn3.iconfinder.com/data/icons/abstract-1/512/competition-64.png)#464646 no-repeat 25px -4px !important;padding-left: 10px;box-shadow: 0 0 5px black;}#pToffg [href="pytajka"] {-webkit-transition:all 300ms;-moz-transition:all 300ms;-o-transition:all 300ms;-ms-transition:all 300ms;border: 1px solid #DADADA !important;background-size: 70% !important;border-radius: 0 0 10px 10px;border: 1px solid #DADADA;border-radius: 0 0 10px 10px;left: 755px;position: absolute;height: 100px;width: 100px;background: url(http://cdn1.iconfinder.com/data/icons/fatcow/32x32/ask_and_answer.png)#464646 no-repeat 35px 10px !important;padding-left: 10px;box-shadow: 0 0 5px black;}#pToffg [href="wiersze"] {-webkit-transition:all 300ms;-moz-transition:all 300ms;-o-transition:all 300ms;-ms-transition:all 300ms;border: 1px solid #DADADA !important;background-size: 70% !important;border-radius: 0 0 10px 10px;border: 1px solid #DADADA;left: 635px;position: absolute;height: 100px;width: 100px;background: url(http://cdn1.iconfinder.com/data/icons/humano2/48x48/apps/poedit.png)#464646 no-repeat 35px 5px !important;padding-left: 10px;box-shadow: 0 0 5px black;}#pToffg [href="forum.php"] {-webkit-transition:all 300ms;-moz-transition:all 300ms;-o-transition:all 300ms;-ms-transition:all 300ms;border: 1px solid #DADADA !important;background-size: 70% !important;border-radius: 0 0 10px 10px;border: 1px solid #DADADA;left: 510px;position: absolute;height: 100px;width: 100px;background: url(http://cdn2.iconfinder.com/data/icons/minicons/Png/Char.png)#464646 no-repeat 30px 10px!important;padding-left: 10px;box-shadow: 0 0 5px black;}#pToffg [href="dowcipy"] -webkit-transition:all 300ms;-moz-transition:all 300ms;-o-transition:all 300ms;-ms-transition:all 300ms;border: 1px solid #DADADA !important;background-size: 70% !important;border-radius: 0 0 10px 10px;left: 385px;position: absolute;height: 100px;width: 100px;background: url(http://cdn1.iconfinder.com/data/icons/free_windows7_icons_emoticons/64/laughtingoutloud.png)#464646 no-repeat 25px 0px !important;padding-left: 10px;box-shadow: 0 0 5px black;} #pToffg [href="gry"] {-webkit-transition:all 300ms;-moz-transition:all 300ms;-o-transition:all 300ms;-ms-transition:all 300ms;border: 1px solid #DADADA !important;left: 260px;position: absolute;height: 100px;width: 100px;background: url(http://cdn1.iconfinder.com/data/icons/ilb/Cute%20Ball%20-%20Games.png)#464646 no-repeat 25px 5px !important;padding-left: 10px;background-size: 70% !important;border-radius: 0 0 10px 10px;box-shadow: 0 0 5px black;}#pToffg [href="island2013.php"] {display: none;}


Wklejacie do zakładki CSS PRO i GOTOWE! (To co zaznaczone na ŻÓŁTO możecie zmienić, #464646 to jest kolor przycisku, gdy już zmieniacie to NAJLEPIEJ wszystkie #464646 na inny kolor)

Style by Sasuke.

poniedziałek, 10 września 2012

Chcecie? - Bardzo fajne menu w stylu zakładek.


Pasek - bardzo fajny. Tu pomógł mi trochę Bartik.
Menu w pełnej wersji zobaczycie na moim drugim profilu-




Każdy przycisk wysuwa się cały po najechaniu - Przykład:
Kod jest BARDZO długi. 



środa, 29 sierpnia 2012

Miano moderatora/administratora itd (własne!)

Wymiary obrazka z napisem "moderator"itd. to tutaj 328x30px

kod:


.high {
width: 328px;
padding-top: 10px;
background: url(link do obrazka) no-repeat;
height: 30px;
}


Długi opis - na prośbę

Długi opis - każdy kapuje.

Kod:



.n_leftcontainer {position: relative;top: 110px;}.pstatus {width: 979px;right: 340px;}

piątek, 10 sierpnia 2012

Wysuwane z boku O mnie

Przed najechaniem:


Po:


Najpierw dodanie tekstu i obrazka

<div class="about"><img src="link do obrazka"><br>Imię:---<br>Wiek:---<br>Pseudo:---</div>

Czerwone - można usunąc i wkleic do CSS PRO

Teraz obróbka:

<style>.about {color:white !important;background: rgba(0, 0, 0, 0.75);position: fixed;top: 200px;left: -170px;padding: 20px 50px 20px 40px;border: 1px dashed black;box-shadow: 0 0 10px black;-webkit-transition:all 700ms;-o-transition:all 700ms;-ms-transition:all 700ms;moz-transition:all 700ms;}</style>

<style>.about:hover {top: 200px;left: 0px;}</style>

Azusa miała coś takiego na swoim innym koncie, ale ja zrobiłem to sam.

Sasuke.


About me.

Jak chcieliście :

Najpierw przy nicku:

.n_pnick span:after {content: "WŁASNY TEKST";color: black;font-size: 10px !important;}

Teraz na dole:

Nagłówek (większe litery)


.high::before {content: "About me.";color: black;font-size: 18px;font-weight: bold;}


Tekst:


.high:after {content: "Własny tekst";color: black;font-size: 12px !important;}