PlaceHolder یک خاصیت Html می باشد که می تواند متنی را به صورت پیشفرض در input ها قرار دهید تا به محض کلیک کردن بر روی input ها این متن پیشفرض پاک شده و آماده ی تایپ کردن توسط کاربر شود .

کافیست کد زیر را در Css خود قرار دهید .

::-webkit-input-placeholder {
  color: #666666 !important;
}
::-moz-placeholder { 
  color: #666666 !important;
}
:-ms-input-placeholder {
  color: #666666 !important;
}
:-moz-placeholder {
  color: #666666 !important;
}

نکته : در کد بالا به جای 666666# میتوانید رنگ دلخواه خود را بنویسید ( هر 4 تا کد )

پخش اختصاصی

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

ترفندی بسیار جالب و ساده با استفاده از Css3 که میتوانید برای تیتر های وب سایت خود استفاده نمایید و طراحی خود را زیباتر نمایید …

برای انجام این کار ابتدا کد CSS زیر را به وب سایت خود اضافه نمایید :

.ribbon {
    width: 200px;
    font-size: 16px !important;
    font-family: tahoma;
    position: relative;
    background: #ba89b6;
    color: #fff;
    border-radius: 2px;
    text-align: center;
    padding: 1em 2em;
    margin: 0 0 3em;
}
.ribbon:before, .ribbon:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -1em;
    border: 1.5em solid #986794;
    z-index: -1;
}
.ribbon:before {
    left: -2em;
    border-right-width: 1.5em;
    border-left-color: transparent;
}
.ribbon:after {
    right: -2em;
    border-left-width: 1.5em;
    border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #804f7c transparent transparent transparent;
    bottom: -1em;
}
.ribbon .ribbon-content:before {
    left: 0;
    border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
    right: 0;
    border-width: 1em 1em 0 0;
}

و حال کد HTML زیر را در مکان دلخواه از وب سایت خود قرار دهید :

<div class="ribbon">
  <div class="ribbon-content">اسکریپت دات کام</div>
</div>

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

پخش اختصاصی

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

به این کار در اصطلاح Minify میگویند …

واضح است فشرده سازی یک مشکل جدید را پیش می آورد که همان از بین رفتن چیدمان ( قانون Child & Parent ) کد ها میباشد . پس باید به خاطر داشته باشید زمانی که کدنویسی شما به طور کامل انجام شد , قبل از آپلود کد بر روی سایت این فشرده سازی را انجام دهید .

برای فشرده سازی و همچنین خارج سازی کد از فشرده سازی , سایت معروفی را در اینجا به شما معرفی خواهم کرد که با ورود به آن میتوانید کد های HTML , CSS و JS خود را به راحتی Minify و Beautiful بسازید .

نکته : Beautiful همان قانون Child & Parent یا برعکس Minify میباشد .

معرفی وب سایت : http://minifycode.com

مشکل اصلی این 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# برای فضای خالی دور دایره میباشد که میتوانید به راحتی رنگ آن را به دلخواه عوض نمایید.

پخش اختصاصی

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

شما با استفاده از این ترفند میتوانید , یک خط زیبا به صورت Gradient در زمانیکه کاربران بر روی لینک ها Hover میکنند را داشته باشید .

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

و اما آموزش :

در ابتدا باید بگم این کار به صورت پیش فرض برای تگ های a یا همان لینک ها طراحی شده که شما به راحتی میتوانید آن را تغییر دهید .

برای این کار فقط کافیست کد های زیر را در css خود کپی نمایید :

a{
  position: relative;
  padding-bottom: 3px;
  text-decoration: none;
}

a:hover::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  height: 1px;
  width: 100%;
  background: #666;
  background: -webkit-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
  background: -moz-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
  background: -o-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
  background: -ms-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
  background: linear-gradient(to right, transparent 0%,#444 50%,transparent 100%);
 }

نکته 1 : برای تغییر رنگ میتوانید اعداد 444 در کد بالا که کد رنگی هگزا دسیمال میباشد را با رنگ دلخواه خود تغییر دهید .

نکته 2 : برای فاصله بین خط و نوشته میتوانید عدد 5px- را در کد های بالا تغییر دهید .

