Jak zrobić obramowanie po jednej stronie. Złożone struktury graniczne CSS

Kilka lekcji wcześniej przyjrzeliśmy się schematycznej reprezentacji bloku strony internetowej, a także krótko omówiliśmy właściwość CSS border, której można użyć do ustawienia granic elementu. Tym razem przyjrzymy się tej nieruchomości bardziej szczegółowo na przykładach.

Granica znajduje się pomiędzy marginesem a dopełnieniem. Oznacza to, że margines jest za granica. Obramowanie można ustawić ze wszystkich czterech stron (jakby zamykając bryłę w ramce) lub z jednej, dwóch lub trzech stron. CSS pozwala kontrolować grubość, kolor i styl obramowań. Przeanalizujmy to bardziej szczegółowo.

Szerokość obramowania: szerokość obramowania

Właściwość border-width ustawia szerokość obramowania. Najczęściej rozmiar ten jest podawany w pikselach. Możesz ustawić tę samą lub różną szerokość dla wszystkich czterech krawędzi, na przykład:

/* wszystkie 4 obramowania mają szerokość 2px: */ border-width: 2px; /* górna i dolna granica ma szerokość 2px, lewa i prawa 4px: */ border-width: 2px 4px; /* górna krawędź - 2px, lewa i prawa - 6px, dolna - 3px: */ border-width: 2px 6px 3px; /* górna krawędź - 2px, prawa - 3px, dolna - 4px, lewa - 5px: */ border-width: 2px 3px 4px 5px;

Ponadto istnieją słowa kluczowe wskazujące szerokość obramowania:

• cienki - obramowanie o szerokości 2px;
• średni - obramowanie o szerokości 4px;
• gruby - szerokość obramowania 6px.

Kolor obramowania: kolor obramowania

Właściwość border-color określa kolor obramowań. Kolory można określić w dowolnym formacie CSS: słowa kluczowe, szesnastkowy lub RGB – w zależności od tego, co jest dla Ciebie wygodniejsze. Analogicznie do poprzedniej właściwości, możesz ustawić jeden kolor dla wszystkich obramowań lub wybrać inny kolor dla każdego obramowania.

Kolor obramowania: #FFFF00;

Możesz także ustawić przezroczysty kolor, pisząc:

Kolor obramowania: przezroczysty;

Styl obramowania: styl obramowania

Dzięki właściwości border-style możesz zamienić zwykłą ramkę w kropkowaną, podwójną lub trójwymiarową - jest ich wiele różne znaczenia. Aby to zrobić, użyj następujących słów kluczowych:

• solidna - solidna granica;
• kropkowana - granica kropek;
• przerywana - kropkowana granica;
• podwójna - podwójna granica;
• rowek - granica karbu objętościowego;
• kalenica - obszerna ramka z grubą krawędzią (w zasadzie odwrócenie poprzedniego stylu);
• początek - wytłaczana krawędź;
• wstawka - wcięta ramka (w zasadzie odwrócenie poprzedniego stylu).

Podobnie jak w przypadku właściwości border-width i border-color, każdemu obramowaniu bloku można nadać inny styl - na przykład górne i dolne obramowanie można ustawić jako przerywane, a prawe i lewe obramowanie podwójne. Tutaj wszystko zależy wyłącznie od wyobraźni.

Styl obramowania: podwójna kropka;

Notatka: V różne przeglądarki wygląd granice mogą się nieznacznie różnić.

Wspólna granica właściwości CSS: 3 w 1

Aby nadać styl obramowaniu, nie musisz po kolei używać wszystkich trzech powyższych właściwości. Wystarczy znać ogólną uniwersalną granicę właściwości CSS, za pomocą której napiszesz styl znacznie szybciej i zaoszczędzisz miejsce. Aby to zrobić, zapisz wartości wszystkich trzech właściwości w losowej kolejności:

Obramowanie: 2 piksele z kropkami #FF0000;

Granice poszczególnych partii

Z pomocą dodatkowe właściwości border w CSS, możesz indywidualnie stylizować obramowanie każdego bloku. Pomogą Ci w tym następujące właściwości:

• border-top - styl górnej krawędzi;
• border-right - dla prawej granicy;
• border-bottom - dla dolnej granicy;
• border-left - dla lewej krawędzi.

obramowanie u góry: 2 piksele ciągłe #0000FF; obramowanie na dole: 7 pikseli podwójne #000080;

