9 lipca 2015

Style ramek, pozycje, strony, grubość, pozycjonowanie


Dzisiaj coś co jest bardzo przydatną rzeczą, to tworzenia wyglądu swojego bloga a mianowicie pozycje, style oraz strony.

Jakie mamy style ramek?
A mianowicie takich ramek mamy aż 10, łącznie z ramką, bez ramki (?).

STYLE RAMEK: 
no border - brak ramki
dotted - ramka kropkowana
dashed - ramka przerywana (liniami)
solid - ciągła prosta ramka
double - ramka podwójna
groove - wypukła ramka
ridge - przeciwieństwo ramki "groove"
inset - efekt wciśniętego klawisza
outset - efekt klawisza
hidden - niewidoczna ramka
Żeby wam to zobrazować, oczywiście postanowiłam poświęcić na to czas i wytłumaczyć obrazkowo kliknij TU.

Pozycji używamy najczęściej, chcąc przesunąć na przykład tekst, zamiast z lewej strony chcemy aby był z prawej itp.

POZYCJE:
center - wyśrodkowanie
right - do prawej
left - do lewej
justify - wyjustowanie 
STRONY:
left - strona lewa
right - strona prawa
center - środek 
GRUBOŚĆ:
thin - cienki
medium - średni
thick - gruby

POZYCJONOWANIE (POSITION):
static - statyczny
relative - relaktywnie
absolute - absolutnie
fixed - ustalone

Pomocnicze kody podstawowe


Ogólnie jeśli chcemy coś wyśrodkować, czy jest to tytuł posta czy gadżetu lub też cały tekst strony, odpowiada nam cecha "text-align: center;"

WYŚRODKOWANIA:
Wyśrodkowanie gadżetów w lewej kolumnie:
.column-left-inner {text-align: center; } 
Wyśrodkowanie gadżetów w prawej kolumnie:
.column-right-inner {text-align: center; } 
Wyśrodkowanie gadżetów w środkowej kolumnie:
.column-center-inner {text-align: center;} 
Wyśrodkowanie daty:
h2.date-header {text-align: center;} 
Wyśrodkowanie tytułu postu:
h3.post-title {text-align: center;} 
Wyśrodkowanie napisu „Komentarz”
.comments h4 {text-align: center;} 
Wyśrodkowanie tytułu gadżetu:
.widget h2 {text-align: center;} 
Wyśrodkowanie tytułu gadżetu w lewej kolumnie:
.column-left-inner .widgeth2 {text-align: center;} 
Wyśrodkowanie tytułu gadżetu w prawej kolumnie:
.column-right-inner .widgeth2 {text-align: center;}

4 lipca 2015

Inny wygląd (suwaka) scrollbaru

Dzisiaj chciałam dodać, bardzo prosty i krótki kod na inny wygląd tego suwaka, który znajduje się po prawej stronie.

::-webkit-scrollbar {width: 10px; height: 10px; background: #FF44B6;}
::-webkit-scrollbar-thumb:vertical {background: #44DBB6;}
EFEKT: