مرور

دوره آموزشی CSS

آموزش mixin و include

میکسین های ساس این @mixinدستورالعمل به شما امکان می دهد کدهای CSS ایجاد کنید که در سراسر وب سایت مورد استفاده مجدد قرار می گیرد. این @includeدستورالعمل ایجاد شده است تا به شما اجازه دهد از مخلوط استفاده کنید. تعریف Mixin مخلوط…
ادامه مطلب ...

آموزش import و Partials

Sass کد CSS را خشک نگه می دارد (خود را تکرار نکنید). یکی از روش های نوشتن کد DRY نگهداری کد مربوطه در پرونده های جداگانه است. می توانید با استفاده از قطعه های CSS پرونده های کوچکی ایجاد کنید تا در سایر پرونده های Sass قرار گیرد. نمونه هایی…
ادامه مطلب ...

آموزش مورد شبکه CSS

عناصر کودک (موارد) یک ظرف شبکه شامل موارد شبکه است . به طور پیش فرض ، یک کانتینر در هر ردیف برای هر ستون یک مورد شبکه دارد ، اما می توانید موارد شبکه را طوری سبک کنید که چندین ستون و / یا ردیف داشته باشند. ویژگی ستون…
ادامه مطلب ...

آموزش کانتینر شبکه CSS

ظرف توری برای اینکه یک عنصر HTML به عنوان یک ظرف شبکه رفتار کند ، باید displayویژگی را روی gridیا تنظیم کنید inline-grid. ظروف توری شامل موارد شبکه ای است که درون ستون ها و ردیف ها قرار می گیرد. ویژگی ستون های شبکه این …
ادامه مطلب ...

ماژول طرح بندی شبکه CSS

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

طراحی وب پاسخگو – چارچوب ها

بسیاری از چارچوب های CSS رایگان وجود دارد که طراحی پاسخگو را ارائه می دهند. با استفاده از W3.CSS یک راه عالی برای ایجاد یک طراحی پاسخگو ، استفاده از یک صفحه سبک پاسخگو ، مانند W3.CSS است W3.CSS توسعه سایتهایی را که از هر اندازه…
ادامه مطلب ...

طراحی وب پاسخگو – فیلم ها

با استفاده از ویژگی عرض اگر widthویژگی روی 100٪ تنظیم شود ، پخش کننده ویدیو پاسخگو خواهد بود و مقیاس بالا و پایین می رود: مثال video { width: 100%; height: auto; } توجه داشته باشید که در مثال بالا ، پخش کننده ویدیو می تواند…
ادامه مطلب ...

آموزش طراحی وب پاسخگو – تصاویر

اندازه پنجره مرورگر را تغییر دهید تا ببینید که تصویر متناسب با صفحه متناسب است. با استفاده از ویژگی عرض اگر widthویژگی روی درصد تنظیم شود و heightویژگی روی "خودکار" تنظیم شود ، تصویر پاسخگو خواهد بود و به صورت مقیاس بالا و پایین…
ادامه مطلب ...

آموزش طراحی وب پاسخگو – سوالات رسانه

پرسش رسانه چیست؟ پرس و جو رسانه یک روش CSS است که در CSS3 معرفی شده است. این @mediaقانون فقط در صورت صحت یک شرط خاص از بلوک از ویژگی های CSS استفاده می کند. مثال اگر پنجره مرورگر 600 پیکسل یا کوچکتر باشد ، رنگ پس زمینه آبی روشن…
ادامه مطلب ...

آموزش طراحی وب پاسخگو – نمای شبکه

Grid-View چیست؟ بسیاری از صفحات وب مبتنی بر grid-view هستند ، به این معنی که صفحه به ستونهایی تقسیم شده است:یک نمای پاسخگو grid اغلب 12 ستون دارد و عرض آن 100٪ است و با تغییر اندازه پنجره مرورگر ، کوچک و گسترش می یابد. ساخت یک شبکه…
ادامه مطلب ...

آموزش طراحی وب پاسخگو – The Viewport

Viewport چیست؟ Viewport منطقه قابل مشاهده کاربر در یک صفحه وب است. نمای نمایش در دستگاه متفاوت است و در تلفن همراه نسبت به صفحه رایانه کوچکتر خواهد بود. قبل از تبلت ها و تلفن های همراه ، صفحات وب فقط برای صفحات رایانه طراحی می شدند و…
ادامه مطلب ...

آموزش طراحی وب پاسخگو – مقدمه

طراحی وب ریسپانسیو چیست؟ طراحی وب پاسخگو باعث می شود صفحه وب شما در همه دستگاه ها خوب به نظر برسد. طراحی وب پاسخگو فقط از HTML و CSS استفاده می کند. طراحی وب پاسخگو یک برنامه یا JavaScript نیست. طراحی برای بهترین تجربه برای…
ادامه مطلب ...

آموزش CSS Flexbox

ماژول طرح بندی CSS Flexbox قبل از ماژول طرح بندی Flexbox ، چهار حالت طرح بندی وجود داشت: مسدود کردن ، برای بخشهای موجود در یک صفحه وب درون خطی ، برای متن جدول ، برای داده های جدول دو بعدی موقعیتی ، برای موقعیت صریح یک…
ادامه مطلب ...

آموزش نمایش داده های رسانه ای CSS – نمونه هایی

سeriesالات رسانه CSS - مثالهای بیشتر بیایید چند نمونه دیگر از استفاده از نمایش داده های رسانه را بررسی کنیم. س quالات رسانه یک روش محبوب برای ارائه یک سبک سبک متناسب با دستگاه های مختلف است. برای نشان دادن یک مثال ساده ، می توانیم…
ادامه مطلب ...

آموزش سوالات رسانه CSS

CSS2 انواع رسانه ها را معرفی کرد این @mediaقانون که در CSS2 معرفی شد ، امکان تعریف قوانین سبک متفاوت برای انواع مختلف رسانه ها را فراهم کرد. مثالها: شما می توانید یک مجموعه از قوانین سبک برای صفحه های رایانه ، یکی برای چاپگرها ، دیگری…
ادامه مطلب ...

آموزش اندازه CSS جعبه

اندازه CSS جعبه box-sizingویژگی CSS به ما اجازه می دهد تا padding و حاشیه را در عرض و ارتفاع کل یک عنصر قرار دهیم. بدون ویژگی CSS اندازه اندازه به طور پیش فرض ، عرض و ارتفاع یک عنصر به این صورت محاسبه می شود: عرض + بالشتک +…
ادامه مطلب ...

آموزش متغیرهای CSS – عملکرد var

متغیرهای CSS این var()تابع برای درج مقدار متغیر CSS استفاده می شود. متغیرهای CSS به DOM دسترسی دارند ، این بدان معناست که شما می توانید متغیرهایی با دامنه محلی یا جهانی ایجاد کنید ، متغیرها را با JavaScript تغییر دهید و متغیرها را…
ادامه مطلب ...

آموزش رابط کاربری CSS

رابط کاربری CSS در این فصل شما با خصوصیات رابط کاربری CSS زیر آشنا خواهید شد: resize outline-offset پشتیبانی مرورگر اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که به طور کامل از ویژگی پشتیبانی می کند.…
ادامه مطلب ...

آموزش چند ستون CSS

چیدمان چند ستونی CSS طرح چند ستونی CSS امکان تعریف آسان چندین ستون از متن را فراهم می کند - درست مانند روزنامه ها: چیدمان چند ستونی CSS طرح چند ستونی CSS امکان تعریف آسان چندین ستون از متن را فراهم می کند - درست مانند روزنامه…
ادامه مطلب ...

آموزش CSS نمونه صفحه بندی

بیاموزید که چگونه یک صفحه بندی پاسخگو با استفاده از CSS ایجاد کنید. صفحه بندی ساده اگر وب سایتی با صفحات زیاد دارید ، ممکن است بخواهید به هر صفحه نوعی صفحه بندی اضافه کنید: مثال .pagination { display: inline-block; }…
ادامه مطلب ...

آموزش دکمه های CSS

بیاموزید که چگونه دکمه ها را با استفاده از CSS سبک کنید. سبک اصلی دکمه دکمه پیش فرض دکمه CSS مثال .button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align:…
ادامه مطلب ...

آموزش بازتاب تصویر CSS

در این فصل شما یاد می گیرید که چگونه یک تصویر را منعکس کنید. بازتاب تصویر CSS از این box-reflectویژگی برای ایجاد بازتاب تصویر استفاده می شود. ارزش box-reflectدارایی می تواند: below، above، left، یا right.…
ادامه مطلب ...

آموزش راهنمای CSS

با CSS راهنمایی ایجاد کنید. نسخه ی نمایشی: نمونه های راهنمای ابزار وقتی کاربر نشانگر ماوس را روی یک عنصر حرکت می دهد ، معمولاً از یک راهنمای ابزار برای تعیین اطلاعات اضافی در مورد چیزی استفاده می شود: بالا درست…
ادامه مطلب ...

