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

[afg_graph]

برای اولین مطلب یه بک گراند خیلی زیبا با رنگ آبی می زارم که امیدوارم مورد پسندتون باشه .

[webdesign2012]

اسلايدر زيبا همراه با JQuery و Css

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

[afg_graph]

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

[afg_graph]

مجموعه دکمه های تهیه شده با css و آموزش ساخت آنها در 3 گام ...


گام اول : یک فایل css با نام buttons.css ایجاد و کدهای زیر را درون آن کپی می کنیم. (برای ایجاد دکمه ی قرمز)

کد اول مربوط به حالت عادی دکمه ...
----------------------------------------------------

[LEFT]/* Red Button CSS3 Code */[/LEFT]
[LEFT].red_button{
position:relative;
width:115px;
float:right;
margin:13px;
color:#FFF;
display:block;
text-decoration:none;
border-radius:5px;
border:solid 1px #ec3838;
background:#cb2727;
text-align:center;
padding:20px 30px;
-webkit-transition: all 0.1s;
-moz-transition: all 0.1s;
transition: all 0.1s;
-webkit-box-shadow: 0px 9px 0px #a81515;
-moz-box-shadow: 0px 9px 0px #a81515;
box-shadow: 0px 9px 0px #a81515;
font-size:20px;
}[/LEFT]

کد دوم مربوط به حالت فعال دکمه ...
----------------------------------------------------

[LEFT]/* Red Button Active CSS3 Code */

.red_button:active{
-webkit-box-shadow: 0px 2px 0px #a81515;
-moz-box-shadow: 0px 2px 0px #a81515;
box-shadow: 0px 2px 0px #a81515;
position:relative; top:7px;
}[/LEFT]

گام دوم : فایل css ی که ایجاد کردیم را با کد زیر در قالبمان فراخوانی می کنیم ...

<link rel="stylesheet" href="buttons.css">

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

<a href="#" class="red_button">
فشار دهید
</a>

[CENTER]...::: دموی آنلاین :::...[/CENTER]

<- تشکر فراموش نشه ->

[RaminGraphic]

[RIGHT] داشی فدات شم این تاپیک عـــــــــــالیه

اگه وقت میکنی بیشتر فایل های Psd . خیلی گـــــــــــرافیکی و فانتزی تر بزاری ممنونتم

برای مثال"

آدمک:برای استفاده در طراحی

لوگو:همه جور لوگو برای استفاده در طراحی و الگو گرفتن ازشون

فایل های Png

و کلی طرح های گرافیکی جذاب و جالب و فقط اینکه فــــــــانتزی تر باشه عالی تر میشه
[/RIGHT][CENTER]فدایت شوم

رامـــــــــین گـــرافیک

بزودی وبسایت طراحی گـــــرین گـــرافیک
[/CENTER]

[gildownload]

اسلايدر زيبا همراه با JQuery و Css

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

دوست عزیز حالا اینو چطور روی نیوک راه اندازی کنیم؟؟؟
خیلی ممنون میشم اگه راهنمایی کنید

[webdesign2012]

اسلايدر زيبا همراه با JQuery و Css

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

دوست عزیز حالا اینو چطور روی نیوک راه اندازی کنیم؟؟؟
خیلی ممنون میشم اگه راهنمایی کنید

روش هاش توي تالار هستش جستجو كنين

يا از طريق اينكلود كردن ميتونين استفاده كنين يا از طريق آي فريم

[webdesign2012]

اسلايدر جديد و زيبا همراه با افكتي جذاب

AW-Wow Slider

[afg_graph]

[RIGHT]دوستان ازتون خواهش می کنم توی این تاپیک سوال نپرسید. این تاپیک برای حل مشکلات نیست . اگر درخواستی دارید و چیزی مد نظرتون هست می تونید مطرح کنید تا قرار داده بشه اما اینجا کسی به مشکل شما رسیدگی نمیکنه ...

-----------------------------------------------------------------------------------------------------------------------------------!

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

باز هم چون حجم فایل یه خورده زیاد بود تصاویر رو به دو قسمت تقسیم کردم.[/RIGHT]

[afg_graph]

دانلود مجموعه ی 12 فاوآیکن به همراه تصاویر png آنها از شبکه های اجتماعی معروف ...

[afg_graph]

طرح لایه باز آواتار سفید. الگو گیری برای ساخت آواتارهای سایت ...

[afg_graph]

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

[afg_graph]

سلام ...

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


[CENTER]برای نمایش زنده کلیک کنید ...[/CENTER]

[afg_graph]

سلام

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

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


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

[afg_graph]

حرکت یک تصویر به دور یک شیء با استفاده از css و jquery :


سلام

اول پیش نمایش رو ببینید ...

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


[RIGHT]یه پوشه به اسم css بسازید -> یه فایل به اسم style.css هم بسازید -> کدهای زیر رو توی style.css قرار بدید.

[LEFT]#page-wrap { z-index: 20; width: 570px; margin: 20px auto; background: white; padding: 20px; position: relative; }


#unicorn { z-index: 60; position: absolute; top: 40px; left: 44%; width: 110px; display: block; }
[/LEFT]

تصاویر رو دانلود کنید و همونجایی که پوشه ی css هست استخراج کنید . دانلود تصاویر

یه پوشه به اسم js بسازید و فایلهای زیر رو توش بریزید .

example.js

jquery.circulate.js

jquery.easing.1.2.js


کدهای اچ تی ام ال رو هرکجا خواستید فراخوانی کنید.

<!-- بین تگ های head -->

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

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jq ... '></script>
<script type='text/javascript' src='js/jquery.easing.1.2.js'></script>
<script type='text/javascript' src='js/jquery.circulate.js'></script>
<script type='text/javascript' src='js/example.js'></script>

<!-- بین تگ های body -->

<img src="images/unicorn.png" alt="A Friggin Unicorn, yo." id="unicorn" />

<div id="page-wrap">

<img src="images/circulate.png" alt="Circulate" />

</div>

[/RIGHT][/CENTER]