Wyniki

Teraz, gdy wiesz, jak tworzyć obramowania bloków, możesz poćwiczyć ich tworzenie. Istnieje wiele sposobów na zwięzłe opisanie stylu bez umieszczania w nim zbyt wielu linijek. Plik CSS. Ważną rolę odgrywa tutaj znajomość zasad kaskadowych arkuszy stylów. Spójrzmy na przykład.

Załóżmy, że chcesz utworzyć obramowanie elementu div z trzema jednolitymi szarymi obramowaniami i przerywaną zieloną dolną krawędzią. Możesz napisać ten styl w ten sposób:

Div ( obramowanie po prawej: 8px double #FF0000; obramowanie po lewej stronie: 8px double #FF0000; obramowanie u dołu: 8px double #FF0000; obramowanie u góry: 4px z kropkami #FDD201; )

Ale to jest za długi post. Wszystko to można krótko napisać:

Div (obramowanie: 8 pikseli podwójne #FF0000; obramowanie u góry: 4 piksele z kropkami #FDD201; )

Jak wspomniano powyżej, tutaj będziemy korzystać z właściwości Kaskadowanie CSS. Najpierw piszemy styl dla wszystkich czterech boków ramki, a następnie określamy styl osobno dla dolnej krawędzi, tym samym częściowo nadpisując poprzedni styl. Bardzo ważne jest przestrzeganie tej sekwencji linii.

Mini-zadanie

Spróbuj utworzyć obramowanie elementu div o wymiarach 200x200 pikseli. Style ramki powinny wyglądać następująco:

• Spraw, aby górna i dolna granica była solidna solidny, nadaj im ten sam wybrany kolor i szerokość 5 pikseli.
• Zrób lewą granicę przerywany, szerokości 3 piksele, wybierz kolor inny niż poprzedni.
• Podwój prawą granicę podwójnie, szerokość 7 pikseli, inny kolor niż poprzednie dwa.

Ostatecznie Twoja praca powinna wyglądać tak (poza kolorem, który wybierzesz):

Wynik zadania (wyświetl w Chrome)

Wład Merzewicz

Z za pomocą CSS Możesz dodać obramowanie do elementu na kilka sposobów. W zasadzie wykorzystywana jest oczywiście właściwość border, jako najbardziej uniwersalna, a także kontur i, co zaskakujące, box-shadow, którego głównym zadaniem jest stworzenie cienia. Następnie rozważymy te metody i ich różnice między sobą.

zarys właściwości

Najprostsza właściwość tworzenia ramek. Ma takie same parametry jak border , ale różni się znacząco niektórymi szczegółami:

• wokół elementu wyświetlany jest kontur (obramowanie wewnątrz);
• obrys nie ma wpływu na wymiary elementu (obramowanie dodawane jest do szerokości i wysokości elementu);
• obrys można ustawić tylko wokół całego elementu, ale nie po poszczególnych stronach (obramowanie można zastosować dla dowolnej strony lub wszystkich na raz);
• Promień zaokrąglenia określony przez właściwość border-radius nie ma wpływu na obrys (wpływa na granicę).

Powstaje pytanie – w jakich przypadkach kontur jest potrzebny, gdy jego rolę, pomimo wymienionych różnic, całkowicie przejmuje granica? Sytuacji nie jest wiele, ale zdarzają się:

• tworzenie skomplikowanych wielobarwnych ramek;
• dodanie ramki do elementu po najechaniu na niego myszką;
• ukrywanie obramowania, które przeglądarka automatycznie dodaje do niektórych elementów po uzyskaniu fokusu;
• w przypadku konturu możesz ustawić odległość od krawędzi elementu do ramki za pomocą właściwości konturu-offset, aby utworzyć plik .

Wielokolorowe ramki

Musisz zrozumieć, że kontur w żaden sposób nie zastępuje granicy i może z łatwością istnieć razem z nią, jak pokazano w przykładzie 1.

Przykład 1: Tworzenie ramki

W w tym przykładzie wokół elementu dodawana jest czarna ramka oddzielona od tła białą obwódką (ryc. 1).

Ryż. 1. Obramuj element

Ramka podczas używania: najedź

Kiedy dodajemy ramkę poprzez border, szerokość elementu wzrasta, co jest dość zauważalne przy łączeniu borderu z pseudoklasą :hover. Można to „wygrać” na dwa sposoby. Najprościej jest zastąpić border obrysem, co jak wiemy nie wpływa na wielkość elementu (przykład 2).

Przykład 2: Ramka po najechaniu myszką

kontur nie zawsze jest odpowiedni, choćby dlatego, że zaokrąglanie rogów nie ma na to wpływu. Odpowiedni jest tutaj drugi sposób - dodaj niewidoczną ramkę lub ramkę dopasowaną do koloru tła, a następnie po najechaniu myszką zmień jej parametry (przykład 3). Nie nastąpi wówczas żadne przemieszczenie elementu, ponieważ rama początkowo już istnieje. Ale zawsze pamiętamy, że szerokość elementu to suma wartości szerokości, obramowania po lewej stronie i obramowania po prawej stronie. Podobnie sytuacja wygląda w przypadku wzrostu.

Przykład 3: Ramka po najechaniu myszką

Obramowanie pól formularza

W niektórych przeglądarkach (Chrome, Safari, najnowsze wersje Opera) po uzyskaniu ostrości wokół pól formularzy wyświetlana jest mała kolorowa ramka (rys. 2). Aby go usunąć, po prostu dodaj wartość none do właściwości konspektu w stylach, jak pokazano w przykładzie 4.

Ryż. 2. Obramuj marginesy

Przykład 4. Demontaż ramy

Ramki za pomocą cienia pudełkowego

Chociaż właściwość box-shadow ma na celu dodanie cienia wokół elementu, można jej również użyć do tworzenia obramowań, których nie można utworzyć za pomocą obramowania lub konturu. Wszystko to dzięki temu, że ilość cieni może być nieograniczona, a parametry których wymienione są oddzielone przecinkami.

Aby uzyskać kadr, należy ustawić pierwsze trzy parametry na zero, to one odpowiadają za położenie cienia i jego rozmycie. Czwarty parametr w w tym przypadku odpowiada za grubość obramowania, a piąty ustala kolor obramowania. Dla drugiej ramy czwarty parametr jest równy sumie grubości dwóch ram.

Przykład 4 pokazuje, jak dodać dwie ramki i jedną ramkę po prawej stronie, używając pojedynczej właściwości box-shadow.

Przykład 4: Użycie cienia pudełkowego

Wynik tego przykładu pokazano na ryc. 3.

Ryż. 3. Ramki utworzone za pomocą właściwości box-shadow

Ogólna właściwość border umożliwia jednoczesne ustawienie grubości, stylu i koloru obramowania wokół elementu. Wartości mogą być w dowolnej kolejności, oddzielone spacją; przeglądarka sama określi, która z nich odpowiada żądanej właściwości. Aby ustawić obramowanie tylko po niektórych stronach elementu, użyj właściwości border-top , border-bottom , border-left , border-right .

krótka informacja

Oznaczenia

	Opis	Przykład
<тип>	Wskazuje typ wartości.	<размер>
A i B	Wartości muszą być wyprowadzane w określonej kolejności.	<размер> && <цвет>
| B	Wskazuje, że należy wybrać tylko jedną wartość z proponowanych (A lub B).	normalne | kapitaliki
|| B	Każda wartość może być używana niezależnie lub razem z innymi w dowolnej kolejności.	szerokość || liczyć
	Grupuje wartości.	[przytnij || przechodzić ]
*	Powtórz zero lub więcej razy.	[,<время>]*
+	Powtórz jeden lub więcej razy.	<число>+
?	Określony typ, słowo lub grupa jest opcjonalna.	wstawka?
(A, B)	Powtórz co najmniej A, ale nie więcej niż B razy.	<радиус>{1,4}
#	Powtórz jeden lub więcej razy, oddzielając je przecinkami.	<время>#

×

Wartości

Wartość border-width określa grubość obramowania. Dostępnych jest kilka wartości stylu obramowania w celu kontrolowania jego wyglądu. Ich nazwy i wynik akcji przedstawiono na ryc. 1.

Ryc.1. Style ramek

kolor obramowania ustawia kolor obramowania, wartość może mieć dowolny format dozwolony przez CSS.

Przykład

W tym przykładzie dodano podwójną ramkę wokół bloku. Wynik pokazano na ryc. 2.

Ryż. 2. Zastosowanie własności granicznej

Model obiektowy

Obiekt.styl.obramowanie

Notatka

Przeglądarka Internet Explorera aż do szóstej wersji włącznie, przy grubości obramowania 1px, jest wyświetlany jako przerywany i przerywany. Przy grubości 2px i większej wartość kropkowana działa poprawnie. Ten błąd został naprawiony w IE7, ale tylko dla wszystkich granic 1px. Jeśli jedna z krawędzi bloku ma grubość 2px lub większą, to w IE7 wartość kropkowana zmienia się w kreskowaną.

Styl obramowania może się nieznacznie różnić w zależności od przeglądarki, jeśli używane są wartości rowka, grzbietu, wtrącenia lub odsunięcia.

Specyfikacja

Każda specyfikacja przechodzi przez kilka etapów zatwierdzania.

• Zalecenie – specyfikacja została zatwierdzona przez W3C i jest zalecana jako standard.
• Rekomendacja kandydata ( Możliwa rekomendacja ) - grupa odpowiedzialna za standard jest usatysfakcjonowana, że ​​spełnia swoje cele, ale potrzebuje pomocy społeczności programistów we wdrożeniu standardu.
• Proponowane zalecenie Sugerowane zalecenie) - na tym etapie dokument jest przekazywany Radzie Doradczej W3C do ostatecznego zatwierdzenia.
• Wersja robocza — bardziej dojrzała wersja wersji roboczej, która została omówiona i poprawiona do przeglądu społeczności.
• Szkic redaktora ( Projekt redakcyjny) - wersja robocza normy po wprowadzeniu zmian przez redakcję projektu.
• Projekt ( Projekt specyfikacji) - pierwsza wersja robocza normy.

×

Granica CSS Element to jedna lub więcej linii otaczających zawartość elementu i jego wypełnienie. Granicę określa się za pomocą skróconej właściwości border. Styl ramki ustawia się za pomocą trzech właściwości: styl, kolor I szerokość.

Dekorowanie ramek i obramowań elementów HTML za pomocą właściwości CSS

1. Styl obramowania

Domyślnie obramowania są zawsze rysowane na tle tła elementu, z tłem rozciągającym się do zewnętrznej krawędzi elementu. Styl ramki określa jej sposób wyświetlania; bez tej właściwości ramki nie będą w ogóle widoczne. W przypadku elementu można ustawić obramowanie dla wszystkich stron jednocześnie, korzystając z właściwości border-style, lub dla każdej strony oddzielnie, korzystając z właściwości kwalifikujących stylu border-top itp. Nie odziedziczony.

styl graniczny (styl obramowania u góry, styl obramowania po prawej stronie, styl obramowania u dołu, styl obramowania po lewej stronie)
Wartości:
nic	Wartość domyślna oznacza brak ramki. Usuwa także obramowanie elementu z grupy elementów o zadanej wartości tej nieruchomości.
ukryty	Równoważne żadnemu.
kropkowany	kropkowany
przerywany	przerywany
solidny	solidny
podwójnie	podwójnie
rowek	rowek
grzbiet	grzbiet
wstawka	wstawka
początek	początek
{1,4}	Wyświetlanie jednocześnie czterech różnych stylów obramowania elementu, tylko dla właściwości border-style: (styl obramowania: pełne kropki, brak kropek;)
wstępny
dziedziczyć

Składnia

P (styl obramowania: jednolity;) p (styl obramowania: pełny;)

2. Kolor ramki-kolor obramowania

Właściwość ustawia kolor ramek ze wszystkich stron jednocześnie. Korzystając z właściwości wyjaśniających, możesz ustawić inny kolor obramowania każdej strony elementu. Jeżeli dla ramki nie określono koloru, będzie on taki sam jak kolor tekstu elementu. Jeśli element nie zawiera tekstu, kolor obramowania będzie taki sam jak kolor tekstu elementu nadrzędnego. Nie odziedziczony.

kolor ramki (kolor-górny-obramowanie, kolor-obramowanie-prawy, kolor-dolny-obramowanie, kolor-obramowanie-lewy)
Wartości:
przezroczysty	Ustawia przezroczysty kolor obramowania. Jednocześnie szerokość ramy pozostaje. Można go użyć do zmiany koloru obramowania po najechaniu myszką na element, aby uniknąć przemieszczenia elementu.
kolor	Kolor ramek ustawiany jest za pomocą wartości właściwości. (kolor obramowania: #cacd58;)
{1,4}	Wyświetlanie jednocześnie czterech różnych kolorów obramowań elementu, tylko dla właściwości border-color: (kolor obramowania: #cacd58 #5faf8a #b9cea5 #aab238;)
wstępny	Ustawia wartość właściwości na wartość domyślną.
dziedziczyć	Dziedziczy wartość właściwości z elementu nadrzędnego.

Składnia

P (kolor obramowania: #cacd58;)

3. Szerokość obramowania

Szerokość ramki jest określana za pomocą jednostek długości lub słów kluczowych. Jeśli właściwość border-style jest ustawiona na none, a obramowanie elementu jest ustawione na pewną szerokość, wówczas w tym przypadku szerokość obramowania jest ustawiona na zero. Nie odziedziczony.

Składnia

P (szerokość obramowania: 2px;)

4. Ustawienie ramki z jedną właściwością

Właściwość border umożliwia łączenie następujących właściwości: border-width, border-style, border-color, na przykład:

Div (szerokość: 100 pikseli; wysokość: 100 pikseli; obramowanie: 2 piksele w kolorze szarym; )

W takim przypadku określone właściwości zostaną zastosowane jednocześnie do wszystkich krawędzi elementu. Jeśli jakakolwiek wartość nie zostanie określona, ​​jej miejsce zajmie wartość domyślna.

5. Ustawienie ramki dla jednej krawędzi elementu

W przypadku konieczności ustawienia inny styl granice elementu, można zastosować skróconą notację dla odpowiedniej granicy.
Właściwości wymienione poniżej łączą w jedną deklarację następujące właściwości: border-width, border-style i border-color. Lista właściwości jest podawana w podanej kolejności, przy czym można pominąć jedną lub dwie wartości, w takim przypadku ich wartości przyjmą wartości domyślne.

Styl górnej krawędzi ustawia się za pomocą właściwości border-top, dolnej - border-bottom, lewej - border-left i prawej - border-right.

Składnia

P (obramowanie u góry: 2px jednolity szary;)

6. Zarys konturu zewnętrznego

Właściwość określa zewnętrzną granicę wokół elementów (tj. poza normalną ramką). Głównym celem tej właściwości jest wyróżnienie elementu. W przeciwieństwie do właściwości border, zastosowanie tej właściwości nie wpływa na rozmiar ani położenie elementu, ponieważ kontur jest wyświetlany na górze bloku elementów, co z kolei może prowadzić do nakładania się marginesy elementu i obszarów sąsiadujących.

Również kontur zewnętrzny w odróżnieniu od obramowania elementu otacza element ze wszystkich stron, otaczając go w całości.

Obrys zewnętrzny jest zawsze prostokątny i nie przebiega wzdłuż granicy bloku, dla którego określono promień obramowania.

Właściwość konturu umożliwia łączenie następujących właściwości: kolor konturu, styl konturu, szerokość konturu. Jeśli jakakolwiek wartość nie zostanie określona, ​​jej miejsce zajmie wartość domyślna.

Div (szerokość: 100 pikseli; wysokość: 100 pikseli; kontur: #cacd58 solid 2px; )

6.1. styl konturowy

Wygląd zewnętrznej linii konturu ustalany jest podobnie jak styl obramowania elementu. Nie odziedziczony.

Składnia

P (styl konturu: grzbiet;)

6.2. Kolor konturu zewnętrznego Kolor konturu

Kolor zewnętrznego konturu można określić tylko wtedy, gdy ustalić wartość styl konturowy. Nie odziedziczony.

Składnia

P (styl konturu: grzbiet; kolor konturu: srebrny; )

6.3. Grubość konturu zewnętrznego szerokość-kontur

Grubość zewnętrznej linii konturu ustawia się analogicznie do grubości obramowania elementu. Nie odziedziczony.

Składnia

P (styl konturu: kropkowany; szerokość konturu: 5 pikseli; )

Jestem pewien, że znasz już właściwość css obramowania. Czy dowiesz się czegoś nowego, czego nie wiedziałeś wcześniej o granicy CSS? Cóż, nie tylko dowiesz się, ale także zobaczysz kilka nowych rzeczy, o których nigdy wcześniej nie wiedziałeś!

CSS3 może być używany nie tylko do tworzenia zaokrąglonych narożników, ale do tworzenia można również używać czystego kodu CSS złożone kształty. Wcześniej można było używać obrazu tła, aby uzyskać wrażenie zaokrąglonych narożników. Dzięki nowym technikom wykorzystania borderu możemy to zrobić za pomocą czystego kodu CSS.

Podstawy korzystania z obramowania CSS

Z pewnością znasz już ten standard za pomocą granicy nieruchomości:

Obramowanie: 1 piksel w kolorze czarnym;

Powyższy kod wyświetli obramowanie o wielkości 1 piksela, które będzie czarne. Prosto i łatwo. Możesz także nieco rozszerzyć składnię:

Szerokość obramowania: gruba; styl obramowania: solidny; kolor obramowania: czarny;

Dodatkowo możesz użyć określonych wartości właściwości border-width, trzech słowa kluczowe: cienki, średni, gruby.

Jednak używanie rozszerzonej składni nie zawsze jest praktyczne. Spójrzmy na przykład, kiedy trzeba zmienić kolor ramki bloku po najechaniu myszką. W tym przypadku użycie skróconej składni jest znacznie prostsze:

Pole ( obramowanie: 1 piksel stały czerwony; ) .box:hover ( obramowanie: 1 piksel ciągły zielony; )

Bardziej eleganckim i prostszym sposobem na zrobienie tego jest:

Box ( obramowanie: 1px jednolity czerwony; ) .box:hover ( kolor obramowania: zielony; )

Jak widać zaawansowana technika przydaje się także wtedy, gdy zmieniamy tylko niektóre właściwości: szerokość, styl, kolor i inne.

Promień granicy

Granica-promień- To jest „złota” właściwość CSS3 – pierwsza, najczęstsza właściwość, która stała się praktyczna i użyteczna. Z wyjątkiem IE8 i wersji poniżej, wszystkie przeglądarki wyświetlają zaokrąglone rogi, korzystając z tego.

Chociaż konieczne jest użycie specjalnych przedrostków dla Webkit i Mozilli, aby stylizacja była poprawna.

Promień obramowania Webkit: 10px; -moz-border-radius: 10px; promień obramowania: 10px;

Obecnie możemy usunąć specjalne przedrostki i użyć standardowej formy promienia obramowania.

Kolejnym przywilejem jest to, że możemy z niego skorzystać specjalne znaczenia dla każdej strony bloku:

Promień obramowania w lewym górnym rogu: 20 pikseli; promień-prawy-górny-prawy: 0; promień-prawy-dolny-obramowanie: 30px; Promień obramowania-dolnego-lewego: 0;

W powyższym kodzie ustawienie promienia obramowania w prawym górnym rogu i promienia obramowania w lewym dolnym rogu na „null” pozwala uzyskać niesamowite kształty. Chociaż element może dziedziczyć pewne właściwości, które będą musiały zostać zresetowane.

Podobnie jak w przypadku marginesu i dopełnienia, możemy skompresować składnię:

/* lewy górny, prawy górny, prawy dolny, lewy dolny */ border-radius: 20px 0 30px 0;

Jako przykład wykorzystania właściwości border-radius pokażę Ci „cytrynę”, z której często korzystają projektanci projektując strony internetowe:

Cytryna ( szerokość: 200px; wysokość: 200px; tło: #F5F240; obramowanie: 1px solid #F0D900; promień obramowania: 10px 150px 30px 150px; )

Wyjdźmy poza podstawy

Wielu projektantów posiada całą wiedzę obszary CSS właściwości graniczne kończą się tutaj. Ale jest jeszcze kilka innych fajnych rzeczy, których możesz użyć do stworzenia niesamowitych rzeczy!

Złożone struktury graniczne CSS

Istnieje wiele technik tworzenia projektów z wykorzystaniem złożonych struktur granicznych. Przyjrzyjmy się na przykład poniższemu...

Styl graniczny

Zawsze używamy najwięcej znane właściwości ciągłe, przerywane i kropkowane. Ale istnieje kilka innych właściwości w stylu obramowania: rowek i grzbiet.

Obramowanie: rowek 20 pikseli #e3e3e3;

Lub w rozszerzonej składni:

Kolor obramowania: #e3e3e3; szerokość obramowania: 20px; styl obramowania: rowek;

Chociaż te właściwości są przydatne, nie stanowią one podstawy do tworzenia skomplikowanych ramek.

Zarys

Najpopularniejsza technika tworzenia podwójna rama- korzystanie z właściwości zarysu.

Pudełko (obramowanie: 5 pikseli #292929; kontur: 5 pikseli #e3e3e3; )

Ta metoda sprawdza się świetnie, choć ogranicza nas tylko do dwóch klatek. Czasami trzeba utworzyć gradientową ramkę składającą się z wielu warstw... jak wtedy?

Pseudoelementy

Gdy technika konspektu nie jest wystarczająca, alternatywnym rozwiązaniem jest użycie pseudoelementów:before i:after. Za pomocą którego możesz dodać dodatkowe ramki do elementu:

Pole (szerokość: 200 pikseli; wysokość: 200 pikseli; tło: #e3e3e3; pozycja: względna; obramowanie: 10 pikseli zielone; ) /* Utwórz dwa pudełka o tej samej szerokości kontenera */ .box:after, .box:before ( treść: „”; pozycja: bezwzględna; góra: 0; lewa: 0; dół: 0; prawa: 0; ) .box:after ( obramowanie: 5 pikseli jednolitego koloru czerwonego; kontur: 5 pikseli stałego żółtego; ) .box:before ( obramowanie : 10px jednolity niebieski; )

Nie wygląda to zbyt elegancko, ale co najmniej, to działa. Trochę trudno jest ustalić kolejność kolorów w ramkach... ale da się to rozgryźć.

Pudełko-Cień

Ciekawym „dziecięcym sposobem” na uzyskanie podobnego efektu jest użycie właściwości box-shadow CSS3:

Pole (obramowanie: 5 pikseli jednolicie czerwone; cień pudełka: 0 0 0 5 pikseli zielony, 0 0 0 10 pikseli żółty, 0 0 0 15 pikseli pomarańczowy; )

W tym przypadku byliśmy mądrzejsi i zastosowaliśmy dedykowaną właściwość box-shadow. Zmieniając parametry rozmycia x, y, rozmycie na zero, możemy użyć różnych kolorów, aby utworzyć wiele klatek.

Ale jest problem: w starszych przeglądarkach, które nie rozumieją właściwości box-shadow, widoczna będzie tylko jedna czerwona ramka o wielkości 5 pikseli.

"Pamiętać! Projekt witryny powinien wyglądać w różnych przeglądarkach, czyli tak samo we wszystkich przeglądarkach. Włącznie ze starszymi wersjami.”

Zmiana kątów

Oprócz tego używanego proste znaczenie border-radius, możemy określić dwa osobne - rozdzielając je przez / wskażemy promień poziomy i pionowy.

Na przykład:

Promień obramowania: 50px / 100px; /* promień poziomy, promień pionowy */

... jest to równoważne:

Promień obramowania w lewym górnym rogu: 50 pikseli 100 pikseli; promień obramowania w prawym górnym rogu: 50 pikseli 100 pikseli; promień-prawy-dolny-obramowanie: 50px 100px; Promień obramowania-dolnego-lewego: 50px 100px;

Technika ta nadaje się do tworzenia unikalnych kształtów bloków. Na przykład, oto jak stworzyć efekt zawiniętego papieru:

Pole (szerokość: 200 pikseli; wysokość: 200 pikseli; tło: #666; promień lewego górnego rogu: 15em 1em; promień-prawyego dolnego rogu: 15em 1em; )

Formularze CSS za pomocą obramowania

Ta technika pokazuje, jak można tworzyć formularze CSS, korzystając z elementów zerowe wymiary wysokość i szerokość. Zaskoczony? Spójrzmy na przykład...

W kilku następnych przykładach użyjemy następujących znaczników:

...i następujący podstawowy styl:

Pudełko (szerokość: 200px; wysokość: 200px; tło: czarne; )

Bardzo powszechny przykład za pomocą CSS formy - tworzenie płynącej strzałki. Sekret tej strzałki polega na stworzeniu obramowania w innym kolorze dla każdej strony. Następnie ustaw atrybuty szerokości i wysokości na 0.

Przypiszmy do blok div klasa strzałek:

Strzałka (szerokość: 0; wysokość: 0; górna granica: 100 pikseli jednolicie czerwona; prawa granica: 100 pikseli jednolicie zielona; dolna granica: 100 pikseli jednolicie niebieska; lewa obramowanie: 100 pikseli ciągłego żółtego; )

Aby to zademonstrować, najpierw użyjemy rozszerzonej składni. Następnie możemy usunąć dodatkowy kod, korzystając ze skróconej składni:

Strzałka (szerokość: 0; wysokość: 0; obramowanie: 100px pełne; kolor obramowania: czerwony zielony niebieski żółty; )

Ciekawe, prawda? Teraz zainstalujemy przezroczyste kolory ze wszystkich stron z wyjątkiem niebieskiej strony.

Strzałka (szerokość: 0; wysokość: 0; obramowanie: 100px pełne; kolor obramowania-dolnego: niebieski; )

Wyszło świetnie! Ale to jest sprzeczne układ semantyczny , utwórz element .arrow div, aby dodać strzałkę do strony. W tym celu możemy wykorzystać pseudoelementy i właśnie to teraz zrobimy.

Utwórz dymek

Aby stworzyć dymek, potrzebujemy małego kawałka czysty CSS kod i jeden blok div.

Dymek ( pozycja: względna; kolor tła: #292929; szerokość: 200 pikseli; wysokość: 150 pikseli; wysokość linii: 150 pikseli; /* w pionie do środka */ kolor: biały; wyrównanie tekstu: do środka; )

Dymek:po (treść: ""; )

Na tym etapie stworzymy stworzoną wcześniej strzałkę, dodamy ją do elementu i pozostaje tylko ustawić ją w odpowiednim miejscu:

Dymek:po (treść: „”; pozycja: bezwzględna; szerokość: 0; wysokość: 0; obramowanie: 10px pełne; kolor obramowania: czerwony zielony niebieski żółty; )

Jeśli chcemy, aby strzałka była skierowana w dół, będziemy musieli ustawić wszystkie obramowania na przezroczyste, z wyjątkiem górnego.

Dymek:po (treść: ""; pozycja: bezwzględna; szerokość: 0; wysokość: 0; obramowanie: 10px pełne; kolor górnego obramowania: czerwony; )

Kiedy to stworzymy Kształt CSS, nie możemy konkretnie wskazać rozmiaru strzałki. Zamiast tego możemy ustawić właściwość border-width, która przypisze rozmiar strzałce. Ustalimy także położenie strzałki na dole pośrodku. Odpowiednio do tego używamy wartości u góry i po lewej stronie.

Dymek:po (treść: „”; pozycja: bezwzględna; szerokość: 0; wysokość: 0; obramowanie: 15px pełne; kolor górnego obramowania: czerwony; góra: 100%; lewa: 50%; )

Dodatkowo musimy tylko nadać mu kolor taki sam jak blok. Pamiętaj, podczas pozycjonowania należy wziąć pod uwagę wielkość pozostałych ramek, które są niewidoczne (15px). Nadamy również blokowi zaokrąglenia na rogach.

Dymek ( /* … inne style */ border-radius: 10px; ) .speech-bubble:after ( treść: ""; pozycja: absolutna; szerokość: 0; wysokość: 0; obramowanie: 15px pełne; obramowanie na górze -kolor: #292929; góra: 100%; lewy: 50%; margines-lewy: -15px; /* dostosuj szerokość obramowania */ )

Nieźle, co? Używając kilku klas CSS i trików granicznych, możesz stworzyć coś takiego.

/* Użycie dymków: Zastosuj klasy .speech-bubble i .speech-bubble-DIRECTION jak pokazano poniżej

*/ .speech-bubble ( pozycja: względna; kolor tła: #292929; szerokość: 200 pikseli; wysokość: 150 pikseli; wysokość linii: 150 pikseli; /* w pionie do środka */ kolor: biały; wyrównanie tekstu: do środka; obramowanie- promień: 10px; rodzina czcionek: bezszeryfowa; ) .dymek:po (treść: ""; pozycja: bezwzględna; szerokość: 0; wysokość: 0; obramowanie: 15px solid; ) /* Ustaw strzałkę */ .dymek-góra:po (kolor-dolnego obramowania: #292929; lewy: 50%; dolny: 100%; margines-lewy: -15px; ) .dymek-prawy:po (kolor lewego obramowania : #292929; po lewej: 100%; u góry: 50%; u góry marginesu: -15px; ) .dymek-dół:po ( kolor górnego obramowania: #292929; u góry: 100%; po lewej: 50%; margines-lewy: -15px; ) .dymek-lewy:po ( kolor obramowania-prawy: #292929; górny: 50%; prawy: 100%; margines-górny: -15px; )

Premia! Centrowanie pionowe w obrębie bloku

W przypadku jednego wiersza tekstu możesz użyć wysokości linii. Ale jeśli masz dwa lub więcej linii tekst... Najlepszym rozwiązaniem ustawi właściwość display na table i umieści cały tekst w akapicie. Tak to wygląda znaczniki HTML: