Vija kufitare. Sintaksa e gjerësisë së kufirit CSS

Disa mësime më parë, ne shikuam paraqitje skematike blloku i një faqe interneti, dhe gjithashtu folëm shkurtimisht për një pronë të tillë CSS si kufiri, me të cilin mund të vendosni kufijtë për një element. Këtë herë ne do t'i hedhim një vështrim më të afërt kësaj prone me shembuj.

Kufiri ndodhet midis margjinës dhe mbushjes. Kjo do të thotë se diferenca është per kufiri. Kufiri mund të vendoset si nga të katër anët (sikur të mbyllet blloku në një kornizë), ashtu edhe nga një, dy ose tre anët. Në CSS, ju mund të kontrolloni trashësinë, ngjyrën dhe stilin e kufijve. Le ta shqyrtojmë këtë në më shumë detaje.

Border-width: gjerësia e kufirit

Nëpërmjet vetitë kufitare-width është gjerësia e kufirit. Më shpesh, kjo madhësi tregohet në piksele. Mund të vendosni gjerësi të njëjta ose të ndryshme për të katër kufijtë, për shembull:

/ * të 4 kufijtë janë 2 px të gjerë: * / border-width: 2px; / * kufijtë e sipërm dhe të poshtëm janë 2 px, majtas dhe djathtas janë 4 px: * / kufiri-width: 2px 4px; / * Kufiri i sipërm - 2 px, majtas dhe djathtas - 6 px, poshtë - 3 px: * / gjerësia e kufirit: 2 px 6px 3px; / * Kufiri i sipërm - 2px, djathtas - 3px, poshtë - 4px, majtas - 5px: * / gjerësia e kufirit: 2px 3px 4px 5px;

Përveç kësaj, ka fjalë kyçe për gjerësinë e kufirit:

• kufiri i hollë - 2 px;
• e mesme - një kufi me një gjerësi prej 4 px;
• Kufiri i trashë - 6 px.

Border-color: ngjyra e kufirit

Vetia border-color vendos ngjyrën për kufijtë. Ngjyrat mund të specifikohen në çdo format CSS: fjalë kyçe, heksadecimal ose RGB - cilado që ju përshtatet më mirë. Për analogji me veçorinë e mëparshme, mund të vendosni ose një ngjyrë për të gjitha kufijtë, ose të zgjidhni ngjyra të ndryshme për secilën kufi.

Ngjyra e kufirit: # FFFF00;

Ju gjithashtu mund të vendosni ngjyrë transparente duke shkruar:

Ngjyra e kufirit: transparente;

Border-style: stili i kufirit

Falë veçorisë së stilit kufitar, mund të bëni një kufi me pika, të dyfishtë, tre-dimensionale nga një kufi i rregullt - ka shumë kuptime të ndryshme... Për ta bërë këtë, përdorni fjalët kyçe të mëposhtme:

• kufi i fortë - solid;
• me pika - kufi me pika;
• dash - kufiri i ndërprerë;
• dyshe - kufiri i dyfishtë;
• brazdë - kufiri i brazdës vëllimore;
• kurriz - një kufi vëllimor me një skaj të trashë (në fakt, e kundërta e stilit të mëparshëm);
• fillimi - kufiri i ekstruduar;
• inset - një kufi i prerë (në thelb e kundërta e stilit të mëparshëm).

Ashtu si me vetitë e gjerësisë së kufirit dhe ngjyrës së kufirit, ju mund të stiloni çdo kufi kutie veç e veç - për shembull, mund t'i bëni kufijtë e sipërm dhe të poshtëm të ndërprerë, dhe kufijtë e dyfishtë djathtas dhe majtas. Këtu gjithçka varet vetëm nga imagjinata.

Stili i kufirit: me pika të dyfishta;

Shënim: v shfletues të ndryshëm pamja e kufijve mund të jetë paksa e ndryshme.

Vetia e zakonshme e kufirit CSS: 3 në 1

