افزودن استایل به لینک link css

نویسنده :
تاریخ:دوشنبه 6 شهریور 1396-01:36 ب.ظ

قرار دادن استایل برای لینک

در ادامه مباحث آموزشی استایل نویسی با css، نوبت به آشنایی با خواص کاربردی این زبان در نحوه تنظیم لینک های وب است، حتما در صفحات مختلف در اینترنت با اینگونه لینک ها آشنا هستید که با بردن نشانه گر(ماوس) روی آنها به فرض رنگ متن لینک تغییر می کند و یا پس از دیدن یک لینک، به رنگی دیگر نشان داده می شود


ادامه مطلب

تلگرام

دسته بندی : CSS 

برچسب ها: رنگی کردن لینگ، تغییر شکل لینک، استایل لینک، کد استایل لینک، link style،

نظرات() 

استایل زیبا برای textarea و input - کد CSS

نویسنده :
تاریخ:چهارشنبه 29 مهر 1394-06:30 ب.ظ


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

1- تغییر رنگ پس زمینه تکست باکس

رنگ پس زمینه

کد CSS :

.myTextbox {  
background-color : #99FFCC;   
border: 1px solid #008000;   
width: 230px;
}


2-تغییر استایل و رنگ حاشیه تکست باکس

رنگ و استایل حاشیه

کد CSS :

.myTextbox {  
 border: 2px dashed #D1C7AC;  
 width: 230px;
}

3- تغییر استایل با قرار دادن یک تصویر در پس زمینه تکست باکس


تصویر پس زمینه کل تکس باکس

کد CSS :

.myTextbox {  
background-image: url(images/bg.png);   
border: 1px solid #6297BC;   
width: 230px;
}

4- تغییر سایز و استایل حاشیه طرفین یک تکست باکس


حاشیه کناری ضخیم تر

کد CSS :

. myTextbox {
width: 230px;  
border: 1px solid #3366FF;   
border-left: 4px solid #3366FF;
}


5- گرد کردن گوشه های تکست باکس


گوشه های گرد

کد CSS :

. myTextbox {   
background: url(images/rounded.gif) no-repeat top left;   
height: 22px;   
width: 230px;   
border: 0;   
width:220px;   
margin-top:3px;
}

6- ایجاد حاشیه دوبل برای تکست باکس


حاشیه دوبل

کد CSS :

. myTextbox {   
border: 3px double #CCCCCC;   
width: 230px;
}

7- تکست باکس با پس زمینه گرادینت


حاشیه گرادینت

کد CSS :

. myTextbox {   

/* این عکس می تواند 1 پیکسل عرض داشته باشد و توسط دستور بعدی تکرار شود */  
background-image:url(images/form_bg.jpg);  
background-repeat:repeat-x;    /* تکرار قطعه عکس مورد استفاده در محور افقی */  
border:1px solid #d1c7ac;   
width: 230px;   
color:#333333; /* رنگ متن تکست باکس */   
padding:3px; /* فاصله از داخل از همه طرف */   
margin-right:4px; /* فاصله از لبه بیرونی سمت راست تکست باکس */   
margin-bottom:8px;  /* فاصله از لبه بیرونی پائین تکست باکس */   
font-family:tahoma, arial, sans-serif;
}

8- انداختن سایه در داخل تکست باکس


سایه در حاشیه داخلی

کد CSS :

. myTextbox {   
width: 221px;   
background: transparent url('images/bg.jpg') no-repeat;   
color : #747862;   
height:20px;   
border:0;   
padding:4px 8px;  /*فاصله داخلی 4 پیکسل از بالا و پائین و 8 پیکسل از چپ و راست  */   
margin-bottom:0px;
}

نکته: تصویر مورد استفاده در این مورد بر خلاف مورد شمار7 باید دقیقا به اندازه تکست باکس ساخته شود. توجه کنید که خاصیت padding باعث افزایش طول و عرض عنصر می شود. بنابراین باید مقداری که در این خاصیت استفاده میکنیم از مقدار طول و عرض تکست باکس کم کنیم. به عبارت دیگر مجموع مقادیر استفاده شده در خاصیت padding به علاوه عرض تکست باکس باید با طول تصویر مساوی باشد. پس در این مثال عرض تصویر مورد استفاده (bg.jpg) باید 237 پیکسل و ارتفاع تصویر باید 28 پیکسل باشد.

2x8=16 (مجموع فاصله از چپ و راست در خاصیت padding)
221+16=237 (عرض تصویر پس زمینه تکست باکس)
2x4=8 (مجموع فاصله از بالا و پائین در خاصیت padding)
20+8=28 (ارتفاع تصویر پس زمینه تکست باکس)

9- انداختن یک تصویر در داخل تکست باکس


تصویر پس زمینه کوچک در داخل تکست باکس

کد CSS :

. myTextbox {   
background:#FFFFFF url(images/search.png) no-repeat 4px 4px;  /* فاصله عکس از چپ و بالا برابر با 4 پیکسل */    padding:4px 4px 4px 22px;  /* از بالا، پائین و راست 4 پیکسل فاصله داخلی و از چپ 22 پیکسل فاصله داخلی */   
border:1px solid #CCCCCC;   
width:230px;   
height:18px;
}

نکته: سایز تصویر ذره بین باید به اندازه ای باشد که از داخل تکست باکس بیرون نزند و برای اینکه از لبه های تکست باکس کمی فاصله داشته باشد، در دستور background میزان فاصله را از چپ و بالا همانند مثال فوق مشخص میکنیم که در اینجا 4 پیکسل فاصله لحاظ شده است. سپس برای اینکه متن نوشته شده در تکست باکس روی عکس قرار نگیرد، با استفاده از خاصیت padding به میزان عرض عکس از لبه داخلی تکست باکس فاصله ایجاد میکنیم. که در اینجا 22 پیکسل از لبه سمت چپ داخل تکست باکس فاصله ایجاد کرده ایم.




تلگرام

دسته بندی : CSS 

برچسب ها:

نظرات() 

کد رنگ css هگز و rgb همراه نام انگلیسی

نویسنده :
تاریخ:دوشنبه 1 تیر 1394-11:19 ب.ظ

کد رنگ هگز و rgb در css
کدهای رنگ برای css با مقدار RGB و مقدار هگز (HEX) همراه اسم انگلیسی رنگ و نمایش  نمونه رنگ

ادامه مطلب

تلگرام

دسته بندی : CSS 

برچسب ها:

نظرات() 

حذف اسکرول بار scroll bar عمودی و افقی در CSS

نویسنده :
تاریخ:دوشنبه 28 اردیبهشت 1394-11:53 ب.ظ

اسکرول بار عمودی و افقی

برای حذف اسکرول بار scroll bar به سادگی می توان از CSS استفاده کرد .
با استفاده از تنظیم  overflow که y عمودی و x  افقی است .

حذف اسکرول بار عمودی در CSS  :
<style type="text/css">
body {
    overflow-y:hidden;
}
</style>

حذف اسکرول بار افقی در  CSS :

<style type="text/css">
body {
    overflow-x:hidden;
}
</style>

حذف اسکرول به صورت کلی هم عمودی و هم افقی :
<style type="text/css">
body {
    overflow:hidden;
}
</style>



تلگرام

دسته بندی : CSS 

برچسب ها:

نظرات() 

کد تبلیغ رنگی با استایل زیبا CSS

نویسنده :
تاریخ:جمعه 14 فروردین 1394-09:29 ق.ظ

تبلیغات متنی رنگی

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


ادامه مطلب

تلگرام

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

برچسب ها:

نظرات()