Jak zrobić ramkę w poście/zakładce?

Pewna osoba z jednego serwera podsunęła mi ten pomysł, w sumie, nieświadomie, bo zwyczajnie zadała pytanie „Jak zrobić przewijaną ramkę?”. Na to pytanie postaram się w miarę logicznie odpowiedzieć. Przewijana ramka jest bardzo przydatna, zwłaszcza, gdy prowadzimy blog i chcemy go utrzymać w minimalizmie, nie chcąc przedłużać strony długimi elaboratami. Jednak jaki jest kod tworzący taką ramkę? Już wam ujawniam tę tajemnicę przedwiecznych.

LEGENDA

czerwone — bardzo istotne

zielone — nieistotne
niebieskie — dodatki

przykładowy kod na ramkę:

<div class="kptxt" style="background: rgb(238, 238, 238); border-color: rgb(204, 204, 204); border-style: solid; border-width: 1px; max-height: 200px; max-width: 600px; overflow: auto; padding: 1px;">

omówienie kodu + dodatki:

overflow: auto; — jest to najważniejsza część kodu, dzięki tej niepozornej komendzie nasza ramka jest przewijana i w ogóle działa.
max-height — wysokość ramki.
max-width — szerokość ramki.
background — jak sama nazwa wskazuje jest to tło. Nie przestraszcie się koloru w formie RGB. Można go wpisać w formie HTML, lub słownej (pink, black, white, silver) i będzie działał jak należy.
border-style — czyli styl naszej ramki. DO wyboru mamy prostą (solid), podwójną (duble), kropkowaną (dotted), przerywaną (dashed).
border-color — kolor obramowania.
border-width — jest grubość naszej ramki. Używamy do tego pikseli.
padding — odsunięcie tekstu od ramki.

INNE DODATKI:
box-shadow: 0px 0px 3px; — cień ramki. Pierwsza część odpowiada za przesunięcie w bok, druga do góry, a trzecia definiuje jak mocne ma być rozmycie cienia.
text-shadow: 0px 0px 1px; — definiuje cień w tekście.
font-family: consolas; — ten kod definiuje rodzaj fontu użytego w ramce.
font-size: 12px; — definiuje rozmiar fontu.
border-radius: 3px 3px 3px 3px; — zaokrąglenie rogów.
transform: rotate(-5deg); — obrócenie ramki.

Chciałam jeszcze poświęcić parę chwil na ramki. Co zrobić, aby ramka była np. tylko u góry? Odpowiedź jest łatwa w zasadzie ten aspekt działa tak samo jak w kodach CSS. Wystarczy, że w kodzie na ramkę dodasz odpowiednio:

strony ramek:

border-top — góra.
boreder-left — lewo.
border-right — prawo.
border-bottom — dół.

WSZYSTKIE DODATKI DZIAŁAJĄ RÓWNIEŻ W PONIŻSZYCH KODACH!

PORADA:

jeżeli nie możesz czegoś naleźć użyj komendy ctrl+f.

Edit: Postanowiłam lekko edytować posta o następne pytanie jakie otrzymałam w kontekście tworzenia ramki. Brzmiało ono „Jak zrobić ramkę w ramce?”. W sumie to zadanie jest bardzo intuicyjne i logiczne. Nie ma w tym zbyt wiele do tłumaczenia.
Wchodzimy w edycję HTML posta i wklejamy zwykły kod na ramkę, następnie przechodzimy w regularny wygląd i piszemy tam tekst w stylu „tu będzie wewnętrzna ramka”. Tak dla ułatwienia. Wchodzimy ponownie w edycję HTML i zamieniamy powyższą sentencję na nieco zmodyfikowany kod na ramkę - musi być on nieco mniejszy (max-height i max-width), bo inaczej ramka nie będzie działała– estetycznie.
Teraz chciałabym odpowiedzieć na pytanie „jak zrobić dwie ramki koło siebie?”. Ten, kto mnie znam bliżej od strony blogów pbp, doskonale wie, że lubię robić sobie notatniki, w których zachowuję taką formę. Pokażę wma jak to się robi. Jest to nieco bardziej zaawansowane, niż zwykła ramka, oczywiście.

przykładowy kod na ramki koło siebie:

<center>
<table><tbody>
<tr><td><div>
<div style="text-align: center;">
<span style="font-family: &quot;oswald&quot;; font-size: 20px;">tytuł ramki nr 1</span></div>
</div>
<center>
<div style="background: #eee; border: 1px solid #ccc; height: 128px; margin-right: 15px; overflow: auto; padding: 5px; width: 200px;">
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-family: &quot;consolas&quot;; font-size: 12px;">tekst w pierwszej ramce. Zajrzyjcie do jej siostry bliźniaczki.</span></div>
</div>
</div>
</div>
</center>
</td><td><div style="text-align: center;">
<div style="text-align: center;">
<span style="font-family: &quot;oswald&quot;; font-size: 20px;">tytuł ramki nr 2</span></div>
</div>
<center>
<div style="background: #eee; border: 1px solid #ccc; height: 128px; overflow: auto; padding: 5px; width: 200px;">
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-family: &quot;consolas&quot;; font-size: 12px;">tekst w drugiej ramce. Zajrzyjcie do jej siostry bliźniaczki.</span></div>
</div>
</div>
</center>
</td></tr>
</tbody></table>
</center>

omówienie kodu:

<center> — sprawia, że nasze ramki są ustawione pośrodku strony.
<table><tbody> — sprawia, że ramki wyświetlają się koło siebie. Tak zwana tabela.
<tr><td> — poszczególne ramki z tabelki.
<span style="font-family: &quot;oswald&quot; font-size: 20px;">tytuł ramki nr 1</span></div> — wszystkie te zapisy dotyczą tytułu naszej pierwszej ramki.
<center> — poszczególna ramka wyświetla się na środku.
<div style="background: #eee; border: 1px solid #ccc; height: 128px; margin-right: 15px; overflow: auto; padding: 5px; width: 200px;"> — odpowiada za wygląd samej ramki i tekstu w niej zawartego.
<div style="text-align: left;"> — sprawia, że tekst w ramce wyświetla się od lewej strony. Mamy w tym wypadku kilka opcji do wyboru: right (od prawej), left (od lewej), center (wyśrodkowanie), justify (wyjustowanie).

Dziękuję wam z uwagę. Jeżeli czegoś nie wymieniłam, a tego potrzebujecie - napiszcie w komentarzach. Postaram się jak najszybciej coś zaradzić w odpowiedzi.