Ju nuk keni nevojë të përdorni të tre vetitë e mësipërme me radhë për të stiluar kufirin. Mjafton të dish për gjeneralin pronë universale kufiri CSS, i cili do t'ju ndihmojë të stiloni shumë më shpejt dhe të kurseni hapësirë. Për këtë në renditje e rastësishme shkruani vlerat për të tre vetitë:

Kufiri: 2px me pika # FF0000;

Kufijtë për palët individuale

Me veçoritë shtesë të kufirit në CSS, ju mund të stiloni çdo kufi të bllokut individualisht. Ata do t'ju ndihmojnë me këtë. vetitë e mëposhtme:

• border-top - stil për kufirin e sipërm;
• kufiri-djathtas - për kufirin e djathtë;
• kufiri-fund - për kufirin e poshtëm;
• border-left është për kufirin e majtë.

kufiri në krye: 2px solid # 0000FF; kufiri-fund: 7px double # 000080;

Rezultatet

Tani që dini si të vizatoni kufijtë e blloqeve, mund të praktikoni krijimin e tyre. Ka shumë mënyra për të përshkruar në mënyrë koncize një stil pa pasur shumë rreshta skedar CSS... Një rol të rëndësishëm këtu luhet nga njohja e parimeve të fletëve të stilit kaskadë. Le të shohim një shembull.

Le të themi se dëshironi të kornizoni një div me tre kufij të ngurtë gri dhe ta bëni kufirin e poshtëm një të gjelbër të ndërprerë. Ju mund ta shkruani këtë stil si kjo:

Div (kufiri-djathtas: 8px dyfishtë # FF0000; kufiri-majtas: 8px dyfishtë # FF0000; kufiri-poshtë: 8px dyfishtë # FF0000; kufiri-lart: 4px me pika # FDD201;)

Por kjo është një hyrje shumë e gjatë. E gjithë kjo mund të shkruhet shkurt:

Div (kufiri: 8 pikselë dyfishtë # FF0000; kufiri në krye: 4 pikselë me pika # FDD201;)

Siç u përmend më lart, këtu do të përfitojmë nga vetitë kaskaduese të CSS. Së pari, ne shkruajmë stilin për të katër anët e kufirit, dhe më pas specifikojmë stilin veçmas për kufirin e poshtëm, duke mbishkruar pjesërisht stilin e mëparshëm. Është shumë e rëndësishme të ndiqni këtë sekuencë rreshtash.

Mini-detyrë

Provoni të krijoni një kufi për div me dimensione 200x200px. Stilet për kufirin duhet të jenë si ky:

• Bëni kufijtë e sipërm dhe të poshtëm të fortë të ngurta, jepini të njëjtën ngjyrë të zgjedhur dhe një gjerësi prej 5 pikselësh.
• Bëni kufirin e majtë i thyer, 3 piksele të gjera, zgjidhni një ngjyrë të ndryshme nga ajo e mëparshme.
• Bëni kufirin e duhur të dyfishtë dyfishtë, 7 piksele e gjere, ngjyre e ndryshme nga dy te meparshmet.

Në fund të fundit, puna juaj duhet të duket kështu (përveç ngjyrës që zgjidhni vetë):

Rezultati i detyrës (shiko në Chrome)

Vetia e kufirit CSS emërtohet për të krijuar kufirin e një objekti, përkatësisht trashësinë e kufirit, ngjyrën dhe stilin e tij. Kjo veçori përdoret gjerësisht në HTML. Ju mund të krijoni efekte të ndryshme për një perceptim më të mirë të përmbajtjes në faqe. Për shembull, dizajnoni një shirit anësor, kokën e faqes, menunë, etj.

1. Sintaksa e kufirit CSS

kufiri: kufiri me gjerësi kufiri në stilin e kufirit me ngjyrë | trashëgojnë;

• border-width - trashësia e kufirit. Mund ta vendosni në piksel (px) ose të përdorni vlerat standarde të hollë, të mesëm, të trashë (ato ndryshojnë vetëm në gjerësi në piksel)
• border-style - stili i kufirit të dhënë. Mund të marrë vlerat e mëposhtme
  • asnjë ose i fshehur - anulon kufirin
  • me pika - kornizë me pika
  • dash - kornizë dash
  • linjë e fortë - e thjeshtë (përdoret më shpesh)
  • kufiri i dyfishtë - dyfish
  • groove - kufi me brazdë 3D
  • kurriz, hyrje, fillim - efekte të ndryshme të kornizës 3D
  • trashëgoj - aplikohet vlera e elementit mëmë
• border-color - ngjyra e kufirit. Mund të vendoset me emër specifik ngjyrat ose në Formati RGB(shih emrat e ngjyrave html për sitin)

shënim

Vlerat në pronën e kufirit CSS mund të specifikohen në çdo mënyrë. Sekuenca më e përdorur është "ngjyra e stilit të trashësisë".

2. Shembuj me kufij të ndryshëm CSS

2.1. Shembull. Stilet e ndryshme të dekorimit të kufirit në stilin e kufirit

border-style: dashed

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

border-style: dotted

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

2.2. Пример. Изменения цвета рамки при наведении курсора мыши

Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).

При наведении курсора мыши на блок цвет рамки изменится

Вот как это выглядит на странице:

2.3. Пример. Как сделать прозрачную рамку border

Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)

Вот как это выглядит на странице:

3. Толщина границы: свойство border-width

Задает толщину линии. Ранее мы задавали ее в едином описании border.

Синтаксис CSS border-width

border-width : thin | medium | thick | значение ;

• thin - тонкая толщина линии
• medium - средняя толщина линии
• thick - толстая толщина линии

Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны.

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

Вот как это выглядит на странице:

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

4. Как сделать рамку border только с одного края (границы)

У свойства CSS border есть производные свойства для задания односторонних границ у элемента:

• border-top - для задания рамки сверху (верхняя граница)
• border-bottom - для задания рамки снизу (нижняя граница)
• border-right - для задания рамки справа (правая граница)
• border-left - для задания рамки слева (левая граница)

Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.

Также есть свойства

• border-top-color - задание цвета верхний границы
• border-top-style - задание стиля верхней границы
• border-top-width - задание толщины верхней границы
• и т.д. для каждого направления

На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми

/* Описание двух одинаковых стилей: */

4.1. Пример. Красивая рамка для выделения цитат

Пример рамки для цитаты

Вот как это выглядит на странице:

Пример рамки для цитаты

Примечание
Можно задать отдельную границу для каждой из сторон.

5. Как сделать несколько границ border у элемента html

Иногда требуется сделать несколько границ. Приведем пример

5.1. Первый вариант с несколькими границами

Вот как это выглядит на странице:

Есть второй способ через наложение теней.

5.2. Наложение теней для создания нескольких границ

Вот как это выглядит на странице:

6. Скругление углов у границ (border-radius)

Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например

7. Вдавленная линия CSS

Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.

---

Вот как это выглядит на странице:

Для обращения к border из JavaScript нужно писать следующую конструкцию:

document.getElementById("elementID").style.border ="VALUE "

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определённых сторонах элемента, воспользуйтесь свойствами border-top , border-bottom , border-left , border-right .

Краткая информация

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

×

Значения

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style . Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

Пример

V ky shembull rreth bllokut shtohet një kufi i dyfishtë. Rezultati është treguar në Fig. 2.

Oriz. 2. Zbatimi i pasurisë kufitare

Modeli i objektit

Nje objekt.stil.kufi

shënim

Shfletuesi Internet Explorer deri në versionin e gjashtë, me një trashësi kufiri prej 1 px, shfaqet me pika si të ndërprera. Me një trashësi prej 2 px ose më shumë, vlera me pika funksionon si duhet. Ky gabim është rregulluar në IE7, por vetëm për të gjitha kufijtë 1px. Nëse një nga kufijtë e kutisë është 2 px ose më shumë i trashë, atëherë në IE7 vlera me pika bëhet e ndërprerë.

Stili i kufirit mund të ndryshojë pak midis shfletuesve kur përdorni vlerat e groove, ridge, inset ose fillimit.

