تصاویر ریسپانسیو – تکنیک دوم

  • بوسیله: محسن شفیعی
  • در 1392/01/10 - 19:11
  • نظرات (4)
طراحی ریسپانسیو

طراحی ریسپانسیو

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

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

(بیشتر…)

مشخصه جدید Scoped در HTML5

  • بوسیله: محسن شفیعی
  • در 1392/01/04 - 18:00
  • نظرات (5)
اچ تی ام ال 5 - HTML5

اچ تی ام ال 5 – HTML5

مشخصه جدید به نام Scoped در HTML5 بوجود آمده است که مخصوص تگ استایل است. اگر این مشخصه را به تگ استایل بدهیم باعث میشود قوانینی که در تگ استایل نوشتیم فقط برای تگ والد و فرزندان تگ والد اعمال شود. به همین دلیل تگ استایل باید داخل خود body تعریف شود.

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

(بیشتر…)

راهنمای کامل SVG

  • بوسیله: محسن شفیعی
  • در 1391/12/28 - 17:37
  • نظرات (15)
راهنمای کامل SVG

راهنمای کامل SVG

SVG یک فرمت برای استفاده از تصاویر وکتور است. شما میتوانید در برنامه Adobe Illustrator خروجی با فرمت SVG بگیرید. اما چیزهایی هست که ابتدا باید بدانید.

چرا استفاده از SVG توصیه میشود؟

  • حجم فایل کم است و به خوبی فشرده شده است.
  • میتواند به هر سایز دلخواهی تغییر اندازه بدهید بدون اینکه از وضوح آن کم کند (در بعضی مواقع خیلی کم).
  • در صفحه نمایش های Retina به خوبی نمایش داده میشود.
  • میتواند به صورت تعاملی و کنترلی طراحی شود.

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

(بیشتر…)

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

  • بوسیله: محسن شفیعی
  • در 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;
}

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

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

CSS3

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

(بیشتر…)

مقدمه ای بر تابع 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>

(بیشتر…)