Bloki - drugie tło

Czyli jak masz półprzezroczyste tło to tym stylem mieć jeszcze drugie tło pod tym tłem co masz xD

Styl:

<style>div.blockItem {background: url(LINK)no-repeat;}</style>

LINK- link to drugiego tła

I.. tyle

A propo nie będzie więcej notek jak nie dacie pomysłów na style.

Bloki - 2 tło po najechaniu

Tzn. gdy wiedziesz na blok myszką to jemu pojawi się drugie przez  ciebie wybrane tło. Ale pamiętajcie tło bloku musi być przezroczyste lub pół przezroczyste, np: takie 

Styl:

<style>div.blockItem:hover {background: url(LINK)no-repeat;}</style>

W pole gdzie jest napisane LINK dajecie link do obrazka drugiego tła

Przed najechaniem

Po najechaniu

Mini Menu wysuwane

<ul id="Petersoni_menu"><li><div><script>$(function() { $("#panel").css("left", "-70px"); $(".slide_button").toggle(function() { $("#panel").animate({ left: "1140px" }, 500); $(this).addClass("zamknij"); return false; }, function() { $("#panel").animate({ left: "-70px" }, 500); $(this).removeClass("zamknij"); return false; });});</script><div id="panel" style="left: 0px; "> <ul id="main_menu"> <li><a href="http://poszkole.pl/strona">Strona</a></li> <li><a href="http://poszkole.pl/strona/komponenty">Komponenty</a></li> <li><a href="http://poszkole.pl/przyjaciele">Przyjaciele</a></li> <li><a href="http://poszkole.pl/klasy">Klasy</a></li> <li><a href="http://poszkole.pl/grupy">Grupy</a></li> <li><a href="http://poszkole.pl/galerie">Galerie</a></li> <li><a href="http://poszkole.pl/wiadomosci">Wiadomości</a></li> <li><a href="http://poszkole.pl/profil">Profil</a></li> </ul> <a href="#" class="slide_button zamknij">Menu</a></div><style>#panel{ background:url(LINK); border: 3px inset #AAAAAA; padding: 8px; width: 70px; position: fixed; margin-top: -200px; left: 0px; top: 50%; }ul#main_menu{ list-style: none; }#main_menu a{ font: bold 13px Arial; color: #ffffff; text-decoration: none;}#main_menu a:hover{ text-decoration: underline;}#panel{box-shadow: 0 0 5px 2px #ffffff;}.slide_button { background: url(LINK); display: block; height: 63px; text-indent: -9999px; width: 15px;  position: absolute; right: -18px; top: 0px;}.zamknij { background-position: -16px 0px; } a:focus { outline:none; } </style></div>

Tekst jaki dajecie, aby podpisać załącznik do m.in. strony, grup itd.

Link zdjecia do przesuwanego paska, np:http://s2.ifotos.pl/img/meni-pasd_hqsasep.png

Link tła do menu

Kolor tekstu

Wielkość podświetlenia

Kolor podświetlenia


Ustawiacie odległość. Czyli ile wysunie się mini menu w prawą strone

Po naciśnięciu na pasek ,,nawigacji''

Przyjaciele - po prawej stronie

Styl:

<style>div.person, div.smallperson {float: right;}</style>

Dajcie pomysły na style =D

Zestaw z Selena ! XD

( Kliknij będzie większe )

Podobają się ? XD

BIERZESZ - PISZESZ ! XD

2 style XD

Siema jestem Weronika i będę współprowadziła tego bloga :) teraz dodam 2 style XD

Pierwszy na obracany avatar w znajomych  a drugi na obracany avatar w info o mnie :

Pierwszy - <style>.boxFriends img {-webkit-transform: rotate(360deg); -webkit-transition-duration: 0,1s; border-radius: 35px;}.boxFriends img:hover { -webkit-transform: rotate(0deg); -webkit-transition-duration: 0,1s; border-radius: 35px;}</style>

Drugi - <style>.boxUserinfo img {-webkit-transform: rotate(360deg); -webkit-transition-duration: 0,1s; border-radius: 35px;}.boxUserinfo img:hover { -webkit-transform: rotate(0deg); -webkit-transition-duration: 0,1s; border-radius: 35px;}</style>

Oczywiście BIERZESZ - PISZESZ ! XD

Dziękuje ;P

Brushe- Kratka

Gdyby ktoś nie umiał zrobić kratki na swojej grafice (np. blendzie), albo by nie posiadał do tego programu. Daje gotowe brushe - kratka, które wystarczy założyć na grafike xD


Czarne brushe

Białe brushe

Tak wygląda blend (nie mój) przed założeniem brushy

A tak po założeniu brushy

Powiększcie sobie ten blend żeby zobaczyć wyraźniej











A co do styli - nie dodam, bo nie mam pomysłu ;/

Zakrzywiona cała strona

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

liczba zakrzywienia


Biega o to, ze caała strona jest zakrzywiona.. Coś jeszcze tak zakrzywić, czy coś ;D Piszcie

