ترفندی بسیار جالب و ساده با استفاده از 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>

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

پخش اختصاصی

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

کاربرد تابع 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);
}

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

پخش اختصاصی

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

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

این ترفند بدون هیچ کدنویسی خاص و حرفه ای می باشد و تنها از html و css3 در آن استفاده شده .

 دموی قالب

پخش اختصاصی

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

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