Рамки для изображении

Рамки для изображении

Ещё одна возможность украсить ваш блог - это рамки для изображении в постах в вашем блоге.Для каждого варианта есть два класса стилей - это Первый это начальный вид рамки изображения, в второй - это вид при наведении курсора мышки..



  • 1 вариант:
    • ]]></b:skin>

    3 Перед этой строкой вставьте этот CSS стиль:
    .post img{
    padding:5px;
    border:1px solid #ccc; }

    .post img:hover{
    padding:5px;
    background-color:#ccc; }
    4. Всё!
    • 2 вариант:
    ]]></b:skin>

    3 Перед этой строкой вставьте этот CSS стиль:
    .post img{
    padding:5px;
    background-color:#ccc;
    border:1px solid #ddd;}

    .post img:hover{
    padding:5px;
    background-color:#eee;
    border:1px solid #666;}
    4. Всё!
    • 3 вариант:
    ]]></b:skin>

    3 Перед этой строкой вставьте этот CSS стиль:
    .post img{
    padding:5px;
    border:1px solid #ccc;}

    .post img:hover{
    padding:5px;
    background-color:#fff;
    border:10px solid #000; }
    4. Всё!
    • 4 вариант:
    ]]></b:skin>

    3 Перед этой строкой вставьте этот CSS стиль:
    .post img{
    padding:5px;
    border:1px solid #ccc;}

    .post img:hover{
    padding:5px;
    background-color:#fff;
    border:2px dashed #000;}
    4. Всё!
    • 5 вариант:
    ]]></b:skin>

    3 Перед этой строкой вставьте этот CSS стиль:
    .post img{
    padding-top:5px;
    padding-bottom:5px;
    border-top:3px solid #ddd;
    border-bottom:3px solid #ddd;}

    .post img:hover{
    background-color:#fff;
    border-top:3px solid #000;
    border-bottom:3px solid #000;}
    4. Всё!
    • 6 вариант:
    ]]></b:skin>

    3 Перед этой строкой вставьте этот CSS стиль:
    .post img{
    padding-top:10px;
    padding-bottom:10px;
    border-top:2px solid #ddd;
    background-color:#000;
    border-bottom:2px solid #ddd; }

    .post img:hover{
    background-color:#fff;
    border-top:3px solid #000;
    border-bottom:3px solid #000;}
    4. Всё!
    • 7 вариант:
    ]]></b:skin>

    3 Перед этой строкой вставьте этот CSS стиль:
    .post img{
    padding:5px;
    border:1px solid #ccc;}

    .post img:hover{
    padding:5px;
    background-color:#E71305;
    border:10px solid #ddd;}
    4. Всё!
    • 8 вариант:
    ]]></b:skin>

    3 Перед этой строкой вставьте этот CSS стиль:
    .post img{
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    border:0;}

    .post img:hover{
    filter:alpha(opacity=50);
    -moz-opacity: 0.30;
    opacity: 0.30;
    border:0;}
    4. Всё!
    • 9 вариант:
    ]]></b:skin>

    3 Перед этой строкой вставьте этот CSS стиль:
    .post img{
    filter:alpha(opacity=50);
    -moz-opacity: 0.30;
    opacity: 0.30;
    border:2px solid #000;}

    .post img:hover{
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    border:2px solid #000;}
    4. Всё!
    • 10 вариант:
    ]]></b:skin>

    3 Перед этой строкой вставьте этот CSS стиль:
    .post img{
    background:#FDFDFB;
    border:0px solid #8DDCEF;
    -moz-box-shadow:0 0 10px 2px #ADFF2F;
    -webkit-box-shadow:0 0 10px 2px #ADFF2F;
    box-shadow:0 0 10px 2px #ADFF2F;}

    .post img:hover{
    background:#FDFDFB;
    border:0px solid #8DDCEF;
    -moz-box-shadow:0 0 10px 2px #B9E9F7;
    -webkit-box-shadow:0 0 10px 2px #B9E9F7;
    box-shadow:0 0 10px 2px #B9E9F7;}

    4. Всё!
    Ярлыки:

    Комментариев нет:

    Отправить комментарий