niedziela, 4 marca 2012

Pole tekstowe - priv wysuwane z dołu

To takie pole tekstowe, które ukazuje się, gdy chcemy wysłać  komuś wiadomość priv. wysuwane na stronie u dołu z lewej strony xD

KoD:



<ul class="okno_priv">
<form id="messageForm" method="post" action="/wiadomosci/wyslij/do/numer strony" class="psform">
   <fieldset>
    <legend>Nowa wiadomość</legend>
    <p>
     <label for="receiver_name">Odbiorca:</label>
     <input type="hidden" id="receiver_id" name="receiver_id" value="numer strony" />
     <input type="text" disabled="true" size="80" name="receiver_name" id="receiver_name" value="nick;" />
    </p>
    <p>
     <label for="message">Twa Informacja:</label>
     <textarea rows="3" cols="60" name="message" id="message">wiadomość</textarea>
    </p>

    <p class="submit">
     <input type="submit" class="submit" name="submit" value="wyślij" />
     <input type="hidden" name="token" value="e146a828b7a53b784a734abf26778142" />
     <input type="hidden" name="time" value="1330893333.09" />
    </p>
   </fieldset>
   </form>
<style>ul.okno_priv {position: fixed; left: -325px; bottom: -200px; -webkit-transition-duration: 1s;}</style>
<style>ul.okno_priv:hover {position: fixed; left:5px; bottom: 0px; -webkit-transition-duration: 1s;}</style>
<style>ul.okno_priv {background:url("http://tapety.joe.pl/tapeta/wzory/inne/czarny-wzor.jpg") ;}</style>
<style>.psform p.submit {
border-top: solid 1px transparent;}</style>
<style>.psform p.submit input.submit{
 width: 250px;
 background: url('http://www.amaki.pl/site_media/products/colors/kolor_bialy.jpg') no-repeat;} .psform p.submit input.submit {color: black;}</style>
<style>ul.okno_priv{box-shadow:5px 5px 5px 5px white;}
.psform p input, .psform p select, .psform p textarea {border-radius:5px 5px 5px 1px;}
.psform p input, .psform p select, .psform p textarea {width: 190px;}
.psform p input, .psform p select, .psform p textarea {box-shadow:1px 1px 1px 1px blue;}
ul.okno_priv:hover {box-shadow:5px 5px 5px 1px blue;}
.psform p label {width: 100px;}
.psform p.submit {padding: 20px 0 0 100px;}
</style>


numer strony - to wpisujemy swój numer strony
nick - wpisujemy swój nick
blue - wpisujemy kolor obramowanie po najechaniu

To do dupy kod, bo przerobiłam go z tamtego okna, gdyż robiłam go na szybkiego xD




Strona do góry nogami 3 sposoby.

1 sposób.
Strona "do góry nogami"

Kod:
<style>html {-webkit-transform: rotate(180deg);}</style>

2. sposób
Strona "do góry nogami" po najechaniu

Kod:

<style>html:hover {-webkit-transform: rotate(180deg);}</style>

3. sposób..
po najechaniu strona obraca się "do góry nogami "

Kod:
<style>html:hover {-webkit-transform: rotate(180deg); -webkit-transition-duration: 1s;}</style>

Hahahahahaha xD