• اطلاعیه ها

    • Saeed Fard

      برگزاری میتاپ وردپرسی   14/08/96

      بعد از اولین دوره همایش وردپرس در ایران اگر پیگیر اخبار وردپرس بوده باشید، حتما خبر برگزاری چندین میتاپ و جلسه متعدد وردپرسی را شنیده‌اید، یکی از بحث‌های اصلی که محور اصلی این میتاپ‌ها بوده است برگزاری وردکمپ بود که به طور جدی دنبال می‌شود. این میتاپ‌ها و جلسات توسط جمعی از فعلان حوزه وردپرس در کنار وردپرس‌پارسی برگزار می‌شد و مسائل مربوط به این حیطه و از جمله وردکمپ مورد بحث قرار می‌گرفت. این بار با رایزنی‌هایی که با تیم اصلی وردپرس داشتیم در بخش دوم این رویدادها قصد داریم که میتاپ‌ها و جلسات وردپرسی را به صورت آزاد برگزار کنیم تا تمامی علاقه‌مندان و دوست‌داران وردپرس فرصت حضور داشته باشند و با گردهمایی، جامعه کاملتری از دوست داران وردپرس بسازیم و از تجربیات یکدیگر استفاده کنیم.   بدیهی است که این رویدادها با رویکرد مثبت در جهت سود رسانی به جامعه وردپرس و افراد حاضر در آن برگزار می‌شود و برای تمامی علاقه‌مندان به وردپرس است. پس اگر یک کاربر معمولی وردپرس یا یک توسعه دهنده هستید می‌توانید در این رویدادها شرکت کنید. ما در ملاقات‌هایمان از موارد مختلف و کاربردی وردپرس صحبت می‌کنیم و علاقمند به توسعه هر چه بیشتر وردپرس در ایران هستیم. ما وردپرس را دوست داریم. عضویت در این گروه برای همه افرادی که مایل به پیوستن هستند بدون در نظرگرفتن توانایی‌ها، مهارت‌ها، وضعیت مالی و یا معیارهای دیگر باز و رایگان است. فضای میتاپ‌ها و جلسات ما دوستانه و آزادنه و دور از هرگونه تبعیض و رفتارهای زننده است. بر این اساس از تمامی دوستانی که علاقه‌مند به شرکت در میتاپ‌های وردپرس هستند دعوت می‌شود تا از طریق لینک زیر در سایت میتاپ اقدام به ثبت‌نام کنند و منتظر خبرهای برگزاری جلسات در آینده باشند . لینک ثبت نام و عضویت : https://www.meetup.com/Iran-WordPress-Meetup    
    • Saeed Fard

      نسخه جدید وردپرس پارسی رونمایی شد   05/09/96

      در پنجمین سال فعالیت از وردپرس پارسی و بعد از ارائه خدمات و سرویس‌های متفاوت به جامعه وردپرس ، برآن شدیم که نسخه جدید سایت وردپرس‌پارسی را بر اساس نیازها و خدمات جدیدی که قرار است ارائه شود طراحی و رونمایی کنیم ، از این جهت امروز یک ورژن از نسخه جدید رونمایی شد. در ادامه به معرفی بخش‌های مختلف سایت می‌پردازیم.     در دوره فعالیت گروه وردپرس‌پارسی بیش از 13 افزونه مختلف به صورت رایگان از طرف گروه برای وردپرس نوشته و منتشر شد که در مجموع دارای 100هزار نصب فعال روی سایت‌های وردپرسی است و 500هزاربار از مخزن پلاگین‌های وردپرس دانلود شده‌اند. به همین دلیل قسمت اول وب‌سایت مختص معرفی افزونه‌های گروه وردپرس‌پارسی طراحی شده است که در آن لیستی کامل از افزونه‌ها به همراه توضیحات در اختیار کاربران است . روند تولید افزونه‌های رایگان در جهت توسعه و بومی‌سازی بیشتر وردپرس از طرف وردپرس پارسی ادامه دارد و بزودی افزونه‌های دیگری به آرشیو اضافه خواند شد.   گروه وردپرس‌پارسی که تا به این‌جا تمرکز بیشتر خود را روی پشتیبانی رایگان از وردپرس گذاشته بود تا مشکلات کاربران وردپرس فارسی را حل کند که حاصل این فعالیت 18 هزار کاربر در انجمن با 43 هزار موضوع و 255 هزار سوال جواب است، قرار است من بعد در عرصه آموزش وردپرس وارد شود و از تخصص اعزای گروه در این حوزه نیز استفاده کند تا مرجعی کامل، اصولی و درست برای آموزش وردپرس ایجاد شود. قسمت دوم وب‌سایت مربوط به مقالات و آموزش‌هایی است که روی وردپرس پارسی از طرف اعضای آن ارسال می‌شود.   در دنیای وردپرس اتفاقات مختلفی در حال روی دادن است که دانستن آن‌ها میتونه برای ما جالب و جذاب باشه، برگزاری وردکمپ‌ها، معرفی سرویس‌ها و خدمات جدید و ... که از جمله اخبار مهم در این حوزه می‌توان برگزاری اولین همایش وردپرس ایران در سال 93 و همایش‌های دیگر مربوط به وردپرس و معرفی سیاره وردپرس و همینطور خبر برگزاری میتاپ‌های وردپرسی در ایران اشاره کرد ، در قسمت آخر وب‌سایت به معرفی موارد این چنینی پرداخته می‌شود و همینطور گزارش‌های مرتب از فعالیت‌ها، میتاپ‌ها و رویدادهای وردپرسی در آن ارائه می‌شود .   در ادامه این فعالیت‌ها بزودی شاهد اخبار جدیدی از وردپرس‌پارسی خواهید بود. شما نیز به عنوان یکی از کاربران این جامعه وردپرسی می‌توانید ما را در توسعه هر چه بیشتر وردپرس یاری کنید. لینک مستقیم خبر : http://wp-parsi.com/wpparsi-new-version  

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

این تاپیک رو آغاز کردم که تکنیک های css در اینجا قرار بگیره ،

اولین آموزش: تبدیل عکس رنگی به سیاه و سفید

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

ابتدا باید نام یک کلاس برای تصویر خود بنویسیم grasycale

کد html



<img src="my_picture.jpg" class="grayscale" />

نشانه گذاری css

حالا به کلاس grayscale استایل می دهیم تا در مرورگرها IE6,Firefox ,Webeki این عملیات اجرا بشه.



img.grayscale {

/* for Webkit browsere, Chrome 19+, Safari 6+ ... */
-webkit-filter: grayscale(1);

/* this is for Firefox 3.5+, Firefox mobile */
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'gs\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#gs");

/* for IE6+ */
filter: gray;
}

عکس ها

post-63-0-44562500-1372834271_thumb.jpg

post-63-0-64386700-1372834203_thumb.jpg

این تکنیک بصورت استاندارد در مرورگرهای Webkit یا بررسی کنند اجرا می شه اما برای اینکهدر فایر فاکس و اپرا (البته اپرا 2013 از این فیلتر پشتیانی نمی کنه اما نگران نباشید به اپرا هم اضافه می شه} هم اجرا بشه این استایل رو به کلاس بالا اضافه کنید.



-moz-filter: grayscale(1);
-ms-filter: grayscale(1);
-o-filter: grayscale(1);
filter: grayscale(1);

مترجم:خودم

منبع:www.codicode.com

10

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


لینک به پست

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

ایجاد دکمه های شبکه اجتماعی سه بعدی با css

نشانه گذاری HTML

تگ ها را به صورت زیر در html وارد کنید.

برای سفارشی کردن هر دکمه باید برای هر تگ li یک کلاس جداگانه نوشو

دمو



<ul>
<li><a href="#" class="twitter-small">Twitter</a></li>
<li><a href="#" class="facebook-small">Facebook</a></li>
<li><a href="#" class="pinterest-small">Pinterest</a></li>
<li><a href="#" class="gplus-small">GPlus</a></li>
<li><a href="#" class="rss-small">RSS</a></li>
<li><a href="#" class="dribbble-small">Dribbble</a></li>
<li><a href="#" class="linkedin-small">Linkedin</a></li>
<li><a href="#" class="flickr-small">Flickr</a></li>
<li><a href="#" class="stumble-small">Stumbleupon</a></li>
<li><a href="#" class="vimeo-small">Vimeo</a></li>
</ul>

نشانه گذاری CSS

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



a {
position: relative;
color: #ffffff;
text-decoration: none;
font-family: 'Oswald';
display: block;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
width: 60px;
text-align: center;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);

-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;

height:54px;
cursor:pointer;
overflow:hidden;

font: 0/0 a;
text-shadow: none;
color: transparent;
}

a:active {
-webkit-transform: translate(0, 3px);
-moz-transform: translate(0, 3px);
transform: translate(0, 3px);
}

این سه تا خواص آخر که به a:aktive داده شده باعث می شه نوشته پنهان بشه . قبلا از text-idnent که قدیمی بود استفاده می شده اما الان از CSS3 translate property استفاده می شه

در اینجا پس زمینه رنگ آیکن و سایه را برای آیکن ایجاد می کنیم

 a.twitter-small{
-webkit-box-shadow: 0px 6px 0px #2695BC;
-moz-box-shadow: 0px 6px 0px #2695BC;
box-shadow: 0px 6px 0px #2695BC;
}
a.twitter-small{background:#2CA9E1 url("images/twitter.png") no-repeat center center;}

a.twitter-small:active{ -webkit-box-shadow: 0px 2px 0px #2695BC;
-moz-box-shadow: 0px 2px 0px #2695BC;
box-shadow: 0px 2px 0px #2695BC;
}

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

مترجم: خودم

منبع:flashuser.net

ویرایش شده در توسط tazeh
11

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


لینک به پست

ایجاد یک دایره با CSS3

نشانه گذاری HTML


[size=2]

<div class="circle">
</div>[/size]

نشانه گذاری CSS

[size=2]

.circle {
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
border:1px solid #9ab7da;
height:200px;
width:200px;
background:#b3d4fc;
}[/size]

ترجمه: خودم

منبع: weebtutorials.com

ایجاد مطلب جداگانه در ستون

نشانه گذاری

HTML


[size=2]

<ul class="ColWrap2">
<li> I am in column 1 </li>
<li> I am in column 1</li>
<li> I am in column 1</li>
<li> I am in column 2 </li>
<li> I am in column 2 </li>
<li> I am in column 2 </li>
<li> I am in column 3</li>
<li> I am in column 3 </li>
<li> I am in column 3 </li>
<li> I am in column 4 </li>
<li> I am in column 4 </li>
<li> I am in column 4 </li>
</ul>[/size]

نشانه گذاری CSS


.ColWrap2 {
column-count: 4;
-moz-column-count: 4;
-webkit-column-count: 4;
}

مترجم:خودم

منبع:weebtutorials.com

7

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


لینک به پست

انیمیشن CSS3

CSS3 به ما اجازه می دهد تا اشکالی هندسی بسازیم و به صورت تدریجی آن را تغییر دهیم در این صورت می توانیم انیمیشن های جالبی بسازیم.

این در گذشته به طور معمول با جاوا اسکریپت و جی کوئری انجام می شد.

HTML


<div id="square">
<p> من مربعي هستم كه 180 درجه خواهم چرخيد </p>
</div>

CSS


#square {
padding:20px 0px;
width:100px;
background:#218ad8;
text-align:center;
-moz-transition: all 2s; /* Firefox 4 */
-webkit-transition: all 2s; /* Safari and Chrome */
-o-transition: all 2s; /* Opera */
}
#square:hover {
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);
width:500px;
color:white;
}
#square:hover p {
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);
}

همانطور که مشاهده کردید هنگامی که موس بر روی عنصر می رود یک چرخش ۱۸۰ درجه زیبا بر روی آن اعمال می شود.

حتی می توانیم با تعیین خواص بیشتر در لایه اصلی و hover و یا یکی از لایه این انتقال را جذابتر کنیم.

7

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


لینک به پست

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

گرادینت CSS3 - فایرفاکس

در این پست به شما نحوه استفاده درست از یک پس زمینه با گرادینت را تنها با استفاده از CSS نشان خواهیم داد.

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


#element {
background: -moz-linear-gradient(top, #92989b, #2a2a2a);
background: -webkit-gradient(linear, left top, left bottom, from(#92989b), to(#2a2a2a));
FILTER: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#92989b, endColorstr=#2a2a2a);
width:250px;
height:90px;
}

همانطور که می دانید برای اکثر خواص css3 باید پیشوندهایی را تعریف کنیم.

مرورگر فایرفاکس

دو نوع گرادینت radial و linear داریم.


background: -moz-linear-gradient(left, red, white);

رنگ قرمز از سمت چپ آغاز می شود و در نهایت به رنگ سفید می رسد.


background:-moz-linear-gradient(left top,red,white);

این گرادینت از سمت چپ آغاز می شود این در حالی است که اکثر رنگ در بالا قرار دارد.


background:-moz-linear-gradient(right 85deg, blue, white);
background:-moz-linear-gradient(10deg,red,white);

برای زاویه دادن از deg استفاده می کنیم.


background:-moz-linear-gradient(top,white 80%,orange,blue);

ColorStop درصد رنگ مورد نظر هست یا همان loction فوتوشاپ مانند کد فوق


background: -moz-linear-gradient(left, red, orange, yellow, green, blue);

مجموعه ای از رنگ ها را در بین کاما قرار می دهیم (رنگین کمان)


background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(/image/b12.jpg);

با گذاشتن عکس با RGB لایه شفاف بسازید

اما نوع دوم گرادینت در مرورگر فایرفاکس Radial



background:-moz-radial-gradient(red 30%,yellow 25%,black 50%);

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


background:-moz-repeating-linear-gradient(top left 30deg, red, blue 8px, white 5px, white 10px);

به این صورت می توانیم رنگ ها را در گرادینت تکرار کنیم.


background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 1

مانند مثال بالا به صورت Radial تکرار خواهد شد.

ویرایش شده در توسط reazah
7

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


لینک به پست

ساخت شکل موس اختصاصی هنگام هاور شدن

با این کدها هنگامی که موس روی div مورد نظر قرار بگیرد به شکل اختصاصی شما در می آید بدون هیچگونه اسکریپتی که باعث سنگین سدن سایت شود.

html


<div id="fav">Your Favourite HTML,CSS,JS Playground!</div>

css


body {
font-family: 'Helvetica Neue', Helvetica;
font-size: 13px;
}
div {
width: 100px;
margin: 20px auto;
background: #05C5CA;
padding: 50px 50px;
color: #fff;
font-weight: bold;
text-align: center;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,0.5);
-moz-box-shadow: 1px 2px 5px rgba(0,0,0,0.5);
box-shadow: 1px 2px 5px rgba(0,0,0,0.5);

cursor: url(http://cdn1.iconfinder.com/data/icons/bluecoral/Cursor.png),
auto;
}

4

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


لینک به پست

لودینگ gmail

post-63-0-86644400-1377920823_thumb.jpg

با این استایل شما می تونید براحتی لودینگ gmail رو درست کنید.

تکنیک های زیر در CSS 3 موجود هستش.

در این قسمت از خاصیت animation برای انیمیشن سازی ،

دستور @keyframes: اگر انیمیشنی که می خواهیم ایجاد کنیم ، 0 تا 100 باشد(شروع انیمیشن 0 و پایان اون 100) بوسیله ی این دستور می توانیم، یک استایل خاصی را به زمان مشخصی از انیمیشن بدهیمف مثلا زمانی که انیمیشن ما 75% در حال طی کردن هست ، ما یک استایل خاص به آن می دهیم.

توی مثال می تونید مشاهده کنید.

از خاصیت transform برای چرخش عنصر استفاده شده با مقدار rotateY ، یعنی چرخش در Y

از خاصیت animation-timing-function برای زمان بندی انیمیشن استفاده شده.

و

مقدارease-in : یعنی شروع آهسته انیمیشن

و

step-start یعنی : شروع گام به گام

، ease-out: یعنی پایان آهسته انیمیشن

دمو

html


<span class="folding">Loading...</span>
<h2>Created by <a href="http://codepen.io/jlong">J.W.Long</a></h2>
<p>But I think this creation should be spread as much as possible ! </p>

css


http://pastebin.ca/2441157

منبع:http://cssdeck.com/labs/gmail-loader

ویرایش شده در توسط Morteza
2

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


لینک به پست

وب سایتی برای ایجاد انیمیشن های css3 بدون کد نویسی

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

http://bouncejs.com/

3

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


لینک به پست

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


لینک به پست

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

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

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

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


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

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

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


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