آموزش انیمیشن های CSS

انیمیشن های CSS CSS امکان استفاده از عناصر HTML را بدون استفاده از JavaScript یا Flash فراهم می کند! CSS در این فصل شما با خواص زیر آشنا خواهید شد: @keyframes animation-name animation-duration animation-delay…
ادامه مطلب ...

آموزش انتقال CSS

انتقال CSS انتقال های CSS به شما امکان می دهد مقادیر ویژگی را به طور هموار و در مدت زمان مشخص تغییر دهید.  برای دیدن جلوه انتقال CSS روی عنصر زیر قرار دهید: CSS در این فصل شما با خواص زیر آشنا خواهید شد: transition…
ادامه مطلب ...

آموزش تبدیل 3D CSS

تبدیل 3D CSS CSS همچنین از تبدیل 3D استفاده می کند. برای مشاهده تفاوت بین تغییر شکل 2D و 3D ، روی عناصر زیر قرار دهید: چرخش 2 بعدی چرخش سه بعدی در این فصل شما با ویژگی CSS زیر آشنا خواهید شد: transform پشتیبانی…
ادامه مطلب ...

آموزش تبدیل CSS 2D

تبدیل CSS 2D تبدیل CSS به شما امکان می دهد تا عناصر را حرکت دهید ، بچرخانید ، مقیاس بندی کنید و انحراف دهید. برای دیدن تغییر شکل 2D بر روی عنصر زیر قرار دهید: چرخش 2 بعدی در این فصل شما با ویژگی CSS زیر آشنا خواهید شد:…
ادامه مطلب ...

آموزش قلم های وب CSS

قانون CSS @ font-face فونت های وب به طراحان وب این امکان را می دهد تا از قلمهایی که روی رایانه کاربر نصب نشده اند استفاده کنند. هنگامی که فونت مورد نظر خود را پیدا یا خریداری کردید ، فقط فایل قلم را در وب سرور خود قرار دهید و در صورت…
ادامه مطلب ...

آموزش جلوه های متنی CSS

سرریز متن متن CSS ، بسته بندی کلمات ، قوانین شکستن خط و حالت نوشتن در این فصل شما با خواص زیر آشنا خواهید شد: text-overflow word-wrap word-break writing-mode سرریز متن CSS text-overflowویژگی CSS مشخص می کند که…
ادامه مطلب ...

آموزش جلوه های سایه CSS

جلوه های سایه CSS با CSS می توانید سایه را به متن و عناصر اضافه کنید. در این فصل ها با خواص زیر آشنا خواهید شد: text-shadow box-shadow سایه متن CSS text-shadowویژگی CSS سایه را به متن اعمال می کند. در ساده…
ادامه مطلب ...

آموزش شیب های CSS

شیب های CSS به شما امکان می دهد انتقالهای روان بین دو یا چند رنگ مشخص شده را نشان دهید. CSS دو نوع شیب را تعریف می کند: شیب های خطی (پایین / بالا / چپ / راست / مورب پایین می رود) شعاع شعاعی (تعریف شده توسط مرکز آنها)…
ادامه مطلب ...

آموزش کلمات کلیدی رنگی CSS

این صفحه را به توضیح transparent، currentcolorو inheritکلمات کلیدی. کلید واژه شفاف از transparentکلمه کلیدی برای شفاف سازی رنگ استفاده می شود. این اغلب برای ایجاد یک رنگ زمینه شفاف برای یک عنصر استفاده می شود. مثال در اینجا ،…
ادامه مطلب ...

آموزش رنگ های CSS

CSS از 140+ نام رنگ ، مقادیر HEX ، مقادیر RGB ، مقادیر RGBA ، مقادیر HSL ، مقادیر HSLA و تیرگی پشتیبانی می کند. رنگهای RGBA مقادیر رنگ RGBA یک پسوند مقادیر رنگ RGB با یک کانال آلفا است - که میزان تیرگی یک رنگ را مشخص می کند.…
ادامه مطلب ...

آموزش زمینه های چندگانه CSS

زمینه های چندگانه CSS CSS به شما امکان می دهد از طریق background-imageویژگی ، چندین تصویر پس زمینه را برای یک عنصر اضافه کنید . تصاویر پس زمینه مختلف با ویرگول از هم جدا می شوند ، و تصاویر روی هم قرار می گیرند ، جایی که تصویر…
ادامه مطلب ...