Specifikim

Çdo specifikim kalon nëpër disa faza të miratimit.

• Rekomandim - Ky specifikim është miratuar nga W3C dhe rekomandohet si standard.
• Rekomandimi i Kandidatit ( Rekomandim i mundshëm ) - grupi përgjegjës për standardin është i kënaqur që ai është në përputhje me objektivat e tij, por kërkohet ndihma e komunitetit të zhvilluesve për zbatimin e standardit.
• Rekomandimi i propozuar ( Rekomandim i sugjeruar) - Në këtë pikë, dokumenti i dorëzohet Këshillit Këshillimor të W3C për miratim përfundimtar.
• Drafti Punues - Një version më i pjekur i draftit pas diskutimit dhe amendamenteve për shqyrtim nga komuniteti.
• Drafti i redaktorit ( Drafti editorial) - një draft version i standardit pas redaktimit nga redaktorët e projektit.
• draft ( Draft specifikimi) është drafti i parë i standardit.

×

Jam i sigurt se tashmë jeni njohur me vetinë e kufirit css. A po mësoni diçka të re që nuk e dinit më parë për kufirin css? Epo, jo vetëm që do të mësoni, por do të shihni edhe disa gjëra të reja që nuk i keni ditur kurrë më parë!

Jo vetëm që CSS3 mund të përdoret për të rrumbullakosur qoshet, por kodi i pastër CSS mund të përdoret për të krijuar forma komplekse... Në të kaluarën, mund të përdorni imazhin e sfondit për të dhënë përshtypjen e qosheve të rrumbullakosura. Falë teknikave të reja për përdorimin e kufirit, ne mund ta bëjmë atë në kod të pastër css.

Bazat e përdorimit të kufirit css

Me siguri, tashmë jeni njohur përdorim standard Karakteristikat e kufirit:

Kufiri: 1px i zi;

Kodi i mësipërm do të japë një kufi 1px, i cili do të jetë i zi. Thjesht dhe lehtë. Ju gjithashtu mund të zgjeroni pak sintaksën:

Gjerësia e kufirit: e trashë; kufiri-style: solid; kufiri-ngjyra: e zezë;

Përveç kësaj, ju mund të përdorni vlerat specifike të pronës me gjerësi kufiri, tre fjalë kyçe a: i hollë, i mesëm, i trashë.

Por përdorimi i sintaksës së zgjeruar nuk është gjithmonë praktik. Le të hedhim një vështrim në një shembull kur duhet të ndryshoni ngjyrën e kufirit të kutisë në lëvizjen e miut. Në këtë rast, përdorimi i sintaksës stenografi është shumë më i lehtë:

Kutia (kufiri: 1px e kuqe e fortë;) .kutia: rri pezull (kufiri: 1px jeshile e fortë;)

Më elegante dhe më e thjeshtë mund të bëhet si më poshtë:

Kutia (kufiri: 1 px e kuqe e fortë;) .kutia: rri pezull (ngjyra e kufirit: jeshile;)

Siç mund ta shihni, teknika e avancuar është gjithashtu e dobishme kur ne ndryshojmë vetëm disa veti: gjerësinë, stilin, ngjyrën dhe të tjera.

Kufi-Rrezja

kufiri-rrezeështë vetia "e artë" e CSS3 - vetia e parë dhe më e zakonshme që është bërë praktike dhe e dobishme. Përveç IE8 dhe më poshtë, të gjithë shfletuesit japin kënde të rrumbullakosura me këtë.

Edhe pse, është e nevojshme të përdoren parashtesa të veçanta për Webkit dhe Mozilla që stili të jetë i saktë.

Webkit-border-radius: 10px; -moz-border-radius: 10px; kufiri-radius: 10px;

Në ditët e sotme, ne mund të heqim prefikset speciale dhe t'i përdorim formë standarde kufi-rrezja.

Një përfitim tjetër është se ne mund të përdorim vlera të veçanta për secilën anë të bllokut:

