لطفا جاواسکریپت مرورگر خود را فعال سازید!

نحوه فعال سازی در کروم
  1. ابتدا باید اینکارو بگنید
  2. بعدش اونکارو
نحوه فعال سازی در فایرفاکس
  1. ابتدا باید اینکارو بگنید
  2. بعدش اونکارو
۱۰ قطعه کد ساده و کاربردی CSS

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

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

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

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

استفاده از این تکنیک همه عناصر (از یک خط تنها گرفته تا چند پاراگراف یا یک div) را بi صورت عمودی مرتب می سازد. لازم به ذکر است که CSS3 Transform در مرورگرهای Chrome 4 ، Opera 10 ، Safari 3 ، Firefox 3 و 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 می توانید از کد زیر استفاده کنید. می توانید از این کد به جای تصاویر GIF استفاده کنید.


.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;
    }
}

دمو: