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

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

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

برای این کار کافیست به تگ پدر که اکثرا همان باکس ما می باشد , کلاس 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;
}

دموی آموزش

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

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

پخش اختصاصی

شما با استفاده از این ترفند میتوانید , یک خط زیبا به صورت 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#

پخش اختصاصی

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

در این آموزش قصد دارم ترفندی از css که باعث سایه دار شدن بالای وب سایت می باشد را در اختیار شما همراهان قرار دهم .

و اما آموزش :

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

body:before{
    content: "";
	position: fixed;
	top: -10px;
	left: 0;
	width: 100%;
	height: 10px;
	-webkit-box-shadow: 0px 0px 10px #000;
	-moz-box-shadow: 0px 0px 10px #000;
	box-shadow: 0px 0px 10px #000;
	z-index:100;
}

 نکات مهم :

* بهتر است کد بالا را در قسمت های بالایی فایل css خود قرار دهید .

* برای زیاد کردن مقدار سایه میتوانید سومین مقدار از خاصیت box-shadow را بیشتر کنید ( هر 3 box-shadow با پیشوند های مختلف را باید تغییر دهید )

* برای تغییر رنگ سایه میتوانید چهارمین مقدار از خاصیت box-shadow را بیشتر کنید ( هر 3 box-shadow با پیشوند های مختلف را باید تغییر دهید )

مثلا اگر میخواهید سایه ی  25 پیکسلی و رنگ قرمز داشته باشید :

	-webkit-box-shadow: 0px 0px 25px #f00;
	-moz-box-shadow: 0px 0px 25px #f00;
	box-shadow: 0px 0px 25px #f00;

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

پخش اختصاصی