BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Все про CSS » Работа с картинками (изображениями) в CSS

Работа с картинками (изображениями) в CSS

2013-03-01 / Вр:23:32 / просмотров: 55332

Картинки на сайте имеют две функции: во-первых, они улучшают внешний вид ресурса, во-вторых, помогают воспринимать информацию лучше.
Я не буду здесь делать большое вступление, а приступлю сразу к делу.
Итак, в этой статье я расскажу о всех возможных способах работы с изображениями: вставка фонового изображения, выравнивание изображения, прозрачность, тень от картинки и т.д.

Работа с картинками (изображениями) в CSS

Фоновая картинка.

background | background-image

Если вы хотите добавить фоновую картинку на веб-страницу, воспользуйтесь стилевым свойством background, который задается к селектору body.  Задайте путь к изображению внутри значения url.

<style> body { background: url(путь к файлу); } </style>

или

<style> body { background-image: url(путь к файлу); } </style>

Как выбрать графический путь? Графический путь будет зависеть от того, где он располагается.
Например, если HTML-файл и фоновый рисунок с именем bg.gif хранятся в одной папке, то достаточно задать url(bg.gif), если фоновый рисунок хранится в папке images, тогда путь будет вот таким url(images/bg.gif).

Совет: учтите, фоновое изображение загружается не сразу, поэтому рекомендую добавлять к фоновому изображению цвет фона, так как цвет загружается моментально. Задайте цвет фону близкий к цвету фонового рисунка.

Пример:


<html>
 <head>
 <title>Фон в CSS</title>
 <style>
 body {
 background: #000000 url(images/bg.gif); /* Цвет фона и путь к графическому файлу */
 }
 </style>
 </head>
 <body>
 <p>Ваш текст</p>
 </body>
</html>

или

<html>
 <head>
 <title>Фон в CSS</title>
 <style>
 body
{
background-image: url(images/bg.gif); /* Путь к графическому файлу */
background-color:#000000; /* Цвет фона */
}
 </style>
 </head>
 <body>
 <p>Ваш текст</p>
 </body>
</html>

Повтор фоновой картинки.

background-repeat

Бывают моменты, когда нам необходимо управлять повторами фонового изображения. Например, нам выгодно, чтобы повтор фонового изображения был только по горизонтали или только по вертикали,  а бывает момент, что повтор фонового изображения нам вообще не нужен. Итак, как нам выкрутиться в этой ситуации? Воспользуйтесь стилевым свойством background-repeat.

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

Значения:

repeat-y - повтор фонового изображения по оси - у (вертикаль);
repeat-x - повтор фонового изображения по оси - х ( горизонталь);
no-repeat; - запретить повтор фонового изображения (изображение будет как оно есть);

Если не задать стилевое свойство background-repeat, тогда фоновое изображение веб-страницы будет залито полностью фоновой картинкой.

Пример:

<html>
 <head>
 <title>Фон в CSS</title>
 <style>
 body
{
background-image: url(images/bg.gif); /* Путь к графическому файлу */
background-color:#000000; /* Цвет фона */
background-repeat: repeat-x; /* фон будет повторятся по оси-х (горизонтали) */
}
 </style>
 </head>
 <body>
 <p>Ваш текст</p>
 </body>
</html>

или

<html>
 <head>
 <title>Фон в CSS</title>
 <style>
 body {
 background: #000000 url(images/bg.gif) repeat-x; /* Цвет фона, путь к графическому файлу и повтор фона по оси-х (горизонтали)*/
 }
 </style>
 </head>
 <body>
 <p>Ваш текст</p>
 </body>
</html>

Как добавить две фоновые картинки на веб-страницу.

background

Бываю такие моменты, когда нам необходимо создать два фона для сайта. Например, один фон повторяется по вертикали или по горизонтали, а второй фон выводится без повторения.
Добавим две фоновые картинки старым добрым способом. По крайне мере я знаю точно, все браузеры отображают этот метод.
Зададим фоновое изображение к элементам — HTML и BODY.

<style type="text/css">
HTML { background: url(картинка 1); /* Путь к графическому файлу с первым фоном */ }
BODY { background: url(картинка 2) no-repeat top center; /* Путь к графическому файлу со вторым фоном */ }
</style>

