آموزش css3

آموزش دستورات خاص و کاربردی در CSS3

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

 

تغییر رنگ قسمت انتخاب شده

تابحال دقت کردین که وقتی قسمتی از یک متن را در یک وب سایت انتخاب می کنید به چه رنگی در می آید؟ یا وقتی کلید های Ctrl + A را جهت انتخاب تمامی محتوای یک سایت می کنید به چه رنگی در می آید؟ به رنگ آبی! بله دقیقا درسته قسمت انتخاب شده معمولا به رنگ آبی می شود. اما با دستورات css می تونیم این رنگ پیش فرض را تغییر دهیم و به رنگ دلخواه خودمون تبدیل کنیم.

انتخاب قسمتی از متن

با استفاده از کدهای زیرم می توانیم رنگ قسمت انتخاب شده را به رنگ دلخواه تغییر دهیم

  
  /* با این دستور قسمت انتخاب شده به رنگ زرد در می آید */
  ::selection {
    background-color: yellow;
  }
  

 

تغییر شکل اولین حرف از یک کلمه

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

تغییر استایل اولین حرف

کدهای css زیر روش کار را نشان می دهد

  
  p:first-child::first-letter {
    color: red;
    font-size: 34px;
    font-weight: 600;
    text-transform: uppercase;
  }
  

 

تغییر ظاهری متن های placeholder

placeholder ها متن هایی هستند که در فرم ها به صورت کمرنگ تر از متن در قسمت های دیگر دیده می شوند. مثلا یک فرم را در نظر بگیرید که باید در آن نام کاربری وارد شود. داخل این فرم کلمه نام کاربری به صورت کمرنگ دیده می شود و کاربر متوجه می شود که چه اطلاعاتی را باید داخل فرم وارد کند. به محض اینکه کاربر شروع به تایپ می کند کلمه placeholder از بین می رود و کلمه ای که کاربر وارد می کند جایگزین آن می شود. با دستور زیر می توانیم شکل و شمایل این placeholderها را تغییر دهیم.

placeholder

  
/* برای گوگل کروم */
::-webkit-input-placeholder {
  color: red;
}
/* برای فایرفاکس */
::-moz-placeholder {
  color: red;
}
/* برای اینترنت اکسپلورر */
:-ms-input-placeholder {
  color: red;
}
  

 

تغییر شکل چک باکس ها

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

checkbox

  
/* کد زیر ابتدا چک باکس پیش فرض را حذف می کند */
input[type="checkbox"] {
  display: none;
}
/* استایل مورد نظر خودمان را اضافه می کنیم */
input[type="checkbox"]+label::before {
  background-color: #fff;
  border: 2px solid green;
  content: "";
  display: inline-block;
  font-size: 12px;
  height: 16px;
  width: 16px;
  line-height: 16px;
  margin: -2px 6px 0 0;
  text-align: center;
  vertical-align: middle;
}
/* علامت تیک بعد از کلیک */
input[type="checkbox"]:checked+label::before {
  content: "\2713";
}
  

 

تبدیل یک عکس مربع یا مستطیل به دایره

برای اینکه یک عکس را در صفحه وب خودمون به شکل دایره تبدیل کنیم باید به آن ارتفاع و عرض یکسان بدیم و سپس ویژگی border-radius آن را برابر با نصب ارتفاع و عرض تنظیم کنیم. مثلا اگر width برابر با ۲۰۰ باشد و height هم برابر ۲۰۰ باشد در اینجا border-radius را برابر با ۱۰۰ تنظیم می کنیم.

دایره کردن عکس

  
img{
  width: 200px;
  height: 200px;
  border-radius: 100px;
}
  

 

نویسنده: سعید پناهی

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

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

احتمالا از اینها هم خوشتون بیاد

کارگاه آموزشی طراحی وب

کارگاه آموزشی طراحی و توسعه وب سایت به صورت پروژه محور و کارگاهی

بررسی واحدهای REM -EM – VH- VW و تفاوت بین آنها

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

css-custom-property

تعریف و استفاده از متغیرها در CSS

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