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

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

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

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

دموی آموزش

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

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

پخش اختصاصی

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

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

درجدول زیر و در قسمت مثال , بیشتر از تگ p استفاده شده و توضیحات آن برای همان تگ p میباشد . بدیهی است که شما میتوانید تمامی تگ های دیگر را به جای تگ p جایگزین و استفاده نمایید .

دانلود فایل pdf آموزش و معرفی کامل انتخابگرها در CSS به صورت فارسی

پخش اختصاصی

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

css3 جدیدترین ورژن از css هست که چند سالی میشه که با اومدنش , دست و بال طراحان وب را در طراحی یک سایت حرفه ای باز کرده است .

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

وب سایت 1 : این وب سایت معروفترین وب سایت در این زمینه می باشد

آدرس وب سایت : www.css3generator.com

وب سایت 2 :

آدرس وب سایت : www.css3maker.com

وب سایت 3 :

آدرس وب سایت : www.enjoycss.com

وب سایت 4 :

آدرس وب سایت : www.css3clickchart.com

وب سایت 5 :

آدرس وب سایت : www.css3.me

وب سایت 6 :

آدرس وب سایت : www.css3.mikeplate.com

وب سایت 7 :

آدرس وب سایت : www.cssportal.com

پخش اختصاصی

نویسنده : وحید مجیدی

عنوان کتاب: آموزش کاربردی HTML 5.0 &CSS 3.0

ترجمه و تالیف :محمد مرادی

ناشر: انتشارات پندار پارس

توضیح کلی درباره کتاب:

*طراحی با استانداردهای جدید وب

*ایجاد افکت های تصویری و انیمیشن بدون استفاده از فلش

*ایجاد صفحات وب معنایی و ساختمندتر

*ذخیره اطلاعات در صفخات وب

*افزایش کارایی طراحی

سرفصل ها :

فصل 1: معرفی CSS  و HTMLS

فصل 2: آشنایی اولیه با HTML 5 و CSS3

فصل 3:ترسیم بوسیله عنصر <CANVAS>

فصل 4: ایجاد افکت کشیدن و رها کردن (DRAG & DROP)

فصل 5:کنترل فرم

فصل 6:ویرایش درجا (INLINE EDITING)

فصل 7:استفاده از فایل های صوتی و تصویری (VIDEO AND AUDIO)

فصل 8: ذخیره اطلاعات (WEBSTORAGE)

فصل 9: معرفی CSS

فصل 10: ایجاد افکت GRADIENT و پس زمینه چندگانه در CSS3

فصل 11:ویژگی TRANSITIONS و TRANSFORMS در CSS

فصل 12: کار بافونت ها و طراحی های چند ستونی

فصل 13:تمرین پایانی

پخش اختصاصی: اسکریپت دات کام

گردآوری: نیلوفر معماریان محمدی 

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

کاربرد تابع calc() در مواقعی است که نیاز به تلفیق واحدهای اندازه گیری نسبی و مطلق به منظور ایجاد یک طرح انعطاف پذیر می باشد.

در این تابع میتوان 4 عمل اصلی ریاضی را اعمال و از آنها استفاده نمود .

برای استفاده از این تابع کافیست در مقابل خاصیت هایی مانند width , height , margin , padding و font-size از این تابع استفاده نمود .

در داخل پرانتز این تابع میتوانید از 4 عمل اصلی + , – , / و * استفاده نمایید .

برای یک مثال ساده : فرض کنید میخواهید پهنای یک div با کلاس vms که %100 والد خود است را در css کدنویسی کنید :

div.vms{
	width:100%;	
}

حال شاید میخواهید از %100 , مقدار 50px کمتر باشد . طبیعتا چون دو واحد اندازه گیری مجزا هستند , بدون دانستن این تابع نمیتوان کاری کرد .

اما از هم اکنون شما میتوانید با استفاده از این تابع , این کار را به صورت زیر انجام دهید :

div.vms{
	width:calc(100% - 30px);
}

 و یا به عنوان مثالی دیگر : 

سه div که دارای کلاس های یکسان vms هستند ومیخواهیم همیشه دارای طولی به اندازه یک سوم والد خود داشته باشند .

در html :

<div class="vms">A</div>
<div class="vms">B</div>
<div class="vms">C</div>

در css :

div.vms{
	width:calc(100% / 3);
}

برای پیش نمایش کلیک کنید

پخش اختصاصی

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

امروز قصد دارم یک ترفند از کدنویسی Css3 رو بهتون آموزش بدم تا بتونید به راحتی عکس های رنگی رو تبدیل به عکس های سیاه سفید بکنید و به همین وسیله افکت های بسیار جذابی رو خلق کنید .

برای این کار شما نیاز به یک تکه کد Css3 و یک تگ عکس دارید …

ابتدا در قسمت html و در داخل تگ <body> باید با استفاده از تگ <img> یک عکس رو در بخشی دلخواه از سایت خودتون درج کنید.

<img src="test.jpg" class="vahid"/>

همین طور که میبینید , من کلاسی هم به نام وحید ( به صورت دلخواه ) به این تگ دادم . به زبان ساده, دادان یک کلاس به یک تگ به این معنی میباشد که ما اسمی رو برای این تگ انتخاب میکنیم تا بعدا در داخل کدنویسی Css صداش بزنیم تا باهم هماهنگ بشن .

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

برای انتخاب روش داخلی , شما باید در داخل فایل html , در بین دو تگ <head> و <head/> , دو تگی به نام <style> و <style/> بنویسید.

ما تمامی دستورات Css رو باید داخل این دو تگ استایل بنویسیم .

حال میریم سراغ نوشتن کد Css :

قبلا برای تگ img اسمی به نام vahid انتخاب کردیم . حال نوبت این هست که اینجا همون اسم رو صدا بزنیم و کدهای مربوط به سیاه سفید کردن رو بنویسیم

img.vahid{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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>#grayscale");

filter: gray;

-webkit-filter: grayscale(100%);

filter: grayscale(100%);

}

 نکته : این کد ها برای ورژن های کروم , سافاری , فایرفاکس بالاتر از 10 و اکسپلورر 6 تا 9 میباشد . ( تقریبا همه مرورگرها )

نمونه فایل به صورت آماده :

[sdm-download id=”932″ fancy=”0″]

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

وحید مجیدی – اسکریپت دات کام

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