CSS

آموزش CSS , آموزش CSS3 و تکنیکهای حرفه ای CSS


طراحان وبسایت از چه فریم‌ورک‌های سی اس اس ریسپانسیوی استفاده می‌کنند؟

علی طبیب زاده ۵۰ دیدگاه CSS , اصول طراحی وب سایت سه شنبه, ۱۲ام دی , ۱۳۹۱ 36950 بازدید

با ظهور پدیده طراحی وب واکنش‌گرا یا Responsive بسیاری از توسعه‌دهندگان و طراحان ماهر و خلاق به ساختن فریم‌ورک‌هایی برای آسان‌ و منظم‌تر کردن این تکنیک طراحی٬ پرداختند. در این نوع طراحی٬ عملیات ریاضی مربوط به تغییر سایز عناصر در صفحه ممکن است کسل کننده و ملال‌آور شوند و وقت زیادی را بی‌جهت از طراح وب‌سایت بگیرند. اما تعدادی فریم‌ورک ریسپانسیو وجود دارد که این فرآیند طراحی را برای طراحان و توسعه‌دهندگان آسان و سریع می‌کند. این فریم‌ورک‌ها تمام موارد مورد نیاز شامل گریدهای پیچیده٬ layoutها و مدیا کوئری‌ها را یک جا برای شما فراهم آورده تا طرح ریسپانسیو خود را به آسانی پیاده سازی کنید. در این مطلب تعدادی از این محبوب‌ترین فریم‌ورک‌ها که بیشتر توسط طراحان مورد استفاده قرار گرفته را معرفی خواهیم کرد.

Bootstrap

احتمالا نام بوتسترپ – Bootstrap را شنیدید. فریم‌ورکی که توسط چند تن از مهندسین توییتر ساخته شده است٬ اکنون به عنوان بیشترین فریم‌ورک مورد استفاده شناخته می‌شود. بوتسترپ با قابلیت‌ها و امکانات جامع زیادی ساخته شده است که باعث می‌شود طراحان بتوانند آن را هر گونه که در نظر دارند برای هر طرح مجزا تغییر دهند.

bootstrap

طراحان وبسایت از چه فریم‌ورک‌های سی اس اس ریسپانسیوی استفاده می‌کنند؟

ساخت Sticky Menu یا منوی چسبنده با استفاده از جی کوئری و سی اس اس ۳

امیر سروری ۷۰ دیدگاه CSS , JQuery یکشنبه, ۴ام تیر , ۱۳۹۱ 75274 بازدید

طراحی دکمه خرید

احتمالا تا کنون به منو های چسبنده یا Sticky Menu ها برخورد کرده اید . با توجه به افزایش ارتفاع وب سایتها به جهت افزایش اطلاعات موجود در صفحات و رایج شدن وب سایتهای تک صفحه ای یا Single Page  استفاده از منو های چسبنده رواج گرفته است . این نوع از منو می تواند دسترسی پذیری وب سایت را در این گونه از وب سایت ها افزایش دهد و باعث گشت و گذار بیشتری توسط مخاطب در وب سایت گردد . البته نوع حرکت و تکنیک استفاده شده نیز میتواند جالب باشد و به جلوه های وب سایت شما بیفزاید .

ساخت Sticky Menu یا منوی چسبنده با استفاده از جی کوئری و سی اس اس ۳

CSS های اختصاصی برای مرورگرهای اینترنت اکسپلورر – IE

امیر سروری ۴۱ دیدگاه CSS , HTML دوشنبه, ۲۵ام اردیبهشت , ۱۳۹۱ 50058 بازدید

 CSS های اختصاصی برای مرورگرهای اینترنت اکسپلورر -  IE - webtarget.ir

طراحان وب سایت در تلاشند تا بتوانند وب سایتهایی طراحی کنند تا در تمامی مرورگرها و رزولوشن های مختلف صفحات نمایش به درستی دیده شود ، این موضوع یکی از اصول طراحی صفحات وب است و هر طراح وب سایت به صورت ایده آل باید این موضوع را مد نظر خود قرار دهد .

CSS های اختصاصی برای مرورگرهای اینترنت اکسپلورر – IE

فایرباگ – Firebug – چیست و چگونه از فایر باگ استفاده کنیم ؟

مهدخت یافتیان ۷۵ دیدگاه CSS , HTML , اصول طراحی وب سایت شنبه, ۲۸ام آبان , ۱۳۹۰ 99357 بازدید

راهنمای , آموزش استفاده از فایر باگ – firebug – برای طراحان وب

firebug-webtarget.ir

فایر باگ – firebug – ، یک برنامه اپن سورس است و به عنوان ابزار اضافی یا کمکی ، برای توسعه وب استفاده می شود که مخصوص مرور گر موزیلا فایر فاکس – firefox – می باشد. این ابزار به طرز باورنکردنی قدرتمند است و با ابعاد وسیعی از امکانات و خصوصیات کاربردی ، برای هر طراح و یا توسعه دهنده وب مفید و مناسب است.
در واقع این امکان اضافی ( در مرور گر های دیگر با قابلیت کمتر نیز وجود دارد) یدک کش اسم مرور گر خود می باشد.فایر باگ دربین ابزار های دیگر( مانند ابزار بررسی و تست قالب و پروفایل اجرایی صفحات وب )، برای سرعت بخشیدن به روند کاری، زمان انجام عملیات آزمون و خطا را هنگام دی باگ کردن یا رفع اشکال صفحات وب کاهش می دهد.

