آموزش ساخت Modal Box با استفاده از HTML و CSS3
وب سایتها برای معرفی خدماتی که در سایت قرار داده اند از باکس هایی استفاده می کنند که با HTML . CSS نوشته می شود . منظور از خدمات بخش هایی است که بیشتر از دیگر قسمت ها باید در دید باشد . مثل گارانتی یا شرایط پرداخت یا هر مورد دیگری . در ادامه می خواهم یک Modal Box برای شما طراحی کنم . شما می توانید رنگ و نوع فونت را خودتان تغییر بدهید .( مشاهده دمو )
ایجاد آیکون ذره بین با HTML و CSS
کاربران مقدماتی برای آشنا شدن با تگهای کاربردی و جدید Html و Css حتما سعی کنند این تمرین های را به دقت انجام بدهند . مقدمه یادگری هر چیزی پایه و آموزش های سطح ابتدایی می باشد . اگر از همان ابتدا یک کار یا یک پروسه را به صورت صحیح یاد بگیریم ، در مراحل بعدی که کار مشکل می شود و وارد بخش متوسط و پیشرفته می شویم کار ساده تر می شود .
آموزش ساخت آیکون Space Invader با استفاده از CSS و HTML
با یکی دیگر از تمرین های مقدماتی با عنوان آموزش ساخت آیکون Space Invader با استفاده از CSS و HTML در خدمت شما هستم . ساخت این شکل بسیار جالب می باشد . پیشنهاد میکنم حتما تگ ها را خط به خط بنویسید و نتیجه را در مرورگر مشاهده کنید .
آموزش ساخت باکس حبابی با استفاده از HTML و Css
تا به حال به وب سایتهایی که جهت معرفی یک بخش یک کادر ایجاد کرده و درون آن متنی نوشته اند دقت کرده اید . اجازه بدهید با یک مثال ساده تر این شکل را برای شما معرفی کنم . در کتاب های درسی بالای سر کودکان یا افرادی که در حال فکر کردن هستند یک ابر میکشیدند و متن مورد نظر را درون آن تایپ میکردند . به این نوع اشکال Comment Bubble گفته می شود که در ادامه میخواهم یک نمونه از آن را برای شما طراحی کنم .
آموزش ساخت آیکون بی نهایت Infinity با HTML و CSS
با یکی دیگر از تمرین های مقدماتی تگهای Html و Css با عنوان آموزش ساخت آیکون بی نهایت Infinity با Html و Cssدر خدمت شما هستم . این تمرین ها به درخواست کاربران بخش آموزش برای بازدید کنندگان سطح مقدماتی ایجاد شده و 20 تمرین دیگر نیز ایجاد شده که در روزهای آینده در ساعت های مختلف در بخش اموزش فعال می شود. سعی کنید برای درک بهتر تگ ها را خط به خط تایپ کنید تا بهتر متوجه کاربرد هر تگ شوید .
آموزش ساخت آیکون ماه از طریق HTML و CSS3
با استفاده از Html و Css3 می توان وب سایت ، فرم ، وبلاگ ، صفحات مختلفی که برای دسترسی به اطلاعات مورد استفاده قرار می گیرد و اشکال متفاوت طراحی کرد . من در این مقاله میخواهم تصویر ماه را در سه مرحله برای شما با استفاده از تگهای HTML و CSS شبیه سازی کنم . امیدوارم این نوع تمرین ها به کاربران مبتدی کمک کند تا راحت تر با تگهای زبانهای نامبرده شده آشنا شوند .
آموزش ساخت آیکون فیس بوک از طریق کدهای HTML و CSS3
با یکی دیگر از مطالب سایت با عنوان آموزش ساخت آیکون فیس بوک از طریق کدهای Html و Css3 در خدمت شما هستم . ساخت اشکال در Css3 نسبت به ورژن قبلی راحتر شده و با کمی یادگیری تگها به سادگی می توانید یک شکل را به صورت دلخواه طراحی کنید و از اشکال ایجاد شده در قسمت های مختلف وب سایت استفاده کنید .در ادامه میخواهم آیکون فیس بوک را با استفاده از تگهای Html و Css طراحی کنم .
ساخت یک تصویر شناور با استفاده از CSS3
وقتی ماوس را بر روی یک لینک یا تصویر قرار میدهید و رنگ یا افکت خاصی بر روی آن اعمال می شود ، از خصوصیت hover استفاده شده است . اما Css3 ویژگی hover را تکمیل کرده است . شما می توانید دو تصویر را انتخاب کنید و با مدت زمان خاص مشخص کنید وقتی موس بر روی یک تصویر قرار می گیرد تصویر دوم به چه حالتی ظاهر شود . برای استفاده از این ویژگی از یکسری تگهای کاربرد استفاده شده است که در ادامه آموزش میدهم .(مشاهده دمو در مرورگر)
ایجاد یک شیئ متحرک در CSS3 Animations
یکی از قابیت های Css3 که با ادغام HTML 5 می توان از آن استفاده کرد انیمیشن می باشد .تا به حال با نرم افزار فتوشاپ و فلش بنر طراحی کرده اید ؟ برای حرکت دادن اجزا همیشه باید یک فریم ایجاد کنیم . در Css3 نیز قبل از ساخت انیمیشن باید با Keyframe آشنا شوید . Keyframe چیست ؟ بوسیله Keyframe مشخص می کنیم که در چه زمانی باید چه تغییراتی درون Css انجام شود مثلاً در 0% از زمان بکگراند آبی و در 100% زمان قرمز باشد .
آموزش گرافیک تصاویر در Css3
وقتی بر روی تصاویر بخش آموزش موس را نگه میدارید مشاهده کرده اید که تصاویر نزدیک تر می شود ؟ اینکار از طریق روشهای مختلفی انجام می شود که متداول ترین آن Css3 می باشد . من در این مقاله آموزشی میخواهم به شما آموزش بدهم که وقتی ماوس را بر روی تصویر نگه میدارید عکس بزرگتر شود ، تصویر وقتی موس بر روی آن قرار می گیرد کدر شود و رنگ حاشیه به محض قرار گیری موس بر روی کادر تغییر کند .
آموزش ایجاد شکل Yin Yang با استفاده از دستورات Css3
در مقاله قبلی که با عنوان ایجاد یک قلب با استفاده از دستورات CSS3 در سایت فعال شده یاد گرفتید که فقط طی چند مرحله ساده شکل قلب را با استفاده از دستورات Css3 طراحی کنید . در این مقاله آموزشی میخواهم شکل Yin Yang را با استفاده از دستورات Css3 برای شما ایجاد کنم.Css3 کار را برای طراحان بسیار ساده تر کرده است به طوریکه به سادگی می توانید هر شکلی را که می بینید با استفاده از دستورات Css3 آن را ایجاد کنید .
یین و یانگ نشان دهنده قطب‌های مخالف و تضادهای جهان هستند. البته این بدان معنا نیست که یانگ خوب است و یین بد است (در حقیقت این تحریفی نادرست است). بلکه یین و یانگ مانند شب و روز یا زمستان و تابستان بخشی از چرخه هستی هستند. وقتی تعادل و احساس خوبی به وجود می‌آید که تعادل بین یین و یانگ برقرار باشد. نقطه‌های متضادی که داخل شکل یین و یانگ دیده می‌شود به این مفهوم است که یین وقتی به حداکثر خودش برسد، و می خواهد تمام شود در درونش یانگ را دارد و وقتی هم که ینگ می خواهد به حداکثر خود برسد در درونش یین را دارد. یعنی وقتی یکی تمام می‌شود، دیگری در درونش رشد می‌کند و این چرخه ادامه پیدا می‌کند.
ایجاد یک قلب با استفاده از دستورات CSS3
در مقاله قبلی که با عنوان "ایجاد اشکال مختلف هندسی با Css3" در سایت فعال شد یاد گرفتید که چگونه اشکال مورد نظر خودتون را با استفاده از دستورات Css3 ایجاد کنید .
Css3 کار را برای طراحان بسیار ساده تر کرده است به طوریکه به سادگی می توانید هر شکلی را که می بینید با استفاده از دستورات Css3 آن را ایجاد کنید . بر فرض مثال ایجاد شکل قلب با استفاده از Css3 که بنده در ادامه روش آن را توضیح میدهم .
1. ابتدا یک ویرایشگر مثل نوت پد ، دریم ویور یا هر برنامه ای که بتوانید یکسری کد را درون آن تایپ کنید باز کرده و کدهای ابتدایی Html را همانند تصویر زیر درون آن تایپ کنید .(دمو تمرین در مرورگر)
حتما برای شما هم پیش آمده که بخواهید یک صفحه از وب سایت را باز کنید ولی بدلیل مشکلات گوناگون صفحه مورد نظر باز نشده و یک لودر به شما نمایش داده می شود که ساده ترین آن نیز همان لودر تب مرورگر می باشد . دایره ای که دائم در حال چرخش است .
من در ادامه می خواهم با استفاده از Html و Css3 یک لودر همانند مرورگر برای شما ایجاد کنم .تصویر آموزش جهت نمونه می باشد و برای مشاهده دمو باید بر روی لینک مورد نظر کلیک کنید . ( دمو تمرین در مرورگر)
ایجاد اشکال مختلف هندسی با Css3
با یکی دیگر از آموزشهای سایت آسارایان با عنوان "ایجاد اشکال مختلف هندسی با Css3"در خدمت شما هستم .در این بخش آموزشی با استفاده از کدهای Css3 یاد می گیرید که چگونه یکسری از اشکال هندسی را ترسیم کنید .
منبع اصلی این آموزش به زبان انگلیسی بوده که می توانید در صورت نیاز از طریق این لینک از اشکال دیگر آن استفاده کنید .
بیشتر...
استفاده از فونت فارسی برای صفحات وب با استفاده از CSS
به فونت های بخش آموزش یا فروشگاه دقت کرده اید ؟ همانطور که مشاهده می کنید چند نوع فونت در سایت مورد استفاده قرار گرفته است . در css3 این امکان وجود دارد که هر فونتی را که بخواهیم برای صفحات وب لحاظ می کنیم یعنی می توانیم مشخص کنیم که منوی سمت راست با این نوع فونت نمایش داده شود و قسمت های دیگر با فونت مورد نظر ما. روش کار هم زیاد کار مشکلی نمی باشد فقط باید از چند خط تگ ساده که برای انجام اینکار در استاندارد Css قرار داده شده است استفاده کنیم .
ابتدا فونتی که دوست دارید برای یک قسمت از سایت مورد استفاده قرار بدهید را با پسوندهای .otf و .ttf از اینترنت دانلود کنید . مثلا فونت B yekan که آقای صبح خیز در بعضی از قسمت استفاده کرده است . زمانی که فونت مورد نظر را دانلود کردید چند فایل با پسوند های مختلف دارید که هر کدام از این پسوند ها توسط یک مرورگر پشتیبانی می شود.
آموزش طراحی فرم ثبت نام با Html و Css
با یکی دیگر از آموزشهای طراحی فرم ثبت نام در خدمت شما هستم . بخشی که دارای آمار بازدید بالایی می باشد و کاربرانی که علاقه زیادی به یادگیری کدهای HTML و CSS دارند همیشه این بخش را مورد بررسی قرار میدهند. هیچ سایتی را نمی توانید پیدا کنید که دارای فرم ثبت نام یا ورود کاربران نباشد البته سایتهای HTML از این قاعده مستثنی می باشند ولی تقریبا تمام وب سایتهای فعال دارای یک فرم ثبت نام هستند . فرم ثبت نام به صورت پیش فرض باید با Html طراحی شده سپس با Css شکل ظاهری آن تغییر کند و در پایان با زبان های برنامه نویسی پیشرفته مثل PHP یا ASP باید به یک پایگاه داده متصل شوند.
برای شروع نیاز به یک ویرایشگر متن مثل نوت پد یا دریم ویور دارید تا به راحتی کدتان را در آن تایپ کرده و نتیجه را مشاهده کنید . قبل از شروع آموزش باید در مورد تگهایی که در فرم مورد استفاده قرار میگرد کمی توضیح بدهم.
فرم های به طور کلی دارای یکسری گزینه ها مثل کادرهای متنی ( TextBox ) ، ليست های بازشو ( Drop-Down Lists ) ، دکمه های گزينشی ( CheckBox ) و ... هستند .
سوالی دیروز توسط یکی از کاربران در بخش آموزش مطرح شد با عنوان اینکه چه کدی در CSS قرار بدهیم که تصاویر به صورت اتوماتیک هم عرض صفحه وب سایت شده و از کادر بیرون نزند. این سوال در مورد متن هم صدق می کند یعنی اگر برای متن هم از کد درستی استفاده نشود از کادر مورد نظر که تنظیم کرده اید بیرون میزند . یک خاصیت برای جلوگیری از بروز چنین مشکلی وجود دارد .نام این خاصیت overflow می باشد .
overflow برای جلوگیری از بیرون زدن متن از باکس در زمانی که محتوا بیشتر از عرض و ارتفاع باکس است مورد استفاده قرار می گیرد و برای تصویر اگر با دستور max-width:95% !important; همراه شود می تواند موثر باشد . به تصاویر بخش آموزش دقت کرده اید ؟ بیشتر آنها عرضی بیشتر از 750 پیکسل دارند که عرض ثابت وسط صفحه می باشد ولی با دستور max-width:98% !important; به تصاویر اجازه بیرون زدن از کادر داده نمی شود .
آموزش ساخت یک Loading با Css3
جهت مشاهده دمو آموزش کلیک کنید
بخش های زیادی در سایت جهت بالا بردن اطلاعات بازدید کنندگان ایجاد شده است که یکی از آنها Css3 می باشد . هفته پیش مباحث اصلی و ویژگیهای جدیدی که به Css اضافه شده بود را به صورت کامل همراه با مثال های کاربردی از سایت w3schools آموزش داده ام .
معمولا وقتی یک مبحث آموزشی ، توضیح داده می شود باید معلم یا فردی که دارد آن مبحث را آموزش میدهد برای درک بهتر مخاطب ، چند مثال به صورت قابل فهم بیان کند تا کاربرد موارد آموزش داده شده در ذهن فرد مقابل جای بگیرد و به راحتی بتواند با مواردی که یاد گرفته است ایده های جدید خلق کند .
تا به حال سایت هایی که با نرم افزار ادوب فلش طراحی شده است را دیده اید ؟ اگر سرعت اینترنت شما پایین باشد که حتما در ایران به همین صورت هست ، یک تصویر که معروف به Loading هست را مشاهده می کنید که در حال چرخش می باشد یا یک کادر مستطیل شکل هست که از صفر تا 100 در حال حرکت است ، حال میخواهم یکی از این تصاویر را با Css3 برای شما طراحی کنم و هر قسمت را به صورت کامل برای شما آموزش بدهم .
اخبار محبوب
برچسب ها
هم اکنون
گالری پست
