• اطلاعیه ها

    • Saeed Fard

      برگزاری چهارمین همایش Coder Conf و کد تخفیف برای کاربران وردپرس پارسی   20/04/97

      کدرکانف هر سال در آخرین پنجشنبه مرداد با بورد‌های مختلفی برگزار می‌گردد،امسال نیز کدرکانف در همین تاریخ با حضور برنامه نویسان مطرح کشور در بورد تخصصی جاوااسکریپت برگزار خواهد شد، یک گردهمایی متفاوت با طعم Javascript. Coderconf هر سال نسبت به سال‌های گذشته با حضور برنامه‌نویسان پر رنگتر می‌شود. ما سعی کردیم هر ساله به این کنفرانس مفهوم عمیق تری ببخشیم تا از آنچه در سال‌های گذشته عرضه شده به روزتر و مفیدتر واقع شویم. امسال فرصتی خواهد بود تا با نگرشی جدید و بهبود مطالب ارائه شده، عمیقتر به این موضوع نگاه کنیم تا بجای تکرار مباحث پیشین گامی هر چند کوچک در مسیر ارتقای دانش فنی برنامه‌نویسان ایرانی برداریم. ما در Coderconf ۴ با تمرکز بر روی Javascript نیت کرده‌ایم این فرصت را در اختیار برنامه نویسان قرار دهیم تا با ظرافت و استانداردهای روز دنیا کار خود را پیش ببرند. به نظر ما امسال زمان آن فرا رسیده‌است تا این زبان را به صورت تخصصی و از ابعاد مختلف به چالش بکشیم.   دبیر علمی همایش میلاد حیدری، کدرکانف ۴ را اینگونه توصیف کرده است :اشتراک گذاری دانش بهترین راه رسیدن به جاودانگی اطلاعات است. هر ساله همایش‌های زیادی برگزار میشه که افراد شرکت‌کننده می‌توانند با افراد مجرب شبکه سازی کنند. امسال در کدرکانف سعی کردیم علاوه بر بخش شبکه سازی بین افراد بیشتر روی انتقال دانش و کیفیت ارائه ها تمرکز داشته باشیم . به قصد یک گردهمایی بلند مدت بین برنامه‌نویسان جاوااسکریپت که با هم تبادل دانش و اطلاعات کنند گردهم آییم.
      بنده به عنوان عضو کوچکی از جامعه برنامه‌نویسان جاوااسکریپت ایران امیدوارم در کدرکانف امسال علاوه بر شبکه سازی، از اطلاعاتی که دوستان در این همایش در اختیارتان قرار می‌دهند استفاده کنید. در سایت همایش میتوانید سخنرانان و موضوع پنل همایش کدرکانف رو مشاهده کنید . علاقه‌مندان به حضور در این همایش می‌توانند با کد تخفیف wpparsi اقدام به ثبت نام در این گردهمایی کنند. سایت همایش :‌http://coderconf.org
      بلیط فروشی همایش :‌https://evand.com/events/coderconf4  
alikhani98

استفاده از CSS Sprites برای تصاویر

31 پست در این موضوع قرار دارد

باسلام

من به تازگی با CSS Sprites آشنا شدم،خیلی چیز خوبیه اما من کار باهاش و نحوه استفاده اش را به خوب بلد نیستم!

مثلا من اگر بخوام قسمت دوستان ما در ابزارک سایتم رابا استفاده از CSS Sprites درست کنم نمیشه که!

آخه تصاویر متحرک هم وجود داره،چطوری اونها را توی یه تصویر جا بدم؟یا اینکه میشه یه عکس جیف درست کنم که تمام آیکونهای ثابت و متحرک داخلش باشه ولی حجمش زیاد میشه که!

خوب الان من قسمت ابزارک های سایتم را بهتر کردم و تصاویر ثابت را در یک ردیف قرار دادم!

Snap4.jpg

خوب حالا چطوری برای هرکدوم توی تصویر یه لینک بدم؟و توی ابزارکم قرار بدم؟

0

به اشتراک گذاری این پست


لینک به پست

اين سايت رو امتحان كنيد

http://csssprites.com

8

به اشتراک گذاری این پست


لینک به پست

اين سايت رو امتحان كنيد

http://csssprites.com

ممنون

چیز عالی ای به نظر میرسه الان تست میکنم

فقط درمورد این تنظیماتش یه توضیح بدید

± options »

Padding between elements: px

Border around the whole image: px

Align elements: left top

Background color: transparent RGB (, , )

0

به اشتراک گذاری این پست


لینک به پست

خوب عکسش را درست کرد

حالا چطوری به تصویرها لینک بدم؟

اینم صفحهhttp://csssprites.com/results/617864d5da597c6b59aa9c2f68163db3/result.html

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

CSS Sprite یه قابلیت خوبه که توی سایت های پربازدید باعث کاهش http request میشه، یعنی مثلا اگر سایت شما روزی 20 هزار تا بازدید و 30 عکس هست مثلا 600 هزار تا request به سرور میره، حالا شما تمام تصاویر رو در یک فایل قرار می دید و درخواست ها از 600 هزار تا میشه مثلا 20 هزار تا.

اما استفاده از sprite یه سری محدودیت داره:

اول این که شما باید تصویر رو به صورت background-image و با CSS تنظیم کنید، یعنی مثلا قسمتی که شما معرفی کردید به صورت image و SRC هست که نمیشه از Sprite استفاده کرد.

دوم این که مثلا شما در پس زمینه سایتتون یک تصویر قابل تکرار قرار دادید، توی سی اس اس Sprite نمیشه این کار کرد

هم چنین ابزار های آنلاین این قابلیت دو نوع هستند:

اول این که شما مثلا 30 تا تصویر دارید که میشه Sprite شد، حالا توی این نوع ابزار آنلاین شما تمام تصاویر رو آپلود می کنید، سپس خود سرویس تصاویر رو به هم می چسبونه و کد تک تک اون ها رو میده:

http://csssprites.com/

نوع دوم ابزار های آنلاین هم به این صورت هستند که شما خودتون تصاویر رو در مثلا فتوشاپ کنار هم می چینید و این تصویر Sprite رو در این سرویس آپلود می کنید حالا با قابلیت Drag توی سرویس می تونید یه قسمتی از تصویر رو انتخاب کنید و خود سرویس کد background اون قسمت رو میده، که از نظر من بهترینش این هست:

http://www.spritecow.com/

امیدوارم کمک کرده باشه.

ویرایش شده در توسط vahidd
13

به اشتراک گذاری این پست


لینک به پست

خوب عکسش را درست کرد

حالا چطوری به تصویرها لینک بدم؟

اینم صفحهhttp://csssprites.com/results/617864d5da597c6b59aa9c2f68163db3/result.html

ببينيد الان شما بايد از css استفاده كنيد يك سلكتور با نام دلخواه فرضا icon بسازيد


.icon {...}

حالا عكس ادغام شده رو در جايي مشخص آپلود كنيد بعد سلكتور رو كامل كنيد مثلا


.icon {background: url('result.png');background-position: -0px -100px;}

الان كافيه كه از اين كلاس در html استفاده كنيد مثلا :


<div class"icon" ></div>

براي لينك دار كردن هم كافيه از تگ a ويژگي href استفاده كنيد

7

به اشتراک گذاری این پست


لینک به پست

مثلا من برای این عکس طبق گفته های شما درست کردم:


.icon {background: url('http://csssprites.com/results/27e05de01790a73338713259d17240d9/result.png') ;background-position: 0px 0px; }
.icoa {background: url('http://csssprites.com/results/27e05de01790a73338713259d17240d9/result.png') ;background-position: 0px -50px; }
.icod {background: url('http://csssprites.com/results/27e05de01790a73338713259d17240d9/result.png') ;background-position: 0px -100px; }

خوب من الان توی بالا برای این سه تا عکس سه تا کلاس نوشتم،آیا میشه با یه کلاس،سرو تهش را هم آورد؟

خوب اینم کد اچ تی امش:


<div class"icon" > <a title="مجید بلاگ" href="http://magidblog.com" target="_blank" rel"nofollow"><img src="http://csssprites.com/results/27e05de01790a73338713259d17240d9/result.png"></a>

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

باتشکر از توضیحی که دادید.

0

به اشتراک گذاری این پست


