خط مرزی سینتکس با عرض مرز CSS

چند درس قبلی را بررسی کردیم تصویر شماتیکبلوک یک صفحه وب، و همچنین به طور خلاصه در مورد ویژگی CSS به عنوان border صحبت کرد که با آن می توانید مرزهایی را برای یک عنصر تعیین کنید. این بار با استفاده از مثال هایی به این ویژگی با جزئیات بیشتری نگاه می کنیم.

مرز بین حاشیه و بالشتک قرار دارد. این به این معنی است که حاشیه است پشتمرز. حاشیه را می توان در هر چهار طرف (مثل اینکه بلوک را در یک قاب محصور می کند) یا در یک، دو یا سه طرف تنظیم شود. CSS به شما اجازه می دهد تا ضخامت، رنگ و سبک حاشیه ها را کنترل کنید. بیایید این را با جزئیات بیشتر مطالعه کنیم.

Border-width: عرض حاشیه

با استفاده از خواص مرزی-width عرض حاشیه را تعیین می کند. اغلب این اندازه با پیکسل نشان داده می شود. می توانید عرض های یکسان یا متفاوت را برای هر چهار حاشیه تنظیم کنید، به عنوان مثال:

/* همه 4 حاشیه 2px عرض دارند: */ border-width: 2px; /* حاشیه های بالا و پایین 2px عرض، چپ و راست 4px هستند: */ border-width: 2px 4px; /* حاشیه بالا - 2px، چپ و راست - 6px، پایین - 3px: */ border-width: 2px 6px 3px; /* حاشیه بالا - 2px، سمت راست - 3px، پایین - 4px، سمت چپ - 5px: */ border-width: 2px 3px 4px 5px;

علاوه بر این، کلمات کلیدی برای نشان دادن عرض حاشیه وجود دارد:

• نازک - حاشیه 2 پیکسل عرض؛
• متوسط ​​- حاشیه 4 پیکسل عرض؛
• ضخامت - حاشیه 6 پیکسل عرض.

رنگ حاشیه: رنگ حاشیه

ویژگی border-color رنگ حاشیه ها را مشخص می کند. رنگ ها را می توان در هر فرمت CSS مشخص کرد: کلمات کلیدی، هگزادسیمال یا RGB - هر کدام که برای شما راحت تر است. بر اساس قیاس با ویژگی قبلی، می توانید یک رنگ برای همه حاشیه ها تنظیم کنید یا رنگ های مختلفی را برای هر حاشیه انتخاب کنید.

رنگ حاشیه: #FFFF00;

شما همچنین می توانید تنظیم کنید رنگ شفاف، نوشتن:

رنگ حاشیه: شفاف

سبک حاشیه: سبک حاشیه

به لطف ویژگی حاشیه‌ای، می‌توانید یک حاشیه معمولی را به شکل نقطه‌دار، دوتایی یا سه‌بعدی تبدیل کنید - تعداد زیادی وجود دارد. معانی مختلف. برای این کار از کلمات کلیدی زیر استفاده کنید:

• جامد - مرز جامد؛
• نقطه چین - مرز نقاط؛
• خط چین - حاشیه نقطه چین؛
• دو برابر - حاشیه دوتایی;
• شیار - مرز شکاف حجمی؛
• خط الراس - یک حاشیه حجیم با لبه ضخیم (در اصل وارونگی سبک قبلی).
• ابتدا - مرز اکسترود شده؛
• inset - یک حاشیه تورفته (در اصل وارونگی سبک قبلی).

مانند ویژگی های border-width و border-color، هر حاشیه بلوک را می توان به گونه ای متفاوت استایل داد - برای مثال، می توانید حاشیه های بالا و پایین را به صورت چین دار و حاشیه های راست و چپ را دو برابر کنید. در اینجا همه چیز فقط به تخیل بستگی دارد.

حاشیه به سبک: دو نقطه.

توجه داشته باشید: V مرورگرهای مختلفظاهر حاشیه ممکن است کمی متفاوت باشد.