Пример:

<html>
<head>
<title>Фон в CSS</title>
<style>
HTML
{
background: url(картинка-1) no-repeat bottom; /* Путь к графическому файлу с первым фоном, запрет на повтор картинки, прижать к низу части экрана */
}
BODY
{
background: url(картинка-2) no-repeat top center; /* Путь к графическому файлу со вторым фоном, запрет на повтор картинки, прижать к верху по центру */
}
</style>
</head>
<body>
<p>Контент сайта</p>
</body>
</html>

Результат:

Как добавить две фоновые картинки на веб-страницу.

Картинка по центру.

Существуют несколько методов установить картинку по центру.

Примеры:

метод 1:

<html>
<head>
<style>
BODY
{
background: url(картинка.gif) no-repeat center; /* Путь к графическому файлу, запрет на повтор картинки и разместить по центру */
}
</style>
</head>
<body>
<p>Контент сайта</p>
</body>
</html>

метод 2:

<html>
<head>
<style>
.imgCenter {text-align:center;}
</style>
</head>
<body>
<p>Текст параграфа.</p>
<div class="imgCenter">
<img src="картинка.gif" border="0" width="300" height="300" alt="" />
</div>
<p>Далее по тексту параграфа.</p>
</body>
</html>

метод 3:

<html>
<head>
<style>
.center {display:block; margin:0 auto;}
</style>
</head>
<body>
<p>Текст параграфа.</p>
<p>Текст параграфа.
<img class="center" src="картинка.gif" border="0" width="300" height="300" alt="" />
Далее по тексту параграфа.</p>
</body>
</html>

Как в css изменить размер картинки.

background-size

Не зависимо от оригинала картинки, размер можно менять от меньшего до большего. В CSS для изменения размера картинки поможет свойство background-size.
В свойстве background-size могут применяться абсолютные единицы измерения, такие как px, em, cm и др..

background-size: ширина высота;

По умолчанию ширина и высота установлена как auto, что оставляет исходные размеры изображения.

Например, вы загрузили на сайт картинку размерами 200×200 px, но вам по каким-то причинам нужно ее увеличить до размера 500×200 px . Вот так будут выглядеть параметры background-siz.

background-size: 500px 200px;

Можно также указать только одно значение, и это будет считаться шириной. Тогда высота будет как auto и сохранятся пропорции картинки. Посмотрите пример снизу.

можно так:

background-size: 200px;

а можно вот так:

background-size: 200px auto;

Пример:

<html>
<head>
<style>
body
{
 background:url(картинка.jpg);
 background-size:500px 200px;
 background-repeat:no-repeat;
}
</style>
</head>
<body>
<p>текст сайта</p>
</body>
</html>

Обтекание (выравнивание) картинки текстом.

float

Как сделать в CSS так, чтобы на странице изображение обтекало текстом? Выравнивание картинки в CSS аналог HTML-выравнивания картинки <IMG align=”right” …>, вот только в CSS по какой стороне будет выравнивание элементов определяет float.

float: left | right | none;

 Значение:

left — выровнять картинку по левому краю, текст обтекает его по правой стороне.

right — выровнять картинку по правому краю, текст обтекает по левой стороне.

none — выравнивание и обтекание не задается (значение по умолчанию).

Пример:

<html>
 <head>
 <title>Обтекание</title>
 <style>
 .leftimg {
 float:left; /* Выравнивание по левому краю */
 margin: 5px 5px 5px 0; /* Отступы вокруг картинки */
 }
 .rightimg {
 float: right; /* Выравнивание по правому краю */
 margin: 5px 0 5px 5px; /* Отступы вокруг картинки */
 }
 </style>
 </head>
 <body>
 <h2>Основы CSS</h2>
 <p><img src="images/1.jpg" class="leftimg">
 Приветствую всех читателей и случайных посетителей моего блога.
 Сегодня я бы хотел вам рассказать о незаменимом инструменте веб-дизайнера - CSS.
 CSS (Cascading Style Sheets) – это каскадные таблицы стилей, которые хранят в
 себе правила для группы или одиночного элемента. CSS используют для изменения
внешнего вида дизайна сайта (цвет, размер текста, фон и др.).</p>
 <h2>Основы CSS</h2>
 <p><img src="images/2.jpg" class="rightimg">
 Давайте перейдем к основам CSS.CSS файл имеет расширение *.css.
 Часто веб-мастера присваивают CSS файлу имя style (style.css).
 CSS файл тесно связан с HTML. Другими словами, это можно объяснить
 так: CSS без HTML работать не будет.
 Предлагаю для общего понимания рассмотреть пример, как можно объединить
 HTML с CSS файлом.</p>
 </body>
</html>

Здесь я указал отступы текста от картинки

margin: 5px 0 5px 5px;

Результат:

Обтекание (выравнивание) картинки текстом.

Тень картинки.

box-shadow

Небольшая тень под картинкой придает также странице эффект трехмерности, объёма и глубины. Для добавления тени используется свойство box-shadow.

Тень картинки

1. -  inset -  тень внутри элемента, без inset тень будет наружу;
2. - сдвиг тени по горизонтали (6px — вправо, -6px — влево);
3. - сдвиг по вертикали (6px — вниз, -6px — вверх);
4. - размытие тени (0 — четкая тень);
5. - растяжение тени (3px — растяжение, -3px — сжатие);
6. - цвет тени

box-shadow: 0 0 5px; - тень вокруг элемента

тень вокруг элемента

box-shadow: inset 0 0 5px; - тень внутри

тень внутри

Пример:

<html>
 <head>
 <title>Изображение</title>
 <style>
 img {
 box-shadow: -19px 0 22px -19px #000, 19px 0 22px -19px #000;
 }
 </style>
 </head>
 <body>
 <p><img src="картинка.jpg" alt=""></p>
 </body>
</html>

Результат:

Тень картинки

Прозрачность картинки.

Начну сразу с примера.

Пример:

<html>
<head>
</head>
<body>
<p>Обычное изображение:</p>
<img src="картинка.png" width="300" height="200" />
<p>изображение с прозрачностью:</p>
<img src="картинка.png" width="300" height="200"
style="opacity:0.4;filter:alpha(opacity=40)" />
</body>
</html>

Обратите внимание в коде на opacity:0.4. Поиграйтесь со значением этого свойства и вы увидите на сколько увеличивается или уменьшается прозрачность картинки.

Результат:

Прозрачность картинки

С наилучшими пожеланиями Webmasterok2009

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