فایرباگ – Firebug – چیست و چگونه از فایر باگ استفاده کنیم ؟

چینش صفحه – دو ستون – عرض متغیر

امیر سروری ۱۶ دیدگاه CSS , HTML , اصول طراحی وب سایت جمعه, ۱۴ام مرداد , ۱۳۹۰ 22711 بازدید

چینش صفحه با ساختار دو ستون با عرض متغیر درCSS

این نوع از چینش نمونه ای دیگر از چینش صفحه liquid است که با دو ستون ایجاد شده است . به این نکته توجه داشته باشید که این نوع از چینش همیشه به این سادگی صورت نخواهد گرفت و با اضافه شدن محتویات بیشتر مشکلات پیچیده ای اتفاق خواهد افتاد و رفع این مشکلات نیاز به تسلط و تخصص بسیاری دارد . در نهایت این نوع از چینش می تواند یکی از استاندارد ترین نوع چینش از نوع کاربرد پذیری برای کاربران باشد . تست نهایی این نوع از چینش در مرورگر ها و صفحات نمایش با رزولوشن های متفاوت قبل از بهره برداری نهایی الزامی خواهد بود .

چینش صفحه – دو ستون – عرض متغیر

آشنایی با گزینشگرها – selector – در CSS

امیر سروری ۳۲ دیدگاه CSS , اصول طراحی وب سایت یکشنبه, ۹ام مرداد , ۱۳۹۰ 28937 بازدید

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

با نظرات و پیشنهادات خود در مورد این مطلب و همچنین روند کلی حرکت این وبلاگ ما را در افزایش کیفیت مطالب و همچنین حرکت در مسیر درست یاری نمائید – با تشکر

آشنایی با گزینشگرها – selector – در CSS

بررسی موقعیت عناصر در یک سند HTML

امیر سروری ۱۴ دیدگاه CSS , HTML , اصول طراحی وب سایت سه شنبه, ۴ام مرداد , ۱۳۹۰ 18191 بازدید

نحوه چینش عناصر تمامی سندهای HTML به صورت درختی قابل تحلیل است . هر درجه و رتبه از این درخت معنایی مشابه با روابط انسانی دارد و می توان روابط بین این عناصر را با روابط انسانی مقایسه نمود . معانی مانند جد ، نسل ، والدین ، فرزند و خواهر و برادر – ancestors, descendants, parents, children and siblings – درک مفهوم موقعیت عناصر نسبت به یکدیگر در یک سند HTML می تواند کمک بزرگی برای درک بهتر مفاهیمی مانند گزینشگرها در CSS باشد .

بررسی موقعیت عناصر در یک سند HTML

چینش صفحه – دو ستون – عرض ثابت + لایه های گسترده

امیر سروری ۷ دیدگاه CSS , HTML , اصول طراحی وب سایت شنبه, ۲۵ام تیر , ۱۳۹۰ 15511 بازدید

چینش صفحه با ساختار دو ستون با عرض ثابت به همراه لایه های گسترده به وسیله CSS

این نوع از چینش در بسیاری از وب سایت ها مورد استفاده قرار میگیرد . با توجه روزلوشن های متغیر و صفحات نمایش گوناگون ، این نوع از چینش می تواند یک ساختار مدرن را برای وب سایت شما ایجاد نماید . با توجه نوع و تکنیک مورد استفاده در این نوع از چینش توضیحات بیشتری ارائه خواهد شد .

در این نوع از چینش یک بخش با نام wrapper اضافه شده است . این نوع از چینش ترکیبی از چینش fix و liquid است . قسمت های header , navigation , footer دارای ترکیبی از ساختار متغیر و ثابت هستند .

چینش صفحه – دو ستون – عرض ثابت + لایه های گسترده

چینش صفحه – دو ستون – عرض ثابت

امیر سروری ۷ دیدگاه CSS , HTML , اصول طراحی وب سایت سه شنبه, ۲۱ام تیر , ۱۳۹۰ 13402 بازدید

چینش صفحه با ساختار دو ستون با عرض ثابت به وسیله CSS

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

چینش صفحه – دو ستون – عرض ثابت

چینش صفحه – یک ستون – عرض متغیر

امیر سروری ۵ دیدگاه CSS , HTML , اصول طراحی وب سایت جمعه, ۱۷ام تیر , ۱۳۹۰ 8128 بازدید

چینش صفحه با ساختار یک ستون با عرض متغیر به وسیله CSS

