ورود

View Full Version : حرفه ای: حاشیه دار کردن یک متن با استفاده از CSS


mohsen.dbnet
جمعه 26 شهریور 1389, 11:17 صبح
با سلام خدمت دوستان

بنده برای این که متنمو حاشیه دارش کنم یدونه div اصلی گرفتم و توش دوتا div که اولی حاوی متن bold شده و دومی که روی اون قرار می گیره بدن bold قرارش می دم.

کارکتر اولم هیچ مشکلی نداره ولی بقیه کاراکترها از جاشون حرکت کردن و باpadding هم نتونستم حریفش بشم.

اینم کدش


<style type="text/css">
div.main{
position:relative;
float:left;
left: 120px;
top: 50px;
}
div.txt1{
position:absolute;
float:left;
color: #F00;
font-size:18px;
font-weight:bold;
}

div.txt2{
position:absolute;
float:left;
color: #000;
font-size:17px;
padding-top:1px;
padding-left:1px;
}

</style>

<html>
<body>
<div class="main">
<div class="txt1">
Hello
</div>

<div class="txt2">
Hello
</div>
</div>
</html>
</body>


گفتم هر کتوم از کاراکتر هارو یه div بگیرم ، که با چسبوندن دیو کنار هم و مشکلات این بخش روبرو شدم که دیگه آکسونای مغزم سیگنال نداد ؟!!!؟!!
hamiii
جمعه 26 شهریور 1389, 12:17 عصر
کارکتر اولم هیچ مشکلی نداره ولی بقیه کاراکترها از جاشون حرکت کردنخب واضحه.چون شما فونت باکس اول رو bold کردید فاصله ی بین حروف افزایش پیدا کرده و هیچ کاریش نمیشه کرد.
Bold رو حذف کنید و نتیجه رو ببینید.

اگر هدفتون سایه دار کردن نوشته است(مانند عکس ضمیمه) سه راه بهتون پیشنهاد می کنم:
1. استفاده از text effect(جی کوئری)
2. استفاده از css3
3. استفاده از CSS2


http://barnamenevis.org/forum/attachment.php?attachmentid=56530&stc=1&d=1284709435

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

استفاده از جی کوئری هم که یه کتابخانه 60 کیلوبایتی لازم داره که اصلا روش معقولی نیست.

بهترین روش که تو همه ی مرورگرها جواب میده و حجم کد نسبتا کمی هم داره استفاده از CSS2 است. ایده ای مثل ایده ی شما. البته با یکسری تغییرات، که نمونه آموزشش رو از اینجا میتونید فرا بگیرید (http://www.ittutorial.ir/?p=77)

امیدوارم مفید واقع بشه.
mohsen.dbnet
جمعه 26 شهریور 1389, 14:17 عصر
دوست عزیز ممنون از جوابت

ولی من می خواستم با bold کردن متن text رویی رو به طور کامل پوشش بده مثل این عکسی که پایینه.
hamiii
جمعه 26 شهریور 1389, 15:28 عصر
ولی اینجوری همون مشکل فاصله ی حروف بوجود میاد.
در اینصورت شاید استفاده از یه عکس png بهترین گزینه باشه.
فک کنم حجم یه png کمتر از این کدنویسیها بشه.
موفق باشی
ashkan 261
جمعه 19 آذر 1389, 23:31 عصر
فکر کنم کد زیر خیلی ساده تر از این همه مشقت باشه


text-shadow: 3px 3px 4px #00000;