نوشته های داود میرزایی

آموزش بوت استرپ 4 - container ها

داود میرزایی — Mon, 13 Jan 2020 15:41:13 +0330

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

برای آموزش بوت استرپ به چه چیزهایی نیاز داریم؟

داود میرزایی — Tue, 07 Jan 2020 15:46:30 +0330

قiبل از یادگیری هر تکنولوژی جدید یا زبان برنامه نویسی جدید لازم است موقعیت و آینده آن را در دنیای فناوری بشناسیم و بدانیم چرا و چگونه باید آن تکنولوژی را یاد بگیریم.بوت استرپ محبوب ترین فریمورک یا چارچوب طراحی صفحات وب می باشد که به کمک آن می توان صفحات وب واکنش گرا، زیبا و استاندارد طراحی کرد . شامل یک سری کد های آمادۀ html ، css و جاوااسکریپت می باشد که لازم است با نحوه بکارگیری آن ها آشنا شویم و بتوانیم صفحات وب را با سرعت بالاتری تولید کنیم.آینده بوت استرپدر زمان نگارش این مقاله بوت استرپ به نسخه 4 رسیده است و تغییرات ساختاری نسبت به نسخه قبلی داشته است. در این نسخه بوت استرپ ، از تکنولوژی flex box برای لایه بندی استفاده کرده است که بسیار منعطف عمل می کند. همچنین کلاس های کمکی فراوانی به آن اضافه شده که طراحان را از نوشتن کدهای css تا حد زیادی بی نیاز می کند.زمزمه هایی از انتشار نسخه بعدی بوت استرپ یعنی bootstrap 5 هم در سال 2020 به گوش می رسد. بنابراین باید منتظر جذابیت های بیشتر این فریمورک باشیم.خوب حتما می دانید که بوت استرپ توسط توییتر پشتیبانی می شود و به نظر آینده درخشانی در انتظار آن خواهد بود. هرچند در دنیای فناوری هیچ چیز قطعی نیست اما یادگیری یک مهارت جدید همیشه خوب است.پیش نیاز هالازم است برای شروع بوت استرپ با html و css آشنایی داشته باشید. ساختار صفحات وب، تگ ها ، عناصر html، دستورات و قوانین css را بشناسید. کار چندان دشواری نیست. برای یادگیری بوت استرپ یکی از بهترین منابع مراجعه به سایت رسمی آن یعنی getbootstrap.com می باشد. این سایت همیشه آخرین بروزرسانی ها و تغییرات بوت استرپ را به همراه راهنمای کامل آن ارائه می دهد.ادیتورکدهای بوت استرپ را مانند html و css می توانید در هر ادیتور متنی بنویسید. حتی notepad. البته هر چه از نرم افزار های پیشرفته تری استفاده کنید قاعدتا امکانات بیشتری به شما می دهد و در نتیجه سرعت و دقت کدنویسی شما بالاتر می رود. توصیه ما استفاده از vscode است که یک ادیتور رایگان بوده و توسط Microsoft پشتیبانی می شود. اولین قدم برای کار با بوت استرپ نصب آن می باشد. مقاله آموزشی نصب بوت استرپ را مطالعه کنید تا با فرایند نصب آن که بسیار ساده هم هست آشنا شوید و کار را شروع کنید.حتما از این تکنولوژی لذت خواهید برد.

آموزش فیلترها در CSS

داود میرزایی — Tue, 10 Dec 2019 20:10:37 +0330

