آموزش شورت CSS

سرفصل ها و درس ها

مقدمه Introduction

• خوش آمدی Welcome

فوریه 2019 February 2019

• چندین تصویر پس زمینه Multiple background images

• ضربه های OpenType OpenType swashes

• گالری عکس ، قسمت 1 Photo gallery, part 1

• گالری عکس ، قسمت 2 Photo gallery, part 2

ژانویه 2019 January 2019

• پانل های آکاردئونی Accordion panels

• تصویر مرز Border image

• نسبت ابعاد Aspect ratio

• سایه برای یک پرونده PNG Shadow for a PNG file

• سبک بر اساس نوع بارگیری Style by download type

دسامبر 2018 December 2018

• هر عنصر نهم Every nth element

• الگوهای چیدمان Layout patterns

• متن نگهدارنده سبک Style placeholder text

جولای 2018 July 2018

• محصول تصویر الماس Diamond-shaped image crop

• چشم انداز را به یک عنصر اضافه کنید Add perspective to an element

• iframes پاسخگو Responsive iframes

• ایجاد یک ستاره Create a star

• SVG رنگی با CSS Color SVG with CSS

• نوار پیشرفت را سبک کنید Style a progress bar

• نشان دادن زمینه های فرم مورد نیاز Indicating required form fields

• جعبه محصول سه بعدی: طرف جعبه را ایجاد کنید 3D product box: Create the box sides

• جعبه محصول سه بعدی: گرافیک ها را به طرفین اضافه کنید 3D product box: Add graphics to sides

• جعبه محصول سه بعدی: کادر تغییر اندازه و موقعیت 3D product box: Resize and position box

• هدر خود را منحنی کنید Curve your header

• محتوای را از مقادیر ویژگی اضافه کنید Add content from attribute values

• الگوی راه راه با CSS Striped pattern with CSS

ژوئن 2018 June 2018

• تاری و تمرکز جلوه های تمرکز Blur and focus rollover effects

• کلیپ تصویری Clip an image

• ستون های عمودی تراز شده Vertically aligned columns

• متن شیب Gradient text

مه 2018 May 2018

• ستونهای انعطاف پذیر دهانه Span flex columns

• شیب ها و حالت های ترکیبی را ترکیب کنید Combine gradients and blend modes

• حباب گفتاری ایجاد کنید Create a speech bubble

• عناصر SVG را زنده کنید Animate SVG elements

• به لینک های بیشتر مراجعه کنید See more links

آوریل 2018 April 2018

• ایجاد یک ویترین Create a vignette

• متغیرها را ایجاد کنید Create variables

• CSS انتخاب کننده نیست CSS not selector

• اثر پیمایش اختلاف منظر Parallax scroll effect

مارس 2018 March 2018

• لیستی را فیلتر کنید Filter a list

• متن سایه سه بعدی 3D shadow text

• URL ها را هنگام چاپ نشان دهید Show URLs when printing

• پیوندهای سبک نان Style breadcrumb links

فوریه 2018 February 2018

• جعبه اندازه به نجات Box sizing to the rescue

• متن را روی یک زاویه تنظیم کنید Set text on an angle

• گلوله های مثلث Triangle bullets

• متن را مجبور به بسته بندی کنید Force text to wrap

ژانویه 2018 January 2018

• تصاویر با عناصر شبه اضافه کنید Add images with pseudo-elements

• انتقال برای منوی تلفن همراه خود A transition for your mobile menu

• یک ورق اسپری را تحریک کنید Animate a sprite sheet

• پیوندهای تلفنی سبک Style telephone links

• بسته بندی متن مدور با CSS Circular text wrap with CSS

دسامبر 2017 December 2017

• شبکه ای از تصاویر ایجاد کنید Create a grid of images

• پاورقی های چسبنده Sticky footers

• رنگ های انتخابی Selection colors

نوامبر 2017 November 2017

• وضوح صفحه را تشخیص دهید Detect screen resolution

• لیست شماره گذاری شده را ادامه دهید Continue a numbered list

• برای چاپ یک کد QR اضافه کنید Add a QR code for print

• پانل های زبانه تعاملی Interactive tab panels

اکتبر 2017 October 2017

• متن خود را ترسیم کنید Outline your text

• نقاط پولکا ایجاد کنید Create polka dots

• قانون افقی شیب Gradient horizontal rule

• قرار دادن هنر SVG در CSS Embed SVG art in CSS

• شماره های لیست بزرگ را سبک کنید Style big list numbers

سپتامبر 2017 September 2017

• تورفتگی های متن Text indents

• یک ستون را با یک عنصر شبه خم کنید Flex a column with a pseudo-element

• نمایش تصاویر به عنوان مقیاس خاکستری Display images as grayscale

• دکمه های رادیویی سفارشی Customized radio buttons

آگوست 2017 August 2017

• نشان دادن پیوندهای خارج از سایت Indicating off-site links

• ایجاد نمودار پای Creating a pie chart

• شماره گذاری موارد Numbering items

• زمینه های انیمیشن Animating backgrounds

• هدرهای زاویه دار Angled headers

ژوئیه 2017 July 2017

• کادرهای سوئیچ Checkboxes to switches

• تار شدن تصاویر Blurring images

• قاعده عنوان همپوشانی دارد Overlapping heading rule

ژوئن 2017 June 2017

• مرکز عنصر موقعیت یابی Center A positioned element

• بهترین پا را به جلو بکشید Put your best footer forward

• آن را با SASS مخلوط کنید Mixin' it up with SASS

• مخلوط کردن آن را با LESS Mixin' it up with LESS

مه 2017 May 2017

• درپوش را رها کنید Drop the cap

• با SASS توخالی شوید Get nestled with SASS

• با LESS توخالی شوید Get nestled with LESS

• ستون های خود را خم کنید Flex your columns

• بیایید روی تمرکز تمرکز کنیم Let’s focus on the focus

آوریل 2017 April 2017

• منوی تلفن همراه خود را گسترش دهید Expand your mobile menu

• عمودی و مرکز Vertical and center

• خطوط تقسیم ستون Column divider lines

• ایجاد شبکه Creating a grid

مارس 2017 March 2017

• پیوندهای خود را به صورت متوالی دریافت کنید Get your links in a row

• چند نکته به من بدهید Give me a few tips

• تنظیم یک میز شیک Setting a stylish table

• توابع رنگ در Sass و LESS Color functions in Sass and LESS

فوریه 2017 February 2017

• اولین چیزها اولین و آخرین چیزهای آخر First things first and last things last

• تنظیم رنگ ها با Less و Sass Setting colors with Less and Sass

• آن را حساب کنید ، آن را اصلاح کنید و آن را فراموش کنید Calc it, fix it, and forget it

• شناور در یک شناور Hover in a hover

ژانویه 2017 January 2017

• دکمه ای برای پیوند شما A button for your link

• بازدید از لینک بازدید شده Visiting the visited link

• شما می توانید به من نقل قول کنید You can quote me

• یک خاصیت درخشان A glowing property

• پیراستن آن پیوند Dress up that link

دسامبر 2016 December 2016

• پیشینه ای به من بدهید Give me some background

• موقعیت شما چیست؟ What’s your position?

• بگذارید این را توسط شما شناور کنم Let me float this by you