۱۰ قطعه کد ساده و کاربردی CSS

CSS زبانی است که به صفحات وب‌سایت زیبایی می‌بخشد. با اینکه CSS به طور کلی زبان ساده‌ای است، اما مواردی هستند که نوشتن کد آن‌ها کمی دشوار است که البته با جست‌وجو کردن در منابع آنلاین، به سادگی می‌توان به آن کدها دسترسی پیدا کرد. در ادامه با سکان آکادمی همراه باشید تا با ۱۰ مورد از این‌گونه کدها بیشتر آشنا شوید.

چیدمان عمودی برای همه اِلِمان‌ها 
در بعضی موارد پیش می‌آید که می‌خواهید تا همهٔ عناصر صفحهٔ خود را به صورت عمودی مرتب کنید. این امکان در CSS3 به وجود آمده و شما می‌توانید کد آن را در ادامه مشاهده کنید:

.verticalcenter{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

استفاده از این تکنیک، همهٔ عناصر (از یک خط تنها گرفته تا چند پاراگراف یا یک div) را به صورت عمودی مرتب می‌سازد (لازم به ذکر است که CSS3 Transform در مرورگرهای Chrome ،Opera ،Safari ،Firefox و IE9 پشتیبانی می‌شود).

کشش یک اِلِمان به اندازهٔ ارتفاع کامل صفحه
در بعضی موارد خاص پیش می‌آید که می‌خواهید تا اندازهٔ یک اِلِمان را دقیقاً به اندازهٔ کامل صفحه‌ نمایش درآورید. تغییر سایز به صورت عادی، اندازه‌ٔ اِلِمان مد نظر را به اندازهٔ صفحه درمی‌آورد؛ بنابراین برای تغییر اندازهٔ اِلِمان به اندازهٔ کل ارتفاع، باید ابتدا بیشترین مقدار را به دو تگ html و body بدهیم:

html, body {
    height: 100%;
}

آن‌گاه اندازهٔ ۱۰۰ درصدی ارتفاع را به اِلِمان مورد نظر می‌دهیم:

div {
    height: 100%;
}

استایل‌های مختلف بر اساس فرمت فایل
در بعضی موارد پیش می‌آید که می‌خواهید ظاهری متفاوت به لینک‌های مختلف بدهید تا مشخص شود که نوع هر لینک چیست. با استفاده از کد زیر، می‌توانید یک آیکان قبل از لینک ایجاد کنید که البته این آیکان بسته به نوع لینک تغییر می‌کند:

a[href^="http://"]{
    padding-right: 20px;
    background: url(external.gif) no-repeat center right;
}

/* emails */
a[href^="mailto:"]{
    padding-right: 20px;
    background: url(email.png) no-repeat center right;
}
 
/* pdfs */
a[href$=".pdf"]{
    padding-right: 20px;
    background: url(pdf.png) no-repeat center right;
}

افکت سیاه و سفید کردن عکس‌ها به صورت Cross-Browser
افکت سیاه و سفید برای تصاویر سایت می‌تواند ظاهری عمیق‌تر، جذاب‌تر و مینیمالیستی‌تری به وب‌سایت شما ببخشد. در این تکه کد، با استفاده از SVG به تصاویر افکت سیاه و سفید می‌بخشیم:

<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>

و با استفاده از کد زیر آن را Cross-Browser می کنیم:

img {
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

متحرک ساختن گرادیانت
یکی از ویژگی‌های جذاب CSS، قابلیت اضافه کردن افکت‌های انیمیشن است. همه چیز در CSS قابلیت متحرک شدن را دارا است؛ از جمله رنگ پس‌زمینه، شفافیت، سایز و غیره اما گرادیانت‌ها این قابلیت را ندارند. با استفاده از قطعه کد زیر، می‌توانید این افکت را روی اِلِمان‌های سایت پیاده‌سازی کنید:

button {
    background-image: linear-gradient(#5187c4, #1c2f45);
    background-size: auto 200%;
    background-position: 0 100%;
    transition: background-position 0.5s;
}
    button:hover {
    background-position: 0 0;
}

عرض خودکار برای ستون‌های جدول با استفاده از CSS
اساساً ایجاد جداول کار بسیار دشواری است مخصوصاً هنگامی که بخواهید عرض هر ستون را تنظیم کنید؛ اما با استفاده از این کد، دیگر نیازی نیست تا از بابت تنظیم کردن عرض مناسب برای ستون‌ها نگران باشید:

td {
    white-space: nowrap;
}

نمایش سایهٔ div در یک یا دو طرف آن
اگر شما هم در اِلِمان‌های صفحهٔ خود از سایه استفاده می‌کنید، حتماً این کد را نیز امتحان کنید که فقط از دو طرف div سایه ایجاد می‌کند! برای این کار، ابتدا div مد نظر را با عرض و ارتفاع معین تعریف کنید، سپس با استفاده از پراپرتی after و کمی جابه‌جا کردن موقعیت، سایهٔ درست را ایجاد کنید. به عنوان نمونه کد داریم:

.box-shadow {
    background-color: #FF8020;
    width: 160px;
    height: 90px;
    margin-top: -45px;
    margin-left: -80px;
    position: absolute;
    top: 50%;
    left: 50%;
}

.box-shadow:after {
    content: "";
    width: 150px;
    height: 1px;
    margin-top: 88px;
    margin-left: -75px;
    display: block;
    position: absolute;
    left: 50%;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 8px 2px #000000;
    -moz-box-shadow: 0px 0px 8px 2px #000000;
    box-shadow: 0px 0px 8px 2px #000000;
}

Wrap کردن متون بلند
اگر متن خود را می‌خواهید در یک div که عرضش کمتر از عرض متن است جا بدهید، استفاده از این تکنیک برای شما کارآمد خواهد بود:

pre {
    white-space: pre-line;
    word-wrap: break-word;
}

ایجاد متن تار
برای ایجاد یک متن تار کافی است که به متن شفافیت بدهیم و سپس به آن یک سایه بدهیم. به عنوان نمونه داریم:

.blurry-text {
    color: transparent;
t    ext-shadow: 0 0 5px rgba(0,0,0,0.5);
}

انیمیشن Ellipsis با استفاده از CSS
برای ایجاد انیمیشن «سه‌ نقطه» با استفاده از CSS، می‌توانید از کد زیر استفاده کنید:

.loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    animation: ellipsis 2s infinite;
    content: "\2026"; /* ascii code for the ellipsis character */
}

@keyframes ellipsis {
    from {
        width: 2px;
    }

    to {
        width: 15px;
    }
}