Help
RSS
API
Feed
Maltego
Contact
Domain > css.yoksel.ru
×
Welcome!
Right click nodes and scroll the mouse to navigate the graph.
×
More information on this domain is in
AlienVault OTX
Is this malicious?
Yes
No
DNS Resolutions
Date
IP Address
2014-11-22
89.111.176.218
(
ClassC
)
2024-09-13
91.189.114.17
(
ClassC
)
Port 80
HTTP/1.1 200 OKServer: openrestyDate: Fri, 13 Sep 2024 15:26:28 GMTContent-Type: text/htmlContent-Length: 111925Connection: keep-aliveVary: Accept-EncodingAccept-Ranges: bytes !DOCTYPE html>html langru>head>meta nameviewport contentwidthdevice-width/>title>Про CSS/title>meta charSetutf-8/>link relcanonical hrefhttp://css.yoksel.ru//>meta namedescription contentСтатьи про CSS и SVG/>meta nameyandex-verification content50720d52dcb3b0b9/>link relshortcut icon href/favicon.ico/>link relapple-touch-icon sizes180x180 href/apple-touch-icon.png/>link relicon typeimage/png href/favicon-32x32.png sizes32x32/>link relicon typeimage/png href/favicon-16x16.png sizes16x16/>link relmanifest href/manifest.json/>link relmask-icon href/safari-pinned-tab.svg color#5bbad5/>meta nametheme-color content#ffffff/>meta propertyog:site_name contentПро CSS/>meta propertyog:title/>meta propertyog:type contentwebsite/>meta propertyog:url contenthttp://css.yoksel.ru//>meta propertyog:description contentСтатьи про CSS и SVG/>meta nametwitter:card contentsummary/>meta nametwitter:creator content@yoksel/>meta namegoogle-site-verification contentF-TG-dOz9FIzxUZCGD9MBMwsTukpyzq9LXIX6ZsJl_k/>meta namenext-head-count content21/>link relpreload href/_next/static/css/b021450b2efee70e.css asstyle crossorigin/>link relstylesheet href/_next/static/css/b021450b2efee70e.css crossorigin data-n-g/>link relpreload href/_next/static/css/80ec7241589a05e6.css asstyle crossorigin/>link relstylesheet href/_next/static/css/80ec7241589a05e6.css crossorigin data-n-p/>link relpreload href/_next/static/css/e85c9621773c45e9.css asstyle crossorigin/>link relstylesheet href/_next/static/css/e85c9621773c45e9.css crossorigin data-n-p/>noscript data-n-css>/noscript>script defer crossorigin nomodule src/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js>/script>script src/_next/static/chunks/webpack-8fa1640cc84ba8fe.js defer crossorigin>/script>script src/_next/static/chunks/framework-5429a50ba5373c56.js defer crossorigin>/script>script src/_next/static/chunks/main-be3a54f9b08a4465.js defer crossorigin>/script>script src/_next/static/chunks/pages/_app-1e951eaaada53ad2.js defer crossorigin>/script>script src/_next/static/chunks/622-eaadf10c8fcae41f.js defer crossorigin>/script>script src/_next/static/chunks/506-29d8d4d3de5db38f.js defer crossorigin>/script>script src/_next/static/chunks/pages/index-36d2e15497d5327f.js defer crossorigin>/script>script src/_next/static/LcKEv6KKPVPwwsRWWnW_1/_buildManifest.js defer crossorigin>/script>script src/_next/static/LcKEv6KKPVPwwsRWWnW_1/_ssgManifest.js defer crossorigin>/script>/head>body>div id__next>div classstyles_page___9hOn page--main>header classstyles_page-header__CUYa8>h1>div classstyles_header-logo___2Vf2>span classstyles_header-logo__container__se8yY>div classstyles_header-logo__content__41wOL>div classstyles_header-logo__text__qp0yG>span classstyles_header-logo__item--about__Xvl6l>Про/span> span classstyles_header-logo__item--css__Fqt1q>CSS/span>/div>/div>/span>/div>/h1>/header>div classstyles_page-main-wrapper__X3Qny>main>ul classstyles_articleCardsLis__lTb87>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/css-math/>Математические функции в CSS/a>/h3>div classuse-link-icons>p>В CSS есть a hrefhttps://www.w3.org/TR/css-values-4/#calc-notation>математические функции/a>, их всего четыре: code>min()/code>, code>max()/code>, code>clamp()/code> и code>calc()/code>./p>p>Математика в каком-то виде есть и в препроцессорах, например, в SCSS есть code>min()/code>, code>max()/code> и code>clamp()/code>, в Less — code>min()/code> и code>max()/code>, но есть пара существенных отличий. Во-первых, в препроцессорах всё рассчитывается один раз при компиляции, и в итоговом файле всегда будут фиксированные значения. А во-вторых, в препроцессорных функциях нельзя сочетать разные единицы измерения./p>/div>div classstyles_articleCard__footer__kaVfi>a href/css-math/>Читать дальше →/a>time dateTime2020-09-26>span classstyles_faded-text__usyFy>26/09/2020/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/adaptive-video-with-css-math/>Адаптивное видео с помощью встроенных математических функций CSS/a>/h3>div classuse-link-icons>p>Когда я в твиттере спросила для чего могут быть нужны в CSS a hrefhttps://www.w3.org/TR/css-values-3/#attr-notation>типизированные значения атрибутов/a>, Вадим Макеев a hrefhttps://twitter.com/pepelsbey/status/1304036385599508480>предположил/a>, что это было бы очень удобно для адаптивных картинок./p>p>Но я подумала, что картинки как-то a hrefhttps://codepen.io/yoksel/pen/wvGNrro>умеют/a> при ресайзе изменять высоту, сохраняя пропорции, а вот фреймы — совсем нет. При этом на адаптивных сайтах важно иметь возможность подгонять под ширину окна любой контент, и видео тоже. Что тут можно сделать?/p>/div>div classstyles_articleCard__footer__kaVfi>a href/adaptive-video-with-css-math/>Читать дальше →/a>time dateTime2020-09-24>span classstyles_faded-text__usyFy>24/09/2020/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/inaccessibility/>Недоступность в картинках/a>/h3>div classuse-link-icons>p>Когда мы говорим про доступность, мне часто не хватает визуальной составляющей. «Недоступно для скринридера» — как это выглядит?/p>p>Когда есть возможность запустить программу экранного доступа и увидеть всё своими глазами, это достаточно освежающий опыт, после которого начинаешь гораздо аккуратнее выбирать теги. Мне хотелось бы, чтобы это попробовал каждый, кто имеет дело с вёрсткой, но я подозреваю, что, хотя многие слышали о доступности и скринридерах, запускать читалку пробовали далеко не все — потому что надо не только найти где включается скринридер, но и разобраться в непривычном и достаточно неинтуитивном интерфейсе./p>/div>div classstyles_articleCard__footer__kaVfi>a href/inaccessibility/>Читать дальше →/a>time dateTime2020-08-30>span classstyles_faded-text__usyFy>30/08/2020/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/size-units/>Единицы размеров в CSS/a>/h3>div classuse-link-icons>p>В CSS существует множество единиц измерения. Обычно мы используем единицы размеров, но также есть единицы для углов — например, code>deg/code> и code>turn/code>, единицы времени — code>s/code> и code>ms/code>, единицы плотности экрана — например, code>dpi/code> и code>dppx/code> и другие./p>p>Здесь будут рассматриваться только единицы размеров, которыми мы пользуемся чаще всего. Подробное описание можно найти в спецификации W3C a hrefhttps://www.w3.org/TR/css-values-4/#lengths>Distance Units: the <length> type/a>./p>/div>div classstyles_articleCard__footer__kaVfi>a href/size-units/>Читать дальше →/a>time dateTime2020-08-13>span classstyles_faded-text__usyFy>13/08/2020/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/color-themes-generator/>Генератор цветовых тем/a>/h3>div classuse-link-icons>p>В конце марта я выпустила инструмент для генерации цветовых тем из CSS/SCSS/Less-переменных — a hrefhttps://yoksel.github.io/tema/>Tema/a>. Он может быть полезен для карманных проектов без фиксированного дизайна, когда цвета подбираются прямо в процессе разработки. Я немного расскажу про историю появления и покажу как его можно использовать./p>/div>div classstyles_articleCard__footer__kaVfi>a href/color-themes-generator/>Читать дальше →/a>time dateTime2020-07-27>span classstyles_faded-text__usyFy>27/07/2020/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/jekyll-gatsby/>Jekyll → Gatsby/a>/h3>div classuse-link-icons>p>На днях сайт обновил движок. Последний раз это случалось в a href/jekyll-vagrant>2013-м/a> — тогда сайт переехал с Wordpress на a hrefhttps://jekyllrb.com/>Jekyll/a>, сейчас — с Jekyll на a hrefhttps://www.gatsbyjs.org/>Gatsby/a>./p>p>Мои вопросы про Gatsby вызвали довольно оживленную дискуссию в твиттере (a hrefhttps://twitter.com/yoksel/status/1285960534261739526>1/a>, a hrefhttps://twitter.com/pepelsbey/status/1286232509915725824>2/a>), поэтому я решила отдельно рассказать про смену движка и опыт с Gatsby./p>/div>div classstyles_articleCard__footer__kaVfi>a href/jekyll-gatsby/>Читать дальше →/a>time dateTime2020-07-25>span classstyles_faded-text__usyFy>25/07/2020/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/opentype-variable-fonts/>Вариативные шрифты/a>/h3>div classuse-link-icons>p>Вариативные (или настраиваемые) шрифты — это, без преувеличения, новая страница в веб-типографике. Настраиваемые шрифты стали возможны благодаря совместным усилиям компаний Microsoft, Apple, Adobe и Google. Концепция была впервые представлена в сентябре 2016 года, вместе с релизом a hrefhttps://docs.microsoft.com/ru-ru/typography/opentype/spec/>OpenType 1.8/a>./p>/div>div classstyles_articleCard__footer__kaVfi>a href/opentype-variable-fonts/>Читать дальше →/a>time dateTime2018-06-18>span classstyles_faded-text__usyFy>18/06/2018/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/svg-sizes/>Размеры в SVG/a>/h3>div classuse-link-icons>p>Управление размерами — тема важная, и чтобы максимально использовать возможности SVG, нужно хорошо понимать как всё работает./p>/div>div classstyles_articleCard__footer__kaVfi>a href/svg-sizes/>Читать дальше →/a>time dateTime2017-08-15>span classstyles_faded-text__usyFy>15/08/2017/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/adaptive-pixel-perfect/>Адаптивный Pixel Perfect/a>/h3>div classuse-link-icons>p>Начну издалека. Не так давно я присоединилась к a hrefhttps://htmlacademy.ru>HTML Академии/a> в качестве наставника. Помимо того, что наставничество помогает упорядочить свои знания, оно удивительным образом стимулирует разработку разных полезных штук, потому что в процессе появляются интересные задачи, решение которых можно удобно автоматизировать./p>/div>div classstyles_articleCard__footer__kaVfi>a href/adaptive-pixel-perfect/>Читать дальше →/a>time dateTime2017-01-13>span classstyles_faded-text__usyFy>13/01/2017/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/a11y-for-logotypes/>Логотип не отвечает или временно недоступен/a>/h3>div classuse-link-icons>p>Заинтересовалась вопросом: как лучше всего верстать логотипы на сайте? Как правильно и почему? Картинкой или фоном? Как логотип будет выглядеть при печати? Как обеспечить доступность для скринридеров и как сделать подсказки для поисковиков? /p>/div>div classstyles_articleCard__footer__kaVfi>a href/a11y-for-logotypes/>Читать дальше →/a>time dateTime2016-12-20>span classstyles_faded-text__usyFy>20/12/2016/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/svg-patterns/>SVG-паттерны/a>/h3>div classuse-link-icons>p>code>pattern/code> — это элемент, который можно использовать в качеcтве заливки или обводки. Содержимое паттерна может быть самым разным: фигуры, символы, текст или растровые изображения — в любых сочетаниях./p>/div>div classstyles_articleCard__footer__kaVfi>a href/svg-patterns/>Читать дальше →/a>time dateTime2016-11-23>span classstyles_faded-text__usyFy>23/11/2016/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/svg-bubble/>Мыльные пузыри на SVG/a>/h3>div classuse-link-icons>p>Честно говоря, пузыри у меня получились почти случайно, когда мне потребовалось как следует изучить градиенты и я экспериментировала с их возможностями. И я сама до сих пор не очень понимаю, как так получилось, используя только SVG — векторный формат, — сделать такой невесомый мыльный пузырь. /p>/div>div classstyles_articleCard__footer__kaVfi>a href/svg-bubble/>Читать дальше →/a>time dateTime2016-08-18>span classstyles_faded-text__usyFy>18/08/2016/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/svg-gradients/>SVG-градиенты/a>/h3>div classuse-link-icons>p>В SVG не работают привычные CSS-фоны, для заливок здесь есть свои конструкции: для градиентов это элементы code>linearGradient/code> и code>radialGradient/code> — линейный и радиальный градиенты соответственно./p>/div>div classstyles_articleCard__footer__kaVfi>a href/svg-gradients/>Читать дальше →/a>time dateTime2016-08-11>span classstyles_faded-text__usyFy>11/08/2016/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/funny-little-console/>Весёлая консолька/a>/h3>div classuse-link-icons>p>Недавно мне пришлось отлаживать очень капризный скрипт, в котором, по ощущениям, происходили какие-то паранормальные явления. Чтобы найти проблему, понадобилось вывести в консоль браузера большое количество отладочной информации. /p>/div>div classstyles_articleCard__footer__kaVfi>a href/funny-little-console/>Читать дальше →/a>time dateTime2016-02-12>span classstyles_faded-text__usyFy>12/02/2016/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/svg-masks/>SVG-маски/a>/h3>div classuse-link-icons>p>SVG-маски — это очень богатая тема. В SVG есть два способа обрезать один элемент с помощью другого: это b>clip-path/b> и b>mask/b>. b>Clip-path/b> для обрезки использует только контуры фигур, игнорируя заливки и обводки, с b>масками/b> всё гораздо интереснее: в них учитываются и заливки, и обводки, и яркость содержимого./p>/div>div classstyles_articleCard__footer__kaVfi>a href/svg-masks/>Читать дальше →/a>time dateTime2016-02-04>span classstyles_faded-text__usyFy>04/02/2016/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/scroll-snap/>Умная прокрутка со Scroll Snap Points/a>/h3>div classuse-link-icons>p>В Firefox начиная с 39-й версии появились интересные CSS-свойства, которые позволяют управлять поведением прокручиваемого контента./p>/div>div classstyles_articleCard__footer__kaVfi>a href/scroll-snap/>Читать дальше →/a>time dateTime2015-07-06>span classstyles_faded-text__usyFy>06/07/2015/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/css-animation-algorithms/>CSS-анимации для ротации изображений/a>/h3>div classuse-link-icons>p>В процессе экспериментов с a href/animated-svg-mask/>анимированными SVG-масками/a>, мне пришлось как следует разобраться с алгоритмами CSS-анимаций. /p>/div>div classstyles_articleCard__footer__kaVfi>a href/css-animation-algorithms/>Читать дальше →/a>time dateTime2014-08-11>span classstyles_faded-text__usyFy>11/08/2014/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/animated-svg-mask/>Анимированные SVG-маски/a>/h3>div classuse-link-icons>p>В a href/svg-stroke>прошлой статье/a> я рассматривала странности SVG-обводки, а также возможность сделать анимированные маски./p>p>Так как трансформации в масках не анимируются в Firefox (31-я версия на момент написания статьи), я продолжила эксперименты с обводками. /p>/div>div classstyles_articleCard__footer__kaVfi>a href/animated-svg-mask/>Читать дальше →/a>time dateTime2014-08-10>span classstyles_faded-text__usyFy>10/08/2014/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/svg-stroke/>Странности обводки в SVG/a>/h3>div classuse-link-icons>p>Экспериментируя с SVG можно обнаружить много странных моментов. Получить странное при манипуляциях с масштабированием ещё как-то ожидаемо, но внезапно сюрпризы преподнесло свойство code>stroke-width/code>./p>/div>div classstyles_articleCard__footer__kaVfi>a href/svg-stroke/>Читать дальше →/a>time dateTime2014-07-26>span classstyles_faded-text__usyFy>26/07/2014/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/svg-preloaders/>SVG-прелоадеры/a>/h3>div classuse-link-icons>p>В поисках что бы ещё такого сделать чтобы ездило, я захотела сделать прелоадеры на SVG./p>p>Получилось здорово, хотя результат пока не сильно подходит для использования в реальной жизни./p>/div>div classstyles_articleCard__footer__kaVfi>a href/svg-preloaders/>Читать дальше →/a>time dateTime2014-07-08>span classstyles_faded-text__usyFy>08/07/2014/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/animated-gradients-2/>Анимируем градиенты ещё раз/a>/h3>div classuse-link-icons>p>Предыдущее a href/animation-for-gradients/>решение/a> мне всё-таки кажется несколько избыточным, а тут пришел в голову ещё один способ, на этот раз — с псевдоэлементами и code>opacity/code>./p>/div>div classstyles_articleCard__footer__kaVfi>a href/animated-gradients-2/>Читать дальше →/a>time dateTime2014-07-04>span classstyles_faded-text__usyFy>04/07/2014/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/background-blend-mode/>Background-blend-mode/a>/h3>div classuse-link-icons>p>На этой неделе в a hrefhttps://developer.mozilla.org/en-US/Firefox/Releases/30>Firefox 30/a> было включено по умолчанию свойство code>background-blend-mode/code>. Таким образом, Firefox стал третьим браузером, поддерживающим это свойство (два других — Opera и Chrome). Safari будет поддерживать это свойство в следующей версии, про планы IE мне ничего найти не удалось./p>/div>div classstyles_articleCard__footer__kaVfi>a href/background-blend-mode/>Читать дальше →/a>time dateTime2014-06-15>span classstyles_faded-text__usyFy>15/06/2014/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/svg-decoration/>Возможности оформления SVG/a>/h3>div classuse-link-icons>p>Внешний вид SVG-элементам можно задавать как с помощью CSS, так и с помощью SVG-фильтров, градиентов и паттернов — их можно прописывать элементам прямо в коде либо задавать также через CSS./p>p>Стили и скрипты можно задавать внутри SVG-файла, но если мы хотим, чтобы одно и то же изображение в разных условиях выглядело по-разному — стили внутри файла не годятся — нужно, чтобы векторное содержимое было доступно для внешних стилей./p>/div>div classstyles_articleCard__footer__kaVfi>a href/svg-decoration/>Читать дальше →/a>time dateTime2014-04-17>span classstyles_faded-text__usyFy>17/04/2014/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/css-and-svg-masks/>CSS и SVG маски/a>/h3>div classuse-link-icons>p>Есть несколько способов обрезать элемент по маске. Одни поддерживаются всеми современными браузерами, другие поддерживаются очень плохо, и пользоваться ими ещё нельзя. В некоторых способах маской может быть текст./p>/div>div classstyles_articleCard__footer__kaVfi>a href/css-and-svg-masks/>Читать дальше →/a>time dateTime2014-04-12>span classstyles_faded-text__usyFy>12/04/2014/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/nth-child/>Nth-child и nth-of-type/a>/h3>div classuse-link-icons>p>code>:nth-child/code> — один из моих самых любимых селекторов, потому что с помощью него можно s>делать клевые разноцветные штуки/s> собирать элементы списка в группы произвольной длины и делать с ними разные интересные вещи: от полосатых таблиц до целых разноцветных дизайнов, и все это без необходимости задавать дополнительные классы или как-то менять разметку. /p>/div>div classstyles_articleCard__footer__kaVfi>a href/nth-child/>Читать дальше →/a>time dateTime2014-04-06>span classstyles_faded-text__usyFy>06/04/2014/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/svg-icons/>SVG-иконки/a>/h3>div classuse-link-icons>p>Адаптивный дизайн — популярная тема. Экраны давно вышли за пределы стандартных разрешений, и сайты могут смотреть и на девайсах размером с ладонь, и на больших мониторах. Сайт должен одинаково хорошо выглядеть вне зависимости от размера устройства и плотности пикселей.Для адаптации дизайна и контента существует много разных методик и технологий. Векторная графика, SVG, по-моему, одна из самых интересных тем в этом направлении./p>/div>div classstyles_articleCard__footer__kaVfi>a href/svg-icons/>Читать дальше →/a>time dateTime2014-03-29>span classstyles_faded-text__usyFy>29/03/2014/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/svg-fill-and-stroke/>SVG: заливка и обводка/a>/h3>div classuse-link-icons>p>В SVG заливка и обводка имеют много разных интересных опций, которые предоставляют возможности гораздо шире того, что есть в CSS./p>/div>div classstyles_articleCard__footer__kaVfi>a href/svg-fill-and-stroke/>Читать дальше →/a>time dateTime2014-03-27>span classstyles_faded-text__usyFy>27/03/2014/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/svg-path/>SVG-path/a>/h3>div classuse-link-icons>p>code>path/code> — более сложный вариант линии. С его помощью можно нарисовать code>line/code>, code>polyline/code>, code>polygon/code>, code>circle/code> и code>rect/code>:/p>iframe height700 stylewidth: 100% titleTry to make simple shapes with path srchttps://codepen.io/yoksel/embed/Jbofr?&default-tabresult >/iframe>p>В отличие от code>polygon/code>, фигура не замыкается сама по себе, но это можно сделать с помощью дополнительного параметра./p>/div>div classstyles_articleCard__footer__kaVfi>a href/svg-path/>Читать дальше →/a>time dateTime2014-03-23>span classstyles_faded-text__usyFy>23/03/2014/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/svg-groups-use/>SVG: группировка и переиспользование элементов/a>/h3>div classuse-link-icons>p>SVG-фигуры можно группировать, чтобы удобно структурировать файл. Для этих целей существует несколько тегов: nobr>code>g/code>/nobr>, code>defs/code> и code>symbol/code>. Элементы, группы элементов и символы можно использовать повторно. /p>/div>div classstyles_articleCard__footer__kaVfi>a href/svg-groups-use/>Читать дальше →/a>time dateTime2014-03-22>span classstyles_faded-text__usyFy>22/03/2014/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/svg-shapes/>SVG-фигуры и трансформации/a>/h3>div classuse-link-icons>p>a href/svg>← Начало про SVG/a>/p>p>Писать SVG руками довольно просто. Используем фигуры: code>rect/code>, code>polygon/code>, code>circle/code>, code>ellipse/code>, а также code>line/code>, code>polyline/code> и code>path/code>.Задаем выбранную фигуру, определяем её размеры и координаты, затем добавляем фон и обводку./p>/div>div classstyles_articleCard__footer__kaVfi>a href/svg-shapes/>Читать дальше →/a>time dateTime2014-03-21>span classstyles_faded-text__usyFy>21/03/2014/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/svg/>SVG/a>/h3>div classuse-link-icons>p>SVG — это формат векторных изображений, основанный на XML./p>p>Спецификация: a hrefhttp://www.w3.org/TR/SVG/>w3.org/TR/SVG/a>/p>p>SVG имеет массу преимуществ перед растровыми изображениями:/p>/div>div classstyles_articleCard__footer__kaVfi>a href/svg/>Читать дальше →/a>time dateTime2014-03-19>span classstyles_faded-text__usyFy>19/03/2014/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/3d-and-gradients/>СSS-градиенты и 3D/a>/h3>div classuse-link-icons>p>Сочетание CSS-анимации, трансформаций и градиентов может дать совершенно удивительные результаты. Не уверена, что подобное можно использовать в реальных проектах, но выглядит довольно эффектно./p>/div>div classstyles_articleCard__footer__kaVfi>a href/3d-and-gradients/>Читать дальше →/a>time dateTime2014-03-04>span classstyles_faded-text__usyFy>04/03/2014/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/shadowpainter/>Рисовалка анимированных теней/a>/h3>div classuse-link-icons>p>В процессе изучения JS решила написать рисовалку CSS-анимаций на основе code>box-shadow/code>. Получила море удовольствия и узнала много нового./p>/div>div classstyles_articleCard__footer__kaVfi>a href/shadowpainter/>Читать дальше →/a>time dateTime2014-02-23>span classstyles_faded-text__usyFy>23/02/2014/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/new-patterns/>Свежие CSS-паттерны/a>/h3>div classuse-link-icons>p>Неожиданно увлеклась темой CSS-паттернов и сделала несколько новых.Меня интересовало: можно ли сделать плавные волны и спирали, получится ли имитировать узор из цветной бумаги и как сделать почтовую марку не используя изображения./p>/div>div classstyles_articleCard__footer__kaVfi>a href/new-patterns/>Читать дальше →/a>time dateTime2014-02-12>span classstyles_faded-text__usyFy>12/02/2014/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/css-patterns/>CSS-паттерны/a>/h3>div classuse-link-icons>p>Возможности управления фонами через CSS в cочетании с градиентами дают совершенно невероятные возможности. Градиентами можно нарисовать почти всё что угодно от простых клеточек, полосочек и кружочков до достаточно сложных узоров. Играться можно до бесконечности./p>/div>div classstyles_articleCard__footer__kaVfi>a href/css-patterns/>Читать дальше →/a>time dateTime2014-02-07>span classstyles_faded-text__usyFy>07/02/2014/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/radial-gradients/>Радиальные градиенты/a>/h3>div classuse-link-icons>p>Радиальные градиенты отрисовываются иначе, чем линейные. Если цвета линейных располагаются перпендикулярно линии, задающей направление, то в радиальных цвета расходятся от заданного центра, а градиент может принимать форму круга или эллипса./p>p>Спецификация: a hrefhttp://www.w3.org/TR/css3-images/#radial-gradients>w3.org/TR/css3-images/#radial-gradients/a>./p>/div>div classstyles_articleCard__footer__kaVfi>a href/radial-gradients/>Читать дальше →/a>time dateTime2014-02-05>span classstyles_faded-text__usyFy>05/02/2014/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/linear-gradients/>Линейные градиенты/a>/h3>div classuse-link-icons>p>CSS-градиенты позволяют сделать фон из двух и более цветов, плавно переходящих из одного в другой.Они с нами уже достаточно давно, и имеют довольно a hrefhttp://caniuse.com/#featcss-gradients>неплохую поддержку браузерами/a>. Большинство современных браузеров понимает их без префиксов, для IE9 и старше есть a hrefhttp://msdn.microsoft.com/en-us/library/ms532997(vvs.85).aspx>Gradient Filter/a>, также для IE9 можно использовать SVG./p>p>Спецификация: a hrefhttp://www.w3.org/TR/css3-images/#gradients>w3.org/TR/css3-images/#gradients/a>./p>/div>div classstyles_articleCard__footer__kaVfi>a href/linear-gradients/>Читать дальше →/a>time dateTime2014-02-04>span classstyles_faded-text__usyFy>04/02/2014/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/tic-tac-toe/>Крестики-нолики на CSS/a>/h3>div classuse-link-icons>p>Довольно странный вариант игры. /p>/div>div classstyles_articleCard__footer__kaVfi>a href/tic-tac-toe/>Читать дальше →/a>time dateTime2014-01-25>span classstyles_faded-text__usyFy>25/01/2014/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/border-image/>Border-image/a>/h3>div classuse-link-icons>p>code>Border-image/code> — свойство, которое позволяет задавать фоновое изображение для рамки элемента. Свойство заполняет рамку заданной картинкой, распределяя части изображения таким образом, чтобы угловые части находились в углах рамки, а пространства между ними заполнялись остальными частями изображения./p>p>Спецификация: a hrefhttp://www.w3.org/TR/css3-background/#border-images>w3.org/TR/css3-background/#border-images/a>./p>p>Это свойство позволяет легко делать невероятные штуки, для которых раньше требовалось от 3-х до 8-ми картинок и манипуляции с разметкой./p>/div>div classstyles_articleCard__footer__kaVfi>a href/border-image/>Читать дальше →/a>time dateTime2014-01-22>span classstyles_faded-text__usyFy>22/01/2014/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/digital-watch/>Электронные часы на CSS и JS./a>/h3>div classuse-link-icons>p>С познавательно-развлекательной целью сделала электронные часы./p>p>Показывают текущее время, меняют цвет, умеют подгоняться под размер окна браузера./p>/div>div classstyles_articleCard__footer__kaVfi>a href/digital-watch/>Читать дальше →/a>time dateTime2014-01-19>span classstyles_faded-text__usyFy>19/01/2014/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/specifity/>Сколько весят селекторы?/a>/h3>div classuse-link-icons>p>Все CSS-селекторы имеют свой вес, который определяет как взаимодействуют одинаковые свойства, заданные в разных местах кода одному и тому же элементу./p>/div>div classstyles_articleCard__footer__kaVfi>a href/specifity/>Читать дальше →/a>time dateTime2014-01-03>span classstyles_faded-text__usyFy>03/01/2014/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/unicode/>Символы юникода/a>/h3>div classuse-link-icons>p>Заинтересовалась юникодом, захотела посмотреть какие символы в нем есть, и как-то сама собой получилась страница, на которой можно увидеть большинство символов юникода: a hrefhttps://yoksel.github.io/unicode-table/>yoksel.github.io/unicode-table/a>./p>/div>div classstyles_articleCard__footer__kaVfi>a href/unicode/>Читать дальше →/a>time dateTime2014-01-02>span classstyles_faded-text__usyFy>02/01/2014/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/content/>Свойство content/a>/h3>div classuse-link-icons>p>С помощью CSS на страницу можно добавить элементы, несуществующие в разметке страницы. Это делается с помощью псевдоэлементов code>:before/code> и code>:after/code>, но не менее важную роль в этом играет свойство code>content/code>./p>/div>div classstyles_articleCard__footer__kaVfi>a href/content/>Читать дальше →/a>time dateTime2013-12-22>span classstyles_faded-text__usyFy>22/12/2013/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/animation-for-gradients/>Анимируем CSS-градиенты/a>/h3>div classuse-link-icons>p>Как известно, градиенты не любят анимироваться./p>/div>div classstyles_articleCard__footer__kaVfi>a href/animation-for-gradients/>Читать дальше →/a>time dateTime2013-12-16>span classstyles_faded-text__usyFy>16/12/2013/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/text-effects/>Текстовые эффекты/a>/h3>div classuse-link-icons>p>В посте представлены некоторые эффекты на основе code>text-shadow/code>./p>p>code>text-shadow/code> — это свойство, описывающее тень, отбрасываемую текстом. /p>/div>div classstyles_articleCard__footer__kaVfi>a href/text-effects/>Читать дальше →/a>time dateTime2013-12-09>span classstyles_faded-text__usyFy>09/12/2013/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/list-like-tree/>Древовидный список на CSS/a>/h3>div classuse-link-icons>p>Как-то мне потребовалось сделать иерархическое представление структуры проекта, для реализации был выбран CSS./p>/div>div classstyles_articleCard__footer__kaVfi>a href/list-like-tree/>Читать дальше →/a>time dateTime2013-11-27>span classstyles_faded-text__usyFy>27/11/2013/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/css-selectors-part2/>Css-селекторы, часть 2/a>/h3>div classuse-link-icons>p>Начало тут: a href/css-selectors>Css-селекторы/a>./p>/div>div classstyles_articleCard__footer__kaVfi>a href/css-selectors-part2/>Читать дальше →/a>time dateTime2013-11-20>span classstyles_faded-text__usyFy>20/11/2013/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/css-selectors/>Css-селекторы/a>/h3>div classuse-link-icons>p>В CSS есть достаточно способов обратиться к нужным элементам. br/>В каждой новой спецификацией CSS добавлялось что-то новое, и теперь у нас есть много самых разных селекторов. /p>/div>div classstyles_articleCard__footer__kaVfi>a href/css-selectors/>Читать дальше →/a>time dateTime2013-11-16>span classstyles_faded-text__usyFy>16/11/2013/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/kontekst-nalozheniya/>Контекст наложения/a>/h3>div classuse-link-icons>p>Если с помощью code>z-index/code> изменять порядок наложения элементов друг на друга, в некоторых случаях могут возникать проблемы из-за свойств, создающих новый контекст наложения./p>/div>div classstyles_articleCard__footer__kaVfi>a href/kontekst-nalozheniya/>Читать дальше →/a>time dateTime2013-10-22>span classstyles_faded-text__usyFy>22/10/2013/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/box-sizing/>Box-sizing/a>/h3>div classuse-link-icons>p>Свойство code>box-sizing/code> позволяет указать как ведут себя размеры блока при наличии рамок и полей.Применяются к элементам, у которых заданы размеры./p>/div>div classstyles_articleCard__footer__kaVfi>a href/box-sizing/>Читать дальше →/a>time dateTime2013-10-09>span classstyles_faded-text__usyFy>09/10/2013/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/dva-sposoba-proshit-e-lement-po-krayu/>Два способа "прошить" элемент по краю/a>/h3>div classuse-link-icons>p>Есть два способа сделать эффект, как будто элемент прострочили на швейной машинке: используя псевдоэлементы и с помощью code>outline/code>./p>/div>div classstyles_articleCard__footer__kaVfi>a href/dva-sposoba-proshit-e-lement-po-krayu/>Читать дальше →/a>time dateTime2013-10-09>span classstyles_faded-text__usyFy>09/10/2013/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/tsveta/>Цвета в CSS/a>/h3>div classuse-link-icons>p>Мне нравится возможность задавать цвета в коде несколькими разными способами, в зависимости от цели использования. Всего таких способов 7./p>p>Спецификация тут: a hrefhttp://www.w3.org/TR/css3-color/>w3.org/TR/css3-color//a>./p>p>Итак, способы:/p>/div>div classstyles_articleCard__footer__kaVfi>a href/tsveta/>Читать дальше →/a>time dateTime2013-10-06>span classstyles_faded-text__usyFy>06/10/2013/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/fon-pod-strochkami-dobavlyaem-polya/>Фон под строчками: добавляем поля/a>/h3>div classuse-link-icons>p>Проблема: если задать фон строчным элементам, получается вот так/p>/div>div classstyles_articleCard__footer__kaVfi>a href/fon-pod-strochkami-dobavlyaem-polya/>Читать дальше →/a>time dateTime2013-10-04>span classstyles_faded-text__usyFy>04/10/2013/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/box-shadow/>Box-shadow/a>/h3>div classuse-link-icons>p>Свойство code>box-shadow/code> позволяет добавить элементам одну или несколько теней./p>/div>div classstyles_articleCard__footer__kaVfi>a href/box-shadow/>Читать дальше →/a>time dateTime2013-09-29>span classstyles_faded-text__usyFy>29/09/2013/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/css-figury-lepestok/>Css-фигуры: лепесток/a>/h3>div classuse-link-icons>p>Из одного code>div/code> с помощью code>border-radius/code> легко можно сделать лепесток:/p>/div>div classstyles_articleCard__footer__kaVfi>a href/css-figury-lepestok/>Читать дальше →/a>time dateTime2013-09-27>span classstyles_faded-text__usyFy>27/09/2013/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/3d-cube/>3D-куб/a>/h3>div classuse-link-icons>p>Мне давно хотелось разобраться с 3D фигурами в Css и сделать вращающийся куб. Спеки прочитаны, можно приступать (почитать про a href/transform/>трансформы/a> и про a href/css-animation/>анимации/a>)./p>/div>div classstyles_articleCard__footer__kaVfi>a href/3d-cube/>Читать дальше →/a>time dateTime2013-09-26>span classstyles_faded-text__usyFy>26/09/2013/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/css-animation/>Css Animation/a>/h3>div classuse-link-icons>section>Свойство code>animation/code> позволяет анимировать элементы страницы.p>Можно управлять длительностью анимации, повторением, направлением, типом движения и шагами.Анимировать можно любые элементы, в том числе псевдо-элементы./p>/div>div classstyles_articleCard__footer__kaVfi>a href/css-animation/>Читать дальше →/a>time dateTime2013-09-26>span classstyles_faded-text__usyFy>26/09/2013/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/transform/>Transform/a>/h3>div classuse-link-icons>section>CSS-свойство code>transform/code> позволяет трансформировать элементы, в том числе в трехмерном пространстве./div>div classstyles_articleCard__footer__kaVfi>a href/transform/>Читать дальше →/a>time dateTime2013-09-26>span classstyles_faded-text__usyFy>26/09/2013/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/border-radius/>Border-radius/a>/h3>div classuse-link-icons>p>strong>Border-radius/strong> — это свойство, добавляющее элементам скругление углов./p>p>Скругление можно задать для всего элемента сразу:/p>figure aria-labelПример кода>pre classlanguage-css>code classlanguage-css>span classtoken property>border-radius/span>span classtoken punctuation>:/span> 10pxspan classtoken punctuation>;/span>/code>/pre>/figure>p>или разным углам поотдельности, например:/p>figure aria-labelПример кода>pre classlanguage-css>code classlanguage-css>span classtoken property>border-top-left-radius/span>span classtoken punctuation>:/span> 25pxspan classtoken punctuation>;/span>span classtoken property>border-top-right-radius/span>span classtoken punctuation>:/span> 50%span classtoken punctuation>;/span>/code>/pre>/figure>p>Возможные значения: числа или проценты./p>/div>div classstyles_articleCard__footer__kaVfi>a href/border-radius/>Читать дальше →/a>time dateTime2013-09-17>span classstyles_faded-text__usyFy>17/09/2013/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/first-letter/>First letter/a>/h3>div classuse-link-icons>p>code>:first-letter/code> — это псевдоэлемент, представляющий первый символ в тексте./p>p>Работает только для блочных элементов./p>p>К code>:first-letter/code> применяется ограниченное количество свойств:/p>/div>div classstyles_articleCard__footer__kaVfi>a href/first-letter/>Читать дальше →/a>time dateTime2013-09-10>span classstyles_faded-text__usyFy>10/09/2013/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/css-figury/>CSS-фигуры/a>/h3>div classuse-link-icons>p>Фигуры с помощью CSS — тема богатая и интересная. Помимо базовых фигур, используя тени и псевдоэлементы можно сделать много всякого другого, причем некоторые фигуры можно сделать двумя и более способами./p>/div>div classstyles_articleCard__footer__kaVfi>a href/css-figury/>Читать дальше →/a>time dateTime2013-09-06>span classstyles_faded-text__usyFy>06/09/2013/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/eti-glaza-naprotiv/>Эти глаза напротив/a>/h3>div classuse-link-icons>p>Тени, градиенты, скругленные углы./p>/div>div classstyles_articleCard__footer__kaVfi>a href/eti-glaza-naprotiv/>Читать дальше →/a>time dateTime2013-09-06>span classstyles_faded-text__usyFy>06/09/2013/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/strelki-s-pomoshh-yu-svojstva-border/>Стрелки с помощью свойства border/a>/h3>div classuse-link-icons>p>С помощью code>border/code> можно легко делать стрелочки разного размера и в разных направлениях./p>p>Чтобы понять общий принцип, возьмем див нулевого размера, сделаем ему толстую рамку и раскрасим её в разные цвета: /p>/div>div classstyles_articleCard__footer__kaVfi>a href/strelki-s-pomoshh-yu-svojstva-border/>Читать дальше →/a>time dateTime2013-09-04>span classstyles_faded-text__usyFy>04/09/2013/span>/time>/div>/div>/li>li>div classstyles_articleCard___klxl>h3 classstyles_articleCard__title__Lz6Zl>a href/flexbox/>Flexbox/a>/h3>div classuse-link-icons>p>strong>Flexbox/strong> — это новый способ располагать блоки на странице. Это технология, созданная именно для раскладки элементов, в отличие от float-ов. С помощью strong>Flexbox/strong> можно легко выравнивать элементы по горизонтали и по вертикали, менять направление и порядок отображение элементов, растягивать блоки на всю высоту родителя или прибивать их к нижнему краю./p>/div>div classstyles_articleCard__footer__kaVfi>a href/flexbox/>Читать дальше →/a>time dateTime2013-09-03>span classstyles_faded-text__usyFy>03/09/2013/span>/time>/div>/div>/li>/ul>p>a href/archive/>Архив/a>/p>a href#begin classpost__marker post__marker--hidden titleНаверх>div classstyles_visually-hidden__nDPfz>Наверх/div>/a>/main>aside>h2 classstyles_visually-hidden__nDPfz>Сайдбар/h2>div classstyles_widget___4jHD>h3 classstyles_widget__title__QlX2W>Проекты/h3>ul classstyles_widget__list__TyLbK>li classstyles_widget__item__VcSjQ>a classstyles_widget__link__aNAHo relnoreferrer hrefhttps://yoksel.github.io/grid-cheatsheet/>span classstyles_widget__link-text__uygQq>Grid Cheatsheet/span>span classstyles_widget__stars___s8X0 titleЗвёзд на гитхабе>span classstyles_visually-hidden__nDPfz>Звёзд на гитхабе:/span>147/span>/a>div classstyles_widget__desc__HDlYV>Шпаргалка по гридам/div>/li>li classstyles_widget__item__VcSjQ>a classstyles_widget__link__aNAHo relnoreferrer hrefhttps://yoksel.github.io/flex-cheatsheet/>span classstyles_widget__link-text__uygQq>Flexbox Cheatsheet/span>span classstyles_widget__stars___s8X0 titleЗвёзд на гитхабе>span classstyles_visually-hidden__nDPfz>Звёзд на гитхабе:/span>1298/span>/a>div classstyles_widget__desc__HDlYV>Шпаргалка по флексбоксам/div>/li>li classstyles_widget__item__VcSjQ>a classstyles_widget__link__aNAHo relnoreferrer hrefhttps://yoksel.github.io/tema/>span classstyles_widget__link-text__uygQq>Tema/span>span classstyles_widget__stars___s8X0 titleЗвёзд на гитхабе>span classstyles_visually-hidden__nDPfz>Звёзд на гитхабе:/span>32/span>/a>div classstyles_widget__desc__HDlYV>Генератор цветовых тем из CSS/SCSS/Less-переменных/div>/li>li classstyles_widget__item__VcSjQ>a classstyles_widget__link__aNAHo relnoreferrer hrefhttps://yoksel.github.io/svg-filters/>span classstyles_widget__link-text__uygQq>SVG Filters/span>span classstyles_widget__stars___s8X0 titleЗвёзд на гитхабе>span classstyles_visually-hidden__nDPfz>Звёзд на гитхабе:/span>270/span>/a>div classstyles_widget__desc__HDlYV>Конструктор SVG-фильтров/div>/li>li classstyles_widget__item__VcSjQ>a classstyles_widget__link__aNAHo relnoreferrer hrefhttps://yoksel.github.io/svg-gradient-map/>span classstyles_widget__link-text__uygQq>SVG Gradient Map Filter/span>span classstyles_widget__stars___s8X0 titleЗвёзд на гитхабе>span classstyles_visually-hidden__nDPfz>Звёзд на гитхабе:/span>149/span>/a>div classstyles_widget__desc__HDlYV>Конструктор фильтров c Gradient Map/div>/li>li classstyles_widget__item__VcSjQ>a classstyles_widget__link__aNAHo relnoreferrer hrefhttps://yoksel.github.io/url-encoder/>span classstyles_widget__link-text__uygQq>url-encoder для SVG/span>span classstyles_widget__stars___s8X0 titleЗвёзд на гитхабе>span classstyles_visually-hidden__nDPfz>Звёзд на гитхабе:/span>1170/span>/a>/li>li classstyles_widget__item__VcSjQ>a classstyles_widget__link__aNAHo relnoreferrer hrefhttps://github.com/yoksel/common-words>span classstyles_widget__link-text__uygQq>Common Words/span>span classstyles_widget__stars___s8X0 titleЗвёзд на гитхабе>span classstyles_visually-hidden__nDPfz>Звёзд на гитхабе:/span>3073/span>/a>div classstyles_widget__desc__HDlYV>Слова, часто используемые в CSS-классах/div>/li>li classstyles_widget__item__VcSjQ>a classstyles_widget__link__aNAHo relnoreferrer hrefhttps://yoksel.github.io/html-tree/>span classstyles_widget__link-text__uygQq>HTML Tree/span>span classstyles_widget__stars___s8X0 titleЗвёзд на гитхабе>span classstyles_visually-hidden__nDPfz>Звёзд на гитхабе:/span>220/span>/a>div classstyles_widget__desc__HDlYV>Генератор структуры документа с проверкой БЭМ-классов/div>/li>li classstyles_widget__item__VcSjQ>a classstyles_widget__link__aNAHo relnoreferrer hrefhttps://github.com/yoksel/pixel-glass-js>span classstyles_widget__link-text__uygQq>Pixel Glass/span>span classstyles_widget__stars___s8X0 titleЗвёзд на гитхабе>span classstyles_visually-hidden__nDPfz>Звёзд на гитхабе:/span>154/span>/a>div classstyles_widget__desc__HDlYV>Небольшой скрипт для проверки разметки на соответствие макету/div>/li>li classstyles_widget__item__VcSjQ>a classstyles_widget__link__aNAHo relnoreferrer hrefhttps://yoksel.github.io/handy-colors/>span classstyles_widget__link-text__uygQq>Handy Colors/span>span classstyles_widget__stars___s8X0 titleЗвёзд на гитхабе>span classstyles_visually-hidden__nDPfz>Звёзд на гитхабе:/span>35/span>/a>div classstyles_widget__desc__HDlYV>Список именованных цветов с готовыми палитрами/div>/li>li classstyles_widget__item__VcSjQ>a classstyles_widget__link__aNAHo relnoreferrer hrefhttps://yoksel.github.io/relative-clip-path/>span classstyles_widget__link-text__uygQq>Relative Clip Path/span>span classstyles_widget__stars___s8X0 titleЗвёзд на гитхабе>span classstyles_visually-hidden__nDPfz>Звёзд на гитхабе:/span>171/span>/a>div classstyles_widget__desc__HDlYV>Конвертер абсолютных координат пути в относительные/div>/li>li classstyles_widget__item__VcSjQ>a classstyles_widget__link__aNAHo relnoreferrer hrefhttps://yoksel.github.io/emoji-brush/>span classstyles_widget__link-text__uygQq>Emoji Brush/span>span classstyles_widget__stars___s8X0 titleЗвёзд на гитхабе>span classstyles_visually-hidden__nDPfz>Звёзд на гитхабе:/span>32/span>/a>div classstyles_widget__desc__HDlYV>Кисточка с эмоджи/div>/li>li classstyles_widget__item__VcSjQ>a classstyles_widget__link__aNAHo relnoreferrer hrefhttps://yoksel.github.io/snowflake/>span classstyles_widget__link-text__uygQq>Snowflake/span>span classstyles_widget__stars___s8X0 titleЗвёзд на гитхабе>span classstyles_visually-hidden__nDPfz>Звёзд на гитхабе:/span>37/span>/a>div classstyles_widget__desc__HDlYV>Генератор снежинок/div>/li>li classstyles_widget__item__VcSjQ>a classstyles_widget__link__aNAHo relnoreferrer hrefhttps://yoksel.github.io/unicode-table/>span classstyles_widget__link-text__uygQq>Таблица символов юникода/span>span classstyles_widget__stars___s8X0 titleЗвёзд на гитхабе>span classstyles_visually-hidden__nDPfz>Звёзд на гитхабе:/span>16/span>/a>/li>li classstyles_widget__item__VcSjQ>a classstyles_widget__link__aNAHo relnoreferrer hrefhttps://yoksel.github.io/wave-maker/>span classstyles_widget__link-text__uygQq>Wave Maker/span>span classstyles_widget__stars___s8X0 titleЗвёзд на гитхабе>span classstyles_visually-hidden__nDPfz>Звёзд на гитхабе:/span>22/span>/a>div classstyles_widget__desc__HDlYV>Конструктор волн с использованием a hrefhttps://www.w3.org/TR/SVG2/paths.html#PathDataEllipticalArcCommands>SVG Arcs/a>/div>/li>li classstyles_widget__item__VcSjQ>a classstyles_widget__link__aNAHo relnoreferrer hrefhttps://yoksel.github.io/shadowPainter/>span classstyles_widget__link-text__uygQq>Shadow Painter/span>span classstyles_widget__stars___s8X0 titleЗвёзд на гитхабе>span classstyles_visually-hidden__nDPfz>Звёзд на гитхабе:/span>17/span>/a>div classstyles_widget__desc__HDlYV>Рисовалка пиксельных анимаций на основе box-shadow/div>/li>/ul>/div>div classstyles_widget___4jHD>h3 classstyles_widget__title__QlX2W>Страницы/h3>ul classstyles_widget__list__TyLbK>li classstyles_widget__item__VcSjQ>a classstyles_widget__link__aNAHo href/pages/svg-links/>span classstyles_widget__link-text__uygQq>SVG: полезные ссылки/span>/a>/li>li classstyles_widget__item__VcSjQ>a classstyles_widget__link__aNAHo href/pages/css-selectors/>span classstyles_widget__link-text__uygQq>CSS-селекторы одной таблицей/span>/a>/li>li classstyles_widget__item__VcSjQ>a classstyles_widget__link__aNAHo href/pages/tablitsa-imenovanny-h-tsvetov/>span classstyles_widget__link-text__uygQq>Таблица именованных цветов/span>/a>/li>li classstyles_widget__item__VcSjQ>a classstyles_widget__link__aNAHo href/pages/transform-functions/>span classstyles_widget__link-text__uygQq>Функции Transform/span>/a>/li>li classstyles_widget__item__VcSjQ>a classstyles_widget__link__aNAHo href/pages/svojstva-animation/>span classstyles_widget__link-text__uygQq>Свойства Animation одной таблицей/span>/a>/li>li classstyles_widget__item__VcSjQ>a classstyles_widget__link__aNAHo href/pages/svojstva-transform/>span classstyles_widget__link-text__uygQq>Свойства Transform/span>/a>/li>li classstyles_widget__item__VcSjQ>a classstyles_widget__link__aNAHo href/pages/razny-j-sintaksis-flexbox/>span classstyles_widget__link-text__uygQq>Разный синтаксис Flexbox/span>/a>/li>li classstyles_widget__item__VcSjQ>a classstyles_widget__link__aNAHo href/pages/svojstva-flexbox/>span classstyles_widget__link-text__uygQq>Свойства Flexbox одной таблицей/span>/a>/li>/ul>/div>/aside>/div>footer classstyles_page-footer__3oCLD>nav classstyles_page-footer__nav__V_rxP>h2 classstyles_visually-hidden__nDPfz>Нижняя навигация/h2>div classstyles_page-footer__container__8C6jd>div classstyles_footer-logo___tu5l>span class>Про CSS/span>/div>ul classstyles_page-footer__nav-list__wkQ8I use-link-icons no-site-icons>li classstyles_page-footer__nav-item__5F9Tl>a classstyles_page-footer__nav-text__0Ke53 href/about/>О сайте/a>/li>li classstyles_page-footer__nav-item__5F9Tl>a classstyles_page-footer__nav-text__0Ke53 href/tags/>Метки/a>/li>li classstyles_page-footer__nav-item__5F9Tl>a classstyles_page-footer__nav-text__0Ke53 relnoreferrer hrefhttps://twitter.com/yoksel>Twitter/a>/li>li classstyles_page-footer__nav-item__5F9Tl>a classstyles_page-footer__nav-text__0Ke53 relnoreferrer hrefhttps://github.com/yoksel>Github/a>/li>/ul>/div>/nav>/footer>div classstyles_counter__Epo2H>!-- Yandex.Metrika counter -->script typetext/javascript>(function (d, w, c) { (wc wc || ).push(function() { try { w.yaCounter22204352 new Ya.Metrika({id:22204352, webvisor:true, clickmap:true, trackLinks:true, accurateTrackBounce:true}); } catch(e) { } }); var n d.getElementsByTagName(script)0, s d.createElement(script), f function () { n.parentNode.insertBefore(s, n); }; s.type text/javascript; s.async true; s.src (d.location.protocol https: ? https: : http:) + //mc.yandex.ru/metrika/watch.js; if (w.opera object Opera) { d.addEventListener(DOMContentLoaded, f, false); } else { f(); } })(document, window, yandex_metrika_callbacks);/script>noscript>div>img src//mc.yandex.ru/watch/22204352 styleposition:absolute; left:-9999px; alt />/div>/noscript>!-- /Yandex.Metrika counter -->/div>/div>/div>script id__NEXT_DATA__ typeapplication/json crossorigin>{props:{pageProps:{posts:{excerpt:\u003cp\u003eВ CSS есть \u003ca href\https://www.w3.org/TR/css-values-4/#calc-notation\\u003eматематические функции\u003c/a\u003e, их всего четыре: \u003ccode\u003emin()\u003c/code\u003e, \u003ccode\u003emax()\u003c/code\u003e, \u003ccode\u003eclamp()\u003c/code\u003e и \u003ccode\u003ecalc()\u003c/code\u003e.\u003c/p\u003e\n\u003cp\u003eМатематика в каком-то виде есть и в препроцессорах, например, в SCSS есть \u003ccode\u003emin()\u003c/code\u003e, \u003ccode\u003emax()\u003c/code\u003e и \u003ccode\u003eclamp()\u003c/code\u003e, в Less — \u003ccode\u003emin()\u003c/code\u003e и \u003ccode\u003emax()\u003c/code\u003e, но есть пара существенных отличий. Во-первых, в препроцессорах всё рассчитывается один раз при компиляции, и в итоговом файле всегда будут фиксированные значения. А во-вторых, в препроцессорных функциях нельзя сочетать разные единицы измерения.\u003c/p\u003e\n,date:2020-09-26,href:/css-math,text:Математические функции в CSS,type:post},{excerpt:\u003cp\u003eКогда я в твиттере спросила для чего могут быть нужны в CSS \u003ca href\https://www.w3.org/TR/css-values-3/#attr-notation\\u003eтипизированные значения атрибутов\u003c/a\u003e, Вадим Макеев \u003ca href\https://twitter.com/pepelsbey/status/1304036385599508480\\u003eпредположил\u003c/a\u003e, что это было бы очень удобно для адаптивных картинок.\u003c/p\u003e\n\u003cp\u003eНо я подумала, что картинки как-то \u003ca href\https://codepen.io/yoksel/pen/wvGNrro\\u003eумеют\u003c/a\u003e при ресайзе изменять высоту, сохраняя пропорции, а вот фреймы — совсем нет. При этом на адаптивных сайтах важно иметь возможность подгонять под ширину окна любой контент, и видео тоже. Что тут можно сделать?\u003c/p\u003e\n,date:2020-09-24,href:/adaptive-video-with-css-math,text:Адаптивное видео с помощью встроенных математических функций CSS,type:post},{excerpt:\u003cp\u003eКогда мы говорим про доступность, мне часто не хватает визуальной составляющей. «Недоступно для скринридера» — как это выглядит?\u003c/p\u003e\n\u003cp\u003eКогда есть возможность запустить программу экранного доступа и увидеть всё своими глазами, это достаточно освежающий опыт, после которого начинаешь гораздо аккуратнее выбирать теги. Мне хотелось бы, чтобы это попробовал каждый, кто имеет дело с вёрсткой, но я подозреваю, что, хотя многие слышали о доступности и скринридерах, запускать читалку пробовали далеко не все — потому что надо не только найти где включается скринридер, но и разобраться в непривычном и достаточно неинтуитивном интерфейсе.\u003c/p\u003e\n,date:2020-08-30,href:/inaccessibility,text:Недоступность в картинках,type:post},{excerpt:\u003cp\u003eВ CSS существует множество единиц измерения. Обычно мы используем единицы размеров, но также есть единицы для углов — например, \u003ccode\u003edeg\u003c/code\u003e и \u003ccode\u003eturn\u003c/code\u003e, единицы времени — \u003ccode\u003es\u003c/code\u003e и \u003ccode\u003ems\u003c/code\u003e, единицы плотности экрана — например, \u003ccode\u003edpi\u003c/code\u003e и \u003ccode\u003edppx\u003c/code\u003e и другие.\u003c/p\u003e\n\u003cp\u003eЗдесь будут рассматриваться только единицы размеров, которыми мы пользуемся чаще всего. Подробное описание можно найти в спецификации W3C \u003ca href\https://www.w3.org/TR/css-values-4/#lengths\\u003eDistance Units: the \u0026lt;length\u0026gt; type\u003c/a\u003e.\u003c/p\u003e\n,date:2020-08-13,href:/size-units,text:Единицы размеров в CSS,type:post},{excerpt:\u003cp\u003eВ конце марта я выпустила инструмент для генерации цветовых тем из CSS/SCSS/Less-переменных — \u003ca href\https://yoksel.github.io/tema/\\u003eTema\u003c/a\u003e. Он может быть полезен для карманных проектов без фиксированного дизайна, когда цвета подбираются прямо в\u0026nbsp;процессе разработки. Я немного расскажу про историю появления и\u0026nbsp;покажу как его можно использовать.\u003c/p\u003e\n,date:2020-07-27,href:/color-themes-generator,text:Генератор цветовых тем,type:post},{excerpt:\u003cp\u003eНа днях сайт обновил движок. Последний раз это случалось в \u003ca href\/jekyll-vagrant\\u003e2013-м\u003c/a\u003e — тогда сайт переехал с Wordpress на \u003ca href\https://jekyllrb.com/\\u003eJekyll\u003c/a\u003e, сейчас — с Jekyll на \u003ca href\https://www.gatsbyjs.org/\\u003eGatsby\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eМои вопросы про Gatsby вызвали довольно оживленную дискуссию в твиттере (\u003ca href\https://twitter.com/yoksel/status/1285960534261739526\\u003e1\u003c/a\u003e, \u003ca href\https://twitter.com/pepelsbey/status/1286232509915725824\\u003e2\u003c/a\u003e), поэтому я решила отдельно рассказать про смену движка и опыт с Gatsby.\u003c/p\u003e\n,date:2020-07-25,href:/jekyll-gatsby,text:Jekyll → Gatsby,type:post},{excerpt:\u003cp\u003eВариативные (или настраиваемые) шрифты — это, без преувеличения, новая страница в веб-типографике. Настраиваемые шрифты стали возможны благодаря совместным усилиям компаний Microsoft, Apple, Adobe и Google. Концепция была впервые представлена в сентябре 2016 года, вместе с релизом \u003ca href\https://docs.microsoft.com/ru-ru/typography/opentype/spec/\\u003eOpenType 1.8\u003c/a\u003e.\u003c/p\u003e\n,date:2018-06-18,href:/opentype-variable-fonts,text:Вариативные шрифты,type:post},{excerpt:\u003cp\u003eУправление размерами — тема важная, и чтобы максимально использовать возможности SVG, нужно хорошо понимать как всё работает.\u003c/p\u003e\n,date:2017-08-15,href:/svg-sizes,text:Размеры в SVG,type:post},{excerpt:\u003cp\u003eНачну издалека. Не так давно я присоединилась к \u003ca href\https://htmlacademy.ru\\u003eHTML Академии\u003c/a\u003e в качестве наставника. Помимо того, что наставничество помогает упорядочить свои знания, оно удивительным образом стимулирует разработку разных полезных штук, потому что в процессе появляются интересные задачи, решение которых можно удобно автоматизировать.\u003c/p\u003e\n,date:2017-01-13,href:/adaptive-pixel-perfect,text:Адаптивный Pixel Perfect,type:post},{excerpt:\u003cp\u003eЗаинтересовалась вопросом: как лучше всего верстать логотипы на сайте? Как правильно и почему? Картинкой или фоном? Как логотип будет выглядеть при печати? Как обеспечить доступность для скринридеров и как сделать подсказки для поисковиков? \u003c/p\u003e\n,date:2016-12-20,href:/a11y-for-logotypes,text:Логотип не отвечает или временно недоступен,type:post},{excerpt:\u003cp\u003e\u003ccode\u003epattern\u003c/code\u003e — это элемент, который можно использовать в качеcтве заливки или обводки. Содержимое паттерна может быть самым разным: фигуры, символы, текст или растровые изображения — в любых сочетаниях.\u003c/p\u003e\n,date:2016-11-23,href:/svg-patterns,text:SVG-паттерны,type:post},{excerpt:\u003cp\u003eЧестно говоря, пузыри у меня получились почти случайно, когда мне потребовалось как следует изучить градиенты и я экспериментировала с их возможностями. И я сама до сих пор не очень понимаю, как так получилось, используя только SVG — векторный формат, — сделать такой невесомый мыльный пузырь. \u003c/p\u003e\n,date:2016-08-18,href:/svg-bubble,text:Мыльные пузыри на SVG,type:post},{excerpt:\u003cp\u003eВ SVG не работают привычные CSS-фоны, для заливок здесь есть свои конструкции: для градиентов это элементы \u003ccode\u003elinearGradient\u003c/code\u003e и \u003ccode\u003eradialGradient\u003c/code\u003e — линейный и радиальный градиенты соответственно.\u003c/p\u003e\n,date:2016-08-11,href:/svg-gradients,text:SVG-градиенты,type:post},{excerpt:\u003cp\u003eНедавно мне пришлось отлаживать очень капризный скрипт, в котором, по ощущениям, происходили какие-то паранормальные явления. Чтобы найти проблему, понадобилось вывести в консоль браузера большое количество отладочной информации. \u003c/p\u003e\n,date:2016-02-12,href:/funny-little-console,text:Весёлая консолька,type:post},{excerpt:\u003cp\u003eSVG-маски — это очень богатая тема. В SVG есть два способа обрезать один элемент с помощью другого: это \u003cb\u003eclip-path\u003c/b\u003e и \u003cb\u003emask\u003c/b\u003e. \u003cb\u003eClip-path\u003c/b\u003e для обрезки использует только контуры фигур, игнорируя заливки и обводки, с \u003cb\u003eмасками\u003c/b\u003e всё гораздо интереснее: в них учитываются и заливки, и обводки, и яркость содержимого.\u003c/p\u003e\n,date:2016-02-04,href:/svg-masks,text:SVG-маски,type:post},{excerpt:\u003cp\u003eВ Firefox начиная с 39-й версии появились интересные CSS-свойства, которые позволяют управлять поведением прокручиваемого контента.\u003c/p\u003e\n,date:2015-07-06,href:/scroll-snap,text:Умная прокрутка со Scroll Snap Points,type:post},{excerpt:\u003cp\u003eВ процессе экспериментов с \u003ca href\/animated-svg-mask/\\u003eанимированными SVG-масками\u003c/a\u003e, мне пришлось как следует разобраться с алгоритмами CSS-анимаций. \u003c/p\u003e\n,date:2014-08-11,href:/css-animation-algorithms,text:CSS-анимации для ротации изображений,type:post},{excerpt:\u003cp\u003eВ \u003ca href\/svg-stroke\\u003eпрошлой статье\u003c/a\u003e я рассматривала странности SVG-обводки, а также возможность сделать анимированные маски.\u003c/p\u003e\n\u003cp\u003eТак как трансформации в масках не анимируются в Firefox (31-я версия на момент написания статьи), я продолжила эксперименты с обводками. \u003c/p\u003e\n,date:2014-08-10,href:/animated-svg-mask,text:Анимированные SVG-маски,type:post},{excerpt:\u003cp\u003eЭкспериментируя с SVG можно обнаружить много странных моментов. Получить странное при манипуляциях с масштабированием ещё как-то ожидаемо, но внезапно сюрпризы преподнесло свойство \u003ccode\u003estroke-width\u003c/code\u003e.\u003c/p\u003e\n,date:2014-07-26,href:/svg-stroke,text:Странности обводки в SVG,type:post},{excerpt:\u003cp\u003eВ поисках что бы ещё такого сделать чтобы ездило, я захотела сделать прелоадеры на SVG.\u003c/p\u003e\n\u003cp\u003eПолучилось здорово, хотя результат пока не сильно подходит для использования в реальной жизни.\u003c/p\u003e\n,date:2014-07-08,href:/svg-preloaders,text:SVG-прелоадеры,type:post},{excerpt:\u003cp\u003eПредыдущее \u003ca href\/animation-for-gradients/\\u003eрешение\u003c/a\u003e мне всё-таки кажется несколько избыточным, а тут пришел в голову ещё один способ, на этот раз — с псевдоэлементами и \u003ccode\u003eopacity\u003c/code\u003e.\u003c/p\u003e\n,date:2014-07-04,href:/animated-gradients-2,text:Анимируем градиенты ещё раз,type:post},{excerpt:\u003cp\u003eНа этой неделе в \u003ca href\https://developer.mozilla.org/en-US/Firefox/Releases/30\\u003eFirefox 30\u003c/a\u003e было включено по умолчанию свойство \u003ccode\u003ebackground-blend-mode\u003c/code\u003e. Таким образом, Firefox стал третьим браузером, поддерживающим это свойство (два других — Opera и Chrome). Safari будет поддерживать это свойство в следующей версии, про планы IE мне ничего найти не удалось.\u003c/p\u003e\n,date:2014-06-15,href:/background-blend-mode,text:Background-blend-mode,type:post},{excerpt:\u003cp\u003eВнешний вид SVG-элементам можно задавать как с помощью CSS, так и с помощью SVG-фильтров, градиентов и паттернов — их можно прописывать элементам прямо в коде либо задавать также через CSS.\u003c/p\u003e\n\u003cp\u003eСтили и скрипты можно задавать внутри SVG-файла, но если мы хотим, чтобы одно и то же изображение в разных условиях выглядело по-разному — стили внутри файла не годятся \u0026mdash; нужно, чтобы векторное содержимое было доступно для внешних стилей.\u003c/p\u003e\n,date:2014-04-17,href:/svg-decoration,text:Возможности оформления SVG,type:post},{excerpt:\u003cp\u003eЕсть несколько способов обрезать элемент по маске. Одни поддерживаются всеми современными браузерами, другие поддерживаются очень плохо, и пользоваться ими ещё нельзя. В некоторых способах маской может быть текст.\u003c/p\u003e,date:2014-04-12,href:/css-and-svg-masks,text:CSS и SVG маски,type:post},{excerpt:\u003cp\u003e\u003ccode\u003e:nth-child\u003c/code\u003e — один из моих самых любимых селекторов, потому что с помощью него можно \u003cs\u003eделать клевые разноцветные штуки\u003c/s\u003e собирать элементы списка в группы произвольной длины и делать с ними разные интересные вещи: от полосатых таблиц до целых разноцветных дизайнов, и все это без необходимости задавать дополнительные классы или как-то менять разметку. \u003c/p\u003e\n,date:2014-04-06,href:/nth-child,text:Nth-child и nth-of-type,type:post},{excerpt:\u003cp\u003eАдаптивный дизайн — популярная тема. Экраны давно вышли за пределы стандартных разрешений, и сайты могут смотреть и на девайсах размером с ладонь, и на больших мониторах. Сайт должен одинаково хорошо выглядеть вне зависимости от размера устройства и плотности пикселей.\nДля адаптации дизайна и контента существует много разных методик и технологий. Векторная графика, SVG, по-моему, одна из самых интересных тем в этом направлении.\u003c/p\u003e\n,date:2014-03-29,href:/svg-icons,text:SVG-иконки,type:post},{excerpt:\u003cp\u003eВ SVG заливка и обводка имеют много разных интересных опций, которые предоставляют возможности гораздо шире того, что есть в CSS.\u003c/p\u003e\n,date:2014-03-27,href:/svg-fill-and-stroke,text:SVG: заливка и обводка,type:post},{excerpt:\u003cp\u003e\u003ccode\u003epath\u003c/code\u003e — более сложный вариант линии. С его помощью можно нарисовать \u003ccode\u003eline\u003c/code\u003e, \u003ccode\u003epolyline\u003c/code\u003e, \u003ccode\u003epolygon\u003c/code\u003e, \u003ccode\u003ecircle\u003c/code\u003e и \u003ccode\u003erect\u003c/code\u003e:\u003c/p\u003e\n\u003ciframe height\700\\n style\width: 100%\\n title\Try to make simple shapes with path\\n src\https://codepen.io/yoksel/embed/Jbofr?\u0026default-tabresult\\n \u003e\u003c/iframe\u003e\n\n\u003cp\u003eВ отличие от \u003ccode\u003epolygon\u003c/code\u003e, фигура не замыкается сама по себе, но это можно сделать с помощью дополнительного параметра.\u003c/p\u003e\n,date:2014-03-23,href:/svg-path,text:SVG-path,type:post},{excerpt:\u003cp\u003eSVG-фигуры можно группировать, чтобы удобно структурировать файл. Для этих целей существует несколько тегов: \u003cnobr\u003e\u003ccode\u003eg\u003c/code\u003e\u003c/nobr\u003e, \u003ccode\u003edefs\u003c/code\u003e и \u003ccode\u003esymbol\u003c/code\u003e. Элементы, группы элементов и символы можно использовать повторно. \u003c/p\u003e\n,date:2014-03-22,href:/svg-groups-use,text:SVG: группировка и переиспользование элементов,type:post},{excerpt:\u003cp\u003e\u003ca href\/svg\\u003e\u0026larr; Начало про SVG\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eПисать SVG руками довольно просто. Используем фигуры: \u003ccode\u003erect\u003c/code\u003e, \u003ccode\u003epolygon\u003c/code\u003e, \u003ccode\u003ecircle\u003c/code\u003e, \u003ccode\u003eellipse\u003c/code\u003e, а также \u003ccode\u003eline\u003c/code\u003e, \u003ccode\u003epolyline\u003c/code\u003e и \u003ccode\u003epath\u003c/code\u003e.\nЗадаем выбранную фигуру, определяем её размеры и координаты, затем добавляем фон и обводку.\u003c/p\u003e\n,date:2014-03-21,href:/svg-shapes,text:SVG-фигуры и трансформации,type:post},{excerpt:\u003cp\u003eSVG — это формат векторных изображений, основанный на XML.\u003c/p\u003e\n\u003cp\u003eСпецификация: \u003ca href\http://www.w3.org/TR/SVG/\\u003ew3.org/TR/SVG\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eSVG имеет массу преимуществ перед растровыми изображениями:\u003c/p\u003e\n,date:2014-03-19,href:/svg,text:SVG,type:post},{excerpt:\u003cp\u003eСочетание CSS-анимации, трансформаций и градиентов может дать совершенно удивительные результаты. Не уверена, что подобное можно использовать в реальных проектах, но выглядит довольно эффектно.\u003c/p\u003e\n,date:2014-03-04,href:/3d-and-gradients,text:СSS-градиенты и 3D,type:post},{excerpt:\u003cp\u003eВ процессе изучения JS решила написать рисовалку CSS-анимаций на основе \u003ccode\u003ebox-shadow\u003c/code\u003e. Получила море удовольствия и узнала много нового.\u003c/p\u003e\n,date:2014-02-23,href:/shadowpainter,text:Рисовалка анимированных теней,type:post},{excerpt:\u003cp\u003eНеожиданно увлеклась темой CSS-паттернов и сделала несколько новых.\nМеня интересовало: можно ли сделать плавные волны и спирали, получится ли имитировать узор из цветной бумаги и как сделать почтовую марку не используя изображения.\u003c/p\u003e\n,date:2014-02-12,href:/new-patterns,text:Свежие CSS-паттерны,type:post},{excerpt:\u003cp\u003eВозможности управления фонами через CSS в cочетании с градиентами дают совершенно невероятные возможности. Градиентами можно нарисовать почти всё что угодно от простых клеточек, полосочек и кружочков до достаточно сложных узоров. Играться можно до бесконечности.\u003c/p\u003e\n,date:2014-02-07,href:/css-patterns,text:CSS-паттерны,type:post},{excerpt:\u003cp\u003eРадиальные градиенты отрисовываются иначе, чем линейные. Если цвета линейных располагаются перпендикулярно линии, задающей направление, то в радиальных цвета расходятся от заданного центра, а градиент может принимать форму круга или эллипса.\u003c/p\u003e\n\u003cp\u003eСпецификация: \u003ca href\http://www.w3.org/TR/css3-images/#radial-gradients\\u003ew3.org/TR/css3-images/#radial-gradients\u003c/a\u003e.\u003c/p\u003e\n,date:2014-02-05,href:/radial-gradients,text:Радиальные градиенты,type:post},{excerpt:\u003cp\u003eCSS-градиенты позволяют сделать фон из двух и более цветов, плавно переходящих из одного в другой.\nОни с нами уже достаточно давно, и имеют довольно \u003ca href\http://caniuse.com/#featcss-gradients\\u003eнеплохую поддержку браузерами\u003c/a\u003e. Большинство современных браузеров понимает их без префиксов, для IE9 и старше есть \u003ca href\http://msdn.microsoft.com/en-us/library/ms532997(vvs.85).aspx\\u003eGradient Filter\u003c/a\u003e, также для IE9 можно использовать SVG.\u003c/p\u003e\n\u003cp\u003eСпецификация: \u003ca href\http://www.w3.org/TR/css3-images/#gradients\\u003ew3.org/TR/css3-images/#gradients\u003c/a\u003e.\u003c/p\u003e\n,date:2014-02-04,href:/linear-gradients,text:Линейные градиенты,type:post},{excerpt:\u003cp\u003eДовольно странный вариант игры. \u003c/p\u003e\n,date:2014-01-25,href:/tic-tac-toe,text:Крестики-нолики на CSS,type:post},{excerpt:\u003cp\u003e\u003ccode\u003eBorder-image\u003c/code\u003e — свойство, которое позволяет задавать фоновое изображение для рамки элемента. Свойство заполняет рамку заданной картинкой, распределяя части изображения таким образом, чтобы угловые части находились в углах рамки, а пространства между ними заполнялись остальными частями изображения.\u003c/p\u003e\n\u003cp\u003eСпецификация: \u003ca href\http://www.w3.org/TR/css3-background/#border-images\\u003ew3.org/TR/css3-background/#border-images\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eЭто свойство позволяет легко делать невероятные штуки, для которых раньше требовалось от 3-х до 8-ми картинок и манипуляции с разметкой.\u003c/p\u003e\n,date:2014-01-22,href:/border-image,text:Border-image,type:post},{excerpt:\u003cp\u003eС познавательно-развлекательной целью сделала электронные часы.\u003c/p\u003e\n\u003cp\u003eПоказывают текущее время, меняют цвет, умеют подгоняться под размер окна браузера.\u003c/p\u003e\n,date:2014-01-19,href:/digital-watch,text:Электронные часы на CSS и JS.,type:post},{excerpt:\u003cp\u003eВсе CSS-селекторы имеют свой вес, который определяет как взаимодействуют одинаковые свойства, заданные в разных местах кода одному и тому же элементу.\u003c/p\u003e\n,date:2014-01-03,href:/specifity,text:Сколько весят селекторы?,type:post},{excerpt:\u003cp\u003eЗаинтересовалась юникодом, захотела посмотреть какие символы в нем есть, и как-то сама собой получилась страница, на которой можно увидеть большинство символов юникода: \u003ca href\https://yoksel.github.io/unicode-table/\\u003eyoksel.github.io/unicode-table\u003c/a\u003e.\u003c/p\u003e\n,date:2014-01-02,href:/unicode,text:Символы юникода,type:post},{excerpt:\u003cp\u003eС помощью CSS на страницу можно добавить элементы, несуществующие в разметке страницы. Это делается с помощью псевдоэлементов \u003ccode\u003e:before\u003c/code\u003e и \u003ccode\u003e:after\u003c/code\u003e, но не менее важную роль в этом играет свойство \u003ccode\u003econtent\u003c/code\u003e.\u003c/p\u003e\n,date:2013-12-22,href:/content,text:Свойство content,type:post},{excerpt:\u003cp\u003eКак известно, градиенты не любят анимироваться.\u003c/p\u003e\n,date:2013-12-16,href:/animation-for-gradients,text:Анимируем CSS-градиенты,type:post},{excerpt:\u003cp\u003eВ посте представлены некоторые эффекты на основе \u003ccode\u003etext-shadow\u003c/code\u003e.\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003etext-shadow\u003c/code\u003e — это свойство, описывающее тень, отбрасываемую текстом. \u003c/p\u003e\n,date:2013-12-09,href:/text-effects,text:Текстовые эффекты,type:post},{excerpt:\u003cp\u003eКак-то мне потребовалось сделать иерархическое представление структуры проекта, для реализации был выбран CSS.\u003c/p\u003e\n,date:2013-11-27,href:/list-like-tree,text:Древовидный список на CSS,type:post},{excerpt:\u003cp\u003eНачало тут: \u003ca href\/css-selectors\\u003eCss-селекторы\u003c/a\u003e.\u003c/p\u003e\n,date:2013-11-20,href:/css-selectors-part2,text:Css-селекторы, часть 2,type:post},{excerpt:\u003cp\u003eВ CSS есть достаточно способов обратиться к нужным элементам. \u003cbr/\u003e\nВ каждой новой спецификацией CSS добавлялось что-то новое, и теперь у нас есть много самых разных селекторов. \u003c/p\u003e\n,date:2013-11-16,href:/css-selectors,text:Css-селекторы,type:post},{excerpt:\u003cp\u003eЕсли с помощью \u003ccode\u003ez-index\u003c/code\u003e изменять порядок наложения элементов друг на друга, в некоторых случаях могут возникать проблемы из-за свойств, создающих новый контекст наложения.\u003c/p\u003e\n,date:2013-10-22,href:/kontekst-nalozheniya,text:Контекст наложения,type:post},{excerpt:\u003cp\u003eСвойство \u003ccode\u003ebox-sizing\u003c/code\u003e позволяет указать как ведут себя размеры блока при наличии рамок и полей.\nПрименяются к элементам, у которых заданы размеры.\u003c/p\u003e\n,date:2013-10-09,href:/box-sizing,text:Box-sizing,type:post},{excerpt:\u003cp\u003eЕсть два способа сделать эффект, как будто элемент прострочили на швейной машинке: используя псевдоэлементы и с помощью \u003ccode\u003eoutline\u003c/code\u003e.\u003c/p\u003e\n,date:2013-10-09,href:/dva-sposoba-proshit-e-lement-po-krayu,text:Два способа \прошить\ элемент по краю,type:post},{excerpt:\u003cp\u003eМне нравится возможность задавать цвета в коде несколькими разными способами, в зависимости от цели использования. Всего таких способов 7.\u003c/p\u003e\n\u003cp\u003eСпецификация тут: \u003ca href\http://www.w3.org/TR/css3-color/\\u003ew3.org/TR/css3-color/\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eИтак, способы:\u003c/p\u003e\n,date:2013-10-06,href:/tsveta,text:Цвета в CSS,type:post},{excerpt:\u003cp\u003eПроблема: если задать фон строчным элементам, получается вот так\u003c/p\u003e\n,date:2013-10-04,href:/fon-pod-strochkami-dobavlyaem-polya,text:Фон под строчками: добавляем поля,type:post},{excerpt:\u003cp\u003eСвойство \u003ccode\u003ebox-shadow\u003c/code\u003e позволяет добавить элементам одну или несколько теней.\u003c/p\u003e\n,date:2013-09-29,href:/box-shadow,text:Box-shadow,type:post},{excerpt:\u003cp\u003eИз одного \u003ccode\u003ediv\u003c/code\u003e с помощью \u003ccode\u003eborder-radius\u003c/code\u003e легко можно сделать лепесток:\u003c/p\u003e\n,date:2013-09-27,href:/css-figury-lepestok,text:Css-фигуры: лепесток,type:post},{excerpt:\u003cp\u003eМне давно хотелось разобраться с 3D фигурами в Css и сделать вращающийся куб. Спеки прочитаны, можно приступать (почитать про \u003ca href\/transform/\\u003eтрансформы\u003c/a\u003e и про \u003ca href\/css-animation/\\u003eанимации\u003c/a\u003e).\u003c/p\u003e\n,date:2013-09-26,href:/3d-cube,text:3D-куб,type:post},{excerpt:\u003csection\u003eСвойство \u003ccode\u003eanimation\u003c/code\u003e позволяет анимировать элементы страницы.\n\n\u003cp\u003eМожно управлять длительностью анимации, повторением, направлением, типом движения и шагами.\nАнимировать можно любые элементы, в том числе псевдо-элементы.\u003c/p\u003e\n,date:2013-09-26,href:/css-animation,text:Css Animation,type:post},{excerpt:\u003csection\u003eCSS-свойство \u003ccode\u003etransform\u003c/code\u003e позволяет трансформировать элементы, в том числе в трехмерном пространстве.,date:2013-09-26,href:/transform,text:Transform,type:post},{excerpt:\u003cp\u003e\u003cstrong\u003eBorder-radius\u003c/strong\u003e — это свойство, добавляющее элементам скругление углов.\u003c/p\u003e\n\u003cp\u003eСкругление можно задать для всего элемента сразу:\u003c/p\u003e\n\u003cfigure aria-label\Пример кода\\u003e\u003cpre class\language-css\\u003e\u003ccode class\language-css\\u003e\u003cspan class\token property\\u003eborder-radius\u003c/span\u003e\u003cspan class\token punctuation\\u003e:\u003c/span\u003e 10px\u003cspan class\token punctuation\\u003e;\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/figure\u003e\n\u003cp\u003eили разным углам поотдельности, например:\u003c/p\u003e\n\u003cfigure aria-label\Пример кода\\u003e\u003cpre class\language-css\\u003e\u003ccode class\language-css\\u003e\u003cspan class\token property\\u003eborder-top-left-radius\u003c/span\u003e\u003cspan class\token punctuation\\u003e:\u003c/span\u003e 25px\u003cspan class\token punctuation\\u003e;\u003c/span\u003e\n\u003cspan class\token property\\u003eborder-top-right-radius\u003c/span\u003e\u003cspan class\token punctuation\\u003e:\u003c/span\u003e 50%\u003cspan class\token punctuation\\u003e;\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/figure\u003e\n\u003cp\u003eВозможные значения: числа или проценты.\u003c/p\u003e\n,date:2013-09-17,href:/border-radius,text:Border-radius,type:post},{excerpt:\u003cp\u003e\u003ccode\u003e:first-letter\u003c/code\u003e — это псевдоэлемент, представляющий первый символ в тексте.\u003c/p\u003e\n\u003cp\u003eРаботает только для блочных элементов.\u003c/p\u003e\n\u003cp\u003eК \u003ccode\u003e:first-letter\u003c/code\u003e применяется ограниченное количество свойств:\u003c/p\u003e\n,date:2013-09-10,href:/first-letter,text:First letter,type:post},{excerpt:\u003cp\u003eФигуры с помощью CSS — тема богатая и интересная. Помимо базовых фигур, используя тени и псевдоэлементы можно сделать много всякого другого, причем некоторые фигуры можно сделать двумя и более способами.\u003c/p\u003e\n,date:2013-09-06,href:/css-figury,text:CSS-фигуры,type:post},{excerpt:\u003cp\u003eТени, градиенты, скругленные углы.\u003c/p\u003e\n,date:2013-09-06,href:/eti-glaza-naprotiv,text:Эти глаза напротив,type:post},{excerpt:\u003cp\u003eС помощью \u003ccode\u003eborder\u003c/code\u003e можно легко делать стрелочки разного размера и в разных направлениях.\u003c/p\u003e\n\u003cp\u003eЧтобы понять общий принцип, возьмем див нулевого размера, сделаем ему толстую рамку и раскрасим её в разные цвета: \u003c/p\u003e\n,date:2013-09-04,href:/strelki-s-pomoshh-yu-svojstva-border,text:Стрелки с помощью свойства border,type:post},{excerpt:\u003cp\u003e\u003cstrong\u003eFlexbox\u003c/strong\u003e — это новый способ располагать блоки на странице. Это технология, созданная именно для раскладки элементов, в отличие от float-ов. С помощью \u003cstrong\u003eFlexbox\u003c/strong\u003e можно легко выравнивать элементы по горизонтали и по вертикали, менять направление и порядок отображение элементов, растягивать блоки на всю высоту родителя или прибивать их к нижнему краю.\u003c/p\u003e\n,date:2013-09-03,href:/flexbox,text:Flexbox,type:post},pages:{date:2014-03-19,type:page,href:/pages/svg-links,text:SVG: полезные ссылки},{date:2013-11-16,type:page,href:/pages/css-selectors,text:CSS-селекторы одной таблицей},{date:2013-10-06,type:page,href:/pages/tablitsa-imenovanny-h-tsvetov,text:Таблица именованных цветов},{date:2013-09-27,type:page,href:/pages/transform-functions,text:Функции Transform},{date:2013-09-26,type:page,href:/pages/svojstva-animation,text:Свойства Animation одной таблицей},{date:2013-09-26,type:page,href:/pages/svojstva-transform,text:Свойства Transform},{date:2013-09-04,type:page,href:/pages/razny-j-sintaksis-flexbox,text:Разный синтаксис Flexbox},{date:2013-09-03,type:page,href:/pages/svojstva-flexbox,text:Свойства Flexbox одной таблицей}},__N_SSG:true},page:/,query:{},buildId:LcKEv6KKPVPwwsRWWnW_1,isFallback:false,gsp:true,scriptLoader:}/script>/body>/html>
View on OTX
|
View on ThreatMiner
Please enable JavaScript to view the
comments powered by Disqus.
Data with thanks to
AlienVault OTX
,
VirusTotal
,
Malwr
and
others
. [
Sitemap
]