• ۱۳ هک css کاربردی و رایج

    ۱۳۹۰

    اردیبهشت
    ۰۹:۱۱



     

     

    ccsss 13 هک css کاربردی و رایج

    13 هک کاربردی و مفید css

    1-اضافه کردن سایه به متن

    .text-shadow {
    text-shadow: 2px 2px 4px #666;
    }

     

    2-اضافه کردن border با استفاده از عکس

    #border-image-style {
    border-width:15px;
    /* 3 types of border exist repeated, rounded or stretched (repeat / round / stretch) */
    -moz-border-image:url(border.png) 3030stretch ;
    -webkit-border-image:url(border.png) 3030stretch;
    }
    3-اضافه کردن سایه به borders و عکسها
    box-shadow: 0px3px3pxrgba(0,0,0,0.2);
    -moz-box-shadow: 0px3px3pxrgba(0,0,0,0.2);
    -webkit-box-shadow: 0px3px3pxrgba(0,0,0,0.2);
    4-اضافه کردن گوشه های گرد
    .round{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; /* future proofing */
    -khtml-border-radius: 10px; /* for old Konqueror browsers */
    }
    5-اضافه کردن گوشه های گرد فردی
    (استفاده از ۴ مختصات برای گرد کردن)
    #Bottom_Right {
    height: 65px;
    width:160px;
    -moz-border-radius-bottomright: 50px;
    border-bottom-right-radius: 50px;
    }
    #Bottom_Left {
    height: 65px;
    width:160px;
    -moz-border-radius-bottomleft: 50px;
    border-bottom-left-radius: 50px;
    }
    #Top_Right {
    height: 65px;
    width:160px;
    -moz-border-radius-topright: 50px;
    border-top-right-radius: 50px;
    }
    #Top_Left {
    height: 65px;
    width:160px;
    -moz-border-radius-topleft: 50px;
    border-top-left-radius: 50px;
    }
    6-اضافه کردن یک گرادینت
    background: -webkit-gradient(linear, lefttop, leftbottom, from(#74b8d7), to(#437fbc));
    background: -moz-linear-gradient(top, #74b8d7, #437fbc);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#74b8d7', endColorstr='#437fbc');
    7-قرار دادن وب سایت در مرکز صفحه به صورت افقی
    .wrapper {
    width:960px;
    margin:auto;
    }
    8-قرار دادن محتوی در مرکز به صورت عمودی
    .container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
    }
    9-ثابت کردنfooter
    #footer {
    position:fixed;
    left:0px;
    bottom:0px;
    height:32px;
    width:100%;
    background:#333;
    }
    /* IE 6 */
    * html #footer {
    position:absolute;
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
    }
    10-اضافه کردن عکس لودر (loader image)
    برای ساختن نیز  از سایت Ajaxload – Ajax loaing GIF generator.نیز میتوانید استفاده کنید.
    img {
    background: url(loader.gif) no−repeat 50% 50%;
    }
    11-جایگزین کردن لوگو به جای متن عنوان
    h1{
    text-indent:-9999px;
    margin:0auto;
    width:400px;
    height:100px;
    background:transparenturl("images/logo.jpg") no-repeatscroll;}

    12-اضافه کردنdrop cap

    p:first-letter{
    display:block;
    margin:5px 0 0 5px;
    float:left;
    color:#000;
    font-size:60px;
    font-family:Georgia;
    }
    13-اضافه کردن خواصیت ظرفیت (شفافیت/تاری)
    .transparent {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity:0.5;
    opacity:0.5;
    }
    Example:
    <div class="box transparent">Your content</div>
    sharethis 13 هک css کاربردی و رایج


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

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

    برچسب:,, , , , , , ,
    • چند خط با Admin :

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

    8 نظر براي ۱۳ هک css کاربردی و رایج

    1. دانیال می‌گه:
      ۱۳۹۰/۰۲/۲۷ در ۴:۲۵ ق.ظ

      خیلی ممنونم حسین جان این آموزش خیلی به دردم خورد

      پاسخ دادن
    2. amir می‌گه:
      ۱۳۹۰/۰۵/۲۸ در ۱:۲۳ ب.ظ

      اگه میشه یه راهنمای بکن که این کد هارو دقیقا کجا باید بزارم تو قالبم….

      ممنون از لطفت…….

      پاسخ دادن
    3. صادق می‌گه:
      ۱۳۹۰/۰۶/۰۴ در ۱:۵۷ ب.ظ

      ببخشید تو ویلاگ میشه این کار ها رو کرد؟

      پاسخ دادن
      • Admin می‌گه:
        ۱۳۹۰/۰۶/۰۵ در ۵:۳۳ ق.ظ

        بله . به شرطی که CSS قالبتون رو داشته باشید و اون رو بتونید تغییر بدهید.
        سپس روی یک فضا آپلود کنید و آدرس اون رو تغییر بدهید به css جدید .
        حالا با این کار این تغییرات را روی قالبتان خواهید دید…

        پاسخ دادن
    4. صادق می‌گه:
      ۱۳۹۰/۰۶/۱۲ در ۴:۰۳ ق.ظ

      بله دارم
      ولی باید این کد رو با چی ویرایش کنم؟
      و وقتی ویرایش کردم اونو باید چطور آپلود کنم که مثل این باشه
      ببینید این آدرس سی اس اس قالبمه
      http://themeupload.theme-designer.com/Vista-1/c.css
      لصفا راهنمایی کنید
      ممنون از زحماتتون

      پاسخ دادن