Создать круг внутри круга
Закрашивание круга при наведение на другой круг
Есть два круга: один закрашен,другой нет. Если наведу курсор на второй круг,то первый перестанет.
Круг внутри активного элемента
Здравствуйте,вопрос. Сделал чтоб когда нажимаешь на ссылку,вокруг активной кнопки появляется овал.
Кривые линии внутри круга
Здравствуйте, недавно начал заниматься всём что связано в web-программирование. И тут нашёл чем.
Поставить круг по центру белого блока и поставить цифру «1» в центре самого круга
Мне нужно поставить круг по центру белого блока и поставить цифру "1" по середине самого круга. Как.
284 / 283 / 73
Регистрация: 06.05.2013
Сообщений: 1,613
Сообщение было отмечено HyPuK как решение
Решение
добавьте к этому position:relative
а внутреннему задайте position:absolute и с помощью top и left отпозиционируйте их
Добавлено через 2 минуты
1 2 3 4
div style="position:relative;width:100px;height:100px;background:red;border-radius:50px"> div style="position:absolute;top:25px;left:25px;width:50px;height:50px;background:black;border-radius:25px"> /div> /div>
Как сделать круг в css или круглую рамку для картинки?
На самом деле сделать круг в css очень просто, стоит лишь поменять значение в border-radius.
.round background:orange;
width:100px;
height:100px;
border:1px solid red;
border-radius:50%;
>
Как видите мы просто задали одинаковую ширину (width) и длину (height) и увеличили радиус скругления (border-radius) на 50%.
В данном случае главное, чтобы ДЛИНА и ШИРИНА были равны друг другу, иначе получится не ровный круг, а овал.
Теперь, давайте попробуем скруглить края у картинки.
Для начала возьмем ровную картинку с одинаковой длинной и шириной. Картинка квадратная и имеет размер 150px X 150px.
Ниже делаем её круглой. Если вы хотите, чтобы границы обводки были не видны, то просто замените red на white.
Теперь, давайте попробуем скруглить края у прямоугольной картинки с неодинаковыми длинной и шириной.
В этом случае нам придется с помощью CSS кода обрезать картинку.
Вот картинка, которую мы будем обрезать:
.roundimg2-eample-reading width:150px;height:150px;
>
.galsadeamplehhgghhg max-width:150px;
height:150px;
position: relative;
text-align: center;
margin: 15px;
color: white;
display: inline-block;
>
.galsadeamplehhgghhg img height: 100%;
object-fit: cover;
background:cover;
border:1px solid white;border-radius:50%;
>
Как видите, мы зафиксировали размер картинки в 150 X 150, таким образом сделав её стороны одинаковой длины. После чего, мы с помощью object-fit: cover; и background:cover; — обрезали картинку, оставив лишь середину. Далее нужно скруглять радиус на 50%, чтобы получился круг.
Этот метод достаточно прост, код небольшой и не требует вмешательства java script.
Комментарии
Комментариев пока нет. Оставь тут свой комментарий или анекдот!
Комментарии к посту
Выпадающий
Последние новости
Раскрыта неприятная правда о Западных СМИ
Германия хочет разместить в на Украине военные заводы
Украине потребуется 35 лет на погашение кредитов
Индия заняла сторону России по вопросу о «войне на Украине»
Горячие статьи
Стамбул сегодня. Как выглядет бывший Константинопль. Фотографии. Фото
Индия заняла сторону России по вопросу о «войне на Украине»
Петербург — город, где “жил” Гитлер. Ужасный факт.
Фотографии Ленинграда. Ленинград в СССР. Старые фотографии.
Как выглядела США в 1900-1940 годы. Старые фотографии.
Таинственная Башня Выборга. Башня ратуши.
Причины появления депрессии.
Индия заняла сторону России по вопросу о «войне на Украине»
БалтиморЗапрещается приводить в кино львов.
Неправильное обращение с устрицами является нарушением за¬кона.
[ Интересные факты о мире ]
как на php сделать новостную ленту или список статей?
Защита сайта от СПАМА. проверка в форме.
Как написать текст на картинке, с помощью CSS + html?
Как разместить несколько блоков css? (разные варианты)
как сделать картинку рядом текстом, в одном блоке. html, css
Как сделать круг в css или круглую рамку для картинки?
Рассказы из категории: Создание сайта (html,css,php,js)
Написать директору
Спасибо за посещение портала!
Веселого вам настроения!
Если вам что-то понравилось на портале, то расскажите об этом своим друзьям! 😉
За порядком на портале следит бог портала — Нубозавр, а тех, кто попытается нарушить святые правила портала, ждёт встреча с этим разъяренным существом!
На портале есть множество разделов про историю, тайны и секреты мира, мифы и легенды, стихи, разделы для детей, разнообразные книги, статьи по психологии, музыка, игры и многое другое. По этой причине каждому разделу соответсвует своя возрастная категория. Материал, статьи и новости пишутся и специально отбираются модераторами, чтобы вам было интересно его читать.
Статьи, авторы и создатели портала не побуждают к каким либо деяниям, а материалы размещенные на страницах портала имеют лишь ознакомительный характер и не берут во внимание что-то конкретное.
Более того, создатели портала негативно относятся ко всем радикальным и противозаконным деяниям.
Как нарисовать 3 круга через CSS или HTML
Нужно нарисовать на веб-странице 3 круга (как на картинке), без использования изображений
Как сделать 1 круг с границами — знаю, но не знаю, как сделать их пересечение правильно, чтобы дизайн был «гибкий», не статичный.
В центре каждого круга — DIV с текстом.
Уточню, что проблема только с правильным позиционированием кругов относительно друг друга, и с их пересечением.
Голосование за лучший ответ
Я бы SVG делал. Там в исходнике только код, а в браузере — изображение.
Атлант-19Транспортно-логистическая компания (976) 4 года назад
Там просто нужно будет еще допилить, чтобы размер кругов менялся, в зависимости от содержимого, или они могли бы скрываться. Насколько я понимаю, в SVG придется для каждого случая свою картинку, да и анимацию туда не прикрутить, а в CSS можно
Атлант-19Транспортно-логистическая компания (976) 4 года назад
То есть: нажал на один круг, сделал его активным, он увеличился, а остальные — скрылись под ним почти полностью. Нажал на скрытый — он увеличился, скрыв под собой остальные. Нажал мимо кругов — все появились как изначально и было. Все это с анимацией (изменение размера). Плюс возможно увеличение размера активного круга, в зависимости от размеров DIVа в нем
Анти Советчик Искусственный Интеллект (124150) В SVG анимация организована мощнее, чем в CSS. Почитай в интернете о связке SVG с SMIL и JS. В одном SVG файле может быть скрыто целое приложение. Например, эта листалка диафильмов практически один svg (см. источник Ctrl+U) http://www.barius.ru/biblioteka/Diafilm.htm#=4590=47
Может быть так ? http://jsfiddle.net/daovs8ru/
Атлант-19Транспортно-логистическая компания (976) 4 года назад
Спасибо!
С SVG понятно, но все равно интересно сделать CSS, хотя бы упрощенно, на всякий случай
Атлант-19Транспортно-логистическая компания (976) 4 года назад
А как сделать без обрезки кругов? То есть, чтобы было 3 фигуры — 3 круга. Но они накладываются друг на друга в таком порядке, как на моем рисунке, т. е. не нижний-средний-верхний, а первый над вторым, второй над третьим, а третий над первым?