๑۩๑ تاپیک جامع ابزار طراحی رایگان ๑۩๑
- afg_graph
- کاربر فعال
- پست: 531
- تاریخ عضویت: شنبه ۲۶ فروردین ۱۳۹۱, ۹:۲۰ ب.ظ
- محل اقامت: کابل - افغانستان
- تشکر کرده: 88 دفعه
- تشکر شده: 212 دفعه
- تماس:
Re: ๑۩๑ تاپیک جامع ابزار طراحی رایگان ๑۩๑
[CENTER]
ساخت نمودار پیشرفت با استفاده از سی اس اس .[/CENTER][CENTER]
پیـــش نمـــایـــش آنلایـــن ...[/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]
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: ๑۩๑ تاپیک جامع ابزار طراحی رایگان ๑۩๑
یه جعبه دانلود زیبا با استفاده از سی اس اس و آموزش گذاشتن توی سایت نیوکی.
[CENTER]این پیش نمایش آنلاین ...
[/CENTER]
اینم آموزش ...
اول فایلهای ضمیمه شده رو توی پوشه ی قالبتون بزارید.
با استفاده از کد زیر فایل سی اس اس رو توی theme.php قالبتون فراخوانی کنید.
حالا موقعی که می خواید برای سایتتون مطلب ارسال کنید روی دکمه ی منبع کلیک می کنید و کد زیر رو اونجا paste می کنید.
[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]
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: ๑۩๑ تاپیک جامع ابزار طراحی رایگان ๑۩๑
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>
در مورد قسمت اولش بیشتر توضیح بدین مرسی
- afg_graph
- کاربر فعال
- پست: 531
- تاریخ عضویت: شنبه ۲۶ فروردین ۱۳۹۱, ۹:۲۰ ب.ظ
- محل اقامت: کابل - افغانستان
- تشکر کرده: 88 دفعه
- تشکر شده: 212 دفعه
- تماس:
Re: ๑۩๑ تاپیک جامع ابزار طراحی رایگان ๑۩๑
مشکل خاصی نداره فقط کافیه کدی که کذاشتم رو توی 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]
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: ๑۩๑ تاپیک جامع ابزار طراحی رایگان ๑۩๑
یه منوی خیلی زیبا ساخته شده با JQuery و CSS3 به نام ...
[CENTER]منوی در گاراژی
نمونه ، فایلها ی اصلی ، و فایلهای پی اس دی این مطلب رو ضمیمه کردم ...
[/CENTER]
[CENTER]این هم پیش نمایش آنلایــــــــــــــــــــــــــــن
[/CENTER]
[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]
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]
-
- کاربر جدید
- پست: 88
- تاریخ عضویت: جمعه ۹ دی ۱۳۹۰, ۱۲:۴۴ ق.ظ
- تشکر کرده: 5 دفعه
- تشکر شده: 4 دفعه
Re: AW Cycle Slider- اسلايدر
webdesign2012 نوشته شده:اسلايدر زيبا همراه با JQuery و Css
بصورت pol back هستش وقتي اسلايد كل عكس ها تموم ميشه برگشت به عقب ميكنه
دوست عزیز اسلایدر بسیار زیبایی هست.نمونه اینگونه اسلایدرها هم زیاد میشه پیدا کرد تو نت.
اما مشکل خیلی ها سر قرار دادنش توی قالب.
من الان حداقل 50 تا اسلایدر دارم که هرکدوم زیبایی های خاص خودشون رو دارن.
اما چون نمیدونم چطور باید در قالب قرار بدم مجبورم از بلوک اسلایدر استفاده کنم!!!
لطفا طریقه قرارگیری این اسلایدر رو در قالب بیان کن تا ما فقط یک دانلودکننده اسلایدر نباشیم بلکه یک استفاده کننده آن باشیم
با تشکر
- afg_graph
- کاربر فعال
- پست: 531
- تاریخ عضویت: شنبه ۲۶ فروردین ۱۳۹۱, ۹:۲۰ ب.ظ
- محل اقامت: کابل - افغانستان
- تشکر کرده: 88 دفعه
- تشکر شده: 212 دفعه
- تماس:
Re: AW Cycle Slider- اسلايدر
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]
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]
-
- کاربر فعال
- پست: 884
- تاریخ عضویت: شنبه ۷ اردیبهشت ۱۳۹۲, ۱۰:۲۷ ب.ظ
- محل اقامت: Seo
- تشکر کرده: 188 دفعه
- تشکر شده: 287 دفعه
- تماس:
Re: AW Cycle Slider- اسلايدر
gildownload نوشته شده:webdesign2012 نوشته شده:اسلايدر زيبا همراه با JQuery و Css
بصورت pol back هستش وقتي اسلايد كل عكس ها تموم ميشه برگشت به عقب ميكنه
دوست عزیز اسلایدر بسیار زیبایی هست.نمونه اینگونه اسلایدرها هم زیاد میشه پیدا کرد تو نت.
اما مشکل خیلی ها سر قرار دادنش توی قالب.
من الان حداقل 50 تا اسلایدر دارم که هرکدوم زیبایی های خاص خودشون رو دارن.
اما چون نمیدونم چطور باید در قالب قرار بدم مجبورم از بلوک اسلایدر استفاده کنم!!!
لطفا طریقه قرارگیری این اسلایدر رو در قالب بیان کن تا ما فقط یک دانلودکننده اسلایدر نباشیم بلکه یک استفاده کننده آن باشیم
با تشکر
حالا afg_graph عزیز لطف کردن و آموزش استفاده از اسلایدر من رو بهتون دادن اما
شما نباید انتظار بیش از حد داشته باشین.اسلایدر هایی که قرار گرفتن یا اختصاصی هستن یا نیمه اختصاصی که توی نت کم گیر میان
کسی هم بخواد این اسلایدر ها رو بزنه پول زیادی بابتش دریافت میکنه
تا حالا هم خدا رو شکر کسی نیومد بگه اسلایدرت خرابه یا بدرد نمیخوره.خیلی ها استفاده کردن و تشکر هم کردن
طراحی تالارگفتمان حرفه ای و ست با نیوک 8.2 و 8.3
طراحی قالب نیوک 8.3
حمايت مالي از نيوك
قالب های قرار داده شده کاربران
طراحی قالب نیوک 8.3
حمايت مالي از نيوك
قالب های قرار داده شده کاربران
-
- کاربر فعال
- پست: 100
- تاریخ عضویت: دوشنبه ۲۳ آبان ۱۳۹۰, ۳:۵۷ ب.ظ
- محل اقامت: آبادان
- تشکر کرده: 4 دفعه
- تشکر شده: 7 دفعه
- تماس:
Re: ๑۩๑ تاپیک جامع ابزار طراحی رایگان ๑۩๑
برای نیوک 8.2 ماژولی ندارید که به صورت تب بندی شده آخرین ارسالها ، آخرین اخبار، پر بازدید ترین و... رو نشون بده؟
نمونه پ.خ شد...! afg_graph
نمونه پ.خ شد...! afg_graph
اینجا ایران است. :)
- afg_graph
- کاربر فعال
- پست: 531
- تاریخ عضویت: شنبه ۲۶ فروردین ۱۳۹۱, ۹:۲۰ ب.ظ
- محل اقامت: کابل - افغانستان
- تشکر کرده: 88 دفعه
- تشکر شده: 212 دفعه
- تماس:
Re: ๑۩๑ تاپیک جامع ابزار طراحی رایگان ๑۩๑
قدرت سی اس اس ...
توی این مطلب هیچ تصویری قرار داده نشده و اشیاء و افکت ها فقط به وسیله ی css ساخته شدند.
فایل css ...
این هم کدهای فراخوانی ...
[CENTER]
پیش نمایش آنلاین ...
[RIGHT]منبع : post390530.html#p390530
[/RIGHT][/CENTER]
توی این مطلب هیچ تصویری قرار داده نشده و اشیاء و افکت ها فقط به وسیله ی 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]
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]
-
- کاربر جدید
- پست: 88
- تاریخ عضویت: جمعه ۹ دی ۱۳۹۰, ۱۲:۴۴ ق.ظ
- تشکر کرده: 5 دفعه
- تشکر شده: 4 دفعه
Re: ๑۩๑ تاپیک جامع ابزار طراحی رایگان ๑۩๑
برای دوستان سوء تفاهم پیش نیاد.
وقتی عزیزانی مثل شماها بدون هیچ چشم داشتی خیلی از کارهایی رو که خیلی ها اول شماره کارت میدن بعد انجام میدن رو ارائه میکنن تقدیر و تشکر داره.
چیزهای فوق العاده ای مثل اینگونه اسلایدرها یا امثال اون وقتی زحمت کشیده و قرار داده میشه واقعا حیف که کم مورد استفاده قرار بگیره.
امیدوارم ناراحتی یا سوء تعبیری پیش نیومده باشه و این پست به عنوان اسپم شناخته نشه.
تلاشمو میکنم اگه نشد که انجام بدم پست جدید میزنم.اما فقط چون این مطلب اینجا ارئه شده بود دیگه همینجا جواب دادم.
وقتی عزیزانی مثل شماها بدون هیچ چشم داشتی خیلی از کارهایی رو که خیلی ها اول شماره کارت میدن بعد انجام میدن رو ارائه میکنن تقدیر و تشکر داره.
چیزهای فوق العاده ای مثل اینگونه اسلایدرها یا امثال اون وقتی زحمت کشیده و قرار داده میشه واقعا حیف که کم مورد استفاده قرار بگیره.
امیدوارم ناراحتی یا سوء تعبیری پیش نیومده باشه و این پست به عنوان اسپم شناخته نشه.
تلاشمو میکنم اگه نشد که انجام بدم پست جدید میزنم.اما فقط چون این مطلب اینجا ارئه شده بود دیگه همینجا جواب دادم.
- ircfc
- کاربر فعال
- پست: 147
- تاریخ عضویت: جمعه ۲۳ دی ۱۳۹۰, ۱۰:۴۶ ق.ظ
- محل اقامت: tabriz
- تشکر کرده: 68 دفعه
- تشکر شده: 8 دفعه
- تماس:
Re: ๑۩๑ تاپیک جامع ابزار طراحی رایگان ๑۩๑
سلام
میشه اموزش اضافه کردن چند تا دکمه اضافه رو به ادیتور مدیریت نیوک بدید؟؟
مثلا بتونیم جعبه دانلود رو بصورت دکمه قرار بدیم که کاربردش هم بهتر باشه!!
مثل سایت پی سی دانلود که بصورت ساده و شیک هستش
منتظر اموزش هستیم
موفق باشید. یاحق
میشه اموزش اضافه کردن چند تا دکمه اضافه رو به ادیتور مدیریت نیوک بدید؟؟
مثلا بتونیم جعبه دانلود رو بصورت دکمه قرار بدیم که کاربردش هم بهتر باشه!!
مثل سایت پی سی دانلود که بصورت ساده و شیک هستش
منتظر اموزش هستیم
موفق باشید. یاحق
ایران سی اف سی
تالارهای گفتگو - ایران سی اف سی (ircfc.ir)
قالب و افزونه درخواستی برای وردپرس، جوملا، پرستاشاپ، IPS و زنفور و دیگر سیستم های مدیریت محتوا
را برای ما ارسال کنید تا در سریعترین زمان ممکن با کمترین قیمت یا رایگان در سایت قرار بگیرد
تالارهای گفتگو - ایران سی اف سی (ircfc.ir)
قالب و افزونه درخواستی برای وردپرس، جوملا، پرستاشاپ، IPS و زنفور و دیگر سیستم های مدیریت محتوا
را برای ما ارسال کنید تا در سریعترین زمان ممکن با کمترین قیمت یا رایگان در سایت قرار بگیرد
- afg_graph
- کاربر فعال
- پست: 531
- تاریخ عضویت: شنبه ۲۶ فروردین ۱۳۹۱, ۹:۲۰ ب.ظ
- محل اقامت: کابل - افغانستان
- تشکر کرده: 88 دفعه
- تشکر شده: 212 دفعه
- تماس:
Re: ๑۩๑ تاپیک جامع ابزار طراحی رایگان ๑۩๑
سلام
میشه اموزش اضافه کردن چند تا دکمه اضافه رو به ادیتور مدیریت نیوک بدید؟؟
مثلا بتونیم جعبه دانلود رو بصورت دکمه قرار بدیم که کاربردش هم بهتر باشه!!
مثل سایت پی سی دانلود که بصورت ساده و شیک هستش
منتظر اموزش هستیم
موفق باشید. یاحق
اینجا جاش نیست دوست عزیز . اینجا تاپیک ابزار طراحیه و فقط می تونید درخواست ابزار طراحی بدید. برای این کار باید یه تاپیک جدا بزنید .
[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]
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]
-
- کاربر جدید
- پست: 50
- تاریخ عضویت: پنجشنبه ۱۰ اسفند ۱۳۹۱, ۱۱:۰۳ ق.ظ
- تشکر کرده: 14 دفعه
- تشکر شده: 4 دفعه
Re: ๑۩๑ تاپیک جامع ابزار طراحی رایگان ๑۩๑
afg_graph نوشته شده:سلام
شما هم دوست دارید صفحه ی وبتون مثل صفحه ی اسکرین آیفون باز بشه؟
این ابزار با استفاده از سی اس اس و جاوا اسکریپت ساخته شده و حتی توی موبایل های صفصه لمسی هم با لمس صفحه قابل اجراست. ولی جالبتر از این هایلایت متنش هست که اونو دقیقا شبیه صفحه ی اسکرین آیفون میکنه . البته من خودم وقتی با فایرفاکس چک کردم هایلایت رو نشون نداد اما توی مرورگر کروم عمل کرد.
[CENTER]پـــیـــش نـــمــــایـــش زنـــده ...[/CENTER]
[CENTER]داداش آموزش این رو میدی؟[/CENTER]
- afg_graph
- کاربر فعال
- پست: 531
- تاریخ عضویت: شنبه ۲۶ فروردین ۱۳۹۱, ۹:۲۰ ب.ظ
- محل اقامت: کابل - افغانستان
- تشکر کرده: 88 دفعه
- تشکر شده: 212 دفعه
- تماس:
Re: ๑۩๑ تاپیک جامع ابزار طراحی رایگان ๑۩๑
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]
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]