» » کد ساده و کاربردی css در طراحی سایت

مقالات

کد ساده و کاربردی css در طراحی سایت

کد ساده و کاربردی css در طراحی سایت

سی اس اس زبانی است که به صفحات وب سایت زیبایی می بخشد. با این که 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

کلمات کلیدی :

طراحی سایت
Rated 4.5/5 based on 421 reviews

Copyright 2006-2019 Web Designed By Nikan Engineers Group ©