Приветствую Вас Гость • Регистрация • Вход
Суббота, 19.10.2019
Главная » 2014 » Июнь » 15 » Простые геометрические фигуры с помощью CSS3
21:23
Простые геометрические фигуры с помощью CSS3
Простые геометрические фигуры с помощью CSS3И так как всегда блуждая по просторам интернета,на одном из буржуйских сайтов наткнулся на одну довольно таки интересную статейку, а именно что можно сделать с помощью простого CSS3.
Сейчас мы рассмотрим на данных примерах разные вариации геометрических фигур сделанных с помощью простого CSS3.
Давайте для начало заглянем немного в историю CSS3 и узнаем что же это такое. (+)открыть спойлер
CSS3 - это новый стандарт оформления HTML документов значительно расширяющий возможности предыдущего стандарта CSS2.1.
Многие возможности, которые были труднодоступны в CSS2.1, то есть требовали использования дополнительных внешних программ (таких как Adobe Photoshop), скриптов (таких как JavaScript) или специальных "хитростей" могут легко достигаться в CSS3 за счет использования новых свойств оформления.
В CSS3 Вы можете:
  • Создавать элементы со сглаженными углами;
  • Создавать линейные и сферические градиенты;
  • Более гибко оформлять фоновую картинку элементов;
  • Добавлять к элементам и к тексту элементов тени;
  • Использовать небезопасные шрифты (не боясь при этом, что они будут не поддерживаться браузером пользователя);
  • Создавать анимацию и различные эффекты переходов;
  • Задавать цвета несколькими новыми способами и многое другое.
Обратите внимание: новые CSS3 свойства поддерживаются только в современных браузерах: IE9+, Firefox 3.6+, Opera 10+, Chrome 12+, Safari 5+.
Обратите внимание: спецификация CSS3 от W3C все еще находится в разработке, поэтому поведение некоторых свойств может измениться.
Поддержка CSS3 в старых браузерах:
Доля использования старых браузеров полностью или частично не поддерживающих CSS3 уже не так велика (данные StatCounter для России на Октябрь 2013).
Internet Explorer 9 (частично не поддерживает CSS3 свойства): 3%
Internet Explorer 8 (не поддерживает CSS3 свойства): 4.5%
Однако мы все же рекомендуем дополнительно анализировать количество пользователей использующих старые браузеры для каждого сайта индивидуально (например с помощью Google Analytics) и если это количество еще велико воздержатся от использования свойств, которые могут привести к проблемам отображения сайта в старых браузерах.
Для эмуляции поведения новых свойств CSS3 в браузерах Internet Explorer 6-9 Вы можете использовать специальную библиотеку css3pie.

А теперь рассмотрим на примерах как реализовать геометрические фигуры с помощью CSS3:
Код
.square { width: 100px; height: 100px; background: #437cfd; }
Квадрат:

Код
.rectangle { width: 200px; height: 100px; background: #437cfd; }
Прямоугольник:

Код
.circle { width: 100px; height: 100px; border-radius: 50px; background: #437cfd; }
Круг:

Код
.oval { width: 200px; height: 100px; background: #437cfd; border-radius: 100px/50px; }
Овал:

Код
.triangle_up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #437cfd; }
Треугольник повернутый вверх:

Код
.triangle_down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #437cfd; }
Треугольник повернутый вниз:

Код
.triangle_left { width: 0; height: 0; border-bottom: 50px solid transparent; border-right: 100px solid #437cfd; border-top: 50px solid transparent; }
Треугольник повернутый влево:

Код
.triangle_right { width: 0; height: 0; border-left: 100px solid #437cfd; border-bottom: 50px solid transparent; border-top: 50px solid transparent; }
Треугольник повернутый вправо:

Код
.triangle_top_left { width: 0; height: 0; border-top: 100px solid #437cfd; border-right: 100px solid transparent; }
Треугольник в левом верхнем углу:

Код
.triangle_top_right { width: 0; height: 0; border-top: 100px solid #437cfd; border-left: 100px solid transparent; }
Треугольник в правом верхнем углу:

Код
.triangle_bottom_right { width: 0; height: 0; border-bottom: 100px solid #437cfd; border-left: 100px solid transparent; }
Треугольник в правом нижнем углу:

Код
.triangle_bottom_left { width: 0; height: 0; border-bottom: 100px solid #437cfd; border-right: 100px solid transparent; }
Треугольник в левом нижнем углу:

Код
.parallelogram { background: #437cfd; width: 150px; height: 100px; -webkit-transform: skew(20deg); -o-transform: skew(20deg); -moz-transform: skew(20deg); }
Параллелограмм:

Код
.trapezoid { height: 0; width: 100px; border-bottom: 100px solid #437cfd; border-left: 50px solid transparent; border-right: 50px solid transparent; }
Трапеция:

Код
#star_six { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #437cfd; position: relative; } #star_six:after { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #437cfd; content: ""; position: absolute; top: 30px; left: -50px; }
Звезда с 6-ю остриями:


Категория: CSS | Просмотров: 1001 | Добавил: Samosval |Рейтинг: 0.0/0


Всего комментариев: 0
avatar
    Яндекс.Метрика
Сайт создан в системе uCozЯндекс.Метрика