آموزش ساخت 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 را همانند تصویر زیر درون آن تایپ کنید .(دمو تمرین در مرورگر)

آموزش ساخت لودر Preloaders صفحه وب سایت با Css3 و Html

حتما برای شما هم پیش آمده که بخواهید یک صفحه از وب سایت را باز کنید ولی بدلیل مشکلات گوناگون صفحه مورد نظر باز نشده و یک لودر به شما نمایش داده می شود که ساده ترین آن نیز همان لودر تب مرورگر می باشد . دایره ای که دائم در حال چرخش است .
من در ادامه می خواهم با استفاده از Html  و Css3 یک لودر همانند مرورگر برای شما ایجاد کنم .تصویر آموزش جهت نمونه می باشد و برای مشاهده دمو باید بر روی لینک مورد نظر کلیک کنید . ( دمو تمرین در مرورگر)

ایجاد اشکال مختلف هندسی با Css3

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

مشترک این خوارک خبری شوید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا