css در طراحی سایت

ساخت منو Dorp Down افقی توسط Css

روش های مختلفی برای ایجاد منوی دراپ داون و یا آبشاری در طراحی وب وجود دارد که در این مقاله یکی از ساده ترین روش ها را آموزش خواهم داد. ساخت منو Dorp Down افقی توسط Css اول یک فایل به اسم index.php میسازیم و بعد یک فولدر به اسم css میسازیم و داخل فولدر css فایل style.css را میسازیم . برای ساختن منوهای drop down توسط css اول در فایل index.php در قسمت <body> <body/> کدهای زیر را قرار دهید : <ul> <li>Item 1</li> <li>Item 2 <ul> <li>Sub Item1</li> <li>Sub Item1</li> <li>Sub Item1</li> </ul> </li> <li>Item 3</li> <li>Item 4…

وسط چین کردن یک دایو div با position absolute

ترفندهای بسیاری در طراحی وب سایت برای وسط چین کردن دایو وجود دارد که در این مقاله یکی از روش ها را برای شما بیان می نمایم در صورتی که به دایوی مکان ثابت داده اید و قصد دارید دایو را در صفحه به صورت وسط چین قرار دهید از کد زیر جهت وسط چین کردن دایو خود در صفحه استفاده نمایید این کار را می توانید از طریق ویرایش فایل css خود انجام دهید. این کد css را برای هر تگ html دیگر نیز می توانید استفاده نمایید #content{ position:absolute; left:0; right:0; margin-left:auto; margin-right:auto; } سایر مقالاتی که ممکن…

طراحی نسخه ریسپانسیو سایت با استفاده از HTML و CSS

با توجه به افزایش میزان استفاده کاربران از تلفن همراه و موبایل برای وبگردی، طراحی سایت به صورت ریسپانسیو و سازگار با موبایل ضرورت پیدا کرده است و در صورتی که وب سایت شما در ابزارهای موبایلی نمایش مناسبی نداشته باشد رنک بسیاری از دست خواهد داد. زمانی که قالب معمولی سایت خود را طراحی نمودید هم اکنون زمان آن می باشد که قالب سایت سازگار با رزولوشن های مختلف طراحی نمایید. برای انجام این کار کافی است ابتدا کد زیر را بین دو تگ head خود اضافه نماییم: <meta name="viewport" content="width=device-width"> این کد به مرورگر دستور می دهد که…

فلکس باکس CSS3 برای طراحی وب سایت واکنشگرا

یادتون میاد قبلا مرتب کردن عمودی محتوا در وسط وب سایت چقد کار مشکلی بود؟ الآن دیگه با وجود فلکس باکس مجبور نیستیم اون همه مشقت و سختی رو تحمل کنیم.

ساخت دکمه های html توسط CSS برای سایت

برای ایجاد دکمه در صفحات وب سایت خود می توانید به جای استفاده از تصاویر از HTML و CSS استفاده نمایید. می توانید برای ایجاد دکمه های html و css از سایت های زیر کمک بگیرید: http://www.cssbuttongenerator.com/ http://www.bestcssbuttongenerator.com/ http://css-tricks.com/examples/ButtonMaker/ http://www.cssbutton.me/ http://cssgradientbutton.com/ که بهترین آنها از نظر دارکوب http://www.cssbuttongenerator.com می باشد که پس از طراحی دکمه کد آن را در تب get the code در اختیار شما قرار می دهد. استفاده از این نوع دکمه ها در صفحه به شما این امکان را می دهند تا به راحتی فونت و رنگ بندی و همچنین ظاهر دکمه مورد نظر خود را در…

ساخت منو وب سایت سازگار با موبایل توسط css

امروز سازگاری وب سایت طراحی شده با مرورگرهای موبایل بسیار مهم می باشد بنابراین تمامی طراحان سعی در سازگار سازی سایت با مرورگرهای موبایل دارند. در این مقاله به شما نحوه ایجاد منو سازگار با موبایل توسط html و css و بدون استفاده از جاوا اسکریپت آموزش داده خواهد شد. این منو قابلیت چپ چین، راست چین و وسط چین سدن را دارد. این منو با موسط اور بر روی منو باز می شود. همچنین این منو شامل مشخص کننده منو فعال می باشد. این منو در مرورگرهای موبایل و کامپیوتر سازگاری کامل دارد. هدف هدف این مقاله چگونگی تبدیل…

رفع مشکل ارتفاع یکسان ستون ها در طراحی وب

این مشکل تمامی طراحان وب بوده از زمانی که طراحی وب از صفحه بندی با table به div گرایش پیدا کرد و سوالی که برای اکثر طراحان مطرح بود آن بود که چگونه می توانم پس زمینه با 100% ارتفاع داشته باشم در لایه بندی چند ستونی. چندین روش برای حل این مشکل وجود دارد که در این بخش یک روش آن را بیان می نمایم که ممکن است در حالات زیر مورد استفاده پروژه شما واقع شود: تصاویر پس زمینه، بردرها، افکت های CSS3 مورد استفاده برای ستون های شما بیشتر از سه ستون ارتفاع و عرض انعطاف پذیر…

انتخاب رنگ برای وب سایت

در صورتی که از کد نویسی css استفاده کرده باشید با نحوه معین کردن رنگ ها در آن آشنا شده اید. دو نوع کد برای رنگ داریم کد های 6 رقمی به عنوان مثال #cc99ff و کدهای سه رقمی به عنوان مثال #c9f. رنگ های سازگار با مرورگر وب سایت رنگ های 3 رقمی هستند. که این سه رقم هر رقم آن دوبل در نظر گرفته می شود. به عنوان مثال کد رنگی به مانند #c9f کد اصلی آن این چنین است #cc99ff به عنوان مثال: White (#ffffff) is written #fff in shorthand Black (#000000) is written #000 Red (#ff0000) is #f00 Green (#00ff00)…

افکت سفید و سیاه (Grayscale) کردن تصاویر توسط CSS

برای انجام این کار کافی است کد CSS زیر را به تصویر مورد نظر خود اختصاص دهید. در این مثال فرض بر آن است که شما قصد دارید تصویر در حالت پیش فرض به صورت سفید و سیاه باشد: img { filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ } و برای آنکه تصویر با موس اور کاربر به حالت عادی و رنگی بازگردد می توانید از کد CSS زیر استفاده نمایید: img:hover { filter: none; -webkit-filter: grayscale(0); }

کد Css جهت انیمیشن کردن باکس

در سایت های امروزه برخی از کارهای انیمیشن در سایت رو میشه با کدهای Html5 و Css3 نوشت که برای مثال عکس بالا توسط css دور باکس ها به صورت انیمیشن درست شده و ترتیب درست کردن آنرا توضیح میدهیم, برای اینکه در سایت بتونیم باکس های Shadow درست کنیم, که وقتی Hover میکنیم روی باکس, و دور باکس به صورت انیمیشن و سایه های رنگی به وجود بیاریم از کدهای زیر استفاده نمایید : کد Css : *{ padding:0; margin:0;} #master { /* [disabled]background-color: #F00; */ height: 895px; width: 980px; position: relative; margin: 0 auto; } #apDiv1 { position:…