سی اس اس زبانی است که به صفحات وب سایت زیبایی می بخشد. با این که CSS به
طور کلی زبان ساده ای است اما مواردی هستند که نوشتن کد آن ها کمی دشوار
هست که البته با جست و جو کردن در منابع آنلاین به سادگی به آن کدها می
توان دسترسی داشت.
چیدمان عمودی برای همه عناصر
در بعضی موارد پیش می آید که شما می خواهید تا همه عناصر صفحه سایت خود را
به صورت عمودی مرتب کنید. این امکان در CSS3 به وجود آمده و شما می توانید
کد آن را در ادامه مشاهده کنید:
استفاده از این تکنیک همه عناصر (از
یک خط تنها گرفته تا چند پاراگراف یا یک div) را بi صورت عمودی مرتب می
سازد. لازم به ذکر است که CSS3 Transform در مرورگرهای Chrome 4 ، Opera 10
، Safari 3 ، Firefox 3 و IE9 پشتیبانی می شود.
کشش یک عنصر به اندازه ارتفاع کامل صفحه در بعضی موارد
خاص پیش می آید که شما می خواهید که اندازه یک عنصر را دقیقا به اندازه
کامل صفحه نمایش در آورید. تغییر سایز به صورت عادی اندازه عنصر را به
اندازه صفحه در می آورد. بنابراین برای تغییر اندازه عنصر به اندازه کل
ارتفاع باید ابتدا بیشترین مقدار را به دو تگ html و body بدهیم.
آنگاه
اندازه صد درصدی ارتفاع را به عنصر مورد نظر بدهیم:استایل های مختلف بر
اساس فرمت فایل
در بعضی موارد پیش می آید که می خواهید ظاهری متفاوت به لینک های مختلف
بدهید تا مشخص شود که نوع هر لینک چیست. با استفاده از کد زیر شما می
توانید یک آیکان قبل از لینک ایجاد کنید که البته این آیکان بسته به نوع
لینک تغییر می کند.افکت سیاه و سفید کردن عکس ها به صورت Cross-Browser
افکت سیاه و سفید برای تصاویر سایت می تواند ظاهری عمیق تر، جذاب تر و
مینیمالیستی تر به وب سایت شما ببخشد. در این تکه کد با استفاده از SVG به
تصاویر افکت سیاه و سفید می بخشیم:و با استفاده از کد زیر آن را
Cross-Browser می کنیم:متحرک ساختن گرادیانت
یکی از ویژگی های جذاب CSS قابلیت اضافه کردن افکت های انیمیشن است. همه
چیز در CSS قابلیت متحرک شدن را دارا است از جمله رنگ پس زمینه، شفافیت،
سایز و ... اما گرادیانت ها این قابلیت را ندارند. با استفاده از قطعه کد
زیر می توانید این افکت را روی عناصر سایت پیاده کنید. در واقع این کد
موقعیت پس زمینه دارای گرادیانت را به جای متحرک ساختن ایجاد می کند:عرض
خودکار برای ستوهای جدول با استفاده از CSS
اساسا ایجاد جداول کار بسیار دشواری است مخصوصا هنگامی که بخواهید عرض هر
ستون را تنظیم کنید. اما با استفاده از این کد دیگر نیازی نیست تا از بابت
تنظیم کردن عرض مناسب برای ستون ها نگران باشید:نمایش سایه div در یک یا دو
طرف از آن
اگر شما هم در عناصر صفحه خود از سایه استفاده می کنید، حتما این کد را
نیز امتحان کنید که فقط از دو طرف div سایه ایجاد می کند. برای این کار
ابتدا divیی با عرض و ارتفاع معین تعریف کنید و سپس با استفاده از کد after
و کمی جابجا کردن موقعیت، سایه درست را ایجاد می کنیم. کد زیر را مشاهده
کنید:Wrap کردن متون بلند اگر متن خود را می خواهید در یک div که عرضش کمتر
از عرض متن است جا بدهید استفاده از این تکنیک برای شما کارآمد خواهد
بود:ایجاد متن تار برای ایجاد یک متن تار کافی است که به متن شفافیت بدهیم و
سپس به آن یک سایه بدهیم.انیمیشن Ellipsis با استفاده از CSS
برای ایجاد انیمیشن سه نقطه با استفاده از CSS می توانید از کد زیر
استفاده کنید. می توانید از این کد به جای تصاویر GIF استفاده کنید.
sokanacademy.ir
Rated 5/5 based on 2331 reviews