لینک به پست

مثلا من برای این عکس طبق گفته های شما درست کردم:


.icon {background: url('http://csssprites.com/results/27e05de01790a73338713259d17240d9/result.png') ;background-position: 0px 0px; }
.icoa {background: url('http://csssprites.com/results/27e05de01790a73338713259d17240d9/result.png') ;background-position: 0px -50px; }
.icod {background: url('http://csssprites.com/results/27e05de01790a73338713259d17240d9/result.png') ;background-position: 0px -100px; }

خوب من الان توی بالا برای این سه تا عکس سه تا کلاس نوشتم،آیا میشه با یه کلاس،سرو تهش را هم آورد؟

خوب اینم کد اچ تی امش:


<div class"icon" > <a title="مجید بلاگ" href="http://magidblog.com" target="_blank" rel"nofollow"><img src="http://csssprites.com/results/27e05de01790a73338713259d17240d9/result.png"></a>

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

باتشکر از توضیحی که دادید.

نه نميشه فقط با يه كلاس چند تا عكس رو استفاده كرد البته مي تونيد يكم خلاصه ترش كنيد مثلا :


.icon,.icoa,.icoa {background: url('http://csssprites.com/results/27e05de01790a73338713259d17240d9/result.png') ;}
.icon {background-position: 0px 0px; }
.icoa {background-position: 0px -50px; }
.icoa {background-position: 0px -100px; }

و بهتره عكس رو در هاست خودتون آپلود كنيد .

كد html هم اشتباه داره مثال:


<a href="https://facebook.com" class="facebook"></a>

البته بقيه ويژگي ها رو هم كه ميخايد مي تونيد به تگ اضافه كنيد

4

به اشتراک گذاری این پست


لینک به پست

خوب آخرین کدی که قرار دادید را باید بین تک

<div class"icon" >اینجا؟</div>

قرار بدم؟

0

به اشتراک گذاری این پست


لینک به پست

نه

اين خودش كلاس داره فقط كلاس و آدرس رو عوض كنيد و بزاريد توي قالب

3

به اشتراک گذاری این پست


لینک به پست

دوستان میشه کمک کنید

من با اون سایتی که دوستمون معرفی کرد نتونستم موقعیت تصویر را پیدا کنم

این لینک تصویر هستش:(http://4blogers.com/wp-content/uploads/2013/01/404.jpg)

خوب من میخوام موقیت اون کاد که توش نوسته مرجع وبلاگ نویسان را پیدا کنم،ولی نتونستم

میشه موقعیتش را برام پیدا کنید؟

باتشکر

0

به اشتراک گذاری این پست


لینک به پست

با فتوشاپ فاضل هز چپ و فاصله از بالای اون بخش موردنظر رو براساس پیکسل پیدا کنید.

این میشه همون اندازه هایی که میخواید

4

به اشتراک گذاری این پست


لینک به پست

با فتوشاپ فاضل هز چپ و فاصله از بالای اون بخش موردنظر رو براساس پیکسل پیدا کنید.

این میشه همون اندازه هایی که میخواید

راستش امتحان کردم ولی جواب نداد

خوب نگاه کنید من میخوام موقعین یه مستطیل در تقریبا پایین صفحه بهش بدم ولی نمیدونم چطور!

0

به اشتراک گذاری این پست


لینک به پست

قرار نيست كه هميشه از css sprites استفاده كنيم !

مثلا الان شما ميخايد يه عكس 210 كيلوبايتي رو لود كنيد بعد فقط يك قسمت 5 كيلوبايتي رو ازش جدا كنيد اينجوري خيلي بيشتر فشار مياد به سرور ...

اون قسمت رو با فتوشاپ جدا كنيد بعد بزاريد توي سايت

+

با اون سايتي كه من معرفي كردم راحت ميشه از تكنيك css sprites استفاده كرد خودش كامل توضيح داده ...

3

به اشتراک گذاری این پست


لینک به پست

درورد

دوستان من عاشق این تکنیک شدم ^_^ و کارباهاش را هم بلد شدم ولی چندتا مشکل دارم.

من دارم روی لوکال درستش میکنم،مثلا الان به تصویر زیر نگاه کنید:post-848-0-78291900-1366470015_thumb.jpg

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


{
width:12px;
height:12px;
background:url(img_navsprites.gif) 20px 0;
}

خوب چیکار کنم که عکسه در کنار متن باشه و متن از جاش جٌم نخوره :)

0

به اشتراک گذاری این پست


لینک به پست

بهش padding بدید:


padding-right: 5px;

3

به اشتراک گذاری این پست


لینک به پست

بهش padding بدید:


padding-right: 5px;

قبلا داشتش بازهم مشکل داره.صبر کنید فایل css را بزارم

0

به اشتراک گذاری این پست


لینک به پست


<html>
<head>
<style>
.home
{
background:url("http://4blogers.com/wp-content/uploads/2013/05/sprites.png") 0 0;
background-position: -468px 0;
width: 128px;
height: 128px;
}
</style>
</head>
<body>
<img class="home" src="http://4blogers.com/wp-content/uploads/2013/05/sprites.png" width="128" height="128" />
</body>
</html>

الان چرا تصویر را بد نشون میده؟

این کد را اینجا تست کنید.

چه چیزی را بد نوشتم؟

0

به اشتراک گذاری این پست


لینک به پست

عکسی نمیاد!

0

به اشتراک گذاری این پست


لینک به پست

عکس را که نشون میده!

ولی یه عکس دیگه روش هستش!

0

به اشتراک گذاری این پست


لینک به پست

کدها را خودتان مقایسه کنید


<html>
<head>
<meta content="en-us" http-equiv="Content-Language">
<style>
.home
{
background:url("http://4blogers.com/wp-content/uploads/2013/05/sprites.png") -468px 0;
width: 128px;
height: 128px;
display:block
}
</style>
</head>
<body>
<div class="home"> </div>
</body>
</html>

4

به اشتراک گذاری این پست


لینک به پست

ممنونم

حالا یه سوال

چطوری براش لینک تعریف کنم؟

مثلا اینجوری میشه:


<a class="home" target="_blank" href="http://4blogers.com" title="منبع"></a>

درسته همینجوریه

ممنون استاد

0

به اشتراک گذاری این پست


لینک به پست


<ul id="navlist">
<li class="home1"><a href="http://4blogers.com/forum/index.php" title="مرجع وبلاگ نويسان" target="_blank"></a></li>
<li class="google_plus"></li>
<li class="facebook"></li>
<li class="twitter"></li>
<li class="rss"></li>
<li class="Login"></li>
</ul>

این هم css


#navlist{position:relative}#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;opacity:0.1;-moz-transition:0.5s;-webkit-transition:0.5s}#navlist li:hover{opacity:1;-moz-transition:0.7s;-webkit-transition:0.7s}#navlist li,#navlist a{display:block}.facebook,.google_plus,.home1,.Login,.rss,.twitter{left:150px;width:43px;background:url(files/img/sprites.png) no-repeat}.facebook{left:100px;width:24px;background-position:-157px 0;height:24px}.google_plus{left:50px;width:24px;background-position:-125px 0;height:24px}.home1{left:12px;width:24px;background-position:-93px 0;height:24px}.Login{left:240px;width:24px;background-position:-63px 0;height:24px}.rss{left:200px;width:24px;background-position:-30px 0;height:24px}.twitter{background-position:0 0;width:24px;height:24px}

خوب من توی کد اولی لینک تعریف کردم ولی کار نمیکنه چرا؟

ویرایش شده در توسط alikhani98
0

به اشتراک گذاری این پست


لینک به پست

وقتی داخل لینک خالیه باید در css براش خاصیت


display:inline-block;

یا block تعریف بشه کدی که قبلا عرض کردم تمام خواصش مورد نیازتون بوده

4

به اشتراک گذاری این پست


لینک به پست

باسلامی دوباره

دوستان من با css cpirite تصاویر وبسایتم را درست کردم

اما یه مشکلی هستش

مثلا توی صفحه اصلی آیکونها ی کوچک ساعت و نظرات و.. جاشون خوبه ولی وقتی وارد مطلب یا دسته ای میشم جاشون چند پیکسل جابه جا میشه!

چطوری درستش کنمpost-848-0-02771000-1368177800_thumb.jpg

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری