رفتن به مطلب

پست های پیشنهاد شده

این تاپیک رو آغاز کردم که تکنیک های 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

لینک به ارسال
  • 2 هفته بعد...

انیمیشن 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;
}

لینک به ارسال
  • 1 ماه بعد...

لودینگ 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
لینک به ارسال
  • 10 ماه بعد...

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

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

http://bouncejs.com/

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...