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

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

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

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

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

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

برای مثال:

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

(بیشتر…)

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

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

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

عنصر file

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

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

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

(بیشتر…)

عناصر HTML5

توسعه HTML5 هنوز به اتمام نرسیده است اما میتوان از بعضی از عناصر آن که آماده هستند استفاده کرد که این عناصر در حال حاظر در مرورگرهای جدید و همچنین قدیمی پشتیبانی میشوند مانند <header> و <footer> و <nav>

عنصر <header>

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

(بیشتر…)

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

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

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

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

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

(بیشتر…)

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

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

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

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

(بیشتر…)

آپارنت

به نام خدا

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

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

شما همچنین میتوانید با ارائه دادن نظرات خود در هر مطلب و ارائه پیشنهاداتتان بوسله صفحه “ارتباط با ما” ما را در خدمت رسانی بهتر به خودتان یاری کنید.

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

با تشکر محسن شفیعی

آپارنت نسخه 1