مرز ویژگی CSS مشترک: 3 در 1

برای استایل دادن به حاشیه، لازم نیست از هر سه ویژگی بالا به ترتیب استفاده کنید. کافی است در مورد ژنرال بدانید دارایی جهانیمرز CSS، که با آن یک استایل را بسیار سریعتر می نویسید و در فضا صرفه جویی می کنید. برای این منظور در بدون ترتیب خاصیمقادیر هر سه ویژگی را ثبت کنید:

حاشیه: 2px نقطه‌دار #FF0000;

مرزها برای احزاب فردی

با استفاده از ویژگی های حاشیه اضافی در CSS، می توانید هر بلوک را به صورت جداگانه استایل دهید. آنها به شما در این امر کمک خواهند کرد خواص زیر:

• border-top - سبک برای حاشیه بالا.
• border-right - برای مرز سمت راست؛
• حاشیه پایین - برای حاشیه پایین؛
• border-left - برای حاشیه سمت چپ.

حاشیه بالا: 2px جامد #0000FF; border-bottom: 7px double #000080;

نتایج

اکنون که می دانید چگونه برای بلوک ها حاشیه بسازید، می توانید ساختن آنها را تمرین کنید. راه های زیادی برای توصیف مختصر یک سبک بدون داشتن خطوط زیاد در آن وجود دارد. فایل CSS. آگاهی از اصول استایل شیت های آبشاری در اینجا نقش مهمی ایفا می کند. بیایید به یک مثال نگاه کنیم.

فرض کنید می‌خواهید یک حاشیه برای یک div با سه حاشیه خاکستری یکدست و یک حاشیه پایین سبز چین ایجاد کنید. شما می توانید این سبک را به صورت زیر بنویسید:

