امروز چهارشنبه ۱۳۹۷/۰۲/۰۵
2018/04/25 GMT +4:30
2018/04/25 GMT +4:30
دسته بندی
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
ایجاد بلاک و تصویر شفاف (Transparent) با استفاده از CSS3
امروزه در طراحی صفحات وب، استفاده از تصاویر شفاف و یا به اصطلاح transparent امری مرسوم است، به طور مثال ممکن است طراحان قالب وبلاگ ها یا سایت ها، در طراحی پس زمینه مطالب، آن را کمی شفاف کنند تا تصویری که در زیر بلاک مطلب قرار دارد به صورت نیمه شفاف دیده شود، استفاده از این تکنیک پیش تر با تصاویر png ممکن بود، اما مشکل همیشگی یعنی مرورگر غیر استاندارد و ضعیف اینترنت اکسپلورر (IE) قادر به نمایش این تصاویر با زمینه شفاف نبود، لذا طراحان وب به فکر جایگزینی برای این تکنیک برآمدند و از جاوا اسکریپت و بعدها css بدین منظور استفاده کردند، در این مطلب قصد داریم نحوه ایجاد تصاویر و بلاک های div شفاف را با css آموزش دهیم.
عنصر استانداردی که در css3 برای ایجاد لایه های شفاف تعریف شده، opacity نام دارد که به معنی تاری و کدری است، البته برای مرورگرهای قدیمی تر که از css3 پشتیبانی نمی کنند باید از مقادیر دیگری تحت عنوان ms-filter، filter، moz-opacity و khtml-opacity استفاده کنیم.
کد زیر مثال استاندارد css3 برای ایجاد بلاک یا تصویر شفاف است، عنصر مربوط به filter برای سازگاری با مرورگر اینترنت اکسپلورر 8 و مابعد آن است.
ایجاد بلاک و تصور شفاف با عنصر opacity در css3:
کد زیر مثال استاندارد css3 برای ایجاد بلاک یا تصویر شفاف است، عنصر مربوط به filter برای سازگاری با مرورگر اینترنت اکسپلورر 8 و مابعد آن است.
<style type="text/css">
img {
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
ایجاد بلاک و تصور شفاف، سازگار با تمام مرورگرها:
اگرچه خاصیت opacity در css3 به صورت استاندارد تعریف شده است، اما برخی از مرورگرهای قدیمی تر از آن به صورت کامل پشتیبانی نمی کنند، کلاس زیر نمونه ی تقریبا کاملی است که از هر جهت با اکثر مرورگرهای موجود، تطبیق دارد.
.transparent {
width: 100%;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}پیش نمایشتوضیح:
- خط اول کد (width: 100%) برای ورژن های قدیمی مرورگر اکسپلورر (5، 6 و 7) نیاز است (به جای آن می توانید از مقادیر zoom: 1 استفاده کنید).
- مقادیر ms-filter و filter برای ایجاد حالت شفافیت در اینترنت اکسپلورر کاربرد دارد.
- moz-opacity و khtml-opacity برای ورژن های قدیمی مرورگر فایرفاکس (Firefox) و سافاری (Safari) است.
- opacity نیز خاصیتی استاندارد در css3 است.
- مقادیر شفافیت برای مرورگر اکسپلورر به صورت اعدادی بین 0 تا 100 و برای سایر مرورگرها و حالت استاندارد css3، عددی بین 0 تا 1 است.
- به کار بردن این کلاس ممکن است از نظر سیستم های اعتبار سنجی که هنوز خود را با ویژگی های css3 تطبیق نداده اند، موجب نامعتبر تلقی شدن کد css گردد که البته چندان جدی نیست.
دسته بندی: 
مطالب بیشتر:» ساخت بلاک شناور عمودی با CSS
» مخفی کردن عناصر وب با CSS
» تنظیم موقعیت در وسط و حذف حاشیه ها با CSS
» تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر
» ساخت منوی آبشاری (عمودی) با تگ ul li و CSS
نظرات (۹ یادداشت برای این مطلب ارسال شده است)نویسنده: chmd
زمان: ۱۱:۵۱:۴۵ - تاریخ: ۱۳۹۱/۰۹/۱۱
سلام
می شه بگین این کد ها کجا قرار می گیرن؟
می شه بگین این کد ها کجا قرار می گیرن؟
سلام
کدهای CSS باید به صورت کلاس، آی دی یا استایل خطی به عناصر HTML نسبت داده شوند، این کار را برای وبلاگ باید در قسمت ویرایش کد قالب انجام دهید و البته باید با استایل نویسی CSS و کدهای HTML تا حدودی آشنا باشید، به طور مثال به یک بلاک DIV به صورت زیر می توان ویژگی های CSS را نسبت داد:
کدهای CSS باید به صورت کلاس، آی دی یا استایل خطی به عناصر HTML نسبت داده شوند، این کار را برای وبلاگ باید در قسمت ویرایش کد قالب انجام دهید و البته باید با استایل نویسی CSS و کدهای HTML تا حدودی آشنا باشید، به طور مثال به یک بلاک DIV به صورت زیر می توان ویژگی های CSS را نسبت داد:
<div style="width: 100%; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); filter: alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;"></div>
نویسنده: fatemeh
زمان: ۰۹:۵۲:۲۲ - تاریخ: ۱۳۹۱/۱۲/۱۷
سلام
خسته نباشید
سایتتون خیلی عالیه
یه سوال کلی
نرم افزاری وجود داره که ما رو تو طراحی قالب کمک کنه
و کار رو برامون راحتتر کنه؟
آخه اگه بخوایم جزء به جزء کار رو خودمون انجام بدیم خیلی سخته!
اگه میشه جوابم رو تو قسمت نظرات وبلاگم بزارید ممنون
خسته نباشید
سایتتون خیلی عالیه
یه سوال کلی
نرم افزاری وجود داره که ما رو تو طراحی قالب کمک کنه
و کار رو برامون راحتتر کنه؟
آخه اگه بخوایم جزء به جزء کار رو خودمون انجام بدیم خیلی سخته!
اگه میشه جوابم رو تو قسمت نظرات وبلاگم بزارید ممنون
سلام
تا جایی که اطلاع داریم، نرم افزاری که بدون کدنویسی با آن قالب حرف ای وبلاگ طراحی کنید وجود ندارد، اما برای موارد کم تر حرفه ای برنامه Artisteer و برای کدنویسی حرفه ای، نرم افزار Adobe Dreamweaver پیشنهاد می شود.
تا جایی که اطلاع داریم، نرم افزاری که بدون کدنویسی با آن قالب حرف ای وبلاگ طراحی کنید وجود ندارد، اما برای موارد کم تر حرفه ای برنامه Artisteer و برای کدنویسی حرفه ای، نرم افزار Adobe Dreamweaver پیشنهاد می شود.
نویسنده: elaheh
زمان: ۲۳:۴۳:۰۸ - تاریخ: ۱۳۹۲/۰۲/۲۰
سلام
یک سوال ازتون داشتم
من برای اینکه ستون قالبم آروم آروم از حالت شفاف به حالت عادی برگرده از کد
اما این کد تو فایرفاکس جواب نمیده
چیکار کنم؟
یک سوال ازتون داشتم
من برای اینکه ستون قالبم آروم آروم از حالت شفاف به حالت عادی برگرده از کد
webkit-transitionاستفاده میکنم
اما این کد تو فایرفاکس جواب نمیده
چیکار کنم؟
سلام
پیشوند webkit برای مرورگرهای وابسته به شرکت Apple مانند safari است، برای سایر مرورگرها باید از transition خالی نیز در کنار آن استفاده کنید، مثال:
پیشوند webkit برای مرورگرهای وابسته به شرکت Apple مانند safari است، برای سایر مرورگرها باید از transition خالی نیز در کنار آن استفاده کنید، مثال:
<style type="text/css">
.transition{
width:100px;
height:100px;
background:#999;
transition:width 1s, height 1s;
-webkit-transition:width 1s, height 1s; /* Safari */
}
.transition:hover{
width:200px;
height:200px;
}
</style>
<div class="transition"></div>
نویسنده: hossein
زمان: ۱۴:۰۶:۲۶ - تاریخ: ۱۳۹۳/۰۸/۱۲
سلام و خسته نباشید
من این روش رو روی منوی کشویی استفاده کردم میخوام وقتی منو باز میشه پشت منو معلوم بشه اما با این روش فقط رنگ پس زمینه منو که مشکیه به رنگ خاکستری تبدیل میشه و هیچ شفافیتی نداره اگه میشه راهنمایی کنید ممنون.
من این روش رو روی منوی کشویی استفاده کردم میخوام وقتی منو باز میشه پشت منو معلوم بشه اما با این روش فقط رنگ پس زمینه منو که مشکیه به رنگ خاکستری تبدیل میشه و هیچ شفافیتی نداره اگه میشه راهنمایی کنید ممنون.
سلام
این روش در صورت استفاده صحیح بر روی تمام تگ های HTML قابل اعمال است و از این جهت محدودیتی وجود ندارد، ممکن است رنگ پس زمینه منوی شما از تگ دیگری ناشی شده باشد و ویژگی شفافیت به اشتباه به تگی دیگر داده شده باشد (سورس HTML صفحه + استایل CSS باید بررسی شود).
این روش در صورت استفاده صحیح بر روی تمام تگ های HTML قابل اعمال است و از این جهت محدودیتی وجود ندارد، ممکن است رنگ پس زمینه منوی شما از تگ دیگری ناشی شده باشد و ویژگی شفافیت به اشتباه به تگی دیگر داده شده باشد (سورس HTML صفحه + استایل CSS باید بررسی شود).
نویسنده: مرتضی
زمان: ۱۸:۲۶:۳۳ - تاریخ: ۱۳۹۳/۰۸/۱۷
با سلام و خسته نباشید
من یه div دارم که opacity: 0.5 بهش میدم تا پشت این div دیده بشه.
اما همه ی محتوای داخل این div هم کم رنگ میشن. یعنی میخوام رنگ متن های داخل این div با opacity: 1 باقی بمونه.
مثلا یه span داخل اون div میسازم و opacity: 1 میدم ، اما عمل نمیکنه.
ممنون میشم راهنماییم کنید.
من یه div دارم که opacity: 0.5 بهش میدم تا پشت این div دیده بشه.
اما همه ی محتوای داخل این div هم کم رنگ میشن. یعنی میخوام رنگ متن های داخل این div با opacity: 1 باقی بمونه.
مثلا یه span داخل اون div میسازم و opacity: 1 میدم ، اما عمل نمیکنه.
ممنون میشم راهنماییم کنید.
سلام
متاسفانه این قابلیت چندان انعطاف پذیر نیست!، به نظر برای منظور شما استفاده از تصاویر png راه حل معقول تری است.
متاسفانه این قابلیت چندان انعطاف پذیر نیست!، به نظر برای منظور شما استفاده از تصاویر png راه حل معقول تری است.
نویسنده: مرتضی
زمان: ۱۱:۴۱:۵۸ - تاریخ: ۱۳۹۳/۰۸/۱۸
درود . . . بله درسته ، تصاویر png بهتره.
خیلی ممنون از راهنماییتون. یا علی
خیلی ممنون از راهنماییتون. یا علی
نویسنده: viva
زمان: ۲۲:۴۸:۱۸ - تاریخ: ۱۳۹۴/۰۴/۰۸
با سلام
رفیق من یه وبلاگ ساختم که میخوام ببنیش
رفیق من یه وبلاگ ساختم که میخوام ببنیش
wowservers.blogfa.comاگه نگاه کنی پس زمینه نوشته ها آبی هستش کدی میخوام که پس زمینه نوشته ها حالت کمرنگ بشه حالت شیشه ای که تصویری که به عنوان پس زمینه اصلی هستش پشت نوشته ها دیده بشه توی سایتای زیادی رفتم اما همش برای کمرنگ کردن تصاویر بوده نه رنگ
سلام
نمونه کد زیر را در قسمت ویرایش کد قالب وبلاگ، بین دو تگ style و در انتها قرار دهید (در قسمت ابتدایی کدها تگ style مشخص است):
نمونه کد زیر را در قسمت ویرایش کد قالب وبلاگ، بین دو تگ style و در انتها قرار دهید (در قسمت ابتدایی کدها تگ style مشخص است):
.bodyposts{
color:#000000;
background:rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
background:rgba(204, 204, 204, 0.5);
}نکته: دقت کنید که کد بالا را باید قبل از بسته شدن تگ style درج کنید، یعنی دقیقا قبل از قسمت زیر:</style>
<script language="javascript">
function GetBC(lngPostid)
نویسنده: خودمم
زمان: ۱۰:۲۳:۴۲ - تاریخ: ۱۳۹۴/۱۰/۳۰
سلام. خسته نباشید
من برای طراحی سایتم خیلی از سایت شما کمک گرفتم
موفق و پیروز باشید
من برای طراحی سایتم خیلی از سایت شما کمک گرفتم
موفق و پیروز باشید
نویسنده: علیرضا نیکپور
زمان: ۰۱:۴۲:۵۰ - تاریخ: ۱۳۹۵/۰۷/۲۳
سلام
واقعا دستتون درد نکنه بابت مطالب آموزنده و پر محتوایی که تو سایت میزارید من یه دوماهی میشه طراحی وب رو شروع کردم یه سوال در مورد رنگ آمیزی بلاک و صفحات دارم دارم ما چطور میتونیم رنگهای یک بلاک رو برجسته کنیم منظورم اینه که فلان قسمت بلاک مشکی باشه ولی اونطرف بلاک رنگ مشکی روشن تر به نظر بیاد
واقعا دستتون درد نکنه بابت مطالب آموزنده و پر محتوایی که تو سایت میزارید من یه دوماهی میشه طراحی وب رو شروع کردم یه سوال در مورد رنگ آمیزی بلاک و صفحات دارم دارم ما چطور میتونیم رنگهای یک بلاک رو برجسته کنیم منظورم اینه که فلان قسمت بلاک مشکی باشه ولی اونطرف بلاک رنگ مشکی روشن تر به نظر بیاد
لطفا به لینک زیر مراجعه نمائید:
http://css3gen.com/box-shadow
آگهی
مطالب «وبگو» به صورت تألیفی تهیه می شود، کپی از آن به هر نحو بدون ذکر منبع و درج لینک مستقیم، غیر اخلاقی و غیر قانونی است.