Zakrzywione bloki xD

Ten styl zakrzywia wszystkie bloki na stronie 

<style>div.blockItem {-webkit-transform: rotate(4deg);}</style>

Liczba zakrzywienia

Ściana - pole tekstowe - takie coś

Jak się najedzie myszką zmieni się obrazek w tym polu

<style>.boxWall div.wall-box-a div.secondary-a input.input-a:hover {background: url(LINK) no-repeat;}</style>

Link do obrazka ;D


Jeśli chcecie styl na to, że jak się najedzie myszą na avatar to się on zmieni na inny obrazek wchodźcie tu KLIK

Ściana - pole do tekstu - swój obrazek

Możliwe, ze juz taki styl gdzieś jest

<style>.boxWall div.wall-box-a div.secondary-a input.input-a {background:url("LINK") ;}</style>

Niedługo dodam jakieś nowe menu, ale jeszcze go nawet nie zaczęłam, ale mam na niego pomysł xD

Ściana - dodaj komentarz - brak ikonki

Styl
<style>.boxWall div.wall-box-b div.secondary-a p.add-comment-a a {background: none;}</style>

I tyle, nic dodać nic ująć xD

Ściana - dodaj komentarz - inna ikonka

Styl

<style>.boxWall div.wall-box-b div.secondary-a p.add-comment-a a {background: url("LINK") no-repeat;}</style>

Daje wam na przykład taką ikonkę jak ja mam na stronie

Ściana- Odstęp między avatarami

Styl

<style>.boxWall div.wall-box-b {padding: 7px;}</style>

Odlęgłość między avatarami;




Piszcie jakie chcecie style, nie mam pomysłu xD

Animka na przezroczystym tle

Taką Animke na przezroczystym tle można wstawiać na jakie tylko chce się tło xD Wiesz, że to nazywa się Render, ale ja wole mówić, że to po prostu obrazek na przezroczystym tle ;D

  

Stopka - zaokrąglona

A wiec nikt nie dodaje komentarzy i sądze,z e nikt tu też nie wchodzi. Ale są pewnie ludzie, którzy potrzebują różnych styli, więc mam dla was styl na zaokrągloną stopkę ;D

<style>#footer {border-radius: 55px 55px 55px 55px;}</style>

Wielkość zaokrąglenia

  

Sondy fajne style :]

Tekst po prawej stronie : <style>.mypoll.mypoll .poll_answer label {text-align: right;}</style>

Pole obrysowane [ładnie wygląda] : <style>div.boxPoll .mypoll {border: 1px dotted fuchsia;}</style>

Zamiast białego tła jakieś ładne tło [obrazek] : <style>div.boxPoll .mypoll {background: url(tło O____o) !important}</style>

Style od Mai : ] mój prof : http://poszkole.pl/strona/26928741/

Po 5 komach nowa notka :3

Maja

Sondy - kolor paska

Kolor paska w sondach

