برچسب: css3

چگونه از کلاس کاذب hover در سی اس اس استفاده کنم؟
چگونه از کلاس کاذب hover در سی اس اس استفاده کنم؟

گام اول : کدنویسی اچ تی ام ال (html) ؛ ساختار بلاک مورد نظرمون رو ایجاد میکنیم. شامل عکس و عنوان عکس که می خواهیم افکت هاور را رویشان اعمال کنیم.
```
<div class="block"> <img title="" alt="" src="/park.jpg"> <div class="block-caption"> عنوان عکس مورد نظر </div> </div>
```
گام دوم : کدنویسی سی اس اس (css) ؛

.block{ display:block; transition:0.3s ease-in all; }گام سوم : افزودن کلاس کاذب هاور یا افکت آمدن ماوس روی المنت های مورد نظرمون.توی این قسمت میخواهیم افکت آمدن ماوس رو بلاک اصلی یا همون نحوه ی استفاده از کلاس کاذب hover در سی اس اس رو بگم.

.block:hover{ opacity:0.8; }وقتی ماوس رو بلاک مورد نظرمون اومد ؛ بلاک مورد نظرمون یه کم شفاف میشه.
2018-01-21

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

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

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

<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)

برای طراحی شکل قلب به سه شکل نیاز داریم ؛ یه مربع با دوتا دایره!

برای اینکه بتوانیم دایره ها رو به مربع مون بچسبونیم باید بهش position:relative میدهیم و دایره ها رو position:absolute که در محیط مربع مون بالا و پایین کنیم و شکل قلب مان رو درست کنیم.

