podpis 004 i jak go zrobić

rabbit heart

Karta postaci

relacje

telefon

A więc tak prezentuję się wyrób ostateczny. Całkiem prosty. Nie do końca wiedziałam czego byście chcieli to wydawało mi się idealnym kompromisem, który zadowoli większość i przy okazji zagłębimy się odrobinę w style css i klasy. Na początek zaczynamy od obrazka. Mamy 10px górne obramowanie + obrazek na 170px aby wszystko miało łącznie 180px wysokości no to piszemy.

<center><table><td><img src="link do obrazka" style="border-top:wysokość solid #kolor; height:xx px;"></td></table></center>

No i na ten moment mamy obrazek jedynie z ramką górną. Co generalnie jest niczym. Następnie tworzymy jeszcze trzy komórki na te trzy belki.

<center><table><td><img src="link do obrazka" style="border-top:wysokość solid #kolor; height:xx px;"></td><td></td><td></td><td></td></table></center>

Belki tak naprawdę są zbudowane tak samo różnią się jedynie kolorem i tekstem jaki mają w sobie więc zajmijmy się jedną belką. Potem jedynie to skopiujemy. Aby uzyskać taki efekt hover jak mamy powyżej. Że każda beleczka jest odnośnikiem a także po najechaniu pojawia nam się jakiś tekst musimy użyć klas i efektu hover, co umożliwia nam użycie stylu. Na sam początek robimy belkę z ramką, koniec.

<td><a href="http://"><div style="width: xx px; height: xx px; background-color: #kolor; position: relative; border-top: xx px solid #kolor;"></div></a></td>

Po pierwsze suma wysokości belki i wysokości obramowania musi się zgadzać z sumą obramowania i wysokości obrazka, żeby wysokość całości była taka sama. Ustawiamy position relative, ona będzie nam potrzebna później. Teraz przechodzimy do stylu musimy stworzyć dwie klasy. Jedna, która będzie tak jakby odpowiadała za ten efekt hover a druga będzie odpowiadać za to jak wygląda tekst. Zajmijmy się najpierw tą pierwszą.

<style type="text/css">.belka { opacity: 0; width: 25px; height: 170px;}.belka:hover { opacity: 1; width: 25px; height: 170px; background-color:jakie tło po najechaniu na belkę; color: tekstu po najechaniu na belkę; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;}</style>

I już tłumaczę po kolei. Najpierw ustawiamy .belka jako klasę wyjściową podstawową. Jako, że jest to na początku niewidoczne opacity ustawiamy na zero, wysokość i szerokość z tego co pisaliśmy tam wyżej. Potem piszemy znowu .belka ale dodajemy do tego komendę hover i wygląda nam to tak .belka:hover. Tutaj w nawiasach {} piszemy jak wygląda to miejsce po najechaniu czyli najważniejsze opacity:1; reszta dowolna no i ten taki "pseudobajer".

-moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;

To odpowiada za to w jakim czasie ze stanu wyjściowego dany element przechodzi w ten, który opisaliśmy w .belka:hover. Tak więc jeżeli mamy już to, zajęcie się tekstem to łatwizna. Tekst mamy przerotowany to jest chyba tutaj kwintesencją. W zależności od tego jak tam mamy wymiary musimy sobie dopasować położenie tekstu względem ramki. Tutaj polecam na jakimś generatorze się pobawić i dopasować bo na to po prostu nie ma reguły a jeżeli jest to się z chęcią o niej dowiem. U mnie wygląda to bynajmniej tak.

.tekst { width:180px; height: 25px; text-align: center; font-family: calibri; text-transform: uppercase; font-size: 8px; letter-spacing: 3px;-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg);position: relative; top: 80; left: -70;}

I teraz sklejamy to w jedną całość. Wszystkie klasy między znaczniki <style type="text/css"></style> Znowu u mnie wygląda to tak w całości.

<style type="text/css">.belka { opacity: 0; width: 25px; height: 180px; background-color: white;}.belka:hover { opacity: 1; width: 25px; height: 200px; background-color: white; color: #7C8DA7; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;}.tekst { width:180px; height: 25px; text-align: center; font-family: calibri; text-transform: uppercase; font-size: 8px; letter-spacing: 3px;-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg);position: relative; top: 80; left: -70;} </style>

Teraz pakujemy to wszystko do tego co napisaliśmy trochę wcześniej, czyli do tej naszej pojedynczej belki.

<td><a href="http://"><div style="width: 25px; height: 170px; background-color: #566780; position: relative;border-top: 10px solid #A83333;"><div class="belka"><div class="tekst">Karta postaci</div></div></div></a></td>

I po prostu kopiujemy to razy trzy. Ja każdą belkę dałam o odcień jaśniejszą i zmieniamy to w tej formule <div style="width: 25px; height: 170px; background-color: #566780; position: relative;border-top: 10px solid #A83333;"> i tak razy trzy

<td><a href="http://"><div style="width: 25px; height: 170px; background-color: #566780; position: relative;border-top: 10px solid #A83333;"><div class="belka"><div class="tekst">Karta postaci</div></div></div></a></td> <td><a href="http://"><div style="width: 25px; height: 170px; background-color: #607390; position: relative;border-top: 10px solid #A83333;"><div class="belka"><div class="tekst">relacje</div></div></div></a></td> <td><a href="http://"><div style="width: 25px; height: 170px; background-color: #6d809d; position: relative;border-top: 10px solid #A83333;"><div class="belka"><div class="tekst">telefon</div></div></div></a></td>

To do wspólnej tabeli i mamy tak naprawdę już prawie wszystko.

<table><tbody><tr><td><img src="http://25.media.tumblr.com/504b1001a06282e40b4fa4d7874315cb/tumblr_mmniqvjK6i1r8rx02o3_250.gif" style="height: 170;border-top: 10px solid #A83333;"></td> <td><a href="http://"><div style="width: 25px; height: 170px; background-color: #566780; position: relative;border-top: 10px solid #A83333;"><div class="belka"><div class="tekst">Karta postaci</div></div></div></a></td> <td><a href="http://"><div style="width: 25px; height: 170px; background-color: #607390; position: relative;border-top: 10px solid #A83333;"><div class="belka"><div class="tekst">relacje</div></div></div></a></td> <td><a href="http://"><div style="width: 25px; height: 170px; background-color: #6d809d; position: relative;border-top: 10px solid #A83333;"><div class="belka"><div class="tekst">telefon</div></div></div></a></td></tr></tbody></table>

Teraz w zależności od humoru możecie dodać tekst na samej górze, ale to już jak kto woli. Całość kodu w tej wersji, którą wam przedstawiam prezentuje się dokładnie tak, nie sprawdzałam jak wygląda to na forum więc jak coś tam nawala to mi powiedzcie poprawię to wtedy ;) ->

<style type="text/css">.belka { opacity: 0; width: 25px; height: 180px; background-color: white;}.belka:hover { opacity: 1; width: 25px; height: 200px; background-color: white; color: #7C8DA7; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;}.tekst { width:180px; height: 25px; text-align: center; font-family: calibri; text-transform: uppercase; font-size: 8px; letter-spacing: 3px;-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg);position: relative; top: 80; left: -70;} </style><link href="http://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet" type="text/css"> <center><div style="font-family: 'Sacramento', cursive;font-size: 60px;text-align: center;text-transform: lowercase;color: #A83333;text-shadow: -1px 0px 1px black;margin-bottom:2px;position: relative;">rabbit heart</div> <table><tbody><tr><td><img src="http://25.media.tumblr.com/504b1001a06282e40b4fa4d7874315cb/tumblr_mmniqvjK6i1r8rx02o3_250.gif" style="height: 170;border-top: 10px solid #A83333;"></td> <td><a href="http://"><div style="width: 25px; height: 170px; background-color: #566780; position: relative;border-top: 10px solid #A83333;"><div class="belka"><div class="tekst">Karta postaci</div></div></div></a></td> <td><a href="http://"><div style="width: 25px; height: 170px; background-color: #607390; position: relative;border-top: 10px solid #A83333;"><div class="belka"><div class="tekst">relacje</div></div></div></a></td> <td><a href="http://"><div style="width: 25px; height: 170px; background-color: #6d809d; position: relative;border-top: 10px solid #A83333;"><div class="belka"><div class="tekst">telefon</div></div></div></a></td></tr></tbody></table></center>

Jeżeli ktoś chce niech użycza, tylko niech mnie o tym poinformuje.
Jeżeli wam się to przydało to piszcie w komentarzach, jeżeli nie też piszcie dlaczego wam się nie przydało.
Postaram się co jakiś czas prace w ten sposób rozpisywać. Mam nadzieję, że zrozumiałe. Jeżeli czegoś nie rozumiecie znowu piszcie w komentarzach.
Jeżeli zrobicie dla siebie podpis w ten sposób pokażcie swoją pracę!

PONAD 2 TYSIĄCE WEJŚĆ.

DZIĘKUJĘ

A jeżeli ktoś lubi naszych siatkarzy i fokule tak bardzo lubi to tak po cichu podrzucę link do moich okropnych wypocin a nóż łyżka widelec komuś się spodoba a jak nie no to... Trudno, ale to naprawdę dobra odskocznia od for. Klik