Div (حاشیه-راست: 8 پیکسل دو برابر #FF0000؛ حاشیه-چپ: 8 پیکسل دو برابر #FF0000؛ حاشیه-پایین: 8 پیکسل دو برابر #FF0000؛ حاشیه-بالا: 4 پیکسل نقطه‌دار #FDD201؛ )

اما این یک پست خیلی طولانی است. همه اینها را می توان به اختصار نوشت:

Div (حاشیه: 8 پیکسل دو برابر #FF0000؛ حاشیه بالا: 4 پیکسل نقطه‌دار #FDD201؛ )

همانطور که در بالا ذکر شد، در اینجا ما از ویژگی های آبشاری CSS استفاده خواهیم کرد. ابتدا استایل را برای هر چهار طرف کادر می نویسیم و سپس استایل را به طور جداگانه برای حاشیه پایین مشخص می کنیم و بدین ترتیب استایل قبلی را تا حدی بازنویسی می کنیم. رعایت این توالی خطوط بسیار مهم است.

کار کوچک

سعی کنید یک حاشیه برای div با ابعاد 200x200 پیکسل ایجاد کنید. سبک های قاب باید به صورت زیر باشد:

• حاشیه های بالا و پایین را محکم کنید جامد، به آنها همان رنگ انتخابی و عرض 5 پیکسل بدهید.
• حاشیه سمت چپ را ایجاد کنید نقطه چین، 3 پیکسل عرض، رنگی متفاوت از رنگ قبلی انتخاب کنید.
• حاشیه سمت راست را دو برابر کنید دو برابر، 7 پیکسل عرض، رنگ متفاوت با دو مورد قبلی.

در نهایت، کار شما باید به این شکل باشد (به جز رنگی که انتخاب می کنید):

نتیجه کار (مشاهده در کروم)

ویژگی CSS border برای ایجاد مرز یک شی، یعنی ضخامت حاشیه، رنگ و سبک آن استفاده می شود. این ویژگی به طور گسترده در HTML استفاده می شود. می توانید ایجاد کنید جلوه های مختلفبرای درک بهتر از محتوای صفحه به عنوان مثال، یک نوار کناری، هدر وب سایت، منو و غیره طراحی کنید.

1. نحو مرزی CSS

مرز: حاشیه به سبک حاشیه با رنگ | به ارث می برند;

• حاشیه-عرض - ضخامت حاشیه. می توانید آن را در پیکسل (px) تنظیم کنید یا از مقادیر استاندارد نازک، متوسط، ضخیم استفاده کنید (فقط از نظر عرض در پیکسل متفاوت هستند)
• border-style - سبک حاشیه نمایش داده شده. می تواند مقادیر زیر را بگیرد
  • هیچ یا پنهان - مرز را لغو می کند
  • نقطه چین - قاب نقطه چین
  • خط تیره - قاب ساخته شده از خط تیره
  • خط جامد - ساده (بیشتر استفاده می شود)
  • قاب دوتایی - دوبل
  • groove - حاشیه 3 بعدی شیاردار
  • برآمدگی، درونی، ابتدایی - جلوه‌های قاب سه بعدی مختلف
  • ارث بری - مقدار عنصر والد اعمال می شود
• رنگ حاشیه - رنگ حاشیه. می توان با استفاده از نام خاصرنگ ها یا در فرمت RGB(به نام رنگ های html برای سایت مراجعه کنید)

توجه داشته باشید

مقادیر موجود در ویژگی مرزی CSS را می توان به هر ترتیبی تنظیم کرد. متداول ترین دنباله استفاده شده "رنگ سبک ضخامت" است.

2. نمونه هایی با حاشیه های مختلف CSS

2.1. مثال. سبک های مختلف طراحی حاشیه به سبک حاشیه

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 формате.

Пример

که در در این مثالیک حاشیه دوتایی در اطراف بلوک اضافه می شود. نتیجه در شکل نشان داده شده است. 2.

برنج. 2. اعمال اموال مرزی

مدل شی

یک شی.سبک.حاشیه

توجه داشته باشید

مرورگر اینترنت اکسپلوررتا نسخه ششم شامل، با ضخامت حاشیه 1 پیکسل، نقطه چین را به صورت نقطه چین نشان می دهد. با ضخامت 2 پیکسل و بالاتر، مقدار نقطه به درستی کار می کند. این باگ در IE7 رفع شده است، اما فقط برای تمام مرزهای 1 پیکسل. اگر یکی از حاشیه های بلوک ضخامت 2 پیکسل یا بیشتر داشته باشد، در IE7 مقدار نقطه چین به نقطه چین تبدیل می شود.

هنگام استفاده از مقادیر groove، ridge، inset یا outset، سبک حاشیه ممکن است بین مرورگرها کمی متفاوت باشد.

مشخصات

هر مشخصات از چندین مرحله تایید می گذرد.

• توصیه - مشخصات توسط W3C تایید شده است و به عنوان یک استاندارد توصیه می شود.
• توصیه نامزد ( توصیه احتمالی ) - گروه مسئول استاندارد از رسیدن به اهداف خود راضی است، اما برای اجرای استاندارد از جامعه توسعه کمک می خواهد.
• توصیه پیشنهادی توصیه پیشنهادی) - در این مرحله سند برای تایید نهایی به شورای مشورتی W3C ارائه می شود.
• پیش نویس کاری - نسخه بالغ تر یک پیش نویس که برای بررسی جامعه مورد بحث و اصلاح قرار گرفته است.
• پیش نویس سردبیر ( پیش نویس سرمقاله) - نسخه پیش نویس استاندارد پس از ایجاد تغییرات توسط ویراستاران پروژه.
• پیش نویس ( پیش نویس مشخصات) - اولین نسخه پیش نویس استاندارد.

×

من مطمئن هستم که شما قبلاً با ویژگی مرزی css آشنا هستید. آیا چیز جدیدی که قبلاً در مورد مرز css نمی دانستید، یاد خواهید گرفت؟ خوب، نه تنها یاد خواهید گرفت، بلکه چندین چیز جدید را نیز خواهید دید که قبلاً هرگز نمی دانستید!

نه تنها می توان از CSS3 برای ایجاد گوشه های گرد استفاده کرد، بلکه می توان از کدهای CSS خالص نیز برای ایجاد استفاده کرد اشکال پیچیده. قبلاً می‌توانستید از تصویر پس‌زمینه برای ایجاد ظاهر گوشه‌های گرد استفاده کنید. به لطف تکنیک های جدید برای استفاده از مرز، می توانیم این کار را با کد CSS خالص انجام دهیم.

اصول استفاده از مرز css

احتمالاً قبلاً با آن آشنا هستید استفاده استانداردویژگی های حاشیه:

حاشیه: 1px سیاه و سفید جامد.

کد بالا یک حاشیه 1 پیکسلی را خروجی می دهد که سیاه است. به سادگی و به راحتی. همچنین می توانید نحو را کمی گسترش دهید:

عرض حاشیه: ضخیم. حاشیه به سبک: جامد; رنگ حاشیه: سیاه؛

به عنوان یک افزونه، می توانید از مقادیر خاصی برای ویژگی border-width، سه استفاده کنید کلید واژه هاالف: نازک، متوسط، ضخیم.

اما استفاده از نحو توسعه یافته همیشه عملی نیست. بیایید به مثالی نگاه کنیم زمانی که باید رنگ قاب بلوک را هنگام نگه داشتن ماوس تغییر دهید. در این مورد، استفاده از سینتکس کوتاه بسیار ساده تر است:

جعبه (حاشیه: 1px قرمز ثابت؛ ) .box:hover (حاشیه: 1px سبز ثابت؛ )

یک راه زیباتر و ساده تر برای انجام این کار این است:

جعبه (حاشیه: 1 پیکسل قرمز ثابت؛ ) .box: شناور (رنگ حاشیه: سبز؛ )

همانطور که می بینید، تکنیک پیشرفته زمانی مفید است که فقط برخی از ویژگی ها را تغییر دهیم: عرض، سبک، رنگ و موارد دیگر.

مرز-شعاع

مرز-شعاع- این ویژگی "طلایی" CSS3 است - اولین و رایج ترین ویژگی که کاربردی و مفید شده است. به جز IE8 و نسخه های زیر، همه مرورگرها گوشه های گرد را با استفاده از این نمایش می دهند.

اگرچه برای درست بودن استایل باید از پیشوندهای مخصوص Webkit و Mozilla استفاده کرد.

Webkit-border-radius: 10px; -moz-border-radius: 10px. شعاع مرزی: 10 پیکسل.

امروزه می توانیم پیشوندهای خاص را حذف کرده و استفاده کنیم فرم استانداردشعاع مرزی

مزیت دیگر این است که می توانیم از مقادیر ویژه برای هر طرف بلوک استفاده کنیم:

شعاع حاشیه بالا-چپ: 20 پیکسل. حاشیه-بالا-راست-شعاع: 0; حاشیه-پایین-راست-شعاع: 30 پیکسل. شعاع حاشیه-پایین-چپ: 0;

در کد بالا، با تنظیم حاشیه-بالا-راست-شعاع و حاشیه-پایین-چپ-شعاع به "تهی" می توان به اشکال شگفت انگیزی دست یافت. اگرچه این عنصر ممکن است برخی از ویژگی‌ها را به ارث ببرد که باید بازنشانی شوند.

مشابه حاشیه و padding، می‌توانیم سینتکس را فشرده کنیم:

/* بالا سمت چپ، بالا سمت راست، پایین سمت راست، پایین سمت چپ */ حاشیه-شعاع: 20px 0 30px 0;

به عنوان نمونه ای از استفاده از ویژگی border-radius، من یک "لیمو" را به شما نشان می دهم که طراحان اغلب هنگام طراحی وب سایت از آن استفاده می کنند:

لیمو (عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛ پس‌زمینه: #F5F240؛ حاشیه: 1 پیکسل جامد #F0D900؛ شعاع حاشیه: 10 پیکسل 150 پیکسل 30 پیکسل 150 پیکسل؛ )

از اصول اولیه فراتر برویم

برای بسیاری از طراحان، تمام دانش در زمینه ویژگی های حاشیه CSS به اینجا ختم می شود. اما چند مورد دیگر نیز وجود دارد چیزهای جالب، که با آن می توانید چیزهای شگفت انگیزی خلق کنید!

ساختارهای مرزی پیچیده css

تکنیک های زیادی برای ایجاد طرح ها با استفاده از ساختارهای مرزی پیچیده وجود دارد. به عنوان مثال به موارد زیر نگاه می کنیم ...

سبک مرزی

ما همیشه از معروف ترین خواص جامد، خط چین و نقطه استفاده می کنیم. اما چند ویژگی دیگر به سبک حاشیه وجود دارد: شیار و برآمدگی.

حاشیه: 20px groove #e3e3e3;

یا در نحو توسعه یافته:

رنگ حاشیه: #e3e3e3; عرض حاشیه: 20 پیکسل؛ حاشیه به سبک: شیار;

اگرچه این ویژگی ها مفید هستند، اما مبنایی برای ایجاد قاب های پیچیده نیستند.

طرح کلی

محبوب ترین تکنیک برای ایجاد یک حاشیه دوگانه استفاده از ویژگی outline است.

کادر (حاشیه: 5px جامد #292929؛ طرح کلی: 5px جامد #e3e3e3؛ )

این روش عالی عمل می کند، اگرچه ما را تنها به دو فریم محدود می کند. گاهی اوقات شما نیاز به ایجاد یک مرز گرادیانی دارید که از چندین لایه تشکیل شده است ... پس چگونه؟

شبه عناصر

وقتی تکنیک طرح کلی کافی نیست، وسیله جایگزیناستفاده از شبه عناصر:before و:after است. با استفاده از آن می توانید فریم های اضافی را به یک عنصر اضافه کنید:

کادر (عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛ پس‌زمینه: #e3e3e3؛ موقعیت: نسبی؛ حاشیه: 10 پیکسل سبز ثابت؛ ) /* دو کادر ایجاد کنید باهمان عرض ظرف */ .box:after، .box:before ( محتوا: ""؛ موقعیت: مطلق؛ بالا: 0؛ چپ: 0؛ پایین: 0؛ سمت راست: 0؛ .box:after ( حاشیه: 5px قرمز یکدست؛ طرح کلی: 5px یکدست زرد؛ ) .box:pre (حاشیه: 10px آبی ثابت؛ )

خیلی ظریف به نظر نمی رسد، اما حداقل، کار می کند. فهمیدن توالی رنگ ها در قاب ها کمی سخت است... اما می توانید آن را تشخیص دهید.

جعبه-سایه

یک "روش کودکانه" جالب برای ایجاد یک افکت مشابه، استفاده از ویژگی box-shadow CSS3 است:

کادر (حاشیه: 5px قرمز ثابت؛ کادر-سایه: 0 0 0 5px سبز، 0 0 0 10px زرد، 0 0 0 15px نارنجی؛ )

در این مورد، ما باهوش تر بودیم و از یک ویژگی جعبه سایه اختصاصی استفاده کردیم. با تغییر پارامترهای x, y, blur به صفر می توانیم از رنگ های مختلف برای ایجاد فریم های متعدد استفاده کنیم.

اما یک مشکل وجود دارد: در مرورگرهای قدیمی که خاصیت box-shadow را درک نمی کنند، فقط یک فریم قرمز 5 پیکسلی قابل مشاهده است.

"یاد آوردن! طراحی سایت باید به صورت متقابل مرورگر به نظر برسد، یعنی در همه مرورگرها یکسان باشد. از جمله نسخه های قدیمی تر."

تغییر زاویه

علاوه بر مورد استفاده شده معنی سادهمرز-شعاع، می توانیم دو مورد جداگانه را مشخص کنیم - آنها را از طریق جدا می کنیم / شعاع افقی و عمودی را نشان می دهیم.

مثلا:

شعاع حاشیه: 50 پیکسل / 100 پیکسل؛ /* شعاع افقی، شعاع عمودی */

... این معادل است با:

شعاع حاشیه بالا-چپ: 50 پیکسل 100 پیکسل. حاشیه-بالا-راست-شعاع: 50px 100px; حاشیه-پایین-راست-شعاع: 50px 100px; شعاع حاشیه-پایین-چپ: 50px 100px;

این تکنیک برای ایجاد اشکال منحصر به فرد بلوک مناسب است. به عنوان مثال، در اینجا نحوه ایجاد یک افکت کاغذ پیچیده شده است:

کادر (عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛ پس‌زمینه: # 666؛ شعاع حاشیه بالا-چپ: 15 میلی متر؛ شعاع حاشیه-پایین-راست: 15 میلی متر؛ 15 میلی متر؛ )

فرم های CSS با استفاده از مرز

این تکنیک نشان می دهد که چگونه می توانید فرم های CSS را ایجاد کنید، در حالی که از عناصری با ابعاد ارتفاع و عرض صفر استفاده می کنید. غافلگیر شدن؟ بیایید به یک مثال نگاه کنیم ...

برای چند مثال بعدی، از نشانه گذاری زیر استفاده خواهیم کرد:

... و سبک اصلی زیر:

جعبه (عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛ پس‌زمینه: مشکی؛ )

اکثر مثال رایج با استفاده از CSSاشکال - ایجاد یک فلش روان. راز این پیکان در ایجاد مرز با رنگهای متفاوتبرای هر یک از طرفین سپس صفت عرض و ارتفاع را روی 0 قرار دهید.

اختصاص بدهیم به بلوک divکلاس فلش:

پیکان (عرض: 0؛ ارتفاع: 0؛ حاشیه بالا: 100 پیکسل قرمز یکدست؛ حاشیه سمت راست: 100 پیکسل سبز یکدست؛ حاشیه پایین: 100 پیکسل آبی یکدست؛ حاشیه سمت چپ: 100 پیکسل زرد پررنگ؛ )

برای نشان دادن، ابتدا از نحو توسعه یافته استفاده می کنیم. بعد می توانیم حذف کنیم کد اضافیبا استفاده از نحو کوتاه شده:

پیکان (عرض: 0؛ ارتفاع: 0؛ حاشیه: 100 پیکسل ثابت؛ رنگ حاشیه: قرمز سبز آبی زرد؛ )

جالبه، نه؟ حالا رنگ های شفاف را از همه طرف به جز سمت آبی تنظیم می کنیم.

پیکان (عرض: 0؛ ارتفاع: 0؛ حاشیه: 100 پیکسل ثابت؛ حاشیه-پایین-رنگ: آبی؛)

عالی شد! اما این در تضاد است طرح بندی معنایی، یک div .arrow ایجاد کنید، فقط برای افزودن یک فلش به صفحه. برای این منظور می توانیم از شبه المان ها استفاده کنیم که اکنون این کار را انجام خواهیم داد.

یک حباب گفتار ایجاد کنید

برای ایجاد حباب گفتار، به یک قطعه کوچک نیاز داریم CSS خالصکد و یک بلوک div.

حباب گفتار (موقعیت: نسبی؛ رنگ پس‌زمینه: #292929؛ عرض: 200 پیکسل؛ ارتفاع: 150 پیکسل؛ ارتفاع خط: 150 پیکسل؛ /* مرکز عمودی */ رنگ: سفید؛ تراز نوشتاری: مرکز؛ )

حباب گفتار: بعد ( محتوا: ""؛ )

در این مرحله، فلشی را که قبلا ساخته بودیم ایجاد می کنیم، آن را به عنصر اضافه می کنیم و تنها چیزی که باقی می ماند قرار دادن آن است:

حباب گفتار: بعد ( محتوا: ""؛ موقعیت: مطلق؛ عرض: 0؛ ارتفاع: 0؛ حاشیه: 10 پیکسل ثابت؛ رنگ حاشیه: قرمز سبز آبی زرد؛ )

اگر بخواهیم فلش رو به پایین باشد، باید تمام مرزها را به جز قسمت بالایی روی شفاف قرار دهیم.

حباب گفتار: بعد ( محتوا: ""؛ موقعیت: مطلق؛ عرض: 0؛ ارتفاع: 0؛ حاشیه: 10 پیکسل ثابت؛ حاشیه بالای رنگ: قرمز؛ )

وقتی این را ایجاد می کنیم شکل CSS، نمی توانیم به طور خاص اندازه فلش را نشان دهیم. در عوض، می‌توانیم ویژگی border-width را تنظیم کنیم، که یک اندازه به فلش اختصاص می‌دهد. همچنین موقعیت فلش را در پایین در وسط قرار می دهیم. بر این اساس، برای این کار از مقادیر بالا و چپ استفاده می کنیم.

حباب گفتار: بعد (محتوا: ""؛ موقعیت: مطلق؛ عرض: 0؛ ارتفاع: 0؛ حاشیه: 15 پیکسل ثابت؛ حاشیه بالای رنگ: قرمز؛ بالا: 100%؛ سمت چپ: 50%؛ )

علاوه بر این، ما فقط باید رنگی مشابه بلوک به آن بدهیم. به یاد داشته باشید، هنگام تعیین موقعیت، باید اندازه حاشیه های دیگر را که نامرئی هستند (15 پیکسل) در نظر بگیرید. همچنین بلوک را در گوشه ها گرد می کنیم.

حباب گفتار ( /* … سبک‌های دیگر */ شعاع حاشیه: 10 پیکسل؛ ) .حباب گفتار: بعد ( محتوا: ""؛ موقعیت: مطلق؛ عرض: 0؛ ارتفاع: 0؛ حاشیه: 15 پیکسل ثابت؛ حاشیه بالا -color: #292929؛ بالا: 100%؛ سمت چپ: 50%؛ حاشیه سمت چپ: -15px؛ /* تنظیم برای عرض حاشیه */ )

بد نیست، نه؟ با استفاده از چندین کلاس CSS و ترفندهای مرزی می توانید چنین چیزی ایجاد کنید.

/* استفاده از حباب های گفتاری: طبق شکل زیر کلاس .speech-bubble و .speech-bubble-DIRECTION را اعمال کنید.

*/ .speech-bubble ( موقعیت: نسبی؛ رنگ پس زمینه: #292929؛ عرض: 200 پیکسل؛ ارتفاع: 150 پیکسل؛ ارتفاع خط: 150 پیکسل؛ /* عمودی وسط */ رنگ: سفید؛ تراز نوشتاری: مرکز؛ حاشیه- شعاع: 10px؛ font-family: sans-serif; ) .speech-bubble:after ( محتوا: ""؛ موقعیت: مطلق؛ عرض: 0؛ ارتفاع: 0؛ حاشیه: 15 پیکسل ثابت؛ ) /* فلش را در موقعیت قرار دهید */ .speech-bubble-top:after ( حاشیه-پایین-رنگ: #292929؛ سمت چپ: 50%؛ پایین: 100%؛ حاشیه-چپ: -15 پیکسل؛ ) .speech-bubble-right:after (رنگ حاشیه-چپ : #292929؛ سمت چپ: 100%؛ بالا: 50%؛ حاشیه بالا: -15 پیکسل؛ ) .speech-bubble-bottom:after ( حاشیه-بالا-رنگ: #292929؛ بالا: 100%؛ سمت چپ: 50%؛ margin-left: -15px; ) .speech-bubble-left:after (حاشیه-راست-رنگ: #292929؛ بالا: 50%؛ سمت راست: 100%؛ حاشیه-بالا: -15px؛ )

جایزه! مرکزیت عمودی در داخل بلوک

برای یک خط متن، می توانید از ارتفاع خط استفاده کنید. اما اگر شما دو یا خطوط بیشترمتن... بهترین راه حلویژگی display را روی جدول قرار می دهد و تمام متن را در یک پاراگراف قرار می دهد. این چیزی است که در آن به نظر می رسد نشانه گذاری html: