ДОСТИГНУТО:

01.11.2016-300 страниц в индексе Google;
19.01.2017-300 страниц в индексе Яндекса;
03.02.2017-40 ТИЦ;
05.02.2017- сайт принят в DMOZ каталог;

Как сделать изображения круглыми в CSS

.

iВсем привет!
Сегодня очередной урок по изучению CSS!
Я уверен что не один раз вам уже встречались круглые изображения на многих сайтах!
Это очередной ход веб-мастеров,который делает многие сайты более красочные.
Лично я ,по крайней мере на этом сайте этим методом пользуюсь редко,но с удовольствием научю вас проделывать данный трюк с изображением,тем более что это очень просто!
Для создания круглого изображения нам понадобиться 2 вещи:
1.Файл style.css (таблица стилей)
2.Изображение
Приступаем!
Открываем в редакторе WordPress файл таблицы стилей(style.сss)спускаемся в самый низ и добавляем следующий код:

Сохраняем обновленный файл style.css.
Данным кодом мы задали стилям необходимые функций и теперь определенным изображениям можем придать форму круга!Для этого коду изображения надо прописать класс,которому мы задали необходимые нам стили(.krug-image)
Как это сделать?
Загружаем любое новое изображение или находим старое,которое требуется закруглить.
Для того чтобы придать изображению круглую форму перед кодом изображения и в конце стоит добавить следующее:

код-изображения

Имя у класса может быть любым!
Данный код прописан для всех браузеров,поэтому должен сработать у всех!
Стоит также отметить что данный код написан для картинок размером 150 на 150px;,если вы хотите добавить более крупное или же меньшее изображение то код придется подредактировать!
Измените все параметры кода где стоит 150px; на необходимый вам размер,а в высоту и ширину width и height пропишите размер умноженный на два.
Думаю что понятно объяснил,будут вопросы задавайте в комментариях!Буду рад помочь каждому!
Итак в сегодняшнем уроке мы научились делать наши изображения круглыми!А это пригодится каждому вебмастеру от новичка до Гуру!
На этом все!
БЕРЕГИТЕ СЕБЯ!




лайк

Эти красотки хотят чтобы ты их жестко лайкнул и даже несколько раз твитнул!

1 комментарий Как сделать изображения круглыми в CSS

  • Вовчик сказал:

    Спасибо очень пригодилась статья самостоятельно не смог понять как это все можно осуществить!

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *