معرفی سایت و تکنیک های خاص و ناشناخته ی css :)

[titreaval]

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

بسیار از سایت فوق لذت بردم

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

از فردا در همین تاپیک المانهایی را برای شما می گویم که شاید تا بحال نمی دانستید ...

و بعد از هر 30 بخش آموزشی یک نمونه هم از کارهای دو نفر از دوستان انجمن و خودم (3 کار) گذاشته میشود
و امتیاز داده میشود ...

پس دوستان وارد عمل بشوند (من از الان پروژه ی خودم را ساختم :) و آخر این ماه پرژه ام را البته اگه بازدید خوبی داشته باشه می گذارم وگرنه برای استفاده شخصی قرار میدهم .) پروژه ی من که آماده شده :
بنده انیمیشنی نوشتم , تمام css که فردی در حال راه رفتن از پشت بام هست و شهر حرکت می کند ابرها هم با تفاوت سرعت چند ابر در حرکت هستند ...
راهنما
تصویر ابرها ساختمانها و بام repeat-x خورده و عرض 60000 است (چون در حالت عادی ما عرضمون بیشتر از عرض مرورگر نمیشه باید از مارجین منفی 55000- استفاده شود تا عرض بخوره و انمیشن هم به همین شکل عقب جلو میرود . فقط 0% 50% 100% به شکل -55000 -10 55000- است) سرعت پایین و به مدت 10 دقیقه از سمت راست به سمت چپ و برعکس و ادامه پیدا میکند . شاید تازه کاران فکر کنید عرض زیاد و اسکرول , خیر position: fixed شده و مانند فلش عمل میکنه و مشکلی هم با هیچ تگی نداره و دقیقا همانند بکگراند اما متحرک ...
وقتی روی خورشید موس را میاورید تصویر چرخش میکند و کوک میشود !! . و در زمان برداشتن همان زمان که روی تصویر بود بر می گردد ...
در همه مرورگر ها (4 تا) به جز ie کار میکند



شاید بگید css کاری نداره اما ایده خیلی سخت تر از برنامه نویسی هست
با همان بکگراند کارهایی میشه کرد که همه بلدند اما کسی به ذهنش نمیرسه ...
اینجا از ترکیب کردها صحبت خواهد شد نه از ابتدا و یاد دادن کد نویسی با css

[titreaval]

آموزش اول

چند رنگ کردن حاشیه :


#titreaval12 {
width:200px;
height:50px;
box-shadow: 0 0 20px #CCCCCC inset, 10px 7px 15px #F0F961, -10px 7px 15px #55FC6D, -10px -7px 15px #55D7FC, 10px -7px 15px #FC9C9C;
}

[titreaval]

آموزش ترفند دوم :

رده کردن پس زمینه


#titreaval14 {
width:200px;
height:50px;
background: -moz-linear-gradient( #F3C5BD 0%, #E86C57 50%, #EA2803 51%, #FF6600 75%, #C72200 100%);
}

[refugee]

اموزش اون تایپیکه رو اخرش نذاشتی ( سایت تیموری و دوستان :D )

خب تو که زحمت میکشی اماده میکنی مطالب برا اموزش میذاری , حداقل یه سر جمع بکن یه دمو هم ( zip )بذار افراد تازه کار یاد بگیرن .

تشکر خوب بود .

[refugee]

یه توضیح هم میدادی اخر کد هات , که چیکار کردی .

اولیه برا من کار کرد , فهمیدم که یه سایه با رنگ #CCC زدی و بقیش 4 تا رنگ متفاوت دورش .

اما دومی کار نکرد , فقط تو رنگ قرمز مونده , چطوری حرکت میکنه پس ؟ (رده کردن پس زمینه)

[titreaval]

نه عزیز
من از خودم گفتم رده کردن
چون اصطلاحی بود ذهنم آمد
برای موزیلا نوشتم
-moz-
شما با موزیلا ببینید
و البته در حالات خالص هم بزارید
این css3 واقعا المانهایی داره که به راحتی نمیشه همه چیز را همه جا نمایش داد مثل

