Геометрические фигуры при помощи CSS

Внедряем CSS в HTML. JavaScript.
juli_orlova
Сообщения: 1

Геометрические фигуры при помощи CSS

Сообщение juli_orlova » Сб май 16, 2015 7:21 pm

Если взять к рассмотрению наиболее интересные функции CSS3, то здесь обязательно стоит рассказать о том, что в CSS3 есть возможность создавать с помощью CSS разнообразные геометрические фигуры. Согласитесь, что это как нельзя кстати. Ведь раньше даже самые простые формы приходилось рисовать в Иллюстраторе или Фотошопе.
В качестве примера хочу предложить создать с помощью CSS3 одну из самых простых форм – круг.
Итак, начнем:
HTML – Для создания в CSS такой формы, как круг, потребуется один единственный DIV. Если есть необходимость в определении для него стилей, то здесь стоит указать для него еще и ID:

Код: Выделить всё

<div id="circle"></div>

Что касается CSS, то здесь все очень просто. Можно даже сказать – элементарно. Задаем такие параметры, как ширина и высота, а потом указываем ему border-radius, составляющий половину от заданной высоты и ширины.

Код: Выделить всё

#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}

Все готово!
Реклама

Вернуться в «HTML + CSS»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость