10 تمپلیت محبوب طراحی مترو

  • بوسیله: محسن شفیعی
  • در 1391/12/22 - 18:12
  • نظرات (4)
طراحی مترو

طراحی مترو

اگر  فکر میکنید که باید سایت بعدیتان را به صورت مترو ویندوز 8 طراحی کنید در این مطلب به 10 تمپلیت محبوب این نوع طراحی می پردازیم. این تمپلیت ها را باید دانلود کنید و بر اساس آموزشی که در سایت مربوطه گذاشته شده است عمل کنید. که البته بعضی هایشان خریدنی هستند. در ادامه با ما باشید…

(بیشتر…)

ایجاد بکگراند برای متن ها

  • بوسیله: محسن شفیعی
  • در 1391/12/21 - 19:56
  • دیدگاه‌ها برای ایجاد بکگراند برای متن ها بسته هستند
ایجاد بکگراند برای متن ها

ایجاد بکگراند برای متن ها

در CSS3 خاصیت جدیدی به نام backgound-clip وجود دارد که مانند یک محیط نقاشی است. به زبان دیگر این خاصیت مکانی که قرار است بکگراند به آن اعمال شود را مشخص میکند. برای مثال میتوان مشخص کرد که بکگراند فقط تا ناحیه content-box یا تا ناحیه padding-box ادامه داشته باشد. همچنین مقدار border-box هم وجود دارد که تا مکان borderها بکگراند ادامه پیدا میکند.

اما خاصیت جدیدی هم وجود دارد. در ادامه با ما همراه باشید…

(بیشتر…)

ایجاد بکگراند راه راه متحرک

  • بوسیله: محسن شفیعی
  • در 1391/12/19 - 20:19
  • نظرات (3)
CSS3

CSS3

باکس های بزرگ موجود در سایت Uniqlo.com نوعی طراحی زیبایی وجود دارد که زمانی که ماوس را روی آن میبریم بکگراند راه راه سیاه و سفید به صورت متحرک به نمایش در می آید. البته این سایت این کار را با استفاده از یک عکس gif درست کرده است. شاید به این دلیل که در همه مرورگر ها به درستی نمایش در بیاید. با اینکه حجم این عکس 4K است اما باز هم یک درخواست HTTP به حساب می آید و ما میخواهیم آن را با استفاده از CSS درست کنیم.

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

مشاهده دمو در ادامه مطلب

(بیشتر…)

ایجاد باکس برجسته با استفاده از CSS3

  • بوسیله: جاوید خانلو
  • در 1391/12/17 - 17:51
  • نظرات (3)

box with css3

box with css3


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

(بیشتر…)

چگونه یک دکمه زیبا با CSS3 بسازیم؟

  • بوسیله: محسن شفیعی
  • در 1391/12/16 - 22:06
  • نظرات (4)
CSS3 - سی اس اس 3

CSS3 – سی اس اس 3

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

ما قرار است از خاصیت هایی مانند animations, transform استفاده کنیم.

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

(بیشتر…)

استایل دادن به Placeholder

  • بوسیله: محسن شفیعی
  • در 1391/12/15 - 21:52
  • دیدگاه‌ها برای استایل دادن به Placeholder بسته هستند
CSS3 - سی اس اس 3

CSS3 – سی اس اس 3

همانطور که میدانید مشخصه placeholder در input های از نوع text, search, tel و … وجود دارد و متنی کم رنگ است که زمانی که کاربر متنی را وارد نکرده است این متن نمایش داده میشود.

نحوه استایل دادن به این متن مانند زیر است:

::-webkit-input-placeholder{
  color: red;
}
:-moz-placeholder{
  color: red;  /* For firefox 18- */ 
}
::-moz-placeholder{
  color:red; /*For firefox 19+ */
}
:-ms-input-placeholder{
  color: red;
}

مدل MVC در PHP – قسمت اول

  • بوسیله: محسن شفیعی
  • در 1391/12/14 - 22:54
  • نظرات (10)
PHP - پی اچ پی

PHP – پی اچ پی

مدل MVC یا Model-View-Control در اواخر سال 1970 شکل گرفت که الگوی نرم افزاریی بود که بر اساس ارائه اطلاعات جدا از متدهایی که با داده ها در ارتباط هستند ساخته شد. به عنوان یک توسعه دهنده سیستم MVC باید این اجازه را برای توسعه دهندگان front-end و back-end ایجاد کرد که هر دو طرف بتوانند با سیستم کار کنند بدون اینکه بخواهند در فایلها دخالت, اشتراک و یا تغییری ایجاد کنند.

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

در این مطلب ما به اصول مدل MVC میپردازیم و یک مثال سریع از MVC در PHP میزنیم. این مطلب برای کسانی که قصد آشنایی با برنامه نویسی به سبک MVC دارند مناسب است.

برای درک MVC باید با برنامه نویسی به روش شیء گرا آشنا باشید.

(بیشتر…)

چندین تصویر در یک تصویر

  • بوسیله: محسن شفیعی
  • در 1391/12/13 - 20:08
  • نظرات (3)
CSS3

CSS3

در مطلب “راهکارهای افزایش لود صفحات وب” به تکنیکی اشاره کردیم که باعث افزایش لود صفحات وب میشد. این تکنیک به این صورت بود که چنیدن تصویر که به هم مربوط هستند و از عناصر وبسایت هستند را در یک تصویر بزرگتر قرار میدادیم و آن فقط تصویر را بارگذاری میکردیم که باعث کاهش درخواست های HTTP و در نتیجه افزایش سرعت لود صفحات میشد. در این مطلب به نحوه استفاده از این تکنیک میپردازیم.

(بیشتر…)

راهکارهای افزایش لود صفحات وب

  • بوسیله: محسن شفیعی
  • در 1391/12/13 - 1:13
  • نظرات (5)
راهکارهای افزایش لود صفحات وب

راهکارهای افزایش لود صفحات وب

در سال های گذشته میانگین حجم صفحات وب نسبت به قبل بیشتر شده است. طبق تحقیقات انجام شده توسط HTTP Archive میانگین حجم هر صفحه چیزی در حدود 1.2mb است, که برای کاربران با سرعت اینترنت پایین مسلما دردسر بزرگی است همچنین کاربران موبایل را هم نباید از این قائده استثناء دانست.

نمودار

نمودار

 

در این مطلب قصد داریم به بعضی از راهکارهای افزایش لود صفحات وب اشاره کنیم.

(بیشتر…)

مقدمه ای بر تابع calc در CSS3

  • بوسیله: محسن شفیعی
  • در 1391/12/12 - 19:26
  • نظرات (2)
CSS3

CSS3

با استفاده از تابع calc در CSS3 میتوان عملیات ریاضی را به راحتی انجام داد. از این تابع بیشتر در طراحی های رییسپانسیو استفاده میشود مخصوصا در خاصیت هایی مانند width, height, margin, padding  و font-size

برای مثال سه دایو را در زیر میبینید که هر سه دارای یک کلاس مشترک هستند.

<div class="col one">A</div>
<div class="col two">B</div>
<div class="col three">C</div>

(بیشتر…)