witaj!
Witam na moim blogu graficznym. Znajdziesz tutaj grafikę, dodatki czy instrukcje tworzone przeze mnie. Zanim pobierzesz cokolwiek, zapoznaj się z regulaminem. Szablon przystosowany do wyszukiwarek google chrome. przejdz do postów→
Welcome to my graphic blog. Here you will find graphics, resources and tutorials created by me. Before you download anything, read the rules. If you download something, let me know! go to the posts→

Etykiety

wszystkie -
grafika -
dodatki -
kody & szablony -
instrukcje -
111213 wyświetleń
54 postów
1511 komentarzy
192 obserwatorów

Popularne posty

7. Don’t lose hope and don’t let go

sygnature
Cześć! Na początku chciałam złożyć wam spóźnione życzenia świąteczne. Życzę wam radosnych, pogodnych i pełnych miłości świąt a także szczęśliwego nowego roku! Dziś w końcu można spokojnie usiąść po sprzątaniu i gotowaniu. O jak dobrze troszkę poleniuchować. Niestety będę tak tylko przez te 2 dni, gdyż w piątek u mnie kolęda. Jak ja się cieszę że w tym roku ksiądz przychodzi tak szybko, przynajmniej będę miała to z głowy. :D Szczerze nie cierpię tego całego czekania przez pół dnia aż przyjdzie. ;/ Obejrzałam już "Reign" i zgadzam się z waszymi opiniami na jego temat. Naprawdę świetny serial. Najbardziej mi się chyba podobał wątek z Clarisa i tym lasem. Już się nie mogę doczekać na kolejne odcinki. Tak samo niecierpliwie oczekuję na ciąg dalszy 3 sezonu Teen wolf. Po obejrzeniu tylu zwiastunów po prostu muszę to zobaczyć.:)
Notka dziś strasznie uboga w dodatki i grafikę, gdyż przez to całe przygotowywanie się do świat nie było czasu aby coś fajniejszego zrobić. Dziś mam tylko dwa nagłówki, z których nie jestem zbytnio zadowolona oraz cztery teksturki, które nie wyszły aż tak źle :) Poza tym mam jeszcze instrukcje na menu, o którą poproszono mnie w poprzednich notkach. Mam nadzieję, że instrukcja jest dość czytelna i zrozumiała. Od razu też przepraszam za liczne powtórzenia. To już wszystko na dziś. Pozdrawiam ;*
nothing Sparkling love
texture texture
texture texture
Jak zrobić menu z obrazkiem i ramkami jak ukazane jest poniżej?
Wchodzimy w układ i wybieramy dodaj gadźet "HTML/JavaScript" w nim wklejamy poniższy kod.
<div id="sidebar">
<div id="nav">
<a href="http://"><div id="navi" class="aa">link1</div></a>
<a href="http://"><div id="navi" class="b">link2</div></a>
<a href="http://"><div id="navi" class="c">link3</div></a>
<a href="http://"><div id="navi" class="d">link4</div></a>
<a href="http://"><div id="navi" class="e">link5</div></a></div>
<img class="pic" src="http://"/></div>
Kolorami oznaczyłam części kodu, które należy edytować. Przy kolorze niebieskim należy wkleić nasz link do którego będzie dany odsyłacz, fioletowy to zwykła nazwa odsyłacza a czerwony to link naszego obrazka. Kolejnym krokiem jest dodanie naszego kodu CSS, więc wchodzimy w zakładkę szablon, dostosuj, zaawansowane, dodaj arkusz CSS i wklejamy poniższy kod.