cubic-bezier( , , , );

[titreaval]

آموزش بعد
انیمیشن بدون توقف

@-moz-keyframes myanim { 0% { background:#FFF; } 50% { background:#F00; } 100% { background:#FFF; } } #a7 { border: 1px #999 solid; width:50px; animation:myanim 3s; animation-iteration-count: infinite; }

مقدار count می تواند 1 2 3 ... باشد یعنی لوپ یا تکرار که برای لوپ همیشگی :
infinite

و animation طبق معمول یک شکل کلی که می توان در آن زمان انیمیشن و نام و ... را تعریف کنید
برای اطلاعات بیشتر در رابطه با این المان در سایت فوق یا اینترنت به احتمال زیاد موجود است ...

keyframes : حالتهای مختلفی داره اما من به شکل تایم لاین یا زمان بندی گفتم
شما میتوانید بین مسیر انیمیشن حرکاتی اضافه کم یا تغییر دهید
بک گراند یک مثال بود شما می توانید گوشه های کلاس مثلا دیو اتصال خورده به این المان را در فاصله های 25 درصدی تغییر دهید ...
یکی گوشه سمت راست
بعد چپ
پایین چپ
پایین راست

یا بک گراند چند رنگه
مثل آبشار که از بالا به پایین حرکت میکند
یا ساخت موشن برف , باران , آبشار و ....

بسته به ایده و استفاده و خلاقیت داره

اگر دوست داشتید تمام شکل های هر کدام را برای شما کامل خواهم گذاشت
اما به نظرم بهترین و پر کابرد ترین حالت این المان را گفتم


نکته : من تا الان پروژه ای نداشتم که در رابطه با css دچار مشکل بشوم
شاید یک روز وقتم را سر مسئله ای کوچیک پر کرده باشم اما بدون کمک اینترنت همون مورد نه مورد جایگزین را حل کردم ...
مگر گدی باشد که در حوضه ی css , html ,php خارج باشد
من از جاوا اسکریپت خیلی کمتر از سه مورد بالا می دانم ...





تا فردا

[titreaval]

تگ قبول ندارم
ردشده
یا تگ del
مربوط به css نیست
می دونم شماها بلدید
اما من خودم شخصا 3 سال پیش این موضوع را پیگیری کردم
تازه تو همین سایت یادم سال 89 یا 88 بود که پرسیدم همه گفتید نمیشه
این یک حالت خاص هست !!!

بعد از 2 ماه فهمیدم بلههه



<del>bad</del>
البته چون به موضوع ربطی نداشت چاشنی css هم اضافه می گردد ...
متن چشمک زن
برای ایست . اینجا کلید کنید . لطفا منتظر بمانید و ... خوبه

text-decoration: blink;


هر چند حالی نبود اما چون قبلا این یکی از سوالات من در همین انجمن بود . گفتم :)
امیدوارم برای تازه کاران مفید باشد

[tadayoni]

اموزش اون تایپیکه رو اخرش نذاشتی ( سایت تیموری و دوستان :D )

خب تو که زحمت میکشی اماده میکنی مطالب برا اموزش میذاری , حداقل یه سر جمع بکن یه دمو هم ( zip )بذار افراد تازه کار یاد بگیرن .

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

[refugee]

دوست عزیز ، دوستان تازه کار هم باید یه زحمتی بکشن خودشونم کمی دنبال یاد گرفتن باشند
همین که این تاپیک ایجاد شده و مطالب مفیدی ارائه میده همه ما باید خوشحال باشیم

به هر حال همون ابتدایی ها هم برا یادگیری نیاز به تمرین دارن ( بعضی از همین کد ها کار نمیکنه , اون بیچاره ابتدایی چطوری بفهمه چی به چیه ؟ ) در حالی که وقتی دمو داشته باشه از رو دمو متوجه میشه مشکلات چی بوده .

به هر حال خسته نباشید .