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

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

قدم اول : کدنویسی ساختار باکس و روبان

<div id="box-wrp">
     <div class="rooban-wrp">
        <div class="rooban">1coder.blog.ir</div>
     </div>
</div>

قدم دوم : استایل باکس 

#box-wrp {
  margin: 50px auto;
  width: 280px;
  height: 370px;
  background: white;
  border-radius: 10px;
  box-shadow:0px 0px 8px rgba(0,0,0,0.3);
  position: relative;
  z-index: 90;
}

فیلم آموزش سی اس اس ، افکت محو شدن تصویر

در این مطلب در خدمت تون هستم با فیلم آموزش سی اس اس نحوه ی پنهان کردن یک تصویر و نمایش تصویر دیگر  را آموزش بدهم ، امیدوارم براتون مفید باشه.( آموزش درخواستی کاربر) ؛ صفحه مربوط به دمو و کدها (کلیک کنید)

آموزش افکت محو نمودن یک تصویر بر روی تصویری دیگر با سی اس اس

در این مطلب می خواهم نحوه ی پنهان کردن یک تصویر و نمایش تصویر دیگر با سی اس سی را آموزش بدهم ، امیدوارم براتون مفید باشه.( آموزش درخواستی کاربر)

مرحله اول  : با استفاده از اچ تی ام ال یک باکس هم اندازه با تصویر مورد نظرمون ایجاد میکنیم.

<div class="balochdesign"></div>

مرحله دوم : سپس تصاویر مورد نظرمون رو داخل باکس میگذاریم. برای هر تصویر یک نام کلاس در نظر می گیریم. (برای اعمال استایل)

<div class="balochdesign">
  <img class="ax1" src="http://lorempixel.com/200/200" />
  <img class="ax2" src="http://lorempixel.com/200/200/sports" />
</div>

نحوه ی پنهان کردن بلوک یا یک قسمت از سایت با css

در این مطلب با شما هستم با نحوه ی پنهان کردن مطالب و یا هر چیزی با سی اس اس (CSS) 

ویژگی یا (property)  ؛ display  که میتوان با دادن مقدار none همه چیز رو پنهان کرد ؛ ولی همیشه قابل استفاده نیست مثلا وقتی شما بخواهید یک منو افتادنی یا کشویی رو با سی اس اس ایجاد کنید این ویژگی اصلا مفید و بدردخور نیست ! و اینکه این ویژگی (display) قابلیت انتقال (transitionable) رو نداره  ؛ یعنی نمیشه با افکت و انیمیشن از حالتی به حالت دیگر منتقل بشه ، بعنوان مثلا نمیشه افکت محو شدن را بهش اعمال کرد مگر اینکه از جاوا اسکریپت استفاده بشه !

آموزش سی اس اس - شروع کار با css

شاید فکر کنید که استفاده از css احتیاج به کدنویسی پیچیده دارد! در حالی که اینطور نیست ، css یکی از آسان ترین و برترین ابزار برای طراحان وب هست! 

سلکتور(گزینشگر ، انتخاب کننده! همون سلکتور خوبه! :)).

سلکتورهای سی اس اس (CSS selectors)

هر سبک css دو بخش دارد. اولین بخش سلکتور مورد نظر ماست که می خواهیم استایل را بهش اعمال کنیم. بخش دومم هم خصوصیات(propertis) مورد نظرمون که میخاهیم رو سلکتور اعمال بشن.که خصوصیات و مقدار آنها بین دو { } قرار میگیرند.

selector
{
propertis:value;
}

  

آموزش CSS

بخش اول آموزش سی اس اس CSS

 

تاریخچه مختصر

در سال 1995 توسط کنسرسیوم جهانی وب (W3C) معرفی شد.

سال 1996 این استاندارد به طراحان وب توصیه شد.

سال 1998 نیز نسخه دوم این استاندارد نیز منتشر شد.

اولین سایتی که طراحی قدیمی را کنار گذاشت و در طراحی قالب از  css  استفاده کرد، سایت ورزشی ESPN بود و سایت دیگری هم بودند

که از این استاندارد استفاده کردند همچون GAMESPOT که بعنوان بزرگترین سایت مرتبط با بازی های کامپیوتری شناخته میشود.