In de vorige les hebben we geleerd hoe je een rand voor een element kunt instellen. We hebben ook gekeken naar eigenschappen als border-color en border-style , waarmee je de kleur en stijl van de rand kunt aanpassen. Al onze frames kwamen echter uit met rechte hoeken. Nu zullen we u vertellen hoe u dat moet doen afgeronde hoeken in CSS voor randen.
Hoeken afronden: CSS3 border-radius-eigenschap
Het afronden van hoeken in CSS kan voor elk element op een HTML-pagina worden gedaan. Om dit te doen, moet u de eigenschap border-radius erop toepassen met de juiste waarde. Meestal wordt de waarde gespecificeerd in pixels, maar er kunnen ook andere eenheden worden gebruikt, zoals em of percentage (in het laatste geval is de berekening relatief ten opzichte van de breedte van het blok).
Effect van dit pand zal alleen opvallen als het element dat wordt gestyled een gekleurde achtergrond en/of rand heeft. Bijvoorbeeld:
BorderElement (achtergrondkleur: #EEDDFF; rand: 6px effen #7922CC; randradius: 25px; )
De hierboven beschreven stijl geeft het volgende resultaat voor het element
Je kunt ook alleen afgeronde randen maken voor de boven- of onderhoeken van het element, of elke hoek een andere afrondingsradius geven - veel ruimte voor fantasie! Voorbeeld:
BorderElement ( achtergrondkleur: #EEDDFF; rand: 6px effen #7922CC; randradius: 25px; ) .borderElement1 ( achtergrondkleur: #FFE8DB; rand: 6px effen #FF5A00; randradius: 15px 100px 15px 100px; ) 
Maar dat is nog niet alles: in plaats van eenvoudige ronde hoeken kunt u een elliptische afronding opgeven. Om dit te doen, moet u twee waarden opgeven, gescheiden door een schuine streep (voor de horizontale en verticale halve assen van de ellips). Laten we een voorbeeld geven van een blok van 150x450 pixels:
BorderElement (achtergrondkleur: #EEDDFF; rand: 6px effen #7922CC; randradius: 280px/100px; ) 
Je kunt de waarden combineren (dat wil zeggen zowel normaal als elliptisch afgerond in dezelfde stijl gebruiken), en je kunt ook voor elke hoek een persoonlijke stijl toevoegen met behulp van de juiste eigenschappen:
- border-top-left-radius - voor de linkerbovenhoek;
- border-top-right-radius - voor de rechterbovenhoek;
- rand-linksonder-radius - voor de linkerbenedenhoek;
- border-bottom-right-radius - voor de rechter benedenhoek.
Het principe van het afronden van hoeken
De onderstaande afbeelding laat zien hoe hoekafronding wordt berekend in CSS. Als er dus één enkele waarde is opgegeven voor de hoek (bijvoorbeeld 20px), betekent dit dat de afronding plaatsvindt langs een cirkel met een straal van 20 pixels. In het geval dat twee waarden zijn opgegeven, gescheiden door een schuine streep, bijvoorbeeld 30px/20px , worden de hoeken afgerond langs een ellips. De eerste waarde is in dit geval de lengte van de horizontale halve as van de ellips - 30px, en de tweede waarde is de lengte van de verticale halve as - 20px:
De CSS border-radius eigenschap wordt door iedereen ondersteund moderne versies browsers.
). Dit wordt gedaan met behulp van de CSS-eigenschap border-radius. In dit artikel bekijken we alle verschillende opties.
De CSS-grensradiussyntaxis is:
grensradius: [ filet_waarde];
Hoe hoeken in HTML af te ronden met CSS
Laten we eens kijken naar voorbeelden van het afronden van hoeken met behulp van CSS. Bijvoorbeeld
В этом случае все 4 края элемента будут скруглены по 30px.
Значение скругления означает то, какой радиус окружности должен быть в уголке.
Можно скруглять каждый угол с разными радиусами. Для этого нужно написать
border-radius : 10px 7px 0px 0px ;
Последовательность этих цифр следующая:
- Верхний левый угол (в примере это 10px)
- Верхний правый угол (в примере это 7px)
- Нижний правый угол (в примере это 0px)
- Нижний левый угол (в примере это 0px)
Например
Результат:
Чтобы не запоминать какое значение за каким идет можно писать в CSS в отдельности каждый угол
border-top-left-radius : 10px ; // верхний левый угол border-top-right-radius : 7px ; // верхний правый угол border-bottom-right-radius : 0px ; // нижний правый угол border-bottom-left-radius : 0px ; // нижний левый угол
Помимо этого, можно также изменять и радиус для каждого угла в отдельности для горизонтальной и вертикальной плоскостей.
Задание второго радиуса нужно задавать через слэш "/" в случае border-radius или вторым значением рядом в случае прямого указания каждого угла радиуса
border-radius : 5px 5px 5px 5px / 10px 10px 10px 10px ; или можно задать так: border-top-left-radius :5px 10px ; // верхний левый угол border-top-right-radius :5px 10px ; // верхний правый угол border-bottom-right-radius :5px 10px ; // нижний правый угол border-bottom-left-radius :5px 10px ; // нижний левый угол
Первый параметр отвечает за горизонтальный радиус, второй за вертикальный.
Например, с помощью этих свойств можно сделать эллипс:
Результат:
ПримечаниеЗначения 100px 100px 100px 100px / 200px 200px 200px 200px можно было бы написать еще компактнее:
border-radius : 100px / 200px ;
Изменяя параметры каждого из углов, можно сделать различные интересные скругленные элементы. Например, можно сделать круг, эллипс, каплю, камень, яйцо и т.п.
Задание толщины, цвета и типа линии при скруглении
Помимо значений закруглений можно также задавать толщину, цвет и тип линии скругления. Делаются все эти три параметра через свойство border :
border : [толщина ] [тип_линии ] [цвет ];
Например:
border : 1px solid #00ff00 ;
- Толщина - задается чаще всего в пикселях
- Тип линии
может принимать значения:
- solid (сплошной)
- dashed (пунктирный)
- dotted (ряд точек)
- groove (линия бороздка)
- inset (вдавленная линия)
- outset (выдавленная линия)
- Цвет можно задать либо в формате RGB, либо просто названием (см. коды и названия html цветов)
Приведем пример
Таким образом можно красиво оформлять различные рамки для объявлений, замечаний на сайте.
Свечение для скругления
Помимо задания толщины, цвета и типа линии можно также задавать и свечении рамки. Делается это с помощью свойства box-shadow
box-shadow : 0px 0px 4px 2px #a0b ;
Первые два параметра (0px 0px) задают сдвиг тени по горизонтали и вертикали соответственно. Следующие два параметра (4px 2px) задают силу свечения вокруг. Чтобы получилось красиво нужно делать одну цифру больше другой, а вообще надо экспериментировать. Последний параметр - цвет (#a0b).
Например
Результат:
Мы приводили всегда в качестве примеров тег
Браузеры
Старые браузеры могут не поддерживать свойство border-radius
. Так, IE ниже 9 версии, Firefox ниже 4 не отображают закругления. Необходимо прописывать вендорные префиксы CSS :
-webkit-border-radius :5px ; -moz-border-radius :5px ; border-radius :5px ;
Свойство border radius CSS используется для закругления углов элемента. Это сокращенная версия свойств: border-top-left-radius , border-top-right-radius , border-bottom-right-radius и border-bottom-left-radius .
Оно может принимать от одного до четырех значений или восемь значений, разделенных косой чертой «/» , с одним — четырьмя значениями с каждой стороны от косой черты.
- Если косая черта не указана, то свойство может принимать одно, два, три или четыре значения.
border-radius: [значение радиуса] [значение радиуса]? [значение радиуса]? [значение радиуса]?; // "?" указывать данное значение необязательно
- Если задано четыре значения, то они определяют радиусы каждого из четырех углов. То есть первое значение будет указывать x и y радиуса верхнего левого угла, таким образом, это будет круговая кривая. Второе значение задает радиусы для верхнего правого угла, третье — определяет радиусы нижнего правого угла, а четвертое — нижнего левого;
- Если задано три значения, первое устанавливает радиус верхнего левого угла, второе — радиус верхнего правого и левого нижнего углов, а третье — нижнего правого угла;
- Если задано два значения CSS table border radius , первое определяет радиусы левого верхнего и правого нижнего углов, а второе — радиусы верхнего правого и нижнего левого углов;
- Если задано одно значение, то оно задает одинаковые радиусы четырех углов.
Например:
border-radius: 1em 3em 2em;
эквивалентно:
border-top-left-radius: 1em; border-top-right-radius: 3em; border-bottom-right-radius: 2em; border-bottom-left-radius: 3em;
В каждом из перечисленных выше случаев, когда не используется косая черта, четыре угла элемента будут закруглены, а их кривизна будет идеальным кругом:
Два одинаковых радиуса для каждого угла дают круговую кривую. Каждый угол в этом примере имеет горизонтальный и вертикальный радиус 50 пикселей.
- Если косая черта указана, то свойство может принимать до восьми значений — от одного до четырех значений с каждой стороны от косой черты.
Значения, указанные перед косой чертой, задают горизонтальный радиус углов. Значения, указанные после косой черты, задают вертикальный радиус соответствующих углов.
Например:
border-radius: 2em 1em 4em / 0.5em 3em;
эквивалентно:
border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em;
В этом случае применения border radius CSS углы элемента будут закруглены, и их кривизна будет эллиптической:
Два неодинаковых радиуса для каждого угла дают эллиптическую кривизну. Каждый угол в этом примере имеет горизонтальный радиус 100 пикселей и вертикальный радиус 50 пикселей.
Общая информация и примечания
Если элемент использует фоновый цвет или изображение, фон также будет обрезаться указанным радиусом границы:
Фоновое изображение элемента обрезается в соответствии с указанным радиусом границы.
Но иногда цвет фона элемента может «просачиваться » за пределы границы, когда она закруглена. Чтобы исправить это, можно использовать свойство background-clip и установить для него значение padding-box .
Element { border-radius: 30px; background-clip: padding-box; }
Если у элемента есть границы изображения, то они не подрезается кривой закругленных углов.
Содержимое элемента может выходить за его границы в углах, которые были закруглены, если для элемента не установлено значение отступа, достаточное, чтобы сместить содержимое внутрь:
Содержимое элемента может выходить за закругленную границу, если для элемента не заданы отступы.
В этом примере moz border radius CSS добавлены отступы, чтобы содержимое не выходило за закругленные углы границы. Обратите внимание, что сама граница не отображается, но фон все равно будет иметь закругленные углы.
Element { background: black; color: white; border-radius: 1em; padding: 1em; }
Кроме этого область вне кривой границы не принимает pointer events , связанные с данным элементом.
Также кривые углов не должны пересекаться: когда сумма радиусов любых двух соседних границ превышает размер блока, браузеры должны пропорционально уменьшить используемые значения всех радиусов границ, чтобы ни один из них не перекрывался.
Процентные значения идеально подходят для создания круглых или эллиптических форм. Использование border radius CSS: 50% дает полностью круглую форму элемента, у которого высота и ширина равны:
Элемент с одинаковой высотой, шириной и значением радиуса границы 50%.
Если высота и ширина элемента не равны, мы получим эллиптическую форму:
Элемент с радиусом границы 50%, высота и ширина которого не равны.
Официальный синтаксис
Синтаксис:
border-radius: [<длина> | <проценты>] {1,4} {1,4}]?
Начальное значение: 0 0 0 0, оно задает начальное значения каждого из отдельных свойств.
Применяется: ко всем элементам. Но браузеры не обязательно должны применять его к элементам table и inline-table , когда для свойства border-collapse задано значение collapse . На данный момент поведение внутренних элементов таблицы не определено.
Анимируется: Каждое из полных свойств анимируется, как два значения длины, процентных значения или значения calc() . Когда оба значения являются длинами, они интерполируются как длины. Когда оба значения являются процентами, они интерполируются в процентах. Иначе оба значения преобразуются свойством calc() .
Значения
Неофициальный синтаксис webkit border radius CSS :
border-radius: [значение радиуса] [значение радиуса]? [значение радиуса]? [значение радиуса]?;
border-radius: [верхний левый горизонтальный радиус] [верхний правый горизонтальный радиус]? [нижний правый горизонтальный радиус]? [нижний левый горизонтальный радиус]? / [верхний левый вертикальный радиус] [верхний правый вертикальный радиус]? [нижний правый вертикальный радиус]? [нижний левый вертикальный радиус]?
В обоих случаях вопросительный знак (?) означает, что значение является необязательным. Если значение опущено, браузер определяет его, как описано выше.
Каждый радиус может задаваться процентами или значением длины. Процентное соотношение для горизонтального радиуса относится к ширине блока, тогда как процентное соотношение для вертикального радиуса относится к высоте блока. Отрицательные значения не допускаются.
border-radius: 50%; border-radius: 30px 20px 40px; border-radius: 1em 2em; border-radius: 3em / 2em 4em; border-radius: 1em 2em 1em 3em / 2em 3em;
Демо-версия
Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.
Краткая информация
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| Группирует значения. | [ crop || cross ] | |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через косую черту (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчёт ведётся относительно ширины блока.
В случае задания двух параметров через косую черту, то первый параметр задаёт радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рис. 1 показана разница между обычным скруглённым уголком и эллиптическим уголком.
Рис. 1. Радиус скругления для создания разных типов уголков
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
div { background: #e4efc7; border: 1px solid #333; padding: 10px; border-radius: 0 ; }
Пример
Resultaat dit voorbeeld getoond in afb. 2.
Rijst. 2. Afrondingsradiussen
Objectmodel
Voorwerp.style.borderRadius
Opmerking
Chrome vóór versie 4.0, Safari vóór versie 5.0 en Android vóór versie 2.1 gebruiken de eigenschap -webkit-border-radius.
Firefox vóór versie 4.0 gebruikt de eigenschap -moz-border-radius.
Specificatie
Elke specificatie doorloopt verschillende goedkeuringsfasen.
- Aanbeveling - De specificatie is goedgekeurd door het W3C en wordt aanbevolen als standaard.
- Aanbeveling van kandidaten ( Mogelijke aanbeveling ) - de groep die verantwoordelijk is voor de standaard is ervan overtuigd dat deze aan de doelstellingen voldoet, maar heeft hulp nodig van de ontwikkelingsgemeenschap om de standaard te implementeren.
- Voorgestelde aanbeveling Voorgestelde aanbeveling) - in dit stadium wordt het document ter definitieve goedkeuring voorgelegd aan de W3C Adviesraad.
- Werkconcept - Een meer volwassen versie van een concept dat is besproken en aangepast voor beoordeling door de gemeenschap.
- Redactievoorstel ( Redactie ontwerp) - een conceptversie van de standaard nadat wijzigingen zijn aangebracht door de projectredacteuren.
- Voorlopige versie ( Conceptspecificatie) - de eerste conceptversie van de standaard.
Ik weet zeker dat je al bekend bent met de border css-eigenschap. Leer je iets nieuws dat je nog niet eerder wist over CSS Border? Nou, je zult niet alleen leren, maar je zult ook een aantal nieuwe dingen zien die je nog nooit eerder wist!
Niet alleen kan CSS3 worden gebruikt om afgeronde hoeken te maken, maar pure CSS-code kan ook worden gebruikt om complexe vormen te creëren. Voorheen kon u een achtergrondafbeelding gebruiken om de indruk te wekken van afgeronde hoeken. Dankzij nieuwe technieken voor het gebruik van border kunnen we dit doen met pure CSS-code.
Basisprincipes van het gebruik van CSS-rand
U bent vast al bekend met de standaard rand gebruiken eigenschappen:
Rand: 1px effen zwart;
De bovenstaande code levert een 1px-rand op die zwart is. Gemakkelijk en eenvoudig. Je kunt de syntaxis ook een beetje uitbreiden:
Randbreedte: dik; randstijl: effen; randkleur: zwart;
Als aanvulling kunt u specifieke waarden gebruiken voor de eigenschap border-width, drie trefwoorden: dun, medium, dik.
Maar het gebruik van de uitgebreide syntaxis is niet altijd praktisch. Laten we eens kijken naar een voorbeeld waarbij u de kleur van een blokframe moet wijzigen wanneer u met de muis beweegt. In dit geval is het gebruik van de verkorte syntaxis veel eenvoudiger:
Box (rand: 1px effen rood; ) .box:hover (rand: 1px effen groen; )
Een elegantere en eenvoudigere manier om dit te doen is:
Box (rand: 1px effen rood; ) .box:hover (randkleur: groen; )
Zoals u kunt zien, is de geavanceerde techniek ook nuttig als we slechts enkele eigenschappen wijzigen: breedte, stijl, kleur en andere.
Grensradius
Grens-radius- Dit is de "gouden" eigenschap van CSS3 - de eerste, meest voorkomende eigenschap die praktisch en nuttig werd. Met uitzondering van IE8 en onderstaande versies geven alle browsers hiermee afgeronde hoeken weer.
Hoewel het noodzakelijk is om speciale voorvoegsels voor Webkit en Mozilla te gebruiken om de stijl correct te laten zijn.
Webkit-border-radius: 10px; -moz-border-radius: 10px; randradius: 10px;
Tegenwoordig kunnen we speciale voorvoegsels verwijderen en gebruiken standaard formulier grensradius.
Een ander voordeel is dat we voor elke zijde van het blok speciale waarden kunnen gebruiken:
Straal rand linksboven: 20px; rand-rechtsboven-radius: 0; rand-rechtsonder-radius: 30px; rand-linksonder-radius: 0;
In de bovenstaande code kan het instellen van de straal van de rand-rechtsboven en de straal van de rand-links-onder op "null" een aantal verbazingwekkende vormen opleveren. Hoewel het element mogelijk enkele eigenschappen overneemt die opnieuw moeten worden ingesteld.
Net als bij marge en opvulling kunnen we de syntaxis comprimeren:
/* linksboven, rechtsboven, rechtsonder, linksonder */ randradius: 20px 0 30px 0;
Als voorbeeld van het gebruik van de eigenschap border-radius laat ik u een ‘citroen’ zien die ontwerpers vaak gebruiken bij het ontwerpen van websites:
Citroen ( breedte: 200px; hoogte: 200px; achtergrond: #F5F240; rand: 1px effen #F0D900; randradius: 10px 150px 30px 150px; )
Laten we verder gaan dan de basis
Veel ontwerpers beschikken over alle kennis op dit gebied CSS-eigenschappen grens, daar houdt het op. Maar er zijn nog een aantal andere coole dingen die je kunt gebruiken om geweldige dingen te maken!
Complexe CSS-grensstructuren
Er zijn veel technieken om ontwerpen te maken met behulp van complexe structuren grens. Laten we bijvoorbeeld eens kijken naar het volgende...
Randstijl
Wij gebruiken altijd de meest bekende eigenschappen effen, gestippeld en gestippeld. Maar er zijn nog een paar andere randstijleigenschappen: groef en rand.
Rand: 20px groef #e3e3e3;
Of in uitgebreide syntaxis:
Randkleur: #e3e3e3; randbreedte: 20px; randstijl: groef;
Hoewel deze eigenschappen nuttig zijn, vormen ze niet de basis voor het maken van complexe frames.
Overzicht
De populairste techniek voor het maken van een dubbele rand is het gebruik van de eigenschap outout.
Kader (rand: 5px effen #292929; omtrek: 5px effen #e3e3e3; )
Deze methode werkt prima, hoewel het ons beperkt tot slechts twee frames. Soms moet je een verlooprand maken die uit veel lagen bestaat... hoe dan?
Pseudo-elementen
Als de omtrektechniek niet genoeg is, alternatieve middelen is om de pseudo-elementen:before en:after te gebruiken. Waarmee je kunt toevoegen extra kozijnen naar element:
Box ( breedte: 200px; hoogte: 200px; achtergrond: #e3e3e3; positie: relatief; rand: 10px effen groen; ) /* Maak twee vakken met dezelfde breedte als de container */ .box:after, .box:before ( inhoud: ""; positie: absoluut links: 0; .box:na (rand: 5px effen geel; ) .box:voor (rand: 10px effen blauw)
Het ziet er niet erg elegant uit, maar ten minste, het werkt. Het is een beetje moeilijk om de volgorde van de kleuren binnen de kaders te bepalen... maar je begrijpt het wel.
Box-schaduw
Een interessante "kindermanier" om een soortgelijk effect te creëren is het gebruik van de CSS3 box-shadow eigenschap:
Vak (rand: 5px effen rood; vakschaduw: 0 0 0 5px groen, 0 0 0 10px geel, 0 0 0 15px oranje; )
In dit geval waren we slimmer en gebruikten we een speciale box-shadow-eigenschap. Door de x-, y- en vervagingsparameters op nul te zetten, kunnen we verschillende kleuren gebruiken om meerdere frames te maken.
Maar er is een probleem: in oudere browsers die de box-shadow-eigenschap niet begrijpen, zal slechts één rood kader van 5px zichtbaar zijn.
"Herinneren! Het ontwerp van de site moet er cross-browser uitzien, dat wil zeggen hetzelfde in alle browsers. Inclusief oudere versies."
Veranderende hoeken
Naast de gebruikte eenvoudige betekenis grensradius, we kunnen twee afzonderlijke specificeren - door ze te scheiden / geven we de horizontale en verticale straal aan.
Bijvoorbeeld:
Randradius: 50px / 100px; /* horizontale straal, verticale straal */
... dit komt overeen met:
Straal rand linksboven: 50px 100px; rand-rechtsboven-radius: 50px 100px; rand-rechtsonder-radius: 50px 100px; rand-linksonder-radius: 50px 100px;
Deze techniek is geschikt om te creëren unieke vormen blokken. Zo kunt u bijvoorbeeld een ingepakt papiereffect creëren:
Box ( breedte: 200px; hoogte: 200px; achtergrond: #666; straal rand-linksboven: 15em 1em; straal rand-rechtsonder: 15em 1em; )
CSS-formulieren met rand
Deze techniek laat zien hoe u CSS-formulieren kunt maken, terwijl u elementen gebruikt nul afmetingen hoogte en breedte. Verrast? Laten we eens kijken naar een voorbeeld...
Voor de volgende paar voorbeelden gebruiken we de volgende opmaak:
...en de volgende basisstijl:
Vak (breedte: 200px; hoogte: 200px; achtergrond: zwart; )
Meest gebruikelijk voorbeeld met behulp van CSS vormen - een vloeiende pijl creëren. Het geheim van deze pijl ligt in het creëren van een grens met verschillende kleuren voor elke kant. Stel vervolgens de kenmerken width en height in op 0.
Laten we toewijzen aan div blok pijl klasse:
Pijl ( breedte: 0; hoogte: 0; rand boven: 100px effen rood; rand rechts: 100px effen groen; rand onder: 100px effen blauw; rand links: 100px effen geel; )
Om dit aan te tonen gebruiken we eerst de uitgebreide syntaxis. Vervolgens kunnen we de extra code verwijderen met behulp van de verkorte syntaxis:
Pijl ( breedte: 0; hoogte: 0; rand: 100px effen; randkleur: rood groen blauw geel; )
Interessant, nietwaar? Nu gaan we installeren transparante kleuren aan alle kanten behalve de blauwe kant.
Pijl ( breedte: 0; hoogte: 0; rand: 100px effen; rand-onder-kleur: blauw; )
Het bleek geweldig! Maar dit is in tegenspraak semantische lay-out, maak een .arrow-div, gewoon om een pijl aan de pagina toe te voegen. Voor dit doel kunnen we pseudo-elementen gebruiken, wat we nu zullen doen.
Maak een tekstballon
Om een tekstballon te maken, hebben we een klein stukje nodig pure CSS code en één div-blok.
Tekstballon (positie: relatief; achtergrondkleur: #292929; breedte: 200px; hoogte: 150px; lijnhoogte: 150px; /* verticaal gecentreerd */ kleur: wit; tekstuitlijning: gecentreerd; )
Tekstballon:na ( inhoud: ""; )
In dit stadium zullen we de pijl maken die we eerder hebben gemaakt, deze aan het element toevoegen en het enige dat overblijft is deze te positioneren:
Tekstballon:na ( inhoud: ""; positie: absoluut; breedte: 0; hoogte: 0; rand: 10px effen; randkleur: rood groen blauw geel; )
Als we willen dat de pijl naar beneden wijst, moeten we alle randen transparant maken, behalve de bovenste.
Tekstballon:na ( inhoud: ""; positie: absoluut; breedte: 0; hoogte: 0; rand: 10px effen; rand-top-kleur: rood; )
Wanneer we dit creëren CSS-vorm, kunnen we de grootte van de pijl niet specifiek aangeven. In plaats daarvan kunnen we de eigenschap border-width instellen, die een grootte aan de pijl toewijst. We zullen ook de positie van de pijl onderaan in het midden instellen. Daarom gebruiken we hiervoor de waarden bovenaan en links.
Tekstballon:na ( inhoud: ""; positie: absoluut; breedte: 0; hoogte: 0; rand: 15px effen; rand-boven-kleur: rood; bovenkant: 100%; links: 50%; )
Bovendien hoeven we het alleen maar een kleur te geven die hetzelfde is als het blok. Houd er rekening mee dat u bij het positioneren rekening moet houden met de grootte van de andere randen, die onzichtbaar zijn (15px). Ook geven we het blok afronding op de hoeken.
Tekstballon ( /* … andere stijlen */ border-radius: 10px; ) .speech-bubble:after ( inhoud: ""; positie: absoluut; breedte: 0; hoogte: 0; rand: 15px effen; rand-top -kleur: #292929; boven: 100%; marge-links: -15px; /* aanpassen voor randbreedte */ )
Niet slecht, hè? Meerdere gebruiken css-klassen en grenstrucs, zoiets kun je maken.
/* Gebruik van spraakbellen: pas klasse .speech-bubble en .speech-bubble-DIRECTION toe zoals hieronder weergegeven
Bonus! Verticale centrering binnen het blok
Voor één regel tekst kunt u regelhoogte gebruiken. Maar als je twee of meer regels tekst hebt... De beste oplossing zal de weergave-eigenschap instellen op tabel en alle tekst in een alinea plaatsen. Zo ziet het eruit html-opmaak:
Tekstballon ( /* andere stijlen */ weergave: tabel; ) .spraakballon p ( weergave: tabelcel; verticaal uitgelijnd: midden; )
We beperken ons niet tot driehoeken. CSS kan verschillende vormen weergeven - zelfs harten en een teken voor biologisch gevaar.
Biologisch gevaar (breedte: 0; hoogte: 0; rand: 60px effen; randradius: 50%; kleur rand boven: zwart; kleur rand onder: zwart; kleur rand links: geel; rand rechts- kleur: geel)