خصوصیت filter ابزاری قدرتمند است که طراحان می توانند برای دستیابی به جلوه های ویژه تصویری در صفحات وب از آن استفاده کنند . مانند فیلتر بلور (blur) فیلتر سیاه و سفید (grayscale), فیلتر شفافیت (opacity) و ... که تقریبا شبیه فیلترهای فتوشاپ عمل می کنند.دستور کلی فیلترها به صورت زیر است :.selector { filter : | none }که روی تگ یا تگ هایی که انتخاب کرده ایم اعمال می شوند .- توابع یا انواع فیلترها :blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()هر کدام از این فیلترها (توابع) مقداری را دریافت می کنند . که معمولا به صورت درصد می باشد. برای فیلترهایی که درصد قبول می کنند می توان آن مقدار را به اعشاری نیز وارد کرد به طور مثال 45% را می توان به صورت 0.45 نیز وارد کرد .در ادامه به معرفی این فیلترها می پردازیم .فیلتر ( ) grayscaleیک تصویر را سیاه و سفید می کند . مقداری بین 0% تا 100% را دریافت می کند که 100% یعنی تصویر کاملا سیاه و سفید شود . می توانیم به جای % عددی بین 0 تا 1 را نیز وارد کنیم . در صورتی که مقدار معتبری وارد نکنیم به طور پیش فرض مقدار 100% یا 1 در نظر گرفته و تصویر کاملا سیاه و سفید می شود. این فیلتر مقادیر منفی را قبول نمی کند .#img-1{ filter:grayscale(1); }فیلتر ( ) sepiaاین فیلتر یک سایه رنگ روی تصویر اعمال می کند . و مقداری بین 0% تا 100% و یا 0 تا 1 قبول می کند . اگر مقدار معتبری وارد نشود به طور پیش فرض مقدار 100% را اعمال می کند و مقادیر منفی را هم نمی پذیرد .#img-2{ filter:sepia(1); }فیلتر ( ) saturateاین فیلتر رنگ های تصویر را اشباع می کند و مقداری بین 0% تا 100% یا 0 تا 1 را قبول می کند . در مقدار 0 تصویر رنگ خود را از دست می دهد و در مقدار 100% رنگ ها حالت عادی دارند و هر چه مقدار بیشتر شود به صورت خطی ، رنگ ها اشباع تر می شوند .این فیلتر هم مقادیر منفی را نمی پذیرد .#img-3{ filter: saturate(10); }فیلتر ( ) hue – rotateدر رنگ ها مفهومی داریم به نام دایره رنگ که رنگ ها روی این دایره از صفر تا 360 درجه قرار گرفته اند . این فیلتر باعث چرخش رنگ تصویر به اندازه مقدار داده شده می شود . ورودی باید اندازه یک زاویه باشد که با واحد deg آن را بیان می کنیم . مانند 30deg به معنی 30 درجه . بدیهی است مقدار 0 یا 360 یا مضاربی از آن به معنی عدم تغییر رنگ است . و البته می توان به طور برعکس با عدد منفی روی دایره رنگ حرکت کرد و مانند 60deg-#img-4{ filter: hue-rotate(-780deg); }فیلتر ( ) invertاین فیلتر رنگ را برعکس می کند به طور مثال رنگ سفید ، مشکی و رنگ مشکی ، سفید و مثلا رنگ نارنجی آبی می شود . مقداری بین 0% تا 100% یا 0 تا 1 را قبول می کند که 100% به معنی کاملا برعکس و 0 به معنی بدون تغییر می باشد . اگر مقدار معتبری وارد نشود به طور پیش فرض مقدار 100% را اعمال می کند .این فیلتر هم مقدار منفی را نمی پذیرد .#img-5{ filter: invert(80%); }فیلتر ( ) opacityمیزان شفافیت یک تصویر را با این فیلتر می توانیم تنظیم کنیم . مانند قبل مقداری بین 0% تا 100% یا 0 تا 1 را قبول می کند که 0 به معنی کاملا شفاف و 100% به معنی بدون تغییر می باشد . اگر مقدار معتبری وارد نشود به طور پیش فرض مقدار 100% را اعمال می کند . این فیلتر هم مقدار منفی را نمی پذیرد . عنصری که دارای opacity است اگر تصویر یا عنصر دیگری زیر آن قرار داشته باشد قابل مشاهده خواهد بود و مانند یک پوشش روی آن عمل می کند .#img-6{ filter: opacity(.5); }فیلتر ( ) brightnessمیزان روشنایی یک تصویر یا یک عنصر را با این فیلتر می توانیم تنظیم کنیم . مقدار 0 یعنی تصویر تیره است . مقدار 100 یعنی روشنایی تصویر عادی است و تصویر تغییر نمی کند و مقادیر بالاتر از آن باعث روشن تر شدن تصویر می شود . اگر مقدار نامعتبری وارد شود به طور پیش فرض مقدار 100% اعمال می شود.#img-7{ filter: brightness(400%); }فیلتر ( ) contrastمیزان وضوح تصویر یا تضاد رنگ را می توان با این فیلتر تنظیم کرد . مقدار 0 یعنی تصویر تیره است مقدار 100 یعنی تضاد رنگ عادی است و تصویر تغییری نمی کند و بالاتر از آن باعث می شود تصویر وضوح کمتری داشته باشد . اگر مقدار نامعتبری وارد شود به طور پیش فرض مقدار 100% اعمال می شود .#img-8{ filter: contrast(5); }فیلتر ( ) blurبه کمک این فیلتر می توان تاری یا محو شدگی یک تصویر را با الگوریتم Gaussian blur تنظیم کرد . ورودی این فیلتر مقدار عددی به پیکسل است که مشخص می کند روی تصویر چند پیکسل مجاور باید با هم مخلوط شوند. بنابراین مقادیر بالاتر باعث تاری یا محو شدگی بیشتر تصویر می شود . این فیلتر مقادیر درصدی قبول نمی کند و اگر مقدار نا معتبری وارد شود به طور پیش فرض 0 در نظر می گیرد .#img-9{ filter: blur(5px); }فیلتر ( ) drop –shadowفیلتر جذابی که باعث سایه دار شدن عنصر یا تصویر مورد نظر می شود .این فیلتر 4 پارامتر را به عنوان ورودی دریافت می کند :مقدار horizontal offset که مقادیر مثبت یعنی حرکت سایه به سمت راست.مقدار vertical offset که مقادیر مثبت یعنی حرکت سایه به سمت پایین.مقدار blur radius که میزان تاری یا محو شدگی سایه را تغییر می کند.مقدار Color رنگ سایه را تغییر می کند .#img-10{ filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.9)); }- مرورگرهافیلترها تا تاریخ نگارش این مقاله توسط این مرورگرها پشتیبانی می شوند که در لیست زیر مشاهده می کنید . https://caniuse.com/#feat=css-filters دستور filter دستور استاندارد CSS3 است . در صورتی که بخواهیم توسط مرورگرهای chrome 8 , opera 15 , safari 6 به بالا پشتیبانی شوند از پیشوند webkit- قبل از filter استفاده می کنیم :#img-8{ filter: contrast(5);-webkit-filter: contrast(5); }- ترکیب فیلترهاامکان ترکیب دو یا چند فیلتر همزمان هم روی یک تصویر یا عنصر وجود دارد . فقط کافی است آنها را دنبال هم بنویسیم . در این مثال دو فیلتر blur و grayscale ترکیب شده اند.#img-11{filter: blur(5px) grayscale(1);}امیدوارم از این مقاله آموزشی استفاده کرده باشید . ممنون