برچسب: آموزش سی اس اس

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

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

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

<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;
}

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

.rooban-wrp{
  width: 155px;
  height: 155px;
  overflow: hidden;
  position: absolute;
  top: -2px;
  right: -2px;
}

.rooban{
  font: bold 15px iransans;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  right: -32px;
  top: 22px;
  width: 162px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45);
  color: #312b28;
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.rooban:before, .rooban:after {
  content: "";
  border-top:   3px solid #6e8900;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.rooban:before {
  left: 0;
}
.rooban:after {
  right: 0;
}

2016-09-06

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

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

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

مرحله اول : با استفاده از اچ تی ام ال یک باکس هم اندازه با تصویر مورد نظرمون ایجاد میکنیم.
```
<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>
```
مرحله سوم : کدنویسی سی اس اس رو شروع میکنیم. دقت کنید که اندازه تصاویر استفاده شده تو این مثال ۲۰۰*۲۰۰ پیکسل هست ، پس اندازه باکس اصلی هم باید همین مقدار رو داشته باشد همچنین balochdesign نام کلاس باکس اصلی هست.

– استایل مورد نظر را به باکس اصلی اعمال میکنیم.
```
.balochdesign{
  width:200px;
  height:200px;
  position:relative;
  overflow:hidden;
}
```
– استایل بخش تصاویر باکس رو اعمال می کنیم. این قطعه کد تمام عکس های که داخل باکس اصلی هستن رو شامل می شود.
```
.balochdesign img{
  transition:2s all;
  position:absolute;top:0px;
  width:100%;
}
```
– استایل مورد نیاز تصاویر که باید برای پنهان شدن اعمال کنیم.دقت کنید در حالت معمولی عکس دومی میاد رو عکس اولی برای اینکه عکس اولی رو در لایه ی بالاتر قرار بدهیم از z-index استفاده میکنیم ، برای لایه ی بالاتر باید مقدار بیشتری نسبت به لایه ی زیرین اعمال کنیم.
```
.ax1{z-index:2;}.ax2{z-index:1;}
```
– استایل حالت قرار گرفتن ماوس رو تصویر رو اعمال می کنیم.
```
.balochdesign:hover .ax1{
  opacity:0;
}
```
مشاهده خروجی
2016-06-26
نحوه ی پنهان کردن بلوک یا یک قسمت از سایت با css

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

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

حتما به این فکر میکنید آیا ویژگی ( پنهان کننده) هست که بتونیم با سی اس اس بهش انیمیشن یا افکت بدهیم ؟ آره هست ؛ جناب opacity ( شفافیت) به همراه visibility (قابل دیدن) در خدمت شما هستند ! با ترکیب این دو ویژگی میشه کارهای خیلی زیاد و خوشگلی کرد !

همچنین شما متوانید بعضی موقعا از ویژگی position در کنار visibility استفاده کنید و نتایج بهتری بگیرید.

opacity : display : visibility

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

2015-10-24
آموزش سی اس اس – شروع کار با css
شاید فکر کنید که استفاده از css احتیاج به کدنویسی پیچیده دارد! در حالی که اینطور نیست ، css یکی از آسان ترین و برترین ابزار برای طراحان وب هست!

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

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

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

خب دوستان تعریف سلکتور را یاد گرفتیم با نحوه ی سبک دهی آن! (همون خصوصیت و مقدار دهی به آن).

انواع سلکتور ها
- سلکتور برچسب (tag selector)
- سلکتور کلاس کاذب (Pseduo-Class selector)
- سلکتور کلاس(Class selector)
- سلکتور های مفهومی(Contextual selector)
- سلکتورهای خصوصی (ID selector)
سلکتور برچسب ؛ در این حالت یک تگ مخصوص html سبک دهی میشود، که در عکس به کار بردم! وقتی میخاهیم یک تگ خاض اچ تی ام ال در تمام صفحه مون به یک صورت خاص نشان داده بشه از این روش استفاده میکنیم.بعنوان مثال اگر بخواهیم تمام h1های صفحه مون به رنگ قرمز باشند و با فونت tahoma نشون داده بشوند. به کد زیر دقت کنید:
```
h1{
color: red;
font-family: tahoma;
}
```
سلکتور کلاس کاذب ؛ سبک دهی link ها . به کد زیر دقت کنید:
```
a:link{color: blue;}
a:visited{color: violet;}
a:hover{color: red;}
a:active{color: orange;}
```
در کدای بالا چهار سبک css تعریف کردیم. link تمام لینک های موجود در صفحه را آبی میکنه ؛ visited لینک های که بازدید شده اند را به رنگ بنفش نمایش میده، hover وقتی ماوس رو لینکی قرار بگیره رنگش را با قرمز نمایش میده و آخرین active رنگ لینک های که روشون کلیک شود را نارنجی نشون میده!

سلکتور کلاس ، اگر بخواهیم به یک گروه خاصی از تگ های html که با class مشخص شده اند استایل بدهیم از این روش استفاده میکنیم.

به کد html زیر دقت کنید :
```
<p> matn mored nazar </p>
<p class="sidebar"> matn mored nazar</p>
```
کد css
```
.sidebar{
color: red;
font-family: sens-serif;
}
```
خروجی :

matn mored nazar

matn mored nazar

سلکتور کلاس مفهومی؛ بعنوان مثال اگر بخواهیم رنگ لینک ها در کلاس سایدبار را با رنگ بقیه لینک ها متفاوت کنیم از این روش استفاده میکنیم.
```
<p> Made whit love by <a> JAMO </a> </p>
<p class="sidebar"> Made whit love by <a> JAMO </a> </p>
```
کد css:
```
 a:link{color:red;}
 p.sidebar a:link{color: blue;}
```
خروجی :

Made whit love by JAMO

Made whit love by JAMO

سلکتور خصوصی ؛ همانند سلکتورهای کلاس هستند و به یک گروه خاص که با ایدی مشخص شده اند اعمال می شوند.
```
<p> Drowgaan Tahi Wada!</p>
<p id="myid"> Drowgaan Tahi Waada!</p>

 #myid { color: red; font-size: 15px; font-family: arial;}
```
2015-02-16
آموزش CSS
بخش اول آموزش سی اس اس CSS

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

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

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

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

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

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

حالا css چیست و چرا باید از css در صفحات وب استفاده کنیم؟

css در اصل لیستی از دستورات در قالب متن است که به کدهای html اضافه میشن ؛ این دستورات را میتوان درون کدهای اچ تی ام ال به کار برد و یا بصورت یک فایل متنی جدا با پسوند css ایجاد کرد و با دستور زیر به html لینک کرد.
```
<link rel="stylesheet" href="style.css" />
```
استایل درون فایل اچ تی ام ال
```
<style>
body{
     background-image: url('imgs/bg.jpg');
}
</style>
```
2015-02-10

برچسب: آموزش سی اس اس

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

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

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

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

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

آموزش CSS