آموزش تصاویر حاشیه ای CSS

ویژگی CSS-border-image border-imageخاصیت CSS به شما امکان می دهد تصویری را تعیین کنید که به جای حاشیه طبیعی اطراف یک عنصر مورد استفاده قرار گیرد. این ملک سه قسمت دارد: تصویری که به عنوان حاشیه استفاده می شود کجا می توان…
ادامه مطلب ...

گوشه های گرد CSS

ویژگی CSS-radius border-radiusخاصیت CSS شعاع گوشه های یک عنصر را مشخص می کند. نکته: این ویژگی به شما امکان می دهد گوشه های گرد را به عناصر اضافه کنید! در اینجا سه ​​مثال آورده شده است: 1. گوشه های گرد شده برای عنصری با رنگ…
ادامه مطلب ...

آموزش قانون مهم CSS

چیست! مهم است؟ !importantقانون در CSS استفاده می شود برای اضافه اهمیت بیشتر به یک / ارزش ملک از حالت طبیعی. در واقع ، اگر از این !importantقانون استفاده کنید ، این قانون همه قوانین قبلی را برای یک خاصیت خاص روی آن عنصر نادیده می گیرد!…
ادامه مطلب ...

آموزش ویژگی CSS

ویژگی چیست؟ اگر دو یا چند قانون CSS متناقض وجود داشته باشد که به همان عنصر اشاره دارند ، مرورگر برای تعیین اینکه کدام یک از موارد خاص است ، از برخی قوانین پیروی می کند و بنابراین برنده می شود. ویژگی را به عنوان یک نمره / رتبه در نظر…
ادامه مطلب ...

آموزش واحد های CSS

واحدهای CSS CSS چندین واحد مختلف برای بیان طول دارد. بسیاری از خواص CSS را "طول" ارزش ها، مانند width، margin، padding، font-size، و غیره طول یک عدد به دنبال یک واحد طول، مانند است 10px، 2em، و غیره مثال مقادیر طول مختلف را با…
ادامه مطلب ...

آموزش طرح وب سایت با CSS

چیدمان وب سایت یک وب سایت اغلب به عناوین ، منوها ، محتوا و پاورقی تقسیم می شود: تعداد زیادی طرح مختلف برای انتخاب وجود دارد. با این حال ، ساختار فوق یکی از متداول ترین هاست و ما در این مقاله آموزشی نگاه دقیق تری به آن خواهیم داشت.…
ادامه مطلب ...

آموزش شمارنده های CSS

شمارنده های CSS "متغیرهایی" هستند که توسط CSS نگهداری می شوند و مقادیر آنها را می توان با قوانین CSS افزایش داد (برای پیگیری چند بار استفاده از آنها). شمارنده ها به شما امکان می دهند شکل ظاهری محتوا را بر اساس قرارگیری آن در سند تنظیم…
ادامه مطلب ...

آموزش فرم های CSS

شکل یک فرم HTML را می توان با CSS بسیار بهبود بخشید: یک ظاهر سازی زمینه های ورودی از widthویژگی برای تعیین عرض قسمت ورودی استفاده کنید: مثال input { width: 100%; } مثال بالا برای همه عناصر <input> اعمال می شود. اگر فقط…
ادامه مطلب ...

آموزش CSS Image Sprites

Sprites تصویر Sprite تصویر مجموعه ای از تصاویر است که در یک تصویر واحد قرار می گیرد. بارگیری یک صفحه وب با تصاویر بسیار طولانی مدت طول می کشد و چندین درخواست سرور ایجاد می کند. استفاده از sprites تصویری باعث کاهش تعداد درخواست های…
ادامه مطلب ...

آموزش CSS Dropdowns

با CSS یک کرکره کشویی قابل حمل ایجاد کنید. نسخه ی نمایشی: نمونه های کشویی ماوس را روی نمونه های زیر حرکت دهید: کرکره پایه یک جعبه کشویی ایجاد کنید که وقتی کاربر ماوس را روی یک عنصر حرکت می دهد ، ظاهر می شود. مثال…
ادامه مطلب ...

آموزش نوار پیمایش CSS

نسخه ی نمایشی: میله های ناوبری میله های پیمایش داشتن ناوبری با کاربرد آسان برای هر وب سایتی مهم است. با CSS می توانید منوهای HTML خسته کننده را به میله های ناوبری زیبا تبدیل کنید. نوار پیمایش = لیست پیوندها یک نوار پیمایش…
ادامه مطلب ...