همکاری با سبزلرن
هیچ محصولی در سبد خرید نیست.
سرفصل ها
فصل اول – Header ها?
در این فصل ، چندین هدر جذاب را پیاده سازی خواهیم کرد و در هر ویدیو یک تکنیک و یا پراپرتی جدیدی را آموزش خواهید دید ، در css پراپرتی های کاربری اما کمتر شناخته شده ای وجود دارد که در این فصل به برخی از آنها اشاره خواهیم کرد
Header 4 – کارکردن با پراپرتی جالب clip path34:19
Header 5 – اشکال هندسی متفاوت با clip path maker21:03
Header 6 – کارکردن با فیلتر greyscale و سیاه سفید کردن عکس ها29:32
Header 7 – قرار دادن ویدیو به عنوان هدر + فیلتر blur32:24
Header 8 – نوشته های شیشه ای و کار با mix blend mode20:23
Header 9 – ترکیب فلکس و گرید37:24
پروژه پایان فصل – آدمک38:26
فصل دوم – Button ها?
در این فصل قراره که کلی دکمه با طرح های متفاوت بزنیم و تکینک ها و انیمشن های خاصی رو باهمدیگه یاد بگیریم
Button 1 – کارکردن با transition origin و rotate ها19:10
Button 2 – انیمیشن دادن به بوردرها با کمک transform18:04
Button 3 – دکمه ی نئونی ، کارکردن با text shadow و box shadow27:40
Button 4 – کارکردن با gradient در دکمه ها9:15
Button 5 – تکنیک gradient دادن به بوردرها14:26
Button 6 – کار با nth-child و transition delay22:43
Button 7 – بوردرهای متحرک با keyframe و animation delay24:55
Button 8 – کار با opacity و scale6:49
پروژه ی پایان فصل – نوار موزیک16:06
فصل سوم – منو ها و navbar ها?
در این فصل در مورد navbar ها و منوها صحبت خواهیم کرد ، چندنکته ی مهم در طراحی این قسمت هارا یاد خواهیم گرفت و در ادامه نیز با پیاده سازی چند پروژه ی جذاب ، فصل را به پایان خواهیم رساند
درمورد این فصل1:40
نکته ی طلایی اول7:26
نکته ی طلایی دوم3:26
نکته طلایی سوم4:33
Nav 1 – اعمال shadow برای آیتم های لیست12:54
Nav 2 – کار با border with14:31
Nav 3 – آموزش text fill نوشته ها9:12
nav 4 – پرژه پایان فصل و ساخت منو کشویی جذاب28:32
فصل چهارم – بخش Media?
در این فصل چندین پروژه در مورد Media خواهیم زد و در این فصل کوتاه هم چندین تکنیک یاد خواهید گرفت
Media 1 – مرور keyframe ها و ترکیب با before16:51
Media 2 – استفاده خلاقانه از position ها و بازگشت انیمیشن18:51
Media 3 – پروژه پایان فصل و آموزش transition در direction متفاوت34:00
فصل پنجم – background های شناور?
در این فصل یاد خواهیم گرفت که بکگراند های شناور و متحرک پیاده سازی کنیم
Bg 1 – آموزش move and spin با shape ها17:59
Bg 2 – حرکت ماشین در خیابان11:33
Bg 3 – کلبه ی برفی (آموزش بارش برف با انیمیشن ها)10:58
Bg 4 – پروژه پایان فصل – استفاده ترکیبی از transform ها و opacity14:11
فصل ششم – ساخت search box و loading bar?
در این فصل search box ها و loading bar های مختلف را کد زنی خواهیم کرد
Loading 1 – افزودن animation delay منفی!17:27
Loading 2 – ترکیب transform ها در انیمیشن ها12:27
Loading 3 – زمان بندی مناسب در delay ها9:20
Loading 4 – قراردادن translate ها در جهات مختلف11:53
Loading 5 -پروژه پایان فصل – آموزش rotate سه بعدی و حول محور18:16
فصل هفتم – کار کردن با عکس ها?
در این فصل چندین پروژه متفاوت خواهیم زد و با یکسری تکنیک مربوط به عکس ها در css آشنا خواهید شد
پراپرتی overflow چیست و چه کاربردی دارد؟؟8:12
Pic 1 – تصویر سه بعدی با پراپرتی prespective9:46
Pic 2 – آموزش قراردادن عکس در دل یک نوشته8:31
Pic 3 – سایه 3D9:49
Pic 4 – اینترکشن عکس موقع hover با ترکیب overflow و transform7:20
Pic 5 – پایان فصل – اینترکشن جذاب روی عکس8:49
آزمون نهایی
آزمون نهایی دوره
Header 2 – ترکیب liner gradient و transparent برای عکس ها