#sidebar {
width: 360px;
position: absolute;
height: 522px;
left: 150px;
top: 50px;
background-color: #000000;
border: 10px solid #000000;}
.pic {
width: 360px;
height:522px;
display: block;
position: absolute;}
#nav {
width: 360px;
position: absolute;
margin: -20px 15px;}
#navi {
float: left;
width:60px;
text-align: center;
font-family: consolas;
font-size: 10px;
text-transform: uppercase;
margin: 0 2px;
height: 10px;
line-height: 10px;}
.aa, .b, .c, .d, .e, .f {
background-color: #dfc981;color: #fff;border-top:0 solid #000;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;}
.aa:hover, .b:hover, .c:hover, .d:hover, .e:hover, #nav:hover .aa:hover {
background-color: #000;
color: #ffffff;
border-top: 10px solid #dfc981;}
Teraz po kolei co z czym współgra. Kolor oznaczony fioletem jest odpowiedzialny z tło które schowane jest za naszym obrazkiem, za to fragment zaznaczony na kolor żółty to nasza ramka. Najlepiej, żeby oba kody miały ten sam kolor. Kolejny kolor zaznaczony na niebiesko oznacza kolor tła naszego linka, zielony natomiast to kolor czcionki. Następny jest kolor różowy i on jest naszą ramką górną linku. Widać ją dopiero jak najedziemy na nasz link myszką, dlatego musi ona mieć dokładnie taki sam kolor jak tło po najechaniu myszką czyli nasz następny kod z kolorem czerwonym. Nasz ostatni kod (pomarańczowy) to ramka, która wystaje gdy nasz link zjedzie na dół. Aby edytować położenie gadżetu wystarczy pobawić się troszkę wartościami top i left w selektorze #sidebar. Jeśli chcemy zmienić rozmiar obrazka wystarczy edytować wartość width w selektorach #sidebar, #nav, .picheight w selektorach #sidebar, .pic.
No i gotowe jeśli coś jest niejasne, albo ktoś ma jakieś pytania lub czegoś nie wie pytać śmiało. Postaram się pomóc i odpowiedzieć na wszystkie pytania. :)

Safetysuit - What If

14 komentarzy:

  1. Śliczne nagłówki <3
    A instrukcja css bardo przydatna :)
    Pozdrawiam i wesołych świąt życzę<3

    OdpowiedzUsuń
  2. Sygnaturka na początku posta bardzo mi się spodobała.
    Nagłówki także ładne.
    Pobieram tekstury.
    Pozdrawiam, xslaveex. ;)

    OdpowiedzUsuń
  3. Zabieram textury <3
    Bardzo ładne nagłówki! Pierwszy szczególnie mi się spodobał.
    Przyznam, że ja też należę do tych osób, które strasznie urzekło Twoje menu, więc instrukcja jak najbardziej super pomysł, mam nadzieję wkrótce skorzystać <3
    Pozdrawiam ;*

    OdpowiedzUsuń
  4. Wow! Nagłówki są boskie. Ten pierwszy jest po prostu bezbłędny. Tekturki również mi się podobają, zwłaszcza te dwie ostatnie. Fajna instrukcja, może kiedyś spróbuję coś pokombinować z takim elementem :) Co do Reign. Cieszę się, że serial się spodobał. Ja dopiero wczoraj mogłam obejrzeć ostatni odcinek i muszę stwierdzić, że jak na zimowy finał jestem troszkę rozczarowana, ale widziałam już nowe zwiastuny i zapowiada się ciekawie :)
    Pozdrawiam serdecznie!

    OdpowiedzUsuń
  5. Hej ^^ Śliczne nagłówki zrobiłaś , ale moim faworytem jest nr 1 ;P uwielbiam tego typu prace :) Texturki ,także śliczne *-* ,a instrukcja pewnie przyda się wielu osobom , ponieważ jest bardzo dobrze wytłumaczona :D Pozdrawiam Jane ^^
    PS. pobrałam texturki do ikon z napisami z twojego poprzedniego posta :D na pewno je do czegoś wykorzystam ^^
    Jeszcze raz pozdrawiam !

    OdpowiedzUsuń
  6. Czy podasz materiały z poradnika?

    OdpowiedzUsuń
  7. Czy podasz materiały z poradnika?

    OdpowiedzUsuń

Archiwum