Тысячи советов по CSS, PHP, скриптам. Полезные уроки и видео-советы

Популярные за месяц

08: Использование SVG: iframe / object / embed - CSS-хитрости

08: Использование SVG: iframe / object / embed - CSS-хитрости

Простите меня, если я немного не в себе этих методов. Я никогда не встречал случая, когда они определенно подходили бы. Было время, когда "

04: Почему именно SVG? Маленький. - CSS-хитрости

04: Почему именно SVG? Маленький. - CSS-хитрости

Размер файла SVG зависит от его сложности, а не от того, насколько он «большой». Помните, SVG на самом деле не волнует, в каком размере они отображаются, они такие "

11: Получение SVG - Проект существительного - CSS-хитрости

11: Получение SVG - Проект существительного - CSS-хитрости

The Noun Project - (очень) фантастическое место для получения SVG. Давайте посчитаем способы. Буквально все в SVG и на самом деле происходит именно так. Они - "

12: Получение SVG - Иконочные шрифты и наборы - CSS-хитрости

12: Получение SVG - Иконочные шрифты и наборы - CSS-хитрости

Помните, что все векторные изображения можно поместить в SVG. Программное обеспечение Adobe отлично справляется с этим. В PDF-файле могут быть векторные изображения - просто откройте PDF-файл, и вы "

09: SVG с URI данных - CSS-хитрости

09: SVG с URI данных - CSS-хитрости

Мы рассмотрели «встроенный SVG», который отбрасывает синтаксис SVG прямо в HTML. Вы можете использовать тот же встроенный SVG и в других местах, например, в "или"

13: SVG как система иконок - элемент `use` - CSS-хитрости

13: SVG как система иконок - элемент `use` - CSS-хитрости

В SVG есть очень крутой и мощный элемент под названием. Концепция довольно проста. Он находит еще один фрагмент кода SVG, на который ссылается идентификатор, и клонирует его "

16: Система значков SVG - внешний источник - CSS-хитрости

16: Система значков SVG - внешний источник - CSS-хитрости

Размещение блока SVG defs в верхней части документа определенно работает. У этого также есть некоторые преимущества, такие как тот факт, что не нужно выполнять HTTP-запросы ",

14: Система значков SVG - Повышение защиты - CSS-хитрости

14: Система значков SVG - Повышение защиты - CSS-хитрости

Этот элемент цепляется за всю идею встроенной системы значков SVG. Мы узнали, что лучший способ сделать это - разместить все, что вы собираетесь нарисовать позже "

15: Система значков SVG - Куда деваются дефисы - CSS-хитрости

15: Система значков SVG - Куда деваются дефисы - CSS-хитрости

Когда у нас есть то, что мы называем нашим «блоком defs» SVG - этот фрагмент SVG, который определяет все, что мы хотим нарисовать позже - куда мы его поместим? Так"

18: Инструмент сборки - Grunt svgstore - CSS-хитрости

18: Инструмент сборки - Grunt svgstore - CSS-хитрости

Мы определенно можем стать немного более ботанистыми с нашими инструментами сборки. На момент публикации этого постера дочерним элементом инструментов сборки был Grunt. Есть конкуренты ".

19: Дополнительные инструменты для сборки! - CSS-хитрости

19: Дополнительные инструменты для сборки! - CSS-хитрости

Мы узнали, что инструменты сборки особенно хороши для таких задач, как превращение папки, полной SVG, в блок SVG defs. Как всегда в "

10: Получение SVG - Стоковая фотография сайтов - CSS-хитрости

10: Получение SVG - Стоковая фотография сайтов - CSS-хитрости

На сайтах стоковых фотографий всегда есть возможность фильтровать результаты поиска по «вектору». И помните, какой бы формат вы ни выбрали, когда что-то скачиваете "

20: Стилизация встроенного SVG - возможности и ограничения - CSS-хитрости

20: Стилизация встроенного SVG - возможности и ограничения - CSS-хитрости

Встроенный SVG можно «стилизовать» в том смысле, что он уже имеет заливки и обводки и еще много чего, как только вы помещаете его на страницу. Это потрясающе и абсолютно "

17: Инструмент сборки - IcoMoon - CSS-хитрости

17: Инструмент сборки - IcoMoon - CSS-хитрости

Термин «инструмент сборки» может напугать. Это напоминает причудливые инструменты командной строки, требующие настройки, и странные системные зависимости, которые ломаются, когда вы "

21: Получите два цвета в использовании - CSS-хитрости

21: Получите два цвета в использовании - CSS-хитрости

Мы узнали, что ограничение использования для вставки небольшого количества SVG состоит в том, что вы не можете писать составные селекторы CSS, которые влияют на них. Например: Это "

22: Анимация SVG с помощью CSS - CSS-хитрости

22: Анимация SVG с помощью CSS - CSS-хитрости

Когда вы используете встроенный SVG, весь этот SVG-код находится прямо в HTML и, следовательно, в DOM. Вы можете стилизовать их так же, как, или любой другой HTML "

23: Анимация SVG с помощью SMIL - CSS-хитрости

23: Анимация SVG с помощью SMIL - CSS-хитрости

Хотя анимация SVG с помощью CSS может быть более удобной для среднего пользователя, у SVG есть другой способ создания анимации, встроенный прямо в SVG »

24: Совет по Illustrator: копирование и вставка встроенного SVG - CSS-хитрости

24: Совет по Illustrator: копирование и вставка встроенного SVG - CSS-хитрости

Этот совет применим, только если у вас установлен Adobe Illustrator CC (Creative Cloud). Я подтвердил, что он работает в этом или даже в новом CC 2014. Это максимально просто "

25: Оптимизация SVG вручную в Illustrator - CSS-хитрости

25: Оптимизация SVG вручную в Illustrator - CSS-хитрости

На этом видео было удалено. Я когда-нибудь пересниму его. Если вы читаете это, а я еще этого не сделал, не стесняйтесь связаться со мной и сообщить об ошибке "

26: Превращение фигур в пути - CSS-хитрости

26: Превращение фигур в пути - CSS-хитрости

Это немного эзотерическая вещь, мне просто нужно было сделать это один раз, и это сбивало с толку, поэтому я подумал, что сделаю об этом целое видео. Дело в том,"