داشتن چندین بکگراند در CSS3

  • بوسیله: محسن شفیعی
  • در 1391/10/22 - 14:28
  • نظرات (2)
داشتن چندین بکگراند در CSS3

داشتن چندین بکگراند در CSS3

چگونه کار میکند؟

در گذشته ما برای داشتن چندین بکگراند باید حتما چنیدن دایو را تعریف و به هرکدام بکگراند خودش را بدهیم. چیزی مانند این:

.overcast1 {
    background-image: url("images/overcast.png");
    background-position: 150px 25px;
}
.rainbow {
    background-image: url("images/rainbow.png");
    background-position: 200px 10px;
}
.overcast2 {
    background-image: url("images/overcast.png");
    background-position: 250px 25px;
}
.sunny {
    background-image: url("images/sunny.png");
    background-position: 100px 10px;
}

کد بالا واقعا بدردنخور است. در CSS3 میتوان با مشخصه background-image چندین بکگراند داشت. به این صورت:
(بیشتر…)

شرح تابع های خاصیت transition

  • بوسیله: محسن شفیعی
  • در 1391/10/21 - 21:04
  • نظرات (2)

همانطور که میدانید خاصیت transition دارای تایع های مختلفی به نام های ease, ease-in, ease-out ease-in-out, linear و cubic-bezier است.
در این مطلب به شرح چگونگی کار این تابع ها میپردازیم.

 


تابع ease

شرح تابع های خاصیت transition

شرح تابع های خاصیت transition

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

  • بوسیله: محسن شفیعی
  • در 1391/10/21 - 11:52
  • نظرات (67)
آموزش قدم به قدم طراحی ریسپانسیو یک سایت کامل

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

ابتدا توصیه میکنیم حتما مطالب “ طراحی ریسپانسیو (Responsive) چیست؟” و ” آموزش طراحی ریسپانسیو” را بخوانید.

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

هدف پروژه: درباره من


ایجاد کردن سند

صفحه رو با doctype HTML5 و متا تگ ها آغاز کردیم. اما در طراحی ریسپانسیو ما نیاز به نصب کامپوننت های اضافی خواهیم داشت. بیشتر این متا تگ ها توسط مرورگرهای مدرن پشتیبانی میشوند.
(بیشتر…)

آموزش طراحی ریسپانسیو

  • بوسیله: محسن شفیعی
  • در 1391/10/19 - 17:20
  • نظرات (29)
آموزش طراجی ریسپانسیو

آموزش طراجی ریسپانسیو

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

اگر هنوز مطلب  “طراحی ریسپانسیو (Responsive) چیست؟” را نخواندید توصیه میکنم ابتدا آن را بخوانید.

برای آنکه بتوانیم یک سایت ریسپانسیو را درست به کاربر نمایش دهیم باید ابتدا اندازه نمایشگر کاربر را بگیریم و مطابق با اندازه نمایگشر کاربر, سایت را نمایش دهیم.

نترسید. ما برای همه نمایشگرها طراحی جداگانه ای انجام نمیدهیم. فقط برای نمایشگرهایی با اندازه های پایین:

320px (نمایشگرهایی که کمترین عرضشان 320px است).

480px (نمایشگرهایی که کمترین عرضشان 480px است).

600px (نمایشگرهایی که کمترین عرضشان 600px است).

768px (نمایشگرهایی که کمترین عرضشان 768px است).

900px (نمایشگرهایی که کمترین عرضشان 900px است).

1200px (نمایشگرهایی که کمترین عرضشان 1200px است).

(بیشتر…)

ساخت آیکن با استفاده از عناصر HTML

  • بوسیله: محسن شفیعی
  • در 1391/10/18 - 19:59
  • یک نظر
box shadow

box shadow

در CSS3 با استفاده از عناصر کاذب میتوان آیکن مانند آن چیزی که در ادامه خواهیم دید ساخت.
عناصر کاذب در ساختار درختی سند HTML شما وجود ندارند اما توسط CSS میتوان آنها را تولید کرد. اما ما به شما پیشنهاد میکنیم که خودتان آنها را اضافه کنید.
برای مثال مانند زیر عمل کنید:

<div class="”square”"></div>

و CSS را مانند زیر وارد کنید:

.square {
   position: relative;
   background: blue;
   width: 50px;
   height: 50px;
}
.square::before {
   position: absolute;
   left: -50px;
   content: '';
   height: 50px;
   width: 50px;
   display: block;
   background: green;
}
.square::after {
   position: absolute;
   left: 50px;
   content: '';
   height: 50px;
   width: 50px;
   display: block;
   background: red;
}

(بیشتر…)

همه چیزی که باید درباره Transitions در CSS بدانید

  • بوسیله: محسن شفیعی
  • در 1391/10/17 - 19:49
  • دیدگاه‌ها برای همه چیزی که باید درباره Transitions در CSS بدانید بسته هستند
متحرک سازی در CSS

متحرک سازی در CSS

Transitions راهی ساده و زیبا برای انتقال یک عنصر به صورت انیمیشن است.

در این مطلب قصد داریم به بخش های پیچیده تر Transitions بپردازیم. از زنجیره ها و رویدادها تا شتاب سخت افزاری و توابع انیمیشن


پشتیبانی مرورگرها

Transitions عملا در همه نسخه های Firefox, Safari و Chrome پشتیبانی میشود.و همچنین در IE10 و نسخه های بعد از آن.

مرورگرهای بر اساس Webkit که شامل Chrome و Safari میشوند از پیشوند -webkit- برای شناسایی این کدها استفاده میکنند. اما بزودی این خطا رفع میشود تا با استاندارد W3 یکسان شود.

 


استفاده از Transitions

راه ساده برای استفاده از Transitions استفاده از شبه کلاس ها مانند hover: است. که در آن باید نام خواص و مدت زمان اجرای انیمیشن و تابع انیمیشن تعیین شود.

برای مثال:

در ادامه همراه ما باشید…

(بیشتر…)

استایل دادن به عناصر فرم – بخش دوم

  • بوسیله: محسن شفیعی
  • در 1391/10/17 - 11:44
  • یک نظر
استایل دادن به عناصر فرم

استایل دادن به عناصر فرم

در این بخش که ادامه بخش اول استایل دادن به عناصر فرم است به آموزش استایل دادن به عناصر file  میپردازیم.

این عنصر کمی با عناصر چک باکس و ریدیو فرق میکنند. در این نوع ما ابتدا خود عنصر file  را برمیداریم سپس استایل مورد نظر را میسازیم و در مرحله بعد آن را با استفاده از جاوا اسکریپت به عنصر اصلی وصل میکنیم.

 


عنصر file

ابتدا عنصر را در صفحه میگذاریم.

<label>ارسال مدارک:</label>
<div class="refile">انتخاب کنید<div></div></div>
<input class="file" type="file" />

در ادامه با ما همراه باشید…

(بیشتر…)

استایل دادن به عناصر فرم – بخش اول

  • بوسیله: محسن شفیعی
  • در 1391/10/16 - 6:58
  • نظرات (5)
استایل دادن به عناصر فرم

استایل دادن به عناصر فرم

استایل دادن به عناصر فرم تقریبا کار ساده ای است البته فقط نوع Text و Submit !!

در این بخش به نحوه استایل دادن CheckBox و Radio میپردازیم و در بخش دوم در آینده به نحوه استایل دادن به List و File خواهیم پرداخت.

طرز کار این تکنیک به این صورت است که ابتدا ما از نمایش دادن عنصر اصلی مورد نظر خودمان در فرم به کاربر جلوگیری میکنیم. در قدم بعد با استفاده از HTML و CSS استایل مورد نظر خودمان را میسازیم و در قدم آخر با Jquery هر بار که مقدار(Value) عنصر مورد نظر توسط کاربر تغییر کرد ما هم مقدار عنصر اصلی را تغییر میدهیم.

در ادامه با ما همراه باشید…

(بیشتر…)

طراحی ریسپانسیو (Responsive) چیست؟

  • بوسیله: محسن شفیعی
  • در 1391/10/16 - 1:05
  • نظرات (8)
طراحی ریسپانسیو

طراحی ریسپانسیو(Responsive)

دردسر نمایش درست یک وب سایت در نمایشگرهای مختلف یکی از دغدغه های طراحان وب است. به این معنی که اگر یک کاربر سایت شما را با یک نمایشگر دکستاپ(Desktop) ببیند و کاربر دیگری همان سایت را با یک اسمارت فون(Smart Phone) مشاهده کند هیچ فرقی بین این دو نکند و یا حداقل تفاوت را داشته باشد.

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

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

(بیشتر…)