گرادینت به معنای شیب یا سطح شیب دار است، در دنیای گرافیک به تصویری که ازطیف رنگ های مختلف به صورت شیب دار ایجاد می شوند و مرز مشخصی بین رنگ ها نباشد را گرادینت می گویند (این شیب ها می توانند عمودی، افقی ، مورب ، مدوّر و … باشند )

و اما آموزش :

در ابتدا باید عرض کنم این آموزش بر مبنای Jquery می باشد . پس شما حتما باید در وب سایت خود از کتابخانه جی کوئری استفاده نمایید .

حال کافیست کد های اسکریپتی زیر را به انتهای وب سایت خود اضافه نمایید :

<script>
var colors = new Array(
  [62,35,255],
  [60,255,60],
  [255,35,98],
  [45,175,230],
  [255,0,255],
  [255,128,0]);

var step = 0;
var colorIndices = [0,1,2,3];
var gradientSpeed = 0.002;

function updateGradient()
{
  
  if ( $===undefined ) return;
  
var c0_0 = colors[colorIndices[0]];
var c0_1 = colors[colorIndices[1]];
var c1_0 = colors[colorIndices[2]];
var c1_1 = colors[colorIndices[3]];

var vms = 1 - step;
var r1 = Math.round(vms * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(vms * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(vms * c0_0[2] + step * c0_1[2]);
var color1 = "rgb("+r1+","+g1+","+b1+")";

var r2 = Math.round(vms * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(vms * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(vms * c1_0[2] + step * c1_1[2]);
var color2 = "rgb("+r2+","+g2+","+b2+")";

 $('body').css({
   background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
    background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"}).css({
    background: "-ms-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"}).css({
    background: "linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"}).css({
    background: "-o-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"})
  
  step += gradientSpeed;
  if ( step >= 1 )
  {
    step %= 1;
    colorIndices[0] = colorIndices[1];
    colorIndices[2] = colorIndices[3];
    colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
    colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
    
  }
}
setInterval(updateGradient,1);
</script>

نکته 1 : برای تغییر رنگ ها به صورت RGB میتوانید اعدادی از 0 تا 255 در مقادیر آرایه colors وارد نمایید .

نکته 2 : برای افزایش یا کاهش سرعت میتوانید مقدار متغییر gradientSpeed را تغییر دهید .

دموی اسکریپت

دانلود فایل دموی اسکریپت

گرداوری و آموزش : وحید مجیدی

پخش اختصاصی

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

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

با ما در ادامه همراه باشید تا این مشکل را برای همیشه از بین ببریم …

برای این کار کافیست به تگ پدر که اکثرا همان باکس ما می باشد , کلاس vmsNowrap بدهیم :

<div class="vmsNowrap">وحید مجیدی صدر وحید مجیدی صدر وحید مجیدی صدر</div>

حال در css کد های زیر را کپی نمایید :

.vmsNowrap{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

نکته 1 : تگ پدر هر تگ دیگری میتواند باشد ( از جمله p,h1,pre,section و … )

نکته 2 : تگ پدر حتما باید دارای یک width مشخص باشد . مثلا 200px ( این width برای این است که نوشته های درون آن تگ در صورت بیشتر شدن از مثلا 200px به سه نقطه تبدیل شوند )

نکته 3 : شما میتوانید برای دیزاین باکس پدر , کلاس دیگری را به vmsNowrap اضافه نموده و پراپرتی های دلخواه دیگر از جمله width , height , border , padding , margin و … را به آن بدهید . مثلا :

<div class="box vmsNowrap">وحید مجیدی صدر وحید مجیدی صدر وحید مجیدی صدر</div>

و برای css آن :

.box{
    width:200px;
    height:50px;
    border:1px solid #ccc;
    margin:5px;
    padding:5px 10px;
}

دموی آموزش

دانلود فایل آماده آموزش

گرداوری و آموزش : وحید مجیدی

پخش اختصاصی

مشکل اصلی این Loading ها عدم پذیرش افزایش سایز و از آن بدتر , رنگ و کیفیت نامطلوب آن بود .

با روی کار آمدن css3 و Jquery راه های آسانتری برای ساخت آنها به وجود آمد که قصد دارم یک راه بسیار ساده و آسان با استفاده از Css3 را برای شما کاربران گرامی آموزش دهم …

در ابتدا کافیست کد زیر را در Html خود قرار دهید :

<div class="vms-loader"></div>

حال کد زیر را در css خود قرار داده :

.vms-loader {
  border: 16px solid #f6f6f6;
  border-radius: 50%;
  border-top: 16px solid #369;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation:loader 2s ease-in-out infinite;
}
@-webkit-keyframes loader{
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes loader{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

نکته : برای تغییر سایز میتوانید width و height را تغییر دهید و 369# برای رنگ آبی و f6f6f6# برای فضای خالی دور دایره میباشد که میتوانید به راحتی رنگ آن را به دلخواه عوض نمایید.

پخش اختصاصی

گرداوری و آموزش : وحید مجیدی 

در زمان های قدیم با استفاده از جاوا اسکریپت کدی برای ریزش برف را داشتیم که بسیار ساده و غیر واقعی به نظر میرسید . اما حال با وجود Css3 و جی کوئری میتوانیم افکت ریزش برف در وب سایت را به صورت حرفه ای تر و در فضای واقعی تر در وب سایت داشته باشیم .

و اما آموزش :

در ابتدا تگ html زیر را در داخل تگ body وب سایت خود قرار دهید. ( ترجیحا اولین خط بعد تگ body )

<div id="snow_vms"></div>

حال کد های زیر را در فایل css خود قرار دهید .

body {
	margin:auto;
	padding:0;
	min-height: 100vh;
	background: linear-gradient(#6490FF,#4567F1);
	background: #0e68b2;
	background: -moz-linear-gradient(-36deg,  #0e68b2 0%, #4d8fd1 100%);
	background: -webkit-linear-gradient(-36deg,  #0e68b2 0%,#4d8fd1 100%);
	background: linear-gradient(135deg,  #0e68b2 0%,#4d8fd1 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e68b2', endColorstr='#4d8fd1',GradientType=1 );
}
#snow_vms {
	position:fixed;
	margin:auto;
	left:-50%;
	bottom:0;
	width:150%;
	height:100%;
	overflow:hidden;
}
#snow_vms .snow{
	position:absolute;
	margin:auto;
	top:0;
	left:0;
	width:3px;
	height:3px;
	background:#fff;
	border-radius:100%;
	opacity:0.5;
	-webkit-animation:15s movesnow_vms linear infinite;
	-moz-animation:15s movesnow_vms linear infinite;
	animation:15s movesnow_vms linear infinite;
	animation-delay:-1s;
}
@-webkit-keyframes "movesnow_vms" {
	0%{opacity:0;}
	10%{opacity:0.5;}
	90%{opacity:0.5;}
	100%{-webkit-transform:translate3d(500px,50px,0);opacity:0;}
}
@-moz-keyframes movesnow_vms {
	0%{opacity:0;}
	10%{opacity:0.5;}
	90%{opacity:0.5;}
	100%{-moz-transform:translate3d(500px,50px,0);opacity:0;}
}
@keyframes movesnow_vms {
	0%{opacity:0;}
	10%{opacity:0.5;}
	90%{opacity:0.5;}
	100%{transform:translate3d(500px,50px,0);opacity:0;}
}

و در آخر نوبت اضافه نمودن کد جی کوئری وب سایت می باشد .

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

<script>
(function(){
  var Dsnow = '';
  for(var i=0;i<600;i++) {
    var y = Math.floor(Math.random()*100),
        x = Math.floor(Math.random()*100),
        s = Math.floor(Math.random()*10) + 0.5;
    Dsnow += '<div class="snow" style="top:'+y+'%;left:'+x+'%;-webkit-animation-duration:' + s + 's;"></div>';
  }
  $('#snow_vms').html(Dsnow);
})();
if(location.href.length != 100){
setTimeout(function(){
   window.location.reload(1);
}, 50000);
}
</script>

نکته بسیار مهم : کاملا بدیهی است که شما باید فایل کتابخانه Jquery را از وب سایت Jquery.com دانلود و به وب سایت خود اضافه نمایید .

دموی افکت

پخش اختصاصی

گردآوری : وحید مجیدی

اگر شما هم فکر میکنید که به وسیله css میتوان فقط چند شکل از جمله مربع , مستطیل , دایره و بیضی را ساخت , سخت در اشتباهید .

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

دایره :

#vms {
    width: 140px;
    height: 140px;
    background: red;
    border-radius: 70px;
}

 مربع : 

#vms {
    width: 100px;
    height: 100px; 
    background: red; 
}

مستطیل :

#vms {
    width: 150px;
    height: 75px; 
    background: red; 
}

بیضی :

#vms {
    width: 200px;
    height: 100px; 
    background: red;
    border-radius: 100px / 50px;
}

مثلث رو به بالا :

#vms {
    width: 0;
    height: 0;
    border-bottom: 120px solid red;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent; 
}

مثلث رو به پایین :

#vms { 
    width: 0;
    height: 0;
    border-top: 80px solid red;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
}

مثلث رو به چپ :

#vms {
    width: 0;
    height: 0;
    border-right: 100px solid red;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}

مثلث رو به راست :

#vms {
    width: 0;
    height: 0;
    border-left: 100px solid red;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}

چهار ضلعی غیر منظم :

#vms {
    height: 0; 
    width: 80px;
    border-bottom: 80px solid red;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
}

 الماس :

#vms{
    width: 80px;
    height: 80px;
    background: red;
    margin: 3px 0 0 30px;
    /* Rotate */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    /* Rotate Origin */
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

ذوزنقه :

#vms {
    width: 130px; 
    height: 75px;
    background: red;
    /* Skew */
    -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg);
    transform: skew(20deg);
}

دوازده نقطه ستاره :

#vms {
    height: 100px;
    width: 100px;
    background: red;
    position: absolute;
}
#vms:before {
    height: 100px;
    width: 100px;
    background: red;
    content:"";
    position: absolute;
    /* Rotate */
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}
#vms:after {
    height: 100px;
    width: 100px;
    background: red;
    content:"";
    position: absolute;
    /* Rotate */
    -moz-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    transform: rotate(-30deg);
}

شش نقطه ستاره :

#vms {
    position: absolute;
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 80px solid red;
}
#vms:after {
    content:"";
    position: absolute;
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent;
    border-right: 50px solid transparent; 
    border-top: 80px solid red;
    margin: 30px 0 0 -50px;
}

 هشت وجهی :

#vms {
    width: 100px; 
    height: 100px; 
    background: red;
}
#vms:before {
    height: 0;
    width: 40px;
    content:"";
    position: absolute;
    border-bottom: 30px solid red;
    border-left: 30px solid white;
    border-right: 30px solid white;
}
#vms:after {
    height: 0;
    width: 40px;
    content:"";
    position: absolute; 
    border-top: 30px solid red;
    border-left: 30px solid white; 
    border-right: 30px solid white;
    margin: 70px 0 0 0;
}

کادر سخنگو : 

#vms {
    width: 120px; 
    height: 80px; 
    background: red;
    position: absolute;
    border-radius: 10px;
}
#vms:before {
    content:"";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-right: 26px solid red;
    border-bottom: 13px solid transparent;
    margin: 13px 0 0 -25px;
}

تخم مرغ :

#vms {
    display:block;
    width:126px;
    height:180px;
    background-color:red;
    -webkit-border-radius:63px 63px 63px 63px / 108px 108px 72px 72px;
    border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}

ساخت کارکتر بازی pacman :

#vms {
    width: 0px;
    height: 0px;
    border-right: 60px solid transparent;
    border-top: 60px solid red;	
    border-left: 60px solid red;
    border-bottom: 60px solid red;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
}

دایره 2 رنگ :

#vms {
    width: 0;
    height: 0;
    border-bottom: 60px solid black;
    border-top: 60px solid black;
    border-left: 60px solid red;
    border-right: 60px solid red;
    border-radius: 60px;
}

ساخت یک قلب :

#vms { 
    position: relative;
}
#vms:before, #vms:after {
    position: absolute;
    content: "";
    left: 70px; top: 0;
    width: 70px;
    height: 115px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
#vms:after { 
    left: 0; 
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin :100% 100%;
}

توجه 1 : این اندازه ها و رنگ ها به صورت پیش فرض تنظیم شده اند و تمامی آنها را با توجه به قوانین خاص هر شکل میتوانید تغییر نمایید

توجه 2 : در بالا برای همه ی css ها از آی دی vms استفاده شده که طبیعتا میتوانید آن را تغییر دهید . ضمنا برای ساخت کد html این کد ها ( نمایش شکل ها ) باید به روش زیر در داخل تگ body عمل نمایید.

<div id="vms"></div>

پخش اختصاصی

گرداوری و آموزش : وحید مجیدی

حتما شما هم از پشت ضمینه های ایستا و یک نواخت خسته شده اید …

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

و اما آموزش :

1 – ابتدا در Css سایت خود به سراغ انتخابگر body رفته و هر چه خاصیت background در آن هست را پاک نموده و خصوصیات ریر را جایگزین کنید . ( یعنی به قسمت  { } body اضافه شود )

	background-image:url(images/cloud-vms.png);
	background-color:#369;
	-webkit-animation:vahid 60s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
	-moz-animation:vahid 60s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function:linear;
	-o-animation:vahid 60s;
	-o-animation-iteration-count:infinite;
	-o-animation-timing-function:linear;
	-ms-animation:vahid 60s;
	-ms-animation-iteration-count:infinite;
	-ms-animation-timing-function:linear;
	animation:vahid 60s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
	background-repeat:repeat-x;
	background-attachment:fixed;

2 – در همین فایل Css که قرار دارید , در زیر انتخاب گر body و پس از بسته شدن آن , خاصیت های زیر را وارد نمایید .

@-webkit-keyframes vahid{
	100%{background-position:-1366px 0}	
}
@-moz-keyframes vahid{
	100%{background-position:-1366px 0}	
}
@-o-keyframes vahid{
	100%{background-position:-1366px 0}	
}
@-ms-keyframes vahid{
	100%{background-position:-1366px 0}	
}
@keyframes vahid{
	100%{background-position:-1366px 0}	
}

3 – حال در روت ( root )  سایت خود پوشه ای به نام images بسازید و عکسی که در خط بعدی برایتان قرار داده ام را آپلود نمایید . ( بدیهی است اگر پوشه images از قبل وجود دارد , دیگر نیازی به ساختن نیست و فقط عکس را در آن آپلود نمایید )

دانلود عکس مربوطه ( بر روی لینک کلیک راست و گزینه ی save را بزنید )

نکات بسیار مهم : 

1 – اگر میخواهید سرعت ابر ها را تند تر و یا کند تر کنید , باید هر 5 تا 60s رو تغییر دهید . مثلا برای کندتر کردن , همه را روی 100s بگذارید .

2 – در قسمت اول و در خاصیت Background-color , میتوانید هر رنگی را که دوست دارید قرار دهید تا آسمان به همان رنگ درآید . مثلا اگر میخواهید آسمانی در شب داشته باشید , رنگ خاکستری تیره استفاده کنید .

یعنی :

background-color:#777;

3 – اگر از عکس ابر خوشتان نیامد و میخواستید عکس را عوض کنید , به راحتی میتوانید در خط اول , آدرس عکس را عوض و آدرس عکس خود را بدهید .

مثلا :

background-image:url(آدرس عکس مربوطه);

اما باید یک تغییر دیگر هم بدهید . باید پهنا ( width ) عکس انتخابی خود را جایگزین عدد 1366 بالا کنید .

4 – اگر میخواید عکس شما از راست به چپ حرکت کند , باید عددی منفی ( – ) بگذارید و اگر میخواهید از چپ به راست حرکت کند , عددی مثبت ( + ) قرار دهید .

دموی آماده آموزش 

گرداوری و آموزش : وحید مجیدی 

دانواد فایل آماده آموزش :

[sdm_download id=”1810″ fancy=”0″]