๑۩๑ تاپیک جامع ابزار طراحی رایگان ๑۩๑

در این انجمن پیرامون مباحث مختلف phpNuke بحث و تبادل نظر می شود.
نمایه کاربر
afg_graph
کاربر فعال
کاربر فعال
پست: 531
تاریخ عضویت: شنبه ۲۶ فروردین ۱۳۹۱, ۹:۲۰ ب.ظ
محل اقامت: کابل - افغانستان
تشکر کرده: 88 دفعه
تشکر شده: 212 دفعه
تماس:

Re: ๑۩๑ تاپیک جامع ابزار طراحی رایگان ๑۩๑

پست توسط afg_graph »

[CENTER]
ساخت نمودار پیشرفت با استفاده از سی اس اس .[/CENTER][CENTER]
پیـــش نمـــایـــش آنلایـــن ...[/CENTER]
پیوست ها
progressbar.zip
فایل فشرده ...
(2.2 کیلو بایت) 279 مرتبه دانلود شده
نمونه ...
نمونه ...
demo.jpg (24.79 کیلو بایت) مشاهده 2327 مرتبه


[CENTER] فیس بوک
HTTP://FACEBOOK.COM/BA.WAHEDI


خـــــــط نگـــــــــــــار

HTTP://KHATNEGAR.BLOG.IR
[/CENTER][CENTER]

آموزش ساخت منوی سایت
post385049.html#p385049

تـــلـــگـــرام من
[url=tg://resolve?domain=B_Wahedi]tg://resolve?domain=B_Wahedi[/url]




[/CENTER]
نمایه کاربر
afg_graph
کاربر فعال
کاربر فعال
پست: 531
تاریخ عضویت: شنبه ۲۶ فروردین ۱۳۹۱, ۹:۲۰ ب.ظ
محل اقامت: کابل - افغانستان
تشکر کرده: 88 دفعه
تشکر شده: 212 دفعه
تماس:

Re: ๑۩๑ تاپیک جامع ابزار طراحی رایگان ๑۩๑

پست توسط afg_graph »

یه جعبه دانلود زیبا با استفاده از سی اس اس و آموزش گذاشتن توی سایت نیوکی.


[CENTER]این پیش نمایش آنلاین ...
[/CENTER]
اینم آموزش ...

اول فایلهای ضمیمه شده رو توی پوشه ی قالبتون بزارید.

با استفاده از کد زیر فایل سی اس اس رو توی theme.php قالبتون فراخوانی کنید.

کد: انتخاب همه

<link type="text/css" rel="stylesheet" href="css/style.css" />


حالا موقعی که می خواید برای سایتتون مطلب ارسال کنید روی دکمه ی منبع کلیک می کنید و کد زیر رو اونجا paste می کنید.

کد: انتخاب همه

<div class="dl-p2g">
    <div class="dl-p2g-bg">
	   <p>
		  دانلود + توضيحات</p>
	   <ul>
		  <li class="dl">
			 <span style="font-size:12px;"><a href="http://afg-graph.com/web/freetools/dlbox/dlbox.zip">دانلود از سرور سايت</a></span></li>
		  <li class="dl2">
			 <span style="font-size:12px;"><a href="#">دانلود از سرور پيكوفايل</a></span></li>
		  <li class="hajm">
			 <span style="font-size:12px;">حجم تقريبي : 50 کیلوبايت</span></li>
		  <li class="pas">
			 <span style="font-size:12px;">رمز فايل : <a href="http://afg-graph.com">بدون رمز</a></span></li>
		  <li class="manba">
			 <span style="font-size:12px;">منبع : اي اف جي گرافــــــــــــــــــــــــ</span></li>
	   </ul>
    </div>

پیوست ها
نمونه ی تصویری ...
نمونه ی تصویری ...
demo.png (46.95 کیلو بایت) مشاهده 2314 مرتبه
dlbox.zip
دریافت فایلها ...
(93.55 کیلو بایت) 291 مرتبه دانلود شده
[CENTER] فیس بوک
HTTP://FACEBOOK.COM/BA.WAHEDI


خـــــــط نگـــــــــــــار

HTTP://KHATNEGAR.BLOG.IR
[/CENTER][CENTER]

آموزش ساخت منوی سایت
post385049.html#p385049

تـــلـــگـــرام من
[url=tg://resolve?domain=B_Wahedi]tg://resolve?domain=B_Wahedi[/url]




[/CENTER]
نمایه کاربر
free_spirit
کاربر فعال
کاربر فعال
پست: 112
تاریخ عضویت: شنبه ۱۱ آذر ۱۳۹۱, ۱:۵۸ ب.ظ
تشکر کرده: 96 دفعه
تشکر شده: 7 دفعه
تماس:

Re: ๑۩๑ تاپیک جامع ابزار طراحی رایگان ๑۩๑

پست توسط free_spirit »

afg_graph نوشته شده:یه جعبه دانلود زیبا با استفاده از سی اس اس و آموزش گذاشتن توی سایت نیوکی.


[CENTER]این پیش نمایش آنلاین ...[/CENTER]
اینم آموزش ...

اول فایلهای ضمیمه شده رو توی پوشه ی قالبتون بزارید.

با استفاده از کد زیر فایل سی اس اس رو توی theme.php قالبتون فراخوانی کنید.

کد: انتخاب همه

<link type="text/css" rel="stylesheet" href="css/style.css" />


حالا موقعی که می خواید برای سایتتون مطلب ارسال کنید روی دکمه ی منبع کلیک می کنید و کد زیر رو اونجا paste می کنید.

کد: انتخاب همه

<div class="dl-p2g">
    <div class="dl-p2g-bg">
	   <p>
		  دانلود + توضيحات</p>
	   <ul>
		  <li class="dl">
			 <span style="font-size:12px;"><a href="http://afg-graph.com/web/freetools/dlbox/dlbox.zip">دانلود از سرور سايت</a></span></li>
		  <li class="dl2">
			 <span style="font-size:12px;"><a href="#">دانلود از سرور پيكوفايل</a></span></li>
		  <li class="hajm">
			 <span style="font-size:12px;">حجم تقريبي : 50 کیلوبايت</span></li>
		  <li class="pas">
			 <span style="font-size:12px;">رمز فايل : <a href="http://afg-graph.com">بدون رمز</a></span></li>
		  <li class="manba">
			 <span style="font-size:12px;">منبع : اي اف جي گرافــــــــــــــــــــــــ</span></li>
	   </ul>
    </div>


در مورد قسمت اولش بیشتر توضیح بدین مرسی
[CENTER]فیکس دانلود | دانلود فیلم های جدید

http://fixdownload2.ga[/CENTER]
نمایه کاربر
afg_graph
کاربر فعال
کاربر فعال
پست: 531
تاریخ عضویت: شنبه ۲۶ فروردین ۱۳۹۱, ۹:۲۰ ب.ظ
محل اقامت: کابل - افغانستان
تشکر کرده: 88 دفعه
تشکر شده: 212 دفعه
تماس:

Re: ๑۩๑ تاپیک جامع ابزار طراحی رایگان ๑۩๑

پست توسط afg_graph »

مشکل خاصی نداره فقط کافیه کدی که کذاشتم رو توی theme.php قالبی که ازش استفاده کی کنید قرار بدید و به جای css/style.css آدرس فایل سی اس اسی که از فایلهای ضمیمه دانلود کردید رو قرار بدید.

در ضمن دوستان موقعی که کد دوم رو توی ادیتور سایت قسمت منبع وارد می کنید. ادیتور این باکس رو نشون نمیده ، اما وقتی مطلب رو ارسال کردید توی قالب به نمایش درمیاد.
[CENTER] فیس بوک
HTTP://FACEBOOK.COM/BA.WAHEDI


خـــــــط نگـــــــــــــار

HTTP://KHATNEGAR.BLOG.IR
[/CENTER][CENTER]

آموزش ساخت منوی سایت
post385049.html#p385049

تـــلـــگـــرام من
[url=tg://resolve?domain=B_Wahedi]tg://resolve?domain=B_Wahedi[/url]




[/CENTER]
نمایه کاربر
afg_graph
کاربر فعال
کاربر فعال
پست: 531
تاریخ عضویت: شنبه ۲۶ فروردین ۱۳۹۱, ۹:۲۰ ب.ظ
محل اقامت: کابل - افغانستان
تشکر کرده: 88 دفعه
تشکر شده: 212 دفعه
تماس:

Re: ๑۩๑ تاپیک جامع ابزار طراحی رایگان ๑۩๑

پست توسط afg_graph »

یه منوی خیلی زیبا ساخته شده با JQuery و CSS3 به نام ...

[CENTER]منوی در گاراژی تصویر


نمونه ، فایلها ی اصلی ، و فایلهای پی اس دی این مطلب رو ضمیمه کردم ...


[/CENTER]
[CENTER]این هم پیش نمایش آنلایــــــــــــــــــــــــــــن


[/CENTER]
پیوست ها
به روایت تصویـــــر ...
به روایت تصویـــــر ...
demo.gif (65.68 کیلو بایت) مشاهده 2199 مرتبه
PSD Files.zip
فایلهای psd مربوطه ...
(216.93 کیلو بایت) 277 مرتبه دانلود شده
Garage Door Menu.zip
فایلهای اصلی ...
(138.22 کیلو بایت) 268 مرتبه دانلود شده
[CENTER] فیس بوک
HTTP://FACEBOOK.COM/BA.WAHEDI


خـــــــط نگـــــــــــــار

HTTP://KHATNEGAR.BLOG.IR
[/CENTER][CENTER]

آموزش ساخت منوی سایت
post385049.html#p385049

تـــلـــگـــرام من
[url=tg://resolve?domain=B_Wahedi]tg://resolve?domain=B_Wahedi[/url]




[/CENTER]
gildownload
کاربر جدید
کاربر جدید
پست: 88
تاریخ عضویت: جمعه ۹ دی ۱۳۹۰, ۱۲:۴۴ ق.ظ
تشکر کرده: 5 دفعه
تشکر شده: 4 دفعه

Re: AW Cycle Slider- اسلايدر

پست توسط gildownload »

webdesign2012 نوشته شده:اسلايدر زيبا همراه با JQuery و Css

بصورت pol back هستش وقتي اسلايد كل عكس ها تموم ميشه برگشت به عقب ميكنه



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

لطفا طریقه قرارگیری این اسلایدر رو در قالب بیان کن تا ما فقط یک دانلودکننده اسلایدر نباشیم بلکه یک استفاده کننده آن باشیم
با تشکر
نمایه کاربر
afg_graph
کاربر فعال
کاربر فعال
پست: 531
تاریخ عضویت: شنبه ۲۶ فروردین ۱۳۹۱, ۹:۲۰ ب.ظ
محل اقامت: کابل - افغانستان
تشکر کرده: 88 دفعه
تشکر شده: 212 دفعه
تماس:

Re: AW Cycle Slider- اسلايدر

پست توسط afg_graph »

gildownload نوشته شده:
webdesign2012 نوشته شده:اسلايدر زيبا همراه با JQuery و Css

بصورت pol back هستش وقتي اسلايد كل عكس ها تموم ميشه برگشت به عقب ميكنه



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

لطفا طریقه قرارگیری این اسلایدر رو در قالب بیان کن تا ما فقط یک دانلودکننده اسلایدر نباشیم بلکه یک استفاده کننده آن باشیم
با تشکر


سلام .

در این مورد آموزش های خیلی زیادی داده شده اما خیلی از دوستان حوصله ی سرچ کردن ندارند تصویر برای همین یه توضیح کوچیک میدم تا دیگه مشکلی نباشه.


آموزش گذاشتن یک اسلایدر جی کوری در وبسایت.

خوب برای قدم اول شما نیاز به یه فایل جی کوری دارید که می تونید آخرین نسخه رو از وبسایت http://jquery.com دریافت کنید. البته این فایل به صورت پیشفرض توی بعضی از اسلایدر ها هست فقط کافیه شما آخرین نسخه رو دانلود و جایگزین کنید.


نکته : توی این اسلایدری که ما روش کار می کنیم. فایل جی کوری از یه جای دیگه فراخوانی شده.

کد: انتخاب همه

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>


تقریبا تو همه ی اسلایدرها یه فایل index.html هم هست که کار شما رو خیلی خیلی راحت تر میکنه. حالا من index.html همین اسلایدری که آقای webdesign2012 قرار داده بودند رو برای آموزشمون انتخاب کردم یعنی اسلایدر AW Cycle .


قسمت های اضافه رو پاک کردم تا گیج نشید.

کد: انتخاب همه



<head>
    
    <!-- قسمت اول -->

    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/presentationCycle.css" />


    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
    <script type='text/javascript' src='js/jquery.cycle.all.min.js'></script>
    <script type='text/javascript' src='js/presentationCycle.js'></script>

</head>

<body>

    <!-- قسمت دوم -->

    <div class="container">
    

	   <div id="presentation_container" class="pc_container">
		  <div class="pc_item">
			 <div class="desc">
				<h1>AlexaWeb</h1>
				New Slider With JQuery !
				Useful
				Beautiful
				Very Good !!!
			 </div>
			 <img src="images/slide1.jpg" alt="slide1" />
		  </div>
		  <div class="pc_item">
			 <div class="desc">
				<h1>AlexaWeb</h1>
				New Slider With JQuery !
				Useful
				Beautiful
				Very Good !!!
			 </div>
			 <img src="images/slide3.jpg" alt="slide2" />
		  </div>
		  <div class="pc_item">
			 <div class="desc" style="left: 0px;">
				<h1>AlexaWeb</h1>
				New Slider With JQuery !
				Useful
				Beautiful
				Very Good !!!
			 </div>
			 <img src="images/slide1.jpg" alt="slide3" />
		  </div>
		  <div class="pc_item">
			 <div class="desc" style="left: 0px;">
				<h1>AlexaWeb</h1>
				New Slider With JQuery !
				Useful
				Beautiful
				Very Good !!!
			 </div>
			 <img src="images/slide3.jpg" alt="slide4" />
		  </div>
		  <div class="pc_item">
			 <div class="desc">
				<h1>AlexaWeb</h1>
				New Slider With JQuery !
				Useful
				Beautiful
				Very Good !!!
			 </div>
			 <img src="images/slide1.jpg" alt="slide5" />
		  </div>
		  <div class="pc_item">
			 <div class="desc" style="left: 0px;">
				<h1>AlexaWeb</h1>
				New Slider With JQuery !
				Useful
				Beautiful
				Very Good !!!
			 </div>
			 <img src="images/slide3.jpg" alt="slide6" />
		  </div>
	   </div>
	   
    <!-- قسمت سوم -->

	   <script type="text/javascript">
		  presentationCycle.init();
	   </script>
    
    </div>
    
</body>




حالا با توجه به فایل index.html


قسمت اول !

همونطوری که می بینید بین تگ های <head> و </head> فایل های css و js فرا خوانی شده . حالا شما هم باید این کدها رو بین همین تگ ها توی صفحه ای که دارید فراخوانی کنید و اگه برای قالب نیوکتون میخواید این اسلایدر رو قرار بدید باید این کدها رو توی theme.php قالبتون اضافه کنید بین همون تگ های <head> و </head> تنها کاری که الان باید انجام بدید اینه که آدرس فایلهاتون رو درست توی کدها قرار بدید.


توی کد زیر css/style.css آدرس فایل style.css هست و برای مثال اگه شما style.css رو توی root سایتتون قرار داده باشید آدرستون میشه http://youresite.com/style.css

کد: انتخاب همه


    <link rel="stylesheet" type="text/css" href="css/style.css" />



قسمت دوم !

حالا نوبت به فراخوانی کد اسلایدر میرسه که معمولا بین تگ های <body> و </body> فراخوانی میشه ...

از <div class="container"> (زیر قسمت دوم) تا تگ </div> ( بالای قسمت سوم ) کد هایی هستند که شما اونها رو هرجای قالبتون قرار بدید اسلایدر همونجا قرار میگیره.


قسمت سوم !

این کد هم مربوط به کد اسلایدرمون میشه که زیر کد بالایی قرار میگیره. البته این کد توی همه ی اسلایدرها یکی نیست ! ...

کد: انتخاب همه


	   <script type="text/javascript">
		  presentationCycle.init();
	   </script>



آموزش تقریبا واضح بیان شده . لطفا دیگه اینجا سوال نفرمایید و اگه مشکلی داشتید یه تاپیک جداگونه بزنید.
[CENTER] فیس بوک
HTTP://FACEBOOK.COM/BA.WAHEDI


خـــــــط نگـــــــــــــار

HTTP://KHATNEGAR.BLOG.IR
[/CENTER][CENTER]

آموزش ساخت منوی سایت
post385049.html#p385049

تـــلـــگـــرام من
[url=tg://resolve?domain=B_Wahedi]tg://resolve?domain=B_Wahedi[/url]




[/CENTER]
webdesign2012
کاربر فعال
کاربر فعال
پست: 884
تاریخ عضویت: شنبه ۷ اردیبهشت ۱۳۹۲, ۱۰:۲۷ ب.ظ
محل اقامت: Seo
تشکر کرده: 188 دفعه
تشکر شده: 287 دفعه
تماس:

Re: AW Cycle Slider- اسلايدر

پست توسط webdesign2012 »

gildownload نوشته شده:
webdesign2012 نوشته شده:اسلايدر زيبا همراه با JQuery و Css

بصورت pol back هستش وقتي اسلايد كل عكس ها تموم ميشه برگشت به عقب ميكنه



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

لطفا طریقه قرارگیری این اسلایدر رو در قالب بیان کن تا ما فقط یک دانلودکننده اسلایدر نباشیم بلکه یک استفاده کننده آن باشیم
با تشکر

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

شما نباید انتظار بیش از حد داشته باشین.اسلایدر هایی که قرار گرفتن یا اختصاصی هستن یا نیمه اختصاصی که توی نت کم گیر میان

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

تا حالا هم خدا رو شکر کسی نیومد بگه اسلایدرت خرابه یا بدرد نمیخوره.خیلی ها استفاده کردن و تشکر هم کردن
طراحی تالارگفتمان حرفه ای و ست با نیوک 8.2 و 8.3

طراحی قالب نیوک 8.3

حمايت مالي از نيوك


قالب های قرار داده شده کاربران
Tikhost
کاربر فعال
کاربر فعال
پست: 100
تاریخ عضویت: دوشنبه ۲۳ آبان ۱۳۹۰, ۳:۵۷ ب.ظ
محل اقامت: آبادان
تشکر کرده: 4 دفعه
تشکر شده: 7 دفعه
تماس:

Re: ๑۩๑ تاپیک جامع ابزار طراحی رایگان ๑۩๑

پست توسط Tikhost »

برای نیوک 8.2 ماژولی ندارید که به صورت تب بندی شده آخرین ارسالها ، آخرین اخبار، پر بازدید ترین و... رو نشون بده؟
نمونه پ.خ شد...! afg_graph
اینجا ایران است. :)
نمایه کاربر
afg_graph
کاربر فعال
کاربر فعال
پست: 531
تاریخ عضویت: شنبه ۲۶ فروردین ۱۳۹۱, ۹:۲۰ ب.ظ
محل اقامت: کابل - افغانستان
تشکر کرده: 88 دفعه
تشکر شده: 212 دفعه
تماس:

Re: ๑۩๑ تاپیک جامع ابزار طراحی رایگان ๑۩๑

پست توسط afg_graph »

قدرت سی اس اس ...

توی این مطلب هیچ تصویری قرار داده نشده و اشیاء و افکت ها فقط به وسیله ی css ساخته شدند.


فایل css ...

کد: انتخاب همه


ul.starbursts {
    list-style:none;
    margin:20px 0;
    padding:0;
    overflow:hidden;
}
ul.starbursts li {
    float:left;
    width:10em;
    height:10em;
    position:relative;
}
ul.starbursts * {
    margin:0;
    padding:0;
    line-height:1.2em;
}

/* Starburst 1 */
.starburst1 {
    display:block;
    width:6em;
    height:6em;
    background:#ff47ab;
    -webkit-transform:rotate(-22.5deg);
    -moz-transform:rotate(-22.5deg);
    rotation:-22.5deg;
    position:absolute;
    top:2em;
    left:2em;
    text-align:center;
    text-decoration:none;
    color:#fff;
    font-weight:bold;
    font-family:Arial, sans-serif;
    text-shadow:0 0 3em #f00, 0 0 4px #88004a;
    -moz-transition: -moz-transform 0.3s ease;
    -webkit-transition: -webkit-transform 0.3s ease;
    -o-transition: -o-transform 0.3s ease;
    transition: transform 0.3s ease;
}
.starburst1 span {
    display:block;
    width:6em;
    height:6em;
    background:#ff47ab;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    rotation:45deg;
}
.starburst1:hover,
.starburst1:hover span {
    background:#f00;
    color:#fff;
    text-shadow:0 0 20px #fff, 0 0 8px #fff;
}
.starburst1:hover {
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    rotation:-405deg;
}

/* Starburst 2 */
.starburst2 {
    display:block;
    width:6em;
    height:6em;
    background:#fe0;
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    rotation:-45deg;
    position:relative;
    top:2em;
    left:2em;
    text-align:center;
    text-decoration:none;
    color:#000;
    font-weight:bold;
    font-family:Arial, sans-serif;
    text-shadow:0 0 3em #f00, 0 0 4px #f30;
    -moz-transition: -moz-transform 0.3s ease;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
}
.starburst2 span {
    display:block;
    width:6em;
    height:6em;
    background:#fe0;
    -webkit-transform:rotate(22.5deg);
    -moz-transform:rotate(22.5deg);
    rotation:22.5deg;
}
.starburst2:hover,
.starburst2:hover span {
    background:#fa0;
    color:#fff;
    text-shadow:0 0 20px #fff, 0 0 8px #fff;
}
.starburst2:hover {
    -webkit-transform:rotate(315deg);
    -moz-transform:rotate(315deg);
    rotation:315deg;
}

/* Starburst 3 */
.starburst3 {
    display:block;
    width:6em;
    height:6em;
    -webkit-transform:rotate(-67.5deg);
    -moz-transform:rotate(-67.5deg);
    rotation:-67.5deg;
    position:relative;
    top:2em;
    left:2em;
    text-align:center;
    text-decoration:none;
    color:#000;
    font-weight:bold;
    font-family:Arial, sans-serif;
    text-shadow:0 0 3em #04b3df, 0 0 4px #0077e5;
    font-size:1em;
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.starburst3 span {
    display:block;
    width:6em;
    height:6em;
    background:#00f4b2;
    -webkit-transform:rotate(11.25deg);
    -moz-transform:rotate(11.25deg);
    rotation:12.5deg;
}
.starburst3:hover span {
    background:#00e530;
}
.starburst3:hover {
    left:2.5em;
    top:1.5em;
}

/* Starburst 4 */
.starburst4 {
    display:block;
    width:6em;
    height:6em;
    -webkit-transform:rotate(-67.5deg);
    -moz-transform:rotate(-67.5deg);
    rotation:-67.5deg;
    position:relative;
    top:2em;
    left:2em;
    text-align:center;
    text-decoration:none;
    color:#000;
    font-weight:bold;
    font-family:Arial, sans-serif;
    text-shadow:-1px -1px -1px #fff, 1px 1px 1px #00f;
    
}
.starburst4 span {
    display:block;
    width:6em;
    height:6em;
    background:#78d7ff;
    -webkit-transform:rotate(22.5deg);
    -moz-transform:rotate(22.5deg);
    rotation:22.5deg;
    -moz-border-radius:2.5em;
    -webkit-border-radius:2.5em;
    border-radius:2.5em;
    -moz-transition: -moz-border-radius 0.2s ease-in;
    -webkit-transition: -webkit-border-radius 0.2s ease-in;
    transition: border-radius 0.2s ease-in;
}
.starburst4:hover {
    background:transparent;
}
.starburst4:hover span {
    background:#08f;
    color:#fff;
    text-shadow:0 0 20px #fff, 0 0 8px #fff;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    border-radius:0;
}

/* Starburst 5 */
.starburst5 {
    display:block;
    width:6em;
    height:6em;
    background:#7e00df;
    position:relative;
    top:2em;
    left:2em;
    text-align:center;
    text-decoration:none;
    color:#fff;
    font-weight:bold;
    font-family:Arial, sans-serif;
    text-shadow:0 0 3em #04b3df, 0 0 4px #ff0;
    font-size:1em;
    -webkit-transform:rotate(-56.5deg);
    -moz-transform:rotate(-56.5deg);
    rotation:-56.5deg;
}
.starburst5 span {
    display:block;
    width:6em;
    height:6em;
    background:#7e00df;
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    rotation:-45deg;
    -moz-transition: -moz-transform 1s ease;
    -webkit-transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
}
.starburst5:hover {
    background:#7e00df;
}
.starburst5:hover span {
    -webkit-transform:rotate(11.25deg);
    -moz-transform:rotate(11.25deg);
    rotation:11.25deg;
}

/* Starburst 6 */
.starburst6 {
    display:block;
    width:8em;
    height:2.5em;
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    rotation:180deg;
    position:relative;
    top:3.75em;
    left:2em;
    text-align:center;
    text-decoration:none;
    color:#fff;
    font-weight:bold;
    font-family:Arial, sans-serif;
}
.starburst6 span {
    display:block;
    margin:0 auto;
    width:6em;
    height:2.5em;
    background:#f00;
    text-shadow:0 0 3em #04b3df, 0 0 4px #0077e5;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    rotation:45deg;
    -moz-transition: all 0.6s ease-out;
    -webkit-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
}
.starburst6:hover span {
    background:#f90;
    width:8em;
    -moz-border-radius:2.5em;
    -webkit-border-radius:2.5em;
    border-radius:2.5em;
    text-shadow:0 0 3em #f00, 0 0 4px #f88;
}
.starburst6:hover {
    left:2em;
    width:8em;
    background:transparent;
}

/* Starburst 7 */
.starburst7 {
    display:block;
    width:8em;
    height:3em;
    position:relative;
    top:3.75em;
    left:1em;
    text-align:center;
    text-decoration:none;
    color:#fff;
    font-weight:bold;
    font-family:Arial, sans-serif;
}
.starburst7 span {
    display:block;
    width:8em;
    height:2.5em;
    background:#00cd00;
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    rotation:-45deg;
    -moz-transition: all 0.8s ease-out;
    -webkit-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;
    -moz-border-radius:2em;
    -webkit-border-radius:2em;
    border-radius:2em;
    text-shadow:1px 1px 1px #000;
}
.starburst7:hover {
    background:transparent;
}
.starburst7:hover span {
    -webkit-transform:rotate(52.5deg);
    -moz-transform:rotate(52.5deg);
    rotation:52.5deg;
    -webkit-transform:translate(1em, 0);
    -moz-transform:translate(1em, 0);
    translate(1em, 0);
}



این هم کدهای فراخوانی ...

کد: انتخاب همه

<ul class="starbursts">
    <li>
	   <a href="#" class="starburst1"><span><br><br>ای اف جی گراف</span></a>
    </li>
    <li>
	   <a href="#" class="starburst2"><span><span><span><br><br>نیوک فارسی</span></span></span></a>
    </li>
    <li>
	   <a href="#" class="starburst3"><span><span><span><span><span><span><span><span><br><br>قدرت سی اس اس</span></span></span></span></span></span></span></span></a>
    </li>
    <li>
	   <a href="#" class="starburst4"><span><span><span><span><br><br>قدرت سی اس اس</span></span></span></span></a>
    </li>
    <li>
	   <a href="#" class="starburst5"><span><span><span><span><span><span><span><br><br>قدرت سی اس اس</span></span></span></span></span></span></span></a>
    </li>
    <li>
	   <a href="#" class="starburst6"><span><span><span><span><br>قدرت سی اس اس</span></span></span></span></a>
    </li>
<br/>
    <li>
	   <a href="#" class="starburst7"><span><span><span><span><span><span><span><span><span><span><span><span><span><span><span><span><br>قدرت سی اس اس</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></a>
    </li>
</ul>


[CENTER]
پیش نمایش آنلاین ...


[RIGHT]منبع : post390530.html#p390530

[/RIGHT][/CENTER]
پیوست ها
پیش نمایش ...
پیش نمایش ...
demo.jpg (31.26 کیلو بایت) مشاهده 2328 مرتبه
CSS Power.zip
دریافت فایل ها ...
(2.27 کیلو بایت) 277 مرتبه دانلود شده
[CENTER] فیس بوک
HTTP://FACEBOOK.COM/BA.WAHEDI


خـــــــط نگـــــــــــــار

HTTP://KHATNEGAR.BLOG.IR
[/CENTER][CENTER]

آموزش ساخت منوی سایت
post385049.html#p385049

تـــلـــگـــرام من
[url=tg://resolve?domain=B_Wahedi]tg://resolve?domain=B_Wahedi[/url]




[/CENTER]
gildownload
کاربر جدید
کاربر جدید
پست: 88
تاریخ عضویت: جمعه ۹ دی ۱۳۹۰, ۱۲:۴۴ ق.ظ
تشکر کرده: 5 دفعه
تشکر شده: 4 دفعه

Re: ๑۩๑ تاپیک جامع ابزار طراحی رایگان ๑۩๑

پست توسط gildownload »

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

تلاشمو میکنم اگه نشد که انجام بدم پست جدید میزنم.اما فقط چون این مطلب اینجا ارئه شده بود دیگه همینجا جواب دادم.
نمایه کاربر
ircfc
کاربر فعال
کاربر فعال
پست: 147
تاریخ عضویت: جمعه ۲۳ دی ۱۳۹۰, ۱۰:۴۶ ق.ظ
محل اقامت: tabriz
تشکر کرده: 68 دفعه
تشکر شده: 8 دفعه
تماس:

Re: ๑۩๑ تاپیک جامع ابزار طراحی رایگان ๑۩๑

پست توسط ircfc »

سلام

میشه اموزش اضافه کردن چند تا دکمه اضافه رو به ادیتور مدیریت نیوک بدید؟؟
مثلا بتونیم جعبه دانلود رو بصورت دکمه قرار بدیم که کاربردش هم بهتر باشه!!
مثل سایت پی سی دانلود که بصورت ساده و شیک هستش

منتظر اموزش هستیم
موفق باشید. یاحق
ایران سی اف سی

تالارهای گفتگو - ایران سی اف سی (ircfc.ir)

قالب و افزونه درخواستی برای وردپرس، جوملا، پرستاشاپ، IPS و زنفور و دیگر سیستم های مدیریت محتوا
را برای ما ارسال کنید تا در سریعترین زمان ممکن با کمترین قیمت یا رایگان در سایت قرار بگیرد
نمایه کاربر
afg_graph
کاربر فعال
کاربر فعال
پست: 531
تاریخ عضویت: شنبه ۲۶ فروردین ۱۳۹۱, ۹:۲۰ ب.ظ
محل اقامت: کابل - افغانستان
تشکر کرده: 88 دفعه
تشکر شده: 212 دفعه
تماس:

Re: ๑۩๑ تاپیک جامع ابزار طراحی رایگان ๑۩๑

پست توسط afg_graph »

سلام

میشه اموزش اضافه کردن چند تا دکمه اضافه رو به ادیتور مدیریت نیوک بدید؟؟
مثلا بتونیم جعبه دانلود رو بصورت دکمه قرار بدیم که کاربردش هم بهتر باشه!!
مثل سایت پی سی دانلود که بصورت ساده و شیک هستش

منتظر اموزش هستیم
موفق باشید. یاحق

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

[CENTER]---------------------------------------------------------------------------------------------------------------------

[RIGHT]
یه اسلایدر خیلی زیبا برای محصولات ، ساخته شده از سی اس اس و جی کوری ...

[CENTER]
پیش نمایش آنلاین[/CENTER][/RIGHT][/CENTER]
پیوست ها
Products Slider.zip
فایل فشرده ...
(149.79 کیلو بایت) 284 مرتبه دانلود شده
به روایت تصویر ...
به روایت تصویر ...
demo.jpg (31.23 کیلو بایت) مشاهده 2325 مرتبه
[CENTER] فیس بوک
HTTP://FACEBOOK.COM/BA.WAHEDI


خـــــــط نگـــــــــــــار

HTTP://KHATNEGAR.BLOG.IR
[/CENTER][CENTER]

آموزش ساخت منوی سایت
post385049.html#p385049

تـــلـــگـــرام من
[url=tg://resolve?domain=B_Wahedi]tg://resolve?domain=B_Wahedi[/url]




[/CENTER]
Wolf-2013
کاربر جدید
کاربر جدید
پست: 50
تاریخ عضویت: پنج‌شنبه ۱۰ اسفند ۱۳۹۱, ۱۱:۰۳ ق.ظ
تشکر کرده: 14 دفعه
تشکر شده: 4 دفعه

Re: ๑۩๑ تاپیک جامع ابزار طراحی رایگان ๑۩๑

پست توسط Wolf-2013 »

afg_graph نوشته شده:سلام

شما هم دوست دارید صفحه ی وبتون مثل صفحه ی اسکرین آیفون باز بشه؟

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


[CENTER]پـــیـــش نـــمــــایـــش زنـــده ...[/CENTER]

[CENTER]داداش آموزش این رو میدی؟[/CENTER]
نمایه کاربر
afg_graph
کاربر فعال
کاربر فعال
پست: 531
تاریخ عضویت: شنبه ۲۶ فروردین ۱۳۹۱, ۹:۲۰ ب.ظ
محل اقامت: کابل - افغانستان
تشکر کرده: 88 دفعه
تشکر شده: 212 دفعه
تماس:

Re: ๑۩๑ تاپیک جامع ابزار طراحی رایگان ๑۩๑

پست توسط afg_graph »

Wolf-2013 نوشته شده:
afg_graph نوشته شده:سلام

شما هم دوست دارید صفحه ی وبتون مثل صفحه ی اسکرین آیفون باز بشه؟

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


[CENTER]پـــیـــش نـــمــــایـــش زنـــده ...[/CENTER]

[CENTER]داداش آموزش این رو میدی؟[/CENTER]


خواهش می کنم دیگه آموزش نخواهید دوستــــــــــــــان ! اینجا تاپیک درخواست ابزار طراحیه نه تاپیک آموزش قرار دادنشون .

امیدوارم این آخریش باشه ...
---------------------------------------------------------------------------------------------


این فایلها رو توی صفحه ی اچ تی ام التون فراخوانی می کنید با آدرس درست ، هرجایی که فایل ها رو گذاشتید.
بین تگ های <head> و <head/>

کد: انتخاب همه

    
    <link rel='stylesheet' href='css/style.css'>
    <link rel='stylesheet' href='css/bg.css'>
	 <script src='js/slidetounlock.js'></script>

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

کد: انتخاب همه

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'></script>


این ها رو هم بین تگ های <body> و <body/> قرار بدید. همین

کد: انتخاب همه


    <div id="page-wrap">

	   <div id="well">
		  
		  <h2><strong id="slider"></strong> <span>slide to unlock</span></h2>
		  
	   </div>
		  
    </div>

نکته : توی نیوک همه ی اینا باید تو theme.php قالبتون فراخوانی بشه.
[CENTER] فیس بوک
HTTP://FACEBOOK.COM/BA.WAHEDI


خـــــــط نگـــــــــــــار

HTTP://KHATNEGAR.BLOG.IR
[/CENTER][CENTER]

آموزش ساخت منوی سایت
post385049.html#p385049

تـــلـــگـــرام من
[url=tg://resolve?domain=B_Wahedi]tg://resolve?domain=B_Wahedi[/url]




[/CENTER]
موضوع جدید ارسال پست

بازگشت به “بحث و تبادل نظر - phpNuke Discussion”