آموزش CSS : کادر حبابی

558 روز پیش

پويا صادقى , آموزش CSS

با استفاده از خاصیت content در CSS می تونیم بدون استفاده از تصاویر کادرهای فلش دار ایجاد کنیم:

آموزش CSS : کادر حبابی

برای شروع یه پاراگراف در HTML ایجاد میکنیم:

<p class="pasargad">آموزش CSS : آموزش ایجاد کادر حبابی</p>

حالا در CSS رنگ و حاشیه رو ایجاد میکنیم:

.pasargad{
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;}

برای گرد کردن گوشه ها از خاصیت border-radius در CSS3 استفاده می کنیم:

.pasargad{
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;

-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;}

با استفاده از gradient در CSS که قبلا درموردش گفته بودیم ، ( گرادینت در CSS3 وبکیت / گرادینت در CSS3 فایرفاکس ) یک گرادینت ایجاد می کنیم:

.pasargad{
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;

background:-webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(top, #f9d835, #f3961c);
background:-o-linear-gradient(top, #f9d835, #f3961c);
background:linear-gradient(top, #f9d835, #f3961c);
}

و قبل از گرادینت می تونیم یه رنگ بکگراند هم اضافه کنیم که برای مرورگر های قدیمی مشکلی ایجاد نشه:

.pasargad{
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;

background:#f3961c;

background:-webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(top, #f9d835, #f3961c);
background:-o-linear-gradient(top, #f9d835, #f3961c);
background:linear-gradient(top, #f9d835, #f3961c);
}

ایجاد مثلث: استفاده از شبه عنصر ها در CSS و خاصیت :after

.pasargad{
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;

background:#f3961c;

background:-webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(top, #f9d835, #f3961c);
background:-o-linear-gradient(top, #f9d835, #f3961c);
background:linear-gradient(top, #f9d835, #f3961c);
}
.pasargad:after {
content:&amp;amp;quot;&amp;#92;&amp;#48;0a0&amp;amp;quot;;
display:block;
position:absolute;
z-index:-1;

bottom:-30px;
left:50px;
width:0;
height:0;
border-width:15px 15px;
border-style:solid;
border-color:#f3961c transparent transparent;}

کد \00a0 در content یک مربع ایجاد می کنه.

اما برای ایجاد مثلث باید طول و عرض رو صفر کنیم و با استفاده از border های شفاف قسمت های اضافی رو حذف کنیم تا مثلث ما به وجود بیاد

درواقع ما یه باکس با بوردر 15 پیکسلی و طول عرض صفر داریم. پس این مثلث همون بوردر بالایی با رنگ f3961c هست که در خط 29 کد میتونید ببینید. کدی که برای after نوشتیم یه نوع هک CSS به حساب میاد

در خط 23 و 24 هم با استفاده از bottom و left مکان مثلث رو تعیین کردیم

با تغییر مقادیر بوردر در خط 27 می تونید زاویه مثلث رو تغییر بدید. کد کامل:

.pasargad{
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
background:#f3961c;

-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;

background:-webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(top, #f9d835, #f3961c);
background:-o-linear-gradient(top, #f9d835, #f3961c);
background:linear-gradient(top, #f9d835, #f3961c);
}

.pasargad:after {
content:&amp;amp;quot;&amp;#92;&amp;#48;0a0&amp;amp;quot;;
display:block;
position:absolute;
z-index:-1;
bottom:-30px;
left:50px;
width:0;
height:0;
border-width:15px 15px;
border-style:solid;
border-color:#f3961c transparent transparent;}

نمونه های بیشتر رو می تونید در این سایت ببینید

نوشته شده توسط پويا صادقى

سلام! من پویا صادقی هستم؛ طراح وب استاتیک ، CSS/HTML ، دانشجوی نرم افزار. می تونید من رو در توییتر دنبال کنید، گالری من رو در deviantart ببینید، یا با ایمیل info@Pasargad-Graphic.com تماس بگیرید.

pseudo elements آموزش CSS هک CSS

پاسارگاد گرافیک

آموزش CSS : کادر حبابی

آخرین نوشته‌ها

وبگردی