<style> div.boxPoll .mypoll .poll_answer span.poll_bar {background: #ffffff;}</style>

Kolor paska

 

Sondy- czcionka - zmiana koloru

Zmiana koloru głównego tekstu w bloku Sondy

<style> div.boxPoll .mypoll p.poll_question {color: #ffffff;}</style>

Kolor czcionki

Kolor nad wykresem

<style> div.boxPoll .mypoll .poll_answer label.result  {color:#ffffff;}</style>

Kolor czcionki

Kolor procentów w Sondach

<style> div.boxPoll .mypoll .poll_answer span.poll_answervalue  {color: #ffffff;}</style>

Kolor czcionki

Całość wygląda tak:

 

Sondy - kolor tła

Kod

<style>div.boxPoll .mypoll {background: transparent;}</style>

Kolor tła

  

Ściana - Avki xD

Ramka w Avatarach w ścianie

<style>div.primary-a p img { border: 1px solid #ffffff; padding: 3px;}</style>

Szerokość ramki

Kolor ramki

Odległość między ramką a avatarem

  

Skrócenie bloków

Skrócenie wszystkich bloków jednym kodem nie za dobrze wygląda, bo wszystkie bloki są jednakowej długości i nie do wszystkich bloków przecież pasuje jednakowa wielkość. Poza tym większosć bloków nie da się tak  skrócić. A Ściane lepiej skrócić zwykłym sposobem, czyli wejsć w USTAWIENIA i skrócić. Ale dam na to skrócenie kod:

<style>div.blockContent{height:88px;}</style>

Zmieniacie długość

KOD NA POJEDYNCZE SKRACANIE

Nie wszystkie bloki da się skrócić!!! Skrócą się, ale będą działać nie poprawnie. Tylko kilka w taki sposób bloków da się skrócić

<style>.TU WPISUJECIE CO CHCECIE SKRÓCIĆ{height: 88px;}</style>

Zmieniacie długość

Czyli jeśli chcecie skrócić:

Blok Rodzina -div.boxFamily div.blockContent

I pamiętajcie, że maksymalna długość moze  blok mieć taką jaka długość ma tło bloku!!!!

Piszcie co chcecie skrócić to zobacze czy da sie je skrócić i je dopisze, ok? ;**

Związki - zmiana szerokości

 Ten kod skraca lub przedłuża blok związki. Maksymalną długość możecie ustawić, taką jaką długość ma tło bloku.

<style>.relationship {height: 88px;}</style>

Zmieniacie długość ;D

  

Ściana - Avki

Ramka avka w ścianie, taka jak tu

  

<style>div.primary-a p img {border-bottom-width: 1px;border-bottom-style: solid;border-left-width: 1px;border-left-style: dashed;border-right-width:1px;border-right-style: dashed;border-top-width: 1px;border-top-style: solid;color: #ffffff;}</style>

Możecie się tym stylem trochę pobawić xD

Rodzina - przycisk - 3 style

Dam wam kilka styli na przycisk w rodzince

Przycisk po lewej stronie

<style>#become-par .mainbox a.sign-up {float: left;}</style>

Własny obrazek w przycisku

<style>#become-par .mainbox a.sign-up {background: url(LINK) no-repeat;}</style>

Zaokrąglony przycisk

<style>#become-par .mainbox a.sign-up {border-radius:0px 0px 55px 0px}</style>

Inne rodzaje obramówki w dodaj komentarz (komentarze)

Styl Michała

28 września 2011 Inne rodzaje obramówki w dodaj komentarz (komentarze)

<style>#submit {background: transparent;border-left: #ffffff 1px solid;border-right: #ffffff 1px solid;border-top: #ab23fa 1px dashed;border-bottom: #ab23fa 1px dashed; }</style> Jedynie odznaczyłem grubość obramowania, kolor i rodzaj, poradzicie sobie, myślę, że znacie rodzaje obramowań z innych blogów. Michał

Ściana - avatary - zaokrąglone

Jeśli gdzieś widzieliście takie style, to musiałam nie zauważyć xD Zrobiłam to, bo jedna osoba mnie o to prosiła ;***

Na zaokrąglenie głównego avatara w ścianie

<style>.boxWall div.wall-box-a div.primary-a img {border-radius:5px 5px 5px 5px;}</style>

Zmieniacie sobie wielkość zaokrąglenia

Na zaokrąglenie avatarów w całej ścianie :D 

Niestety nie zrobiłam jeszcze stylu, na zaokrąglenie avków w ścianie znajomych

<style>div.boxWall div.blockContent div.primary-a p img {border-radius:8px 5px 8px 5px;}</style>

Zmiana wielkości

Ściana - avatar-zmiana wielkości

To nie do końca udany styl. Wstawiam jego jakby prototyp, jak uda mi sie go ulepszyć, to wstawie tu lepszą wersje xD

Na tym prototypie niestety avatar jest rozmazany przy powiększeniu i zachodzi pod pole tekstowe i przycisk

<style>.boxWall div.wall-box-a div.primary-a img {border-width:1px; height:120px; width:120px; } #userleft div.avatar img</style>

Wielkość avatara

Wielkość ramki, ale chyba jak ktoś ją ma

 

Info o mnie- zmiana długości

Ten kod przedłuża lub skraca blog Info o mnie xD

<style>div.boxUserinfo div.blockContent {width:955px;}</style>

Możecie zmieniać długość

  

Ściana- krzyżyk po lewej stronie

Wklejacie kod i krzyżyk w ścianie macie po lewej stronie

<style>.boxWall div.wall-box-b div.secondary-a p.close-a  {border-width; width:459px; }</style>

Możecie wpisać tu , np: 300px, a krzyżyk będzie na środku

  

Stopka - swój obrazek

Bez dłuższego rozpisywania się, biega mi o to, że w stopce możecie sobie ustawić tło jakie tylko chcecie

<style>#footer {background:url("link") ;}</style>

   

Ściana-pole tekstowe-zmiana wielkości

Styl wygląda tak

<style>.boxWall div.wall-box-a div.secondary-a input.input-a {width: 200px;height: 50px;}</style>

width- długość

height- szerokość

Ustawiacie długość i szerokość pola

  

A żeby było jeszcze lepiej pole tekstowe przenieście na prawą strone

<style>.boxWall div.wall-box-a div.secondary-a input.input-a {float: right;margin-right: 10px;}</style>

 

Ściana - pole do tekstu - zmiana koloru xD

Chyba ktoś chciał taki kod ;D

<style>.boxWall div.wall-box-a div.secondary-a input.input-a {background-color: #2d7ffa;}</style>

Zmieniasz kolor na jaki chcesz. Jeśli chcesz przezroczysty to wpisujesz: transparent

  

I do tego możecie sobie ustawić przezroczystość tego pola tekstowego tym stylem

<style>.boxWall div.wall-box-a div.secondary-a input.input-a {opacity: 0.2;}</style>

Ustawiacie przezroczystość