• چند ترفند ساده سی اس اس برای صرفه جویی در وقت

    ۱۳۸۹

    مرداد
    ۱۱:۱۱



    i33 csss چند ترفند ساده سی اس اس برای صرفه جویی در وقت

    tooltipساده با کمک سی اس اس :

    a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
    a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
    a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}

    حالا tooltip را به این شکل استفاده کنید :
    <a href="#">متن آزمایشی</a>

    تگهای html در هر مرورگر به شکل و استایل مختلفی نمایش داده میشوند . برای باز نشاندن این تگها به حالت اصلی این کدها را در فایل css قالب خود اضافه کنید :
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }

    /* remember to define focus styles! */
    :focus {
    outline: 0;
    }

    /* remember to highlight inserts somehow! */
    ins {
    text-decoration: none;
    }
    del {
    text-decoration: line-through;
    }

    /* tables still need 'cellspacing="0"' in the markup */
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

    قرار دادن یک div در وسط صفحه :
    .content {
    margin: 0 auto 8px;
    display: table;
    }

    .content div {
    display: table-cell;
    }

    <!--[if IE]>
    .content {
    display: block;
    text-align: center;
    }
    .content div {
    display: inline;
    zoom: 1;
    }
    <![endif]-->

    استایل نویسی لینکها بر حسب نوع لینک :
    /* external links */
    a[href^="http://"]
    {
    padding-right: 13px;
    background: url(external.gif) no-repeat center right;
    }

    /* emails */
    a[href^="mailto:"]
    {
    padding-right: 20px;
    background: url(email.png) no-repeat center right;
    }

    /* pdfs */
    a[href$=".pdf"]
    {
    padding-right: 18px;
    background: url(acrobat.png) no-repeat center right;
    }

    هک opacity برای تمام مرورگرها :
    selector {
    filter: alpha(opacity=60); /* MSIE/PC */
    -moz-opacity: 0.6; /* Mozilla 1.6 and older */
    opacity: 0.6;
    }

    حل مشکل تگ min-height در اینترنت اکسپلورر :
    /* for browsers that don't suck */
    .container {
    min-height:8em;
    height:auto !important;
    }

    /* for Internet Explorer - which of course sucks */
    /*\*/
    * html .container {
    height: 8em;
    }
    /**/

    حذف اسکرول بار در textarea ها در اینترنت اکسپلورر :
    textarea{
    overflow:auto;
    }

    تشکر از سایت همسایه تک طرح در جمع آوری این مجموعه

    sharethis چند ترفند ساده سی اس اس برای صرفه جویی در وقت


    اين مطلب را به اشتراک بگذاريد :

    اشتراک گذاري در گوگل ريدر اشتراک گذاري در خوشمزه اشتراک گذاري در فيس بوک دنبال کردن نظرات مطلب اشتراک گذاري در فرندفيد اشتراک گذاري در google buzz اشتراک گذاري در توييتر اشتراک گذاري در designflot ايميل کردن اين مطلب ارسال ایمیل به دوستان در Gmail

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

    2 نظر براي چند ترفند ساده سی اس اس برای صرفه جویی در وقت