مبحث css پیشرفته!

این تاپیک 6 پاسخ و 3 مشارکت کننده دارد . آخرین آپدیت توسط :  kalhor ،‏ 1 سال و 2 ماه پیش .

این تاپیک تاکنون 377 بازدید داشته است .

نویسنده پست
شنبه ، 3 اکتبر 2015     11:37 ق.ظ #


Toghrol Rc

Subscriber
2 پست2 تاپیک

سلام. دوستان من دوره آموزش html و css رو دیدم و تموم کردم. ولی متاسفانه جناب آوند به مبحث ::before و ::after به خوبی نپرداختند و خیلی سطحی توضیحاتی رو دادند.

از دوستانی که در زمینه html و css حرفه ای هستند ، خواهش میکنم اگر براشون امکان داره یک منبع آموزش خوب این ::before و ::after رو معرفی کنند ، یا اینکه اگر مبحث ساده ای هست واقعا یک توضیح مختصر و مفید و پرمحتوا بدند ممنون میشم.

پیشاپیش از تمامی دوستان تشکر

0  تشکر
شنبه ، 3 اکتبر 2015     5:17 ب.ظ #


امین

Subscriber
19 پست0 تاپیک

سلام دوست عزیز

این مبحث سادست شما با سرچ css3 pseudo elements و css3 pseudo classes می تونید آموزش های خوبی پیدا کنید نمونش همون w3 که در بخش elements بیفور و افتر توضیح داده شده:

http://www.w3schools.com/css/css_pseudo_classes.asp

http://www.w3schools.com/css/css_pseudo_elements.asp

 

*** در کل ::before و ::after وقتی شما از این دو مورد استفاده میکنید یعنی میتونید محتوایی عکسی هر چیزی که میخواین رو در قبل و بعد از تگ مورد نظر که این دو مورد رو قرار میدین استفاده کنید .
p:after{
content:"my name"
}
در کد بالا یعنی اینکه محتوای my name رو بعد از تگ های p قرار بده که حالا شما میتونید از ویژگی های css و ... هم استفاده کنید .
 

2  تشکر
شنبه ، 3 اکتبر 2015     5:19 ب.ظ #


امین

Subscriber
19 پست0 تاپیک

ضمنا واسه اون سوال قبلیتون که آیکن های آپارات رو میخواستین در لینک زیر واستون کداشو قرار دادم میتونید استفاده کنید :

http://jsfiddle.net/0vohucv8/

درآپارات برای آیکناش از فونت ایکن استفاده کرده که در اینجا من از رنگ بک گراند استفاده کردم خودتون میتونید آیکون بصورت عکس یا فونت ایکن بزارین.

1  تشکر
شنبه ، 3 اکتبر 2015     5:43 ب.ظ #


Toghrol Rc

Subscriber
2 پست2 تاپیک

تشکر از شما.

فرمودید که برای قرار دادن محتوا بعد یا قبل از تگ هستش. اما من بسیاری جاها دیدم برای کارهای دیگه استفاده میشه مثل همین انیمیشن های css .

اگر امکانش هست یه مثال بزنید از استفاده این before  و after و همچنین که در چه جاهایی و چه زمان هایی میتونیم استفاده کنیم. ممنون

1  تشکر
شنبه ، 3 اکتبر 2015     11:34 ب.ظ #


امین

Subscriber
19 پست0 تاپیک

بله حرف شما صحیحه ، کارکرد اصلی :before و :after همینه و کارکرد دیگری نداره اینکه میگین در انیمیشن استفاده شده خب 100% در همین طور موارد بوده

به هر حال اینم کارکرد هاش + زمان استفاده بطور دقیق تر با ذکر منبع (برای دیدن مثال ها میتونید به لینک منبع مراجعه و هر آیتم مثال هم براش زده شده که لینکش گذاشته شده و میتونید نحوه ایجاد و ... هر آیتم رو ببینید) :

1- ایجاد چند بک گراند

2- افزایش تعداد شکل هایی که با یک المنت می تونید بسازید

3- نمایش آدرس URL بطور کامل هنگام پرینت گرفتن

4- جایگزینی برای استفاده بجای کلیرفیکس clearfix

5- شبیه سازی float: center;

6- لیبل گذاری بلاک های کد به زبونی که نوشته شده مثلا : css html va...

7- ایجاد مجموعه آیکن

8- استفاده از فضای خالی بطور مفید

9- ایجاد جلوه های تایپوگرافی

10- ایجاد بک گراند های تمام عرض

11- ایجاد حاشیه border برای یک صفحه

12- ایجاد دکمه هایی با افکت درخشان ، براق

13- ایجاد افکت Fade out هنگام هاور بر روی لینک ها

14- ایجاد یک هدر سه بعدی

15- ایجاد استایل برای شماره ها در لیست ها li

16- ریسپانسیو کردن داده های جدول

17- ایجاد تولتیپ های سفارشی

18- ایجاد جدا کننده بین آیتم های ناوبری (براد کامپ breadcrumb)

19- ایجاد اتوماتیک تگ های <html>, <head> and <body>

20- ایجاد یک فونت با css

21- و کاربردهای دیگه که مثل همون انیمیشنی که میگین نه اینکه باهاش انیمیشن ایجاد بشه ! از این دو ویژگی برای همون استفاده در قبل و بعد تگ ها استفاده میکنن

منبع : https://css-tricks.com/pseudo-element-roundup/

باز هم مشکلی بود بپرسین

3  تشکر
یکشنبه ، 4 اکتبر 2015     2:11 ق.ظ #


Toghrol Rc

Subscriber
2 پست2 تاپیک

ممنون که وقت گذاشتید راهنمایی کردید. مطلب برای من یکمی گُنگ هست که فکر میکنم برای اینه که تاحالا کار نکردم با این موارد. ولی مطمئنم با توضیحاتی که شما فرمودید و یکمی تمرین بیشتر مبحث رو درک میکنم. بازم تشکر میکنم ، فعلا تاپیک رو نمیبندم تا اگر سوالی بود نیاز به تاپیک جدا نباشه.

2  تشکر
دوشنبه ، 5 اکتبر 2015     5:54 ق.ظ #


kalhor

Subscriber
115 پست62 تاپیک

دوست عزیز از before و after در خیلی از جاها میشه استفاده کرد

یه مثال ساده میزنم:

شما یه نوار میخواید بسازید که برای تزیین لبه ها رو شیار و خط رنگی بندازید عرض 500 و ارتفاع 50 خوب اگه بخواید لبه های چپ و راست چند تا خط بندازید که از عکس استفاده نکنید, چند راه دارید؟

با border و outline میتونید دو خط بندازید و با before و after هم میتونید یه حاشی درست کنید

استفاده از این المنت ها صرفا برای کوتاه کردن کد نویسی و بهبود در طراحیه

3  تشکر
پست 1 تا 7 (از مجموع 7 پست)

برای پاسخ دادن به این تاپیک باید وارد سایت شوید .