نویسنده: پويا صادقى , 619 روز پیش , آموزش CSS
outline پشتیبانی توسط :گوگل کروم / اپل سافاری / موزیلا فایرفاکس / اپرا outline درواقع یه بوردر خارجی برای عناصر صفحه است. فرقش با border اینه که بیرون بوردر قرار میگیره و تغییری در مکان و موقعیت عناصر دیگه نداره. Outline بیست پیکسل قرمز : outline: 20px solid #FF0000; بیست پیکسل Outline قرمز + ده پیکسل border زرد : outline: 20px solid #FF0000; border:#FFFF00 solid 10px; یه کد دیگه هم داره که بشه فاصله outline رو با ...
ادامه…نویسنده: پويا صادقى , 620 روز پیش , HTML, آموزش CSS
معرفی امکانات جدید اچ تی ام ال 5 + کد های جدید ، مثال ها و نمونه ها این سایت را با آخرین نسخه مرورگر های کروم یا سافاری مشاهده کنید برای ورود به سایت روی عکس کلیک کنید
ادامه…نویسنده: پويا صادقى , 620 روز پیش , آموزش CSS
معرفی امکانات جابجایی المنت ها ، تبدیل المنت ها و ایجاد انیمیشن در سی اس اس 3 این سایت را با آخرین نسخه مرورگر های کروم یا سافاری مشاهده کنید برای ورود به سایت روی عکس کلیک کنید
ادامه…نویسنده: پويا صادقى , 621 روز پیش , آموزش CSS
5 تا از نمونه های CSS3 رو براتون میذارم که با همین Scale و Rotate و Skew و text-shadow و... ساخته شده. لطفا با کروم یا سافاری ببینید (اگه ندارید، دانلود کنید: Google Chrome / Apple Safari ) افکت سایه برای متن:
ادامه…نویسنده: پويا صادقى , 621 روز پیش , آموزش CSS
کد های اختصاصی و غیر اختصاصی تغییر حالت المنت ها در CSS3 چرخش با این ویژگی میتونید هر المنتی رو تا 360 درجه (و حتی بیشتر!) بچرخونید! در مرورگرهای مبتنی بر وبکیت و گکو (گوگل کروم/ فایرفاکس/ سافاری ) پشتیبانی میشه. -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); transform: rotate(15deg); scale به راحتی اندازه طول و عرض اجزای صفحه رو تغییر بدید:
ادامه…نویسنده: پويا صادقى , 621 روز پیش , آموزش CSS
فرض کنید برای یک المنت بکگراند گذاشتید ولی سایز بکگران مناسب نبود( کوچیک یا بزرگ ) با این ویژگی میتونید سایز عکس بکگراند رو تغییر بدید: background-size: 200px 50px; -o-background-size: 200px 50px; -webkit-background-size: 200px 50px; -khtml-background-size: 200px 50px; * کدی که اولش -o- داره مربوط به مرورگر Opera هه و اون که اولش -khtml- داره مربوط به مرورگر Konqueror در لینوکسه. کد -webkit- برای موتور Webkit ( مرورگر های گوگل کروم و اپل سافاری ) و -moz- هم ...
ادامه…نویسنده: پويا صادقى , 621 روز پیش , آموزش CSS
متن شکسته Word-wrap خاصیتیه که توی نرم افزار های پردازش متن ، درصورتیکه طول متن زیادبشه بقیه متن رو به خط بعدی انتقال میده. این در حالت عادی: word-wrap:normal; این هم برای شکستن متن اضافه به خط بعد: word-wrap: break-word; --------------- چند بکگراند شما می تونید از چند بکگراند برای یک المنت استفاده کنید! مثلا یکی برای پایین ، یکی برای بالا، یکی چپ و... background: url(body-top.gif) top left no-repeat, url(banner_fresco.jpg) top 11px no-repeat, url(body-bottom.gif) bottom left no-repeat, url(body-middle.gif) left ...
ادامه…نویسنده: پويا صادقى , 623 روز پیش , آموزش CSS
متن سایه دار متن سایه دار در بیشتر مرورگرها پشتیبانی میشه حتی Opera Mini ! text-shadow: 2px 1px 3px #000; در کد بالا 2 پیکسل عمودی ، 1 پیکسل افقی و 3 پیکسل بلور با رنگ مشکی تنظیم شده. جلوه های ویژه : با این ویژگی حتی میشه چند تا سایه به متن داد! (به کوری چشم فتوشاپ ! ) text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20; که ...
ادامه…