Rrezja e kufirit-lart-majtas: 20px; kufiri-lart-djathtas-rreze: 0; kufiri-poshtë-djathtas-rreze: 30px; kufiri-poshtë-majtas-rreze: 0;

Në kodin e mësipërm, vendosja e rrezes kufitare lart-djathtas dhe kufirit-poshtë-majtas-radius në zero mund të krijojë forma të mahnitshme. Edhe pse elementi mund të trashëgojë disa veti që do të duhet të rivendosen në zero.

Ashtu si kufiri dhe mbushja, ne mund të kondensojmë sintaksën:

/ * lart majtas, lart djathtas, poshtë djathtas, poshtë majtas * / kufiri-radius: 20px 0 30px 0;

Si shembull, duke përdorur veçorinë e rrezes kufitare, unë do t'ju tregoj "limonin" që dizajnerët përdorin shpesh kur dizajnojnë faqet e internetit:

Limon (gjerësia: 200 px; lartësia: 200 px; sfondi: # F5F240; kufiri: 1 px solid # F0D900; rrezja e kufirit: 10 px 150 px 30 px 150 px;)

Duke shkuar përtej bazave

Në shumë stilistë, të gjitha njohuritë në fushën e vetive css të kufirit përfundon atje. Por ka edhe disa të tjera gjëra të ftohta me të cilat mund të krijoni gjëra të mrekullueshme!

Struktura komplekse kufitare css

Ka shumë teknika për krijimin e modeleve duke përdorur struktura komplekse kufitare. Për shembull, le të shohim sa vijon ...

Stil kufitar

Ne përdorim gjithmonë vetitë e njohura të ngurta, të ndërprera dhe me pika. Por ka disa prona të tjera të stilit kufitar: brazdë dhe kurriz.

Kufiri: groove 20 px # e3e3e3;

Ose në sintaksë të zgjeruar:

Border-color: # e3e3e3; gjerësia e kufirit: 20 px; kufiri-style: brazdë;

Ndërsa këto veti janë të dobishme, ato nuk janë baza për korniza komplekse.

Skicë

Teknika më e njohur për krijimin e një kufiri të dyfishtë është përdorimi i vetive të skicës.

Kutia (kufiri: 5px solid # 292929; skica: 5px solid # e3e3e3;)

Kjo metodë funksionon mirë, megjithëse na kufizon vetëm në dy kuti. Ndonjëherë ju duhet të krijoni një kufi gradient që përbëhet nga shumë shtresa ... si atëherë?

Pseudo-elemente

Kur teknika e përvijimit nuk është e mjaftueshme mjete alternativeështë përdorimi i pseudoelementeve: para dhe: pas. Me të cilin mund të shtoni korniza shtesë në element:

Kutia (gjerësia: 200 px; lartësia: 200 px; sfondi: # e3e3e3; pozicioni: relative; kufiri: 10 px jeshile;) / * Krijo dy kuti me e njëjta gjerësi e kontejnerit * / .kutia: pas, .kutia: përpara (përmbajtja: ""; pozicioni: absolut; lart: 0; majtas: 0; poshtë: 0; djathtas: 0;) .kutia: pas (kufiri: 5px e kuqe e fortë; skica: 5px e verdhë e fortë;) .kutia: përpara (kufiri: 10px blu e fortë;)

Në pamje jo shumë elegante, por të paktën, punon. Është pak problematike të kuptosh sekuencën e ngjyrave brenda kornizës ... por mund ta kuptosh.

Kuti-Hije

Një "mënyrë fëminore" interesante për të krijuar këtë efekt është përdorimi i vetive CSS3 box-shadow:

Kutia (kufiri: 5px e kuqe e fortë; kuti-hije: 0 0 0 5px jeshile, 0 0 0 10px e verdhë, 0 0 0 15px portokalli;)

Në këtë rast, ne ishim më të zgjuar, duke përdorur një pronë të krijuar posaçërisht në hije. Duke ndryshuar parametrat x, y, blur në "zero", ne mund të përdorim ngjyra të ndryshme për të krijuar shumë korniza.

Por ka një problem, në shfletuesit e vjetër që nuk i kuptojnë vetitë e hijes së kutisë, do të jetë i dukshëm vetëm një kufi i kuq 5 px.

“Mos harroni! Dizajni i faqes në internet duhet të duket ndër-shfletues, domethënë i njëjtë në të gjithë shfletuesit. Përfshirë versionet e vjetra."

Ndryshimi i këndeve

Përveç të përdorurit kuptim i thjeshtë kufi-radius, mund të specifikojmë dy të veçanta - duke i ndarë me / do të specifikojmë rrezen horizontale dhe vertikale.

Për shembull:

Border-radius: 50px / 100px; / * rrezja horizontale, rrezja vertikale * /

...është njësoj si:

Rrezja e kufirit-lart-majtas: 50px 100px; kufiri-lart-djathtas-rreze: 50px 100px; kufiri-poshtë-djathtas-rreze: 50px 100px; kufiri-poshtë-majtas-rreze: 50px 100px;

Kjo teknikë është e përshtatshme për krijimin e formave unike të bllokut. Për shembull, ja se si të krijoni një efekt letre të mbështjellë:

Kutia (gjerësia: 200 pikselë; lartësia: 200 pikselë; sfondi: # 666; rrezja e kufirit-lart-majtas: 15em 1em; kufiri-poshtë-djathtas-rreze: 15em 1em;)

Format CSS duke përdorur kufirin

Kjo teknikë tregon se si mund të krijoni forma css, duke përdorur elementë me dimensione zero të lartësisë dhe gjerësisë. Jeni i befasuar? Le të shohim një shembull ...

Për disa shembuj të ardhshëm, ne do të përdorim shënimin e mëposhtëm:

... dhe stilin bazë të mëposhtëm:

Kutia (gjerësia: 200 px; lartësia: 200 px; sfondi: i zi;)

Shumica shembull i shpeshtë duke përdorur CSS forma - duke krijuar një shigjetë rrjedhëse. Sekreti pas kësaj shigjete është krijimi i një kufiri me ngjyra të ndryshme për secilën anë. Pastaj, vendosni atributet e gjerësisë dhe lartësisë në 0.

Cakto për bllok div Klasa e shigjetave:

Shigjeta (gjerësia: 0; lartësia: 0; kufiri-lart: 100 pikselë e kuqe e fortë; kufiri-djathtas: 100 pikselë jeshile e ngurtë; kufiri-poshtë: 100 pikselë blu e fortë; kufiri majtas: 100 pikselë e verdhë;)

Për të demonstruar, ne fillimisht përdorim sintaksën e zgjeruar. Më pas, ne mund të heqim kod shtesë duke përdorur sintaksën e stenografisë:

Shigjeta (gjerësia: 0; lartësia: 0; kufiri: 100 px solid; ngjyra e kufirit: e kuqe jeshile blu e verdhë;)

Interesante, apo jo? Tani do të vendosim ngjyra transparente në të gjitha anët, përveç anës blu.

Shigjeta (gjerësia: 0; lartësia: 0; kufiri: 100 px solid; kufiri-fund-ngjyra: blu;)

Doli e mrekullueshme! Por bie ndesh paraqitjen semantike, krijoni një div .shigjeta, vetëm për të shtuar një shigjetë në faqe. Për këtë qëllim, ne mund të përdorim pseudo-elemente, të cilat do t'i bëjmë tani.

Krijo një flluskë të folur

Për të krijuar flluskën e të folurit, na duhet një pjesë e vogël CSS e pastër kod dhe një bllok div.

Flluskë e të folurit (pozicioni: relative; ngjyra e sfondit: # 292929; gjerësia: 200 px; lartësia: 150 px; lartësia e rreshtit: 150 px; / * vertikalisht në qendër * / ngjyra: e bardhë; rreshtimi i tekstit: në qendër;)

Flluskë e të folurit: pas (përmbajtja: "";)

Në këtë fazë, ne do të krijojmë shigjetën që kemi bërë më parë, do ta shtojmë atë në element dhe gjithçka që mbetet është pozicionimi:

Flluskë e të folurit: pas (përmbajtja: ""; pozicioni: absolute; gjerësia: 0; lartësia: 0; kufiri: 10 px solid; ngjyra e kufirit: e kuqe jeshile blu e verdhë;)

Nëse duam që shigjeta të drejtohet nga poshtë, do të duhet t'i vendosim të gjithë kufijtë në transparent, përveç atij të sipërm.

Flluskë e të folurit: pas (përmbajtja: ""; pozicioni: absolute; gjerësia: 0; lartësia: 0; kufiri: 10 pikselë; ngjyra e skajit sipër: e kuqe;)

Kur e krijojmë këtë Forma CSS, nuk mund të specifikojmë në mënyrë specifike madhësinë e shigjetës. Në vend të kësaj, ne mund të vendosim veçorinë e gjerësisë së kufirit, e cila do të vendosë madhësinë për shigjetën. Ne gjithashtu do të vendosim pozicionin e shigjetës në fund-mes. Prandaj, ne përdorim vlerat e majës dhe majtas për këtë.

Flluskë e të folurit: pas (përmbajtja: ""; pozicioni: absolute; gjerësia: 0; lartësia: 0; kufiri: 15 px solid; kufiri-lart-ngjyra: e kuqe; lart: 100%; majtas: 50%;)

Përveç kësaj, na mbetet që të japim ngjyrën e njëjtë me atë të bllokut. Mos harroni, kur poziciononi, duhet të merrni parasysh madhësinë e kufijve të tjerë që janë të padukshëm (15 px). Ne gjithashtu do t'i japim bllokut qoshe të rrumbullakosura.

Flluskë e të folurit (/ *… stile të tjera * / rreze-kufi: 10 pikselë;) .flluskë e të folurit: pas (përmbajtja: ""; pozicioni: absolut; gjerësia: 0; lartësia: 0; kufiri: 15 px solid; kufiri-lart -ngjyra: # 292929; lart: 100%; majtas: 50%; margjina majtas: -15 px; / * rregullo për gjerësinë e kufirit * /)

Jo keq, a? Duke përdorur disa klasa css dhe rregullime kufitare, mund të krijoni një gjë të tillë.

/ * Përdorimi i flluskave të të folurit: Aplikoni klasën.speech-bubble dhe.speech-bubble-DIRECTION siç tregohet më poshtë

* / .flluskë e të folurit (pozicioni: relative; ngjyra e sfondit: # 292929; gjerësia: 200 px; lartësia: 150 px; lartësia e linjës: 150 px; / * vertikalisht në qendër * / ngjyra: e bardhë; rreshtimi i tekstit: në qendër; kufiri- rrezja: 10 px; font-familja: sans-serif;) .flluskë e të folurit: pas (përmbajtja: ""; pozicioni: absolute; gjerësia: 0; lartësia: 0; kufiri: 15 px solid;) / * Vendosni shigjetën * / .speech-bubble-top: after (border-bottom-color: # 292929; majtas: 50%; bottom: 100%; margin-left: -15px;) .speech-flluskë-djathtas: pas (border-left-color : # 292929; majtas: 100%; lart: 50%; margjina-lart: -15 px;) .flluskë-flluskë-poshtë: pas (kufiri-lart-ngjyra: # 292929; lart: 100%; majtas: 50%; margjina-majtas: -15 px;) .flluskë e të folurit-majtas: pas (kufi-djathtas-ngjyra: # 292929; lart: 50%; djathtas: 100%; diferencë-lartë: -15 px;)

Bonus! Përqendrimi vertikalisht brenda një blloku

Për një rresht teksti, mund të përdorni lartësinë e rreshtit. Por nëse keni dy ose më shumë linja teksti... Zgjidhja më e mirë do të vendosë veçorinë e shfaqjes në tabelë dhe do ta vendosë të gjithë tekstin në paragrafin. Kështu duket shënimi html: