• اطلاعیه ها

    • Saeed Fard

      آگهی استخدام برنامه نویس و پشتیبان وردپرس   13/12/95

      آگهی استخدام برنامه نویس و پشتیبان وردپرس
       
      2 نفر پشتیبان سایت وردپرسی
      ⁃ آشنا به برنامه نویسی قالب و پلاگین وردپرس 
      ⁃ توانایی راه اندازی سایت، قالب و افزونه های وردپرسی 
      ⁃ توانایی برنامه نویسی PHP در حد متوسط 
      ⁃ اطلاعات عمومی وب بالا 
      ⁃ توانایی پاسخگویی نوشتاری به سوالات انگلیسی با گرامر ساده 
      ⁃ آشنایی با HTML/CSS/jQuery 
      ⁃ دارای روحیه کار تیمی، خلاق، مسئولیت‌پذیر و پشتکار بالا ——— ۲ نفر برنامه نویس قالب وردپرس
      ⁃ تسلط به HTML/CSS/jQuery و Bootstrap
      ⁃ توانایی تبدیل HTML به قالب وردپرس
      ⁃ توانایی برنامه نویسی PHP و پلاگین نویسی وردپرس در حد متوسط
      ⁃ آشنایی به اصول سئو 
      ⁃ آشنایی با Git/subversion مزیت محسوب می‌شود.
      ⁃ دارای روحیه کار تیمی، خلاق، مسئولیت‌پذیر و پشتکار بالا ——— ۱ نفر طراح UI/UX
      ⁃ طراحی خلاقه وب سایت
      ⁃ طراحی با جدیدترین استایل‌های طراحی سایت
      ⁃ مسلط به تایپوگرافی انگلیسی و طراحی وب سایت انگلیسی
      ⁃ انتقاد پذیری و قبول بازخوردهای تیم و مشارکت با دیگر اعضاء تیم برای سرعت بخشیدن به فرایند انجام پروژه
      ⁃ آشنایی و درک HTML/CSS/jQuery
      ⁃ دارای روحیه کار تیمی، خلاق، مسئولیت‌پذیر و پشتکار بالا
      ⁃ امکان همکاری به صورت پروژه‌ای و دورکاری در این موقعیت شغلی فراهم است ——— مزایای کار در مجموعه گرودیا
      ⁃ تجربه ناب کار در سطح یک جهانی
      ⁃ محیط کار بسیار دوستانه و آرام
      ⁃ پرداخت های مناسب و سر وقت
      ⁃ کلاس های آموزشی داخلی به جهت بالا بردن دانایی و توانایی همه اعضا   از علاقه‌مندان و نیازمندان تقاضا می‌شود لطفا رزومه کاری خود را با قید موقعیت شغلی به ایمیل info@grodea.co ارسال نمایید.
    • Morteza

      سال 1396 خورشیدی مبارک   29/12/95

      سال 1396 خورشیدی مبارک

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

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


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

ایجاد دکمه های شبکه اجتماعی سه بعدی با 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

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


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

ایجاد یک دایره با 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

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


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

انیمیشن 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 و یا یکی از لایه این انتقال را جذابتر کنیم.

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


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

گرادینت 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

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


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

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

با این کدها هنگامی که موس روی 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;
}

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


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

لودینگ 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

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


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

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

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

http://bouncejs.com/

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


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

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


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

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

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

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

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


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

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

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


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