در ابتدا می توانید نمونه ای از این ساختار را ملاحظه نمائید . استفاده از این ساختار که در اصطلاح به عنوان ساختار Liquid شناخته می شود با توجه به متغیر بودن عرض صفحات نمایش و رزولوشن های متفاوت تصویر در کامپیوتر های متفاوت بسیار متداول است و می توان گفت پایه تمام ساختارهای متغیر از این چینش به وجود خواهند آمد.

چینش صفحه – یک ستون – عرض متغیر

چینش صفحه – یک ستون – عرض ثابت

امیر سروری ۱۴ دیدگاه CSS , HTML , اصول طراحی وب سایت چهارشنبه, ۱۵ام تیر , ۱۳۹۰ 17654 بازدید

در این مجموعه آموزشی تلاش خواهد شد تا با ساختار و چینش های استاندارد و مختلف از صفحات وب سایت با استفاده از لایه ها آشنا شوید . مطالب به صورت کاملا کاربردی ، ساده و کوتاه ارائه خواهند شد و آشنایی اولیه با HTML و CSS مورد نیاز است. در این وبلاگ سعی شده است مطالب مورد نیاز برای یادگیری و درک این آموزشها نیز به صورت موازی ارائه شود. امیدوارم که این مجموعه آموزشی مورد توجه و استفاده شما دوستان و همراهان عزیز قرار گیرد . پیشنهادات و انتقادات سازنده شما می تواند در افزایش کیفیت مطالب بسیار تاثیر گذار باشد .

چینش صفحه – یک ستون – عرض ثابت

Outline , list-style – خلاصه نویسی دستورات CSS

امیر سروری بدون دیدگاه CSS , استاندارد وب سایت , اصول طراحی وب سایت چهارشنبه, ۸ام تیر , ۱۳۹۰ 9574 بازدید

خلاصه نویسی دستورات CSS – Outline , list-style


Outline properties – خواص و توانایی های Outline

element {

  outline-width: number+unit;

  outline-style: (numerous);

  outline-color: color || #hex || (rgb / % || 0-255);

}

Outline , list-style – خلاصه نویسی دستورات CSS

Border – خلاصه نویسی دستورات CSS

امیر سروری ۲ دیدگاه CSS , استاندارد وب سایت , اصول طراحی وب سایت جمعه, ۲۷ام خرداد , ۱۳۹۰ 8151 بازدید

خلاصه نویسی دستورات CSS – Border


Border properties – خواص و توانایی های Border

element {

  border-width: number+unit;

  border-style: (numerous);

  border-color: color || #hex || (rgb / % || 0-255);

}

Border – خلاصه نویسی دستورات CSS

Margin , Padding – خلاصه نویسی دستورات CSS

امیر سروری ۶ دیدگاه CSS , استاندارد وب سایت , اصول طراحی وب سایت دوشنبه, ۲۳ام خرداد , ۱۳۹۰ 12197 بازدید

خلاصه نویسی دستورات CSS – Margin / Padding


برای آشنایی بیشتر با خصوصیت Margin , Padding میتوانید مطلب مفهوم Box Model و آشنایی با مفاهیم Padding , Margin , Border را مطالعه نمائید

Margin , Padding properties – خواص و توانایی های پیش فرض برای Margin , Padding

element {

  margin-top: number+unit;

  margin-right: number+unit;

  margin-bottom: number+unit;

  margin-left: number+unit;

}

Margin , Padding – خلاصه نویسی دستورات CSS

Background – خلاصه نویسی دستورات CSS

امیر سروری ۲ دیدگاه CSS , استاندارد وب سایت , اصول طراحی وب سایت شنبه, ۲۱ام خرداد , ۱۳۹۰ 8026 بازدید

خلاصه نویسی دستورات CSS – Background


background properties – خصوصیات پس زمینه

element { 

  background-color: color || #hex || (rgb / % || 0-255);

  background-image:url(URI);

  background-repeat: repeat || repeat-x || repeat-y || no-repeat;

  background-position: X Y || (top||bottom||center) (left||right||center);

  background-attachment: scroll || fixed;

}

Background – خلاصه نویسی دستورات CSS

Font – خلاصه نویسی دستورات CSS

امیر سروری ۲ دیدگاه CSS , استاندارد وب سایت , اصول طراحی وب سایت چهارشنبه, ۱۸ام خرداد , ۱۳۹۰ 7972 بازدید

CSS Shorthand چیست ؟

CSS Shorthand یک مجموعه از تکنیک و دستورات است که به منظور خلاصه نویسی دستورات CSS مورد استفاده قرا میگیرد .

خلاصه نویسی دستورات CSS میتواند به ما کمک کند تا :

  • کنترل بیشتری بر روی اجزاء یک صفحه وب سایت داشته باشیم
  • یک فایل CSS تمیز و قابل خواندن داشته باشیم
  • حجم فایل CSS وب سایت کاهش یابد

این مطالب به صورت یک مجموعه ارائه خواهد شد و در مطالب بعدی با خلاصه نویسی دستورات برای خصوصیات دیگر ( Background , Border , Margin and Padding , Outline , List-style ) آشنا خواهیم شد .

Font – خلاصه نویسی دستورات CSS



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2017 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.