نکته 3 : کد بالا برای تمامی لینک های وب سایت میباشد . کاملا بدیهی است میتوانید به جای a در کد های بالا , تگی دیگر را جایگزین نمایید و یا مثلا به آنها کلاس  یا آی دی بدهید . مثلا vms. یا vms#

پخش اختصاصی

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

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

توجه فرمایید که بنده در این پست فقط راه های استاندارد رو بیان میکنم …

ترفند 1 : برای وسط چین کردن تگ های نوشتاری ( از جمله p,b,u,i,h1,h2,h3,h4,h5,h6 و … ) , کافیست در css به آن text-align:center دهیم .

<p style="text-align:center">Vahid Majidi</p>

ترفند 2 : برای وسط چین کردن تگ های Inline Level ( از جمله img,label,input,video,audio و … ) , کافیست آنها را در داخل تگ p ( پاراگراف ) انداخته و به تگ پاراگراف text-align:center دهیم .

<p style="text-align:center"><img src="vms.jpg" alt="Vahid Majidi"></p>

 ترفند 3 : برای وسط چین کردن تگ های Block Level ( از جمله div,table,hr و … ) , کافیست در Css ابتدا به آنها یک width مشخص داده , سپس margin-left و margin-right آن را Auto قرار دهیم .

<div style="width:200px;margin-left:auto;margin-right:auto">
    Vahid Majidi
</div>

 نکته 1 : اگر با اصطلاحات Block Level و Inline Level آشنایی ندارید , اینجا کلیک کنید .

نکته 2 : ترفند های بالا فقط قادر به وسط چین کردن در حالت افقی هستند و هنور راح حل مناسبی برای وسط چین کردن در حالت عمودی در طراحی وب معرفی نشده است بجز ترفند زیر …

ترفند 4 : در این ترفند هم قادر به وسط چین کردن در حالت افقی میباشید و هم در حالت عمودی …

به این ترتیب که شما میتوانید با دادن یک position به تگ مورد نظر و انجام مراحل زیر این کار را انجام دهید .

ابتدا یکی از مقادیر fixed , relative و یا absolute را انتخاب نموده که هر کدام کار خاصی را انجام میدند . مثلا اگر fixed را انتخاب نمایید , تگ شما در صفحه مرورگر ثابت و بی حرکت میشود . ( ترجیحا absolute استفاده نمایید )

حال اگر میخواهید به صورت افقی وسط چین نمایید , کافیست مقدار پراپرتی left را %50 انتخاب کرده , سپس margin-left را به مقدار نصف width تگ مورد نظر اما به صورت منفی مقدار دهی نمایید .

<div style="width:400px;position:absolute;left:50%;margin-left:-200px">
    Vahid Majidi
</div>

و یا اگر میخواهید به صورت عمودی وسط چین نمایید , کافیست مقدار پراپرتی top را %50 انتخاب کرده , سپس margin-top را به مقدار نصف height تگ مورد نظر اما به صورت منفی مقدار دهی نمایید .

<div style="height:400px;position:absolute;top:50%;margin-top:-200px">
    Vahid Majidi
</div>

 نکته 1 : ما اکثرا سایت را بر اساس پراپرتی Float در css میسازیم . به همین دلیل استفاده نادرست و کم دقتی در ترفند شماره 4 , میتواند دیزاین سایت را بهم ریخته و مشکلاتی پدید آورد .

نکته 2 : استفاده از تگ هایی مانند center و یا خاصیت align در html , منسوخ شده و 4 روش بالا بهترین روش ها برای وسط چین کردن میباشند .

نکته 3 : سعی کنید برای وسط چین کردن در حالت عمودی , به صورت چشمی و تجربی با دادن پراپرتی margin-top به تگ مورد نظر کار خود را انجام دهید و کمتر از ترفند 4 برای این کار استفاده نمایید ( مگر اینکه آشنایی کامل با Position ها داشته باشید ) .

آموزش : وحید مجیدی

پخش اختصاصی

برای این ساعت از سایت اسکریپت دات کام قصد دارم به آموزش این توابع از css بپردازم که امیدوارم مورد پسند کاربران گرامی قرار گیرد .

یکی از معایب filter ها , عدم پشتیبانی تمامی مرورگرها از این خاصیت می باشد . این خاصیت را در حال حاضر مرورگر های Google Chrome و Opera پشتیبانی میکنند و مرورگر های FireFox , Safari و IE از این خاصیت پشتیبانی نمیکنند .

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

و اما آموزش : 

1 – در ابتدا باید توجه داشته باشید که باید در css , هم خاصیت Filter را بنویسید و هم با پیشوند -webkit-

( Function  به معنی تابع می باشد که در ادامه آموزش خواهم داد )

filter:Function();
-webkit-filter:Function();

2 – طبیعتا برای همه ی عکس های یک وب سایت , دادن این توابع خیلی عقلانی نیست و باید به صورت سفارشی سازی , فقط بعضی از عکس ها از این توابع تبعیت کنند .

میتوانید از کلاس های html استفاده کنید .  به عنوان مثال :  

کد نویسی در سی اس اس
img.test{
    filter:Function();
    -webkit-filter:Function();	
}
---------------------------------------
کد نویسی در اچ تی ام ال
<img src="آدرس عکس" class="test">

تابع خاصیت GrayScale ( سیاه و سفید ) :  ( نکته : مقدایر بین %0 تا  %100 را میگیرد )

filter:grayscale(100%);
-webkit-filter:grayscale(100%);

تابع خاصیت sepia ( عکس های قدیمی ) :  ( نکته : مقدایر بین %0 تا %100 را میگیرد )

filter:sepia(100%);
-webkit-filter:sepia(100%);

تابع خاصیت saturate ( غلظت رنگ ها ) :  ( نکته : مقدایر بین %0 تا  %∞ را میگیرد )

filter:saturate(1000%);
-webkit-filter:saturate(1000%);

 تابع خاصیت blur ( تاری و شفافیت عکس ) :  ( نکته : مقدایر بین 0px تا 100px را میگیرد )

filter:blur(5px);
-webkit-filter:blur(5px);

تابع خاصیت hue-rotate ( تغییر رنگ بر اساس دایره رنگی ) :  ( نکته : مقدایر بین 0deg تا 360deg را میگیرد )

filter:hue-rotate(90deg);
-webkit-filter:hue-rotate(90deg);

 تابع خاصیت invert ( تبدیل رنگ ها به مکمل رنگشان ) :  ( نکته : مقدایر بین %0 تا %100 را میگیرد )

filter:invert(100%);
-webkit-filter:invert(100%);

 تابع خاصیت contrast ( کنتراست ) :  ( نکته : مقدایر بین %0 تا  %∞ را میگیرد )

filter:contrast(50%);
-webkit-filter:contrast(50%);

 تابع خاصیت brightness ( تاریکی و روشنایی ) :  ( نکته : مقدایر بین %0 تا  %∞ را میگیرد )

filter:brightness(200%);
-webkit-filter:brightness(200%);

 تابع خاصیت drop-shadow ( سایه ) :

توجه : عدد اول جابجایی سایه در جهت محور x , عدد دوم جابجایی سایه در جهت محور y , عدد سوم مقدار سایه و در آخر رنگ سایه  . ضمنا عدد ای اول و دوم میتوانند منفی هم باشند .

filter:drop-shadow(10px 10px 55px #bbb);
-webkit-filter:drop-shadow(10px 10px 5px #bbb);

دموی تمامی توابع

پخش اختصاصی

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

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

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

شما میتوانید به راحتی این خاصیت پیشفرض رو تغییر دهید و دیزاین خود را جایگزین کنید .

برای این کار به شیوه نامه (style.css) وبلاگ , وبسایت , قالب وردپرس و … خود رفته و در این فایل ( معمولا در همان خطهای اول ) این دو شیوه نامه را اضافه کنید .

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

::selection {
 background-color:#eee;
 color: #222;
}
::-moz-selection {
 background-color:#eee;
 color: #222;
}

 نکته : خاصیت background برای رنگ زمینه ( آبی پیشفرض ) و خاصیت color برای تغییر رنگ نوشته درون آن میباشد . 

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

پخش اختصاصی