tutorial lekcja 1

PROFILE FABULARNE - KURS HTML I CSS - LEKCJA I Postaram się w kilku lekcjach przytoczyć wszystko co może być przydatne w tworzeniu zacnych i zjawiskow...

5 downloads 331 Views 616KB Size

PROFILE FABULARNE - KURS HTML I CSS - LEKCJA I Postaram się w kilku lekcjach przytoczyć wszystko co może być przydatne w tworzeniu zacnych i zjawiskowych zakładek Twojego profilu fabularnego. Po tym tutorialu będziesz posiadać wiedzę wystarczającą do stworzenia własnego szablonu. Będę w tym celu starał się jako tako objaśniać stosowane elementy sam, bądź kradnąc te objaśnienia z internetów. Spróbujemy od podstaw zbudować layout z stylu zaprezentowanych tych obok, czyli z ramką, tłem obrazkowym, kolorowymi czcionkami, cieniami, szmerami bajerami i trzaskające laserami. Zacznijmy dzisiaj od tła i ramek. Pierwszym krokiem jest wejście do trybu html, bez niego ani rusz. Pojawia nam się pusty edytor. Tworzymy pierwszy „pojemnik" na nasz szablon używając znacznika

(nawet nie myśl o layoucie opartym na tabelkach) i pierwszy, jakikolwiek akapit tekstu

Code:

treść naszej zakładki



Jako że nie możemy stosować wszystkich sztuczek html i css, musimy nadawać styl każdemu elementowi z osobna, robimy to za pomocą atrybutu style. Rozmiary i odległości wyrażamy w pikselach, dopisując po wartości px. Kolejne właściwości oddzielamy od siebie średnikiem ; W pierwszym kroku przydadzą nam się takie właściwości css jak: width: rozmiar

szerokość

height: rozmiar

wysokość

margin: szerokość

margines

border: szer. typ kolor

ramka

padding: szerokość box-shadow: x y blur kolor background-color: kolor background-image: url('adresobrazka.jpg')

margines wewnętrzny cień pod boxem (np. pod div'em) kolor tła obrazek tła

po dokładniejsze informacje i przykłady, zapraszam do specyfikacji na http://www.w3schools.com/css/default.asp

Obecnie na Radiation mamy do dyspozycji na profile fabularne nieco więcej niż 500 pikseli, to nam w zupełności wystarczy. Ustawiamy szerokość naszego szablonu na 500 px i centrujemy go korzystając z właściwości margin:0 auto; Code:

treść naszej zakładki



Dodajemy kolor tła bądź grafikę (w następnej lekcji), by nie skazywać Cię na wklepywanie kolorów w stylu: red, pink, blue, yellow etc. listę podstawowych kolorów w hexie zamieszczam na samym dole, skopiuj sobie i przeklej, poprzedzając kod koloru krzyżykiem #. Code:

treść naszej zakładki



Dodajmy teraz do swojego „arkusza” drobną ramkę i padający pod nią cień. Jesteśmy już blisko końca lekcji, zaraz będziemy mogli obejrzeć efekty naszej niezbyt ciężkiej pracy ;] Więcej o cieniu znajdziesz tutaj Code:

treść naszej zakładki



Teraz pozostaje nam już tylko ustalić kolor czcionki w naszym szablonie dzięki color i opcjonalnie ustalić jakiś cień dzięki text-shadow, później odepchnąć tekst wewnątrz naszego „pojemnika” od krawędzi, stosując właściwość padding. Możemy skorzystać z dwóch (ba, nawet czterech CSS Padding) możliwości użycia tejże właściwości. padding: 10px

- tak ustalamy wewnętrzny margines na 10 pikseli z każdej strony.

padding: 10px 30px

- tak ustalamy odsunięcie od górnej krawędzi o 10px i od bocznych krawędzi o 30px

Uwaga! padding rozszerza nam ramkę, w której dany element się znajduje. w jakiej kolejności, gdzie i za co odpowiadają posczególne właściwości możesz zobaczyć obok. Code:

treść naszej zakładki



Na dzisiaj tyle wystarczy, efekt końcowy dzisiejszej lekcji znajdziesz obok. Pozdrawiam i do następnego razu. Laguna

000000

000033

000066

000099

0000cc

0000ff

003300

003333

003366

003399

0033cc

0033ff

006600

006633

006666

006699

0066cc

0066ff

009900

009933

009966

009999

0099cc

0099ff

00cc00

00cc33

00cc66

00cc99

00cccc

00ccff

00ff00

00ff33

00ff66

00ff99

00ffcc

00ffff

330000

330033

330066

330099

3300cc

3300ff

333300

333333

333366

333399

3333cc

3333ff

336600

336633

336666

336699

3366cc

3366ff

339900

339933

339966

339999

3399cc

3399ff

33cc00

33cc33

33cc66

33cc99

33cccc

33ccff

33ff00

33ff33

33ff66

33ff99

33ffcc

33ffff

660000

660033

660066

660099

6600cc

6600ff

663300

663333

663366

663399

6633cc

6633ff

666600

666633

666666

666699

6666cc

6666ff

669900

669933

669966

669999

6699cc

6699ff

66cc00

66cc33

66cc66

66cc99

66cccc

66ccff

66ff00

66ff33

66ff66

66ff99

66ffcc

66ffff

990000

990033

990066

990099

9900cc

9900ff

993300

993333

993366

993399

9933cc

9933ff

996600

996633

996666

996699

9966cc

9966ff

999900

999933

999966

999999

9999cc

9999ff

99cc00

99cc33

99cc66

99cc99

99cccc

99ccff

99ff00

99ff33

99ff66

99ff99

99ffcc

99ffff

cc0000

cc0033

cc0066

cc0099

cc00cc

cc00ff

cc3300

cc3333

cc3366

cc3399

cc33cc

cc33ff

cc6600

cc6633

cc6666

cc6699

cc66cc

cc66ff

cc9900

cc9933

cc9966

cc9999

cc99cc

cc99ff

cccc00

cccc33

cccc66

cccc99

cccccc

ccccff

ccff00

ccff33

ccff66

ccff99

ccffcc

ccffff

ff0000

ff0033

ff0066

ff0099

ff00cc

ff00ff

ff3300

ff3333

ff3366

ff3399

ff33cc

ff33ff

ff6600

ff6633

ff6666

ff6699

ff66cc

ff66ff

ff9900

ff9933

ff9966

ff9999

ff99cc

ff99ff

ffcc00

ffcc33

ffcc66

ffcc99

ffcccc

ffccff

ffff00

ffff33

ffff66

ffff99

ffffcc

ffffff

Subscribe

© Copyright 2013 - 2019 AZDOC.PL All rights reserved.