به کار گیری از CSS sprite برای تغییر تحول عکس هنگام هاور کردن
لیست ها مانند بیشتر تگ ها در html قابلیت و امکان به کار گیری از خصوصیت :Hover را دارا هستند. ما عکسی دربردارنده ایکون های اساسی و ایکن ها در موقعیت هاور را در یک عکس، فراهم کرده ایم.
طریق به کارگیری از CSS sprite در Sass
Sass نرم‌افزار متن گشوده و رایگانی میباشد که به یوزرها قابلیت و امکان می‌دهد، تا بتوانند با کد های نرم افزار نویسی فایلهای CSS را ساخت نمایند. برنامه Sass بدلیل ارتقاء سرعت کد نویسی بین طراحان عالم از عنایت بالایی منتفع گشته میباشد. برای آنکه بتوانید CSS sprite را در اپ Sass بکار ببرید از اوامر تحت طراحی سایت اختصاصی به کار گیری نمایید:
@import \'sprite\'; // the generated style file (sprite.scss)
// camera icon (camera.png in src directory)
.icon-camera {
@include sprite($camera);
}
// cart icon (cart.png in src directory)
.icon-cart {
@include sprite($cart);
}
یک نمونه دیگر :
@import \'sprite\' // the generated style file (sprite.sass)
// camera icon (camera.png in src directory)
.icon-camera
+sprite($camera)
// cart icon (cart.png in src directory)
.icon-cart
+sprite($cart)
اجرای CSS sprite در پلتفرم Less
Less پلتفرمی میباشد که مانند Sass به یوزرها قابلیت می‌دهد که برای ساخت و ساز پوشه Css از کد نویسی استعمال نمایند. غرض ساخت و ساز این پلتفرم نادر کردن ترازو کد نویسی در CSS بوده میباشد. میتوان در پلتفرم Less از خصوصیت Css Sprite به کار گرفت. برای این خواسته کد پایین را بکار ببرید:
@import \'sprite\'; // the generated style file (sprite.less)
// camera icon (camera.png in src directory)
.icon-camera {
.sprite(@camera);
}
// cart icon (cart.png in src directory)
.icon-cart {
.sprite(@cart);
}
در شرایطی‌که به یادگیری پلتفرم Less عشق و علاقه مند گردیده اید وبسایت http://lesscss.org/3.x/ فراگیری های خیر و خوبی برای ورژن تازه این پلتفرم ارائه داده میباشد.
استعمال از CSS sprite در گویش stylus
در گویش stylus شما قابلیت و امکان استعمال از مجموع خصوصیت های CSS را در کنار قابلیت و امکان های کد نویسی و تمجید متغییر را دارا‌هستند که‌این مورد منجر شد‌ه‌است که گویش stylus به رقیبی رمز دشوار برای پلتفرم های Sass و less باشد. در صورتی‌که بخواهیم در گویش stylus از CSS sprite به کار گیری کنیم، می‌توانیم از امرها ذیل به کار گیری کنیم:
@import \'sprite\' // the generated style file (sprite.styl)
// camera icon (camera.png in src directory)
.icon-camera
sprite($camera)
// cart icon (cart.png in src directory)
.icon-cart
sprite($cart)
به کار گیری از CSS sprite برای تغییر تحول عکس هنگام هاور کردن
لیست ها مانند بیشتر تگ ها در html قابلیت و امکان به کار گیری از خصوصیت :Hover را دارا هستند. ما عکسی دربردارنده ایکون های اساسی و ایکن ها در موقعیت هاور را در یک عکس، فراهم کرده ایم.
طریق به کارگیری از CSS sprite در Sass
Sass نرم‌افزار متن گشوده و رایگانی میباشد که به یوزرها قابلیت و امکان می‌دهد، تا بتوانند با کد های نرم افزار نویسی فایلهای CSS را ساخت نمایند. برنامه Sass بدلیل ارتقاء سرعت کد نویسی بین طراحان عالم از عنایت بالایی منتفع گشته میباشد. برای آنکه بتوانید CSS sprite را در اپ Sass بکار ببرید از اوامر تحت طراحی سایت اختصاصی به کار گیری نمایید:
@import \'sprite\'; // the generated style file (sprite.scss)
// camera icon (camera.png in src directory)
.icon-camera {
@include sprite($camera);
}
// cart icon (cart.png in src directory)
.icon-cart {
@include sprite($cart);
}
یک نمونه دیگر :
@import \'sprite\' // the generated style file (sprite.sass)
// camera icon (camera.png in src directory)
.icon-camera
+sprite($camera)
// cart icon (cart.png in src directory)
.icon-cart
+sprite($cart)
اجرای CSS sprite در پلتفرم Less
Less پلتفرمی میباشد که مانند Sass به یوزرها قابلیت می‌دهد که برای ساخت و ساز پوشه Css از کد نویسی استعمال نمایند. غرض ساخت و ساز این پلتفرم نادر کردن ترازو کد نویسی در CSS بوده میباشد. میتوان در پلتفرم Less از خصوصیت Css Sprite به کار گرفت. برای این خواسته کد پایین را بکار ببرید:
@import \'sprite\'; // the generated style file (sprite.less)
// camera icon (camera.png in src directory)
.icon-camera {
.sprite(@camera);
}
// cart icon (cart.png in src directory)
.icon-cart {
.sprite(@cart);
}
در شرایطی‌که به یادگیری پلتفرم Less عشق و علاقه مند گردیده اید وبسایت http://lesscss.org/3.x/ فراگیری های خیر و خوبی برای ورژن تازه این پلتفرم ارائه داده میباشد.
استعمال از CSS sprite در گویش stylus
در گویش stylus شما قابلیت و امکان استعمال از مجموع خصوصیت های CSS را در کنار قابلیت و امکان های کد نویسی و تمجید متغییر را دارا‌هستند که‌این مورد منجر شد‌ه‌است که گویش stylus به رقیبی رمز دشوار برای پلتفرم های Sass و less باشد. در صورتی‌که بخواهیم در گویش stylus از CSS sprite به کار گیری کنیم، می‌توانیم از امرها ذیل به کار گیری کنیم:
@import \'sprite\' // the generated style file (sprite.styl)
// camera icon (camera.png in src directory)
.icon-camera
sprite($camera)
// cart icon (cart.png in src directory)
.icon-cart
sprite($cart)
طراح سایت کیست؟