در آخر هم شکل قلب مون را 45 درجه می چرخونیم با کد (transform:rotate(45deg تا شکل نهایی اوکی بشه.

مشاهده کدطراحی شکل قلب با سی اس استوسط من (@jamo) در CodePen.

2015-11-20
چگونه با سی اس اس رنگ متن انتخاب شده را تغییر بدهیم؟
اگر اهل وبگردی هستید و یا کدنویس وب شاید دیده باشید که در بعضی از صفحات ، ” بعنوان مثال در همین صفحه اگه شما یک متن را انتخاب کنید رنگ متن و پس زمینه آن تغییر میکند. ” شاید دوست داشته باشید که این امکان را به وبلاگ یا صفحات خود اضافه کنید و یا اینکه بدانید چگونه با سی اس اس رنگ متن انتخاب شده را تغییر بدهیم؟

کافیست شما کد زیر را به کدهای استایل ( فایل CSS ) خود اضافه کنید.

چه مرورگرهای از این ویژگی پشتیبانی می کنند ؟

آندروید : 4.4.4 + / اپرا : 32+ / سافاری : 8+ / گوگل کروم : 43+ / فایرفاکس : 37+ (با پیشوند -moz-) / اینترنت اکسپلورر : 9+
```
/* مخصوص  موزیلا */
::-moz-selection {
       background-color: #FFA;
       color: #000;
}

::selection {
       background-color: #FFA;
       color: #000;
}
```
2015-09-19
تبدیل قالب PSD به کد ریسپانسیو

با سلام خدمت بازدیدکنندگان عزیز ! یه پیشنهاد خوب ! من قالب های PSD شما را به کد html5 و css3 تبدیل میکنم ؛ با هدیه! ریسپانسیو سازی قالب و تبدیل رایگان آن به بلاگ بیان! کافیست که فقط فقط زیر همین مطلب فایل خود را از قسمت نظرات برام ارسال کنید.

ویژگی طرح تبدیل شده :

کاملا استاندارد W3C

استفاده از میکرودیتا ( اهمیت میکرودیتا در سئو)

کد بهینه و لود سریع

استفاده از فونت آیکون

و انجام افکت های درخواستی شما

هزینه بسیار مناسب + ریسپانسیو و ترجمه رایگان به بلاگ

لطفا طرح یا اسکرین شات با توضیحات ارسال شود تا با هزینه ی کمتری برایتان انجام شود ، موفق باشید

2015-08-25
طراحی و کدنویسی صفحه نخست سایت کاریابی

یه پروژه جدید گرفتم ، طراحی و کدنویسی یک وبسایت کاریابی.

صفحه نخست سایت را طراحی و کدنویسی کردم گفتم با شما اشتراک بگذارم! البته هنوز خودم تاییدش نکردم!

لطفا نظرات خود را بهم بگید مرسی از شما 🙂

اسکرین شات

پروژه دارای 11 صفحه می باشد باید ریسپانسیو باشند ، صفحه اینترو ، صفحه اصلی ، صفحه کارفرما و … ، این دومین پروژه طراحی و کدنویسی اختصاصی یه سایت هست ( قالب وبلاگ و سایت وردپرسی قضیه اش جداس ). نماز و روزه های همتون قبول حق! 🙂 !

پ.ن : بزودی یه قالب حرفه ای و ریسپانسیو برا بلاگ میذارم.

2015-06-20
طراحی و کدنویسی وبسایت شخصی با html5 و css3

در این دوره آموزشی با هم یک وبسایت شخصی با html5 و css3 را از پایه طراحی و کدنویسی میکنیم.

بخش اول : تعریف و نیازمندی وبسایت

بخش دوم : طراحی سایت در فتوشاپ

بخش سوم : کدنویسی وبسایت

بخش چهارم: استاندارد سازی و یکم سئو شاید

بخش آخر : اضافه کاری ( درخواست های کاربران، چند خط با جاوا اسکریپت!).

بخش اول : در حال آماده سازی ، بزودی منتشر می شود.

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

2015-05-18
آموزش ساخت منو با html5 و css3
سلام ، امروز فایل html5 و css منو سایت که در این پست طراحی کردم رو براتون آماده کردم و آموزششو براتون میذارم.

اول ساختار منوی سایت خودمون رو کدنویسی میکنیم. (فایل html)
```
<nav id="jamo-navigation">
    <ul id="menu">
      <li class="selected"><a href="#">صفحه نخست</a></li>
      <li><a href="#">نمونه کارهام</a></li>
      <li><a href="/">وبلاگ</a></li>
      <li><a href="/">درباره ی من</a></li>
      <li><a href="/">تماس </a></li>
    </ul>
</nav>
```
ساختار منوی مان کامل شد تنها تگی که شاید ناآشنا باشد تگ NAV هستش ! این تگ html5 هستش (نسخه جدید html) که برای ایجاد منو بکار میره!، چند نکته در مورد css بگم ، یه سری تگ ها هستن که خود مرورگرها براشون یه استایل پیش فرض دارن ؛ مثلا دادن خط زیرین به لینک ها ! توی آموزش ساخت منوی سایت تگ های ul, li,a و body هستن که باید مقدار پیش فرض ها اون ها رو خودمون تعیین کنیم. چجوری ؟ خودمون به اون خصوصیات که مرورگر مقدار پیش فرض میده رو بهشون مقدار میدهیم.خب با کد بگم بهتره!
```
body{ margin:0; }
a{ text-decoration:none; }
ul, li{ list-style: none; margin:0; padding:0 }
```
خب حالا دیگه به منوی سایتمون استایل میدهیم.آموزش سی اس اس.

استایل باکس یا بلوکی که منو توش قرار داره. تگ nav
```
nav#jamo-navigation{
     background-color: rgba();
     margin:0 auto;
     border-radius:2px;
     box-shadow: inset 0 0 5px #1F1F1F;
     pading:4px;
}
```
استایل اینم لیست منو ؛ li
```
ul#menu li{
      background-image: url(menu-bg.jpg);
      background-repeat: repeat-x;
      background-size: contain;
      margin: 8px 2px;
      box-shadow: 1px 1px 2px #1d1d1d;
      padding: 5px 10px;
      border-radius: 2px;
}
```
استایل وقتی که ماوس رو منو میاد؛ li:hover
```
ul#menu li:hover{
       background-image: url(menu-hover-bg.jpg);
}
این قسمت برای وقتی که ماوس رو لینک میاد ، رنگ لینک تغییر کنه
ul#menu li:hover a{
      color:#eef2f5;
}
```
استایل دادن به متن لینک منوها . li a
```
ul#menu li a{
      color: #9fa8b0;
}
```
امیدوارم براتون مفید باشه و کاربردی. نظر یادتون نره ؛ اگه خوشتون اومد به دوستان پیشنهاد کنید.

دانلود فایل ها حجم 2.4 کیلوبایت
2015-04-05

برچسب: css3

چگونه از کلاس کاذب hover در سی اس اس استفاده کنم؟