آموزش CSS 3 خوش آموز

آموزش CSS 3 : ایجاد یک متن راهنمای (Tooltip) ساده با شبه کلاس ها

در این آموزش با استفاده از شبه کلاس ها (Pseudo-classes) اقدام به ایجاد یک tooltip (متن راهنمای) ساده برای یک div می کنیم. در واقع متن راهنمای ما در داخل یک تگ p قرار دارد که این تگ در داخل div قرار دارد و ما در حالت عادی آن را مخفی می کنیم. سپس با استفاده از شبکه کد hover هنگامی که کاربر ماوس را روی این تگ div بیاورد، تگ p را نمایان می کنیم. ...

آموزش CSS 3 : آشنایی با شبه کلاس ها (Pseudo-classes)

در این آموزش با شبه کلاس ها (Pseudo-classes) آشنا می شویم. طی این آموزش با استفاده از شبه کلاس hover برای هنگامی که کاربر نشانگر ماوس را بر روی یک تگ خاص می برد، سبک نمایشی (Style) خاصی را تنظیم می نماییم. ...

آموزش CSS 3 : ترکیب کننده ها، انتخاب کننده هم نیای عمومی (General sibling selector)

در این آموزش در ادامه موضوع ترکیب کننده ها (CSS Combinators) با ترکیب کننده دیگری آشنا می شویم. نام این ترکیب کننده "انتخاب کننده هم نیای عمومی" (General sibling selector) می باشد. این انتخاب کننده به شکلی عمل می کند که کلیه تگ بعد از تگ جاری را که از نوع خاصی باشد و در ضمن والدش (تگ پدرش) با آن مشترک باشد را مورد سبک دهی (Style) قرار می دهد. ...

آموزش CSS 3 : ترکیب کننده ها، انتخاب کننده هم نیای مجاور (adjacent sibling selector)

در این آموزش در ادامه موضوع ترکیب کننده ها (CSS Combinators) با ترکیب کننده دیگری آشنا می شویم. نام این ترکیب کننده "انتخاب کننده هم نیای مجاور" (adjacent sibling selector) می باشد. این انتخاب کننده به شکلی عمل می کند که اولین تگ های بعد از تگ جاری را که از نوع خاصی باشد و در ضمن والدش (تگ پدرش) با آن مشترک باشد را مورد سبک دهی (Style) قرار می دهد. ...

آموزش CSS 3 : ترکیب کننده ها، انتخاب کننده فرزندان (Child Selector)

در این آموزش در ادامه موضوع ترکیب کننده ها (CSS Combinators) با ترکیب کننده دیگری آشنا می شویم. نام این ترکیب کننده "انتخاب کننده فرزندان" (Child Selector) می باشد. این انتخاب کننده به شکلی عمل می کند که به کلیه تگ های موجود در داخل یک تگ دیگر که از یک جنس خاص باشند و مستقیماً و بدون واسطه در داخل این تگ قرار گرفته باشند، می تواند استایل های مد نظر شما را اعمال کند. ...

آموزش CSS 3 : ترکیب کننده ها، انتخاب کننده نسل (descendant selector)

در این آموزش با موضوع ترکیب کننده ها (CSS Combinators) آشنا می شویم و یکی از انواع ترکیب کننده ها با نام "انتخاب کننده نسل" (descendant selector) را مورد بررسی قرار می دهیم. این انتخاب کننده به شکلی عمل می کند که به کلیه تگ های موجود در داخل یک تگ دیگر که از یک جنس خاص باشند می تواند استایل های مد نظر شما را اعمال کند. ...

آموزش CSS 3 : هم تراز کردن عمودی با ترفند line-height

در این آموزش با استفاده از یک ترفند که در آن از line-height استفاده شده است، متنی را در داخل یک div به صورت عمودی تراز می کنیم. در این تکنیک مقدار line-height را با height در div برابر می گیریم که در نتیجه آن متن ما در به صورت عمودی در مرکز div قرار می گیرد. ...

آموزش CSS 3 : هم تراز کردن عمودی (Vertical Align)

در این آموزش با ذکر مثالی به چگونگی هم تراز کردن عمودی (Vertical Align) متن در داخل یک div می پردازیم. ضمن اینکه طی این آموزش با شیوه خلاصه نویسی (Shorthand Property) در مورد Padding و Border به ذکر نکاتی می پردازیم که معمولاً css کارهای حرفه ای از آن شیوه استفاده می کنند. ...

آموزش CSS 3 : هم تراز کردن افقی (Horizontal Align)

در این آموزش به چگونگی هم تراز کردن افقی (Horizontal Align) و تکنیک های مربوط به آن می پردازیم. طی این آموزش با استفاده از ویژگی margin: auto اقدام به هم ترازی افقی یک div می کنیم. همچنین با استفاده از ترکیب ویژگیهای display: block و margin-left: auto و margin-right: auto یک تصویر را در وسط صفحه به صورت افقی تراز می نماییم. در ادامه با استفاده از ترکیب ویژگی های position: absolute و right: 0px یک ...

آموزش CSS 3 : ایجاد آلبوم تصاویر یا لیست محصولات با inline-block

در این آموزش با استفاده از ویژگی display و تنظیم مقدار آن بر روی inline-block و تنظیم چند ویژگی دیگر اقدام به طراحی یکی از استایل های پر کاربرد در سایتها می کنیم. معمولاً در سایت های فروشگاهی محصولات را در باکس های کنار هم به کاربر نشان می دهند. طی این آموزش این مدل از طراحی را با تکنیک inline-block پیاده سازی خواهیم کرد. ذکر این نکته بد نیست که در آموزش قبلی همین مکانیزم را با ویژگی float پیاده س...

دسته بندی مطالب خوش آموز
logo-samandehi