Совет CSS3, нет изображений просто CSS

Question

Можно ли создать следующее без использования изображений, просто используя css3?

Answer 1

Да.Вы должны посмотреть на уместные градиенты, тени текста и 2D-преобразования.

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

Answer 2

Да, это возможно.

CSS-радиус границы, градиенты, тень текста и @ font-face помогут вам в этом.

Эти угловые вкладки идутбыть огромной болью, чтобы получить право, и, вероятно, иметь кросс-браузерные проблемы.Вероятно, вы сможете получить их правильно, используя CSS transform, но для краев потребуются отдельные элементы DOM, в противном случае вы также трансформируете свой текст.

Внешние кривые внизуиз вкладок тоже будет сложно.Я не вижу простого способа добиться этого.

Предполагая, что ваша цель - сделать это без изображений, а не просто как пример CSS, тогда лучшим решением может быть сделать это с помощью SVG.Вы можете включить SVG в качестве элементов на своей странице, так что нет необходимости в отдельных загрузках, и для достижения желаемых результатов должно быть достаточно просто - безусловно, намного проще, чем с чистым CSS.

SVG не будет работать в более старых версияхверсии IE (IE8 и ниже), но так как вы спрашиваете о CSS3, я полагаю, это не проблема для вас.Если это проблема, то вы можете использовать библиотеку, такую ​​как Raphael или SVG2VML , чтобы конвертировать SVG в VML на лету для IE.