Duży zestaw z Seleną.

Bierzesz=Piszesz! ; )

2 zestawy z Seleną.

Bierzesz=Piszesz! ; )

Ściana -pole postów - własny obrazek

Własny obrazek w polu gdzie jakis koleś wam napisze posta (zaokrąglony)

<style> .boxWall div.wall-box-b div.secondary-a {background:url("http://republika.pl/blog_ym_4982651/7723877/tr/13c_1290029685.png") ;} </style><style> .boxWall div.wall-box-b div.secondary-a {border-radius: 55px 55px 55px 55px;}</style>

obrazek na miejscu posta

Nowa..

Witam ;3

Jestem Marta mam 15 lat i będę razem z Mają prowadziła bloga ; )

Będę dodawała grafikę różnego rodzaju :D

Na początek:

3 zestawy z Miley:

Mam nadzieję że się podobają ; )

A i zasada BIERZESZ=PISZESZ! 

Film (chyba tło)

Nudziło mi się więc nagrałam taki film:






Zdjęcie:

Zaokrąglony nagłówek na blogu blogspot.com

Styl

<style>.Header #header-inner {border-radius: 55px 55px 55px 55px;}</style>

ustawiacie zaokrąglenie;


No i tyle, może dodam jakieś style jeszcze dla bloga xD
Chodź wole dla poszkola, ale nie mam pomysłów ;)

Pole z avkiem wysuwane z boku

Czyli jak, wiedziesz myszka to się wysunie xD

<div><div id="wysuwane" style="left: -15px; " class=""> <div id="wewnatrz" style="float:left;width:155px; display:block; margin-left:0px;"><img src="LINK" border="0"><br><br>TEKST<br>TEKST<br>  TEKST <br>TEKST <br>TEKST<br>TEKST<br>TEKST<br>TEKST<br>TEKST<br>TEKST<br> TEKST<br></div></div><style>#wysuwane{ background: url("LINK") no-repeat scroll 0 0 transparent; padding: 10px; width: 231px; height:395px; position: fixed; margin-top: -222px; /*połowa wysokości panelu w górę */ left: 0px; top: 50%; color: white; /* Kolor czcionki */ }.zamknij{ background-position: 0px 0px -333px 0px;} </style><script type="text/javascript"> $(function(){ $("#wysuwane").css("left","-211px"); $("#wysuwane").hover( function () { $("#wysuwane").stop().animate({left: "0px"}, 600 ); $(this).addClass("zamknij"); }, function () { $("#wysuwane").stop().animate({left: "-211px"}, 500 ); $(this).removeClass("zamknij"); });}); </script></div>

Link do avatara na wyświetlanym pasku


Tam gdzie pisze TEKST wpisujecie tekst jaki ma się wyświetlać na wysuwanym pasku, odstęp między nimi <br> oznacza, że kolejny tekst będzie na dole. Jeśli chcecie mieć więcej przerw na pisanie tekstu na dole piszecie jeszcze raz <br> i tyle.


Tu dajecie link na tło wysuwanego paska, ale tak żeby miał odpowiedni kształt, przykłady: http://s4.ifotos.pl/img/topng_rphhper.png
http://s3.ifotos.pl/img/to-3png_rphhpwn.png
http://s4.ifotos.pl/img/to-1png_rphhpsh.png
http://s3.ifotos.pl/img/to-2png_rphhpss.png

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