43 Ответов на комментарий - Работа с картинками (изображениями) в CSS

  1. Женя

    Здравствуйте.
    Как добавить две фоновые картинки на веб-страницу? ПРИМЕР: [ссылка удалена (лживый сайт)]
    Интересует вот этот рисунок: [ссылка удалена] – как его добавить в свои стили CSS??????
    У меня в стилях CSS это:

    body {
    background: url("[ссылка удалена]") fixed;
    }
    
    .site-frame {
    width: 994px;
    margin: 0 auto;
    }
    

    Пробовал добавлял по разному но и ваш вариант не подходит если менять стиль CSS.
    Помогите!

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте! Женя, Вам точно нужно две фоновые картинки или вам нужно маленькую картинку залить по всему фону?
    Чтобы добавить две фоновые картинки пропишите этот код:

    <style type="text/css">
    HTML { background: url(картинка 1); /* Путь к графическому файлу с первым фоном */ }
    BODY { background: url(картинка 2) no-repeat top center; /* Путь к графическому файлу со вторым фоном */ }
    </style>
    

    Жень, этот код рабочий, я уверен на все 101% :)

    Ответить

  2. Наталия

    Добрый вечер Степан.
    Уже замучилась, не могу вставить на указанный сайт фоновую картинку. Помогите, подскажите, может ли сайт поймать глюк, никакую картинку с Css не видит. Я не программист все передрано у кого-то или сделано методом тыка. Цвет выставляется и отражается мгновенно, а картинка вообще никак даже спустя день. На другой сайт вставляю – все получается, на этот никак.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Наталия! Вы не правильно указали путь к фону!

    background: url(../images/fonosn2.jpg);
    

    Почитайте статью “с“.

    Ответить

  3. Наталия

    Все получилось, большое спасибо.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Пожалуйста, я рад, что оказался Вам полезным!

    Ответить

  4. baloo

    Добрый день!Перенес в темплейте логотип из хедера в менюбар (самый верх) ,как придать стили картинке,отступы и тд?Сайт на денвере ,так что показать еще не могу.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте! Я так понял, логотип находиться в блоке id=”menubar”.
    В CSS пишете все стили здесь:

    #menubar
    {
    здесь все стили
    }
    

    Рекомендую вначале прописать границы к блоку, чтобы видеть, где находиться блок

    #menubar
    {
    border:1px solid #cc0000;
    }
    

    Чтобы придать отступы, почитайте об этом здесь

    Ответить

  5. baloo

    Спасибо за ответ!Пришлось создать класс,а для него уже прописать стили.Но почему не работает отступ лево-право-padding.Верх и низ все нормально.Не подскажите,что мб?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    попробуйте:
    – укажите ширину блока, а потом укажите лево-padding, если не поможет, тогда просто укажите лево-margin

    Ответить

  6. baloo

    Спасибо! Помогло.Еще один вопрос есть,но без скрина не обойтись.Вы предыдущий видели?

    Ответить

  7. Андрей

    Здравствуйте!
    Не могли бы вы подсказать, как можно задать смену картинок на сайте (чтобы картинки менялись через определенный интервал времени)?
    Буду очень признателен.
    С уважением, Андрей.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Андрей!

    <html> 
    <head>
     <meta charset="utf-8" /> 
    <title> - BlogGood.ru</title>
    <script type="text/javascript">
    var image_count = 3;
    var interval = 3000;
    var time_out = 10;
    var i = 0;
    var timeout;
    var opacity = 100;
    
    function change_image() {
     opacity--;
     var j = i + 1;
     var current_image = 'img_' + i;
     if (i == image_count) j = 1;
     var next_image = 'img_' + j;
     document.getElementById(current_image).style.opacity=opacity/100;
     document.getElementById(current_image).style.filter='alpha(opacity='+opacity+')';
     document.getElementById(next_image).style.opacity=(100-opacity)/100;
     document.getElementById(next_image).style.filter='alpha(opacity='+(100-opacity)+')';
     timeout = setTimeout("change_image()", time_out);
     if (opacity==1) {
      opacity = 100;
      clearTimeout(timeout);
     }
    }
    
    setInterval (function() {i++; if (i>image_count) i=1; change_image();}, interval);
    </script>  
     </head>
      <body> 
    
    
    <img src='http://bloggood.ru/wp-content/uploads/2015/05/zvuk-pri-navedeniyi-na-ssylku-000-135x180.jpeg' id="img_1" style="position: absolute;">
    <img src='http://bloggood.ru/wp-content/uploads/2015/05/UpToLike-WP-000-135x180.png' id="img_2" style="opacity: 0; filter: alpha(opacity=0);
        position: absolute;">
    <img src='http://bloggood.ru/wp-content/uploads/2015/05/javascript-mobi-site-000-135x180.png' id="img_3" style="opacity: 0; filter: alpha(opacity=0);
        position: absolute;">
     </body>
    </html> 
    

    Ответить

    Андрей отвечает:

    Большое спасибо за ответ. Но у меня по ходу возник вопрос. Как все это сделать, чтобы стили были прописаны на странице style.css. Включая картинки, так как хочу поместить над картинками текст.
    С уважением, Андрей.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Посмотрите вот это

    Ответить

  8. Hellss

    Здравствуйте Степан! Спасибо за Ваш труд. У меня есть вопрос. Хочу установить на сайте картинку с отображением через CSS. На локальном сервере всё работает как надо, но как только я переношу всё на хостинг картинка пропадает. Никак не могу решить эту проблему и не пойму почему так происходит. Вот что прописано в CSS –

    }.cap {
    	background-attachment: fixed;
    	background-image: url(./gif/Capp_A.gif);
    	background-position: right;
    	background-repeat: no-repeat
    }
    

    это на сайте

    помогите пжл разобраться, почему картинка не отображается при загрузке страницы на хостинг.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте!
    Попробуйте вот так:

    .cap {
    	background-attachment: fixed;
    	background-image: url(gif/Capp_A.gif);
    	background-position: right;
    	background-repeat: no-repeat;
    }
    

    или пропишите полный путь до картинки (http://адрес сайта/gif/Capp_A.gif):

    .cap {
    	background-attachment: fixed;
    	background-image: url(http://адрес сайта/gif/Capp_A.gif);
    	background-position: right;
    	background-repeat: no-repeat;
    }
    

    Часть кода в комментарии отсутствует. “это на сайте” – после этого, я так понимаю должен был быть еще один код.
    Чтобы код дошел, напишите в комментариях вот так: [code]код[/code]
    Если ничего не получиться, напишите адрес сайта, я посмотрю что не так.

    Ответить

    Hellss отвечает:

    Спасибо за ответ, но ничего не получается, когда ввожу урл сайта то картинка не отображается даже на локалке, уже всё перепробовал, никак не могу понять в чём проблема. Вот страница на которой никак не хочет отображаться картинка в шапке. [адрес сайта спрятан] посмотрите пжл почему не работает.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Теперь будет работать:

    td.cap {
      /* background-attachment: fixed; */
      background-image: url(gif/Capp_A.gif);
      background-position: right;
      background-repeat: no-repeat;
    }
    

    Ответить

    Hellss отвечает:

    Степан спасибо, но ничего так и не заработало.

    подскажите куда это прописать? Я в стили прописываю, но не помогает.

    td.cap {
      /* background-attachment: fixed; */
      background-image: url(gif/Capp_A.gif);
      background-position: right;
      background-repeat: no-repeat;
    }
    

    у меня сейчас в стиле прописано так

    }.cap {
      background-attachment: fixed;
      background-image: url(gif/Capp_A.gif);
      background-position: right;
      background-repeat: no-repeat;
    }
    
    Степан => автор блога

    Степан => автор блога отвечает:

    можно и так:

    .cap {
      background-image: url(gif/Capp_A.gif);
      background-position: right;
      background-repeat: no-repeat;
    }
    

    У меня все работает. Могу скрин показать, как сейчас отображается ваш сайт.
    Стиль, нужно вставить в файл “style.css”.
    У меня вопрос, там у вас не лишняя скобка?

    }.cap {
    

    Если ничего не получиться, могу за чисто символическую оплату все сделать самому.

  9. Hellss

    не работает на хостинге))) я уже запарился с этим багом)Скиньте пжл как отображается страница!

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Ответить

  10. Hellss

    Разобрался, спасибо, теперь работает, но этот стиль я прописал не в CSS, а на страницу, по другому работать не хочет.

    td.cap {
      /* background-attachment: fixed; */
      background-image: url(gif/Capp_A.gif);
      background-position: right;
      background-repeat: no-repeat;
    }
    

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    CSS стили можно прописывать несколькими способами.

    Ответить

    Hellss отвечает:

    Вот у меня только комбинированный работает! Не знаю почему.

    Ответить

  11. Евгений

    Красавчик! Прям всё подробно и красиво,сразу видно, что мастер! Но вот у меня вопрос: даже если я запрещаю картинке повторяться, – она всё равно повторяется 2 раза как минимум, но только по вертикали! Может это из-за того, что в контейнер её хочу поместить, не пойму… :?:
    Прошу помощи! :cry:

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Евгений. Если можно, напишите в комментариях, как Вы в CSS коде прописали “background-repeat”?
    “она всё равно повторяется 2 раза как минимум” – Вы можете дать ссылку на страницу, где есть эта проблемка?

    Ответить

    Евгений отвечает:

    Здравствуйте Степан! Всё готово! Сам решил задачку, проблема была с отображением логотипа сайта [ссылка скрыта] , я сначала разместил картинку рядом с названием, но она копировалась несколько раз вертикально, мучился-мучился, и в итоге обратился к фрилансерам, ребята помогли и сказали, что я разместил картинку в нескольких блоках… Сам пока учусь, а теперь разобрался и дальше сам всё подправил! Спасибо Вам за ответ! :arrow:

    Ответить

  12. Евгений

    Теперь другой вопрос не могу решить с тем же сайтом: в Firefox все странички открываются отлично, – ничто никуда не убегает(поля, отступы) :cool: , а сегодня открыл Chrome – а там всё таки есть различия… :?:

    Помогите решить эту проблему! Заранее благодарю! :arrow:

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Не знаю как у Вас, но у меня открылся Ваш сайт абсолютно одинаково, как в Chrome так и Firefox

    Ответить

    Евгений отвечает:

    О, я тоже сейчас глянул, – исправил оказывается я уже! – забыл в хроме обновить страницу… :)))

    Ответить

  13. Анатолий

    Добрый день. При использовании кода “тень картинки”, все получилось, но есть одна проблема, теперь все загруженные картинки появляются с тенью, как это исправить?
    сайт на денвере

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте! Задайте картинке класс, на которых вы хотите указать тень.
    Например вот так:

    <img src ="images/zirka.png" class="ten">
    

    а в CSS:

    .ten {
     /* стили для тени*/
    }
    

    Ответить

    Анатолий отвечает:

    Здравствуйте,тень не появляется=( Посмотрите пожалуйста код, может что неправильно?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, а у меня получилось:

    <img src ="images/zirka.png" class="ten">
    

    В CSS

    .ten {
        box-shadow: 0.1em 0.2em 0.2em #000000, 0.1em 0.2em 0.2em #000000;
    }
    

    Ответить

  14. Анатолий

    Добрый вечер.Все таки не получается.

    Вот код виджета:

    <p><span style="color: #ffffff;">Обратный звонок</span></p>
    <a href="#contact_form_pop_2" class="fancybox">
    
    <html>
     <head>
     <title>Изображение</title>
     <style>
     </style>
     </head>
     <body>
     <p><img src="http://www.md.ru/wordpress/wp-content/uploads/2016/04/knopka.jpg" class="ten"></p>
     </body>
    </html>
    
    

    В css:

    .ten {
    box-shadow: 0.1em 0.2em 0.2em #000000, 0.1em 0.2em 0.2em #000000;
    }

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Мы так ничего не решим, нужен адрес страницы, чтобы глянуть, так как у меня в HTML редакторе онлайн все работает:

    <html>
     <head>
     <title>Изображение</title>
     <style>
     </style>
     </head>
     <body>
     <p><img src="http://www.md.ru/wordpress/wp-content/uploads/2016/04/knopka.jpg" class="ten"></p>
     </body>
    </html>
    
    <style>
    .ten {
    box-shadow: 0.1em 0.2em 0.2em #000000, 0.1em 0.2em 0.2em #000000;
    }
    </style>
    

    Ответить

    Анатолий отвечает:

    Вот сайт. Класс ten присвоен у первого виджета и ничего не изменилось.Посмотрите пожалуйста.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Странно! У меня все получилось. Добавьте в CSS к примеру вот такой код:

    .ten {
        box-shadow: 0.1em 0.2em 0.2em #000000, 0.1em 0.2em 0.2em #000000;
    }
    

    Ответить

    Анатолий отвечает:

    Такой и добавлен. Может в самом виджете что не так:

    <p><span style="color: #ffffff;">Группа в VK</span></p>
    
    <html>
     <head>
     <title>Изображение</title>
     <style>
     </style>
     </head>
     <body>
    <a href="#" target="_blank">
    <img src="knopka-1.jpg " class="ten" alt=""  /  ></a>
    
     </body>
    </html>
    
    Степан => автор блога

    Степан => автор блога отвечает:

    Анатолий, ну Вы и тут начудили. Изучайте HTML и CSS.
    Попробуйте вот так:

    <html>
     <head>
     <title>Изображение</title>
     <style>
    .ten {
        box-shadow: 0.1em 0.2em 0.2em #000000, 0.1em 0.2em 0.2em #000000;
    }
     </style>
     </head>
     <body>
    <a href="#" target="_blank">
    <img src="knopka-1.jpg " class="ten" alt=""  /  ></a>
     
     </body>
    </html>
    
  15. Анатолий

    Большое спасибо-все получилось!!!!

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: ,

Мои цели на 2016 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 600

4). Добиться стабильной посещаемости 2500 человек/сутки

5). Закончить все статьи, которые находятся в черновиках

6). Создать портфолио и мини интернет-магазин шаблонов

7). Создать книгу

8). Добиться стабильной посещаемости 3000 человек/сутки

9). Довести количество статей до 700

10). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 669
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3663