Help
RSS
API
Feed
Maltego
Contact
Domain > css-live.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
2013-05-09
89.111.176.208
(
ClassC
)
2019-03-28
5.23.50.101
(
ClassC
)
2024-09-13
92.53.96.193
(
ClassC
)
Port 80
HTTP/1.1 301 Moved PermanentlyServer: nginx/1.26.1Date: Fri, 13 Sep 2024 15:30:06 GMTContent-Type: text/html; charsetiso-8859-1Content-Length: 228Connection: keep-aliveLocation: https://css-live.ru/ !DOCTYPE HTML PUBLIC -//IETF//DTD HTML 2.0//EN>html>head>title>301 Moved Permanently/title>/head>body>h1>Moved Permanently/h1>p>The document has moved a hrefhttps://css-live.ru/>here/a>./p>/body>/html>
Port 443
HTTP/1.1 200 OKServer: nginx/1.26.1Date: Fri, 13 Sep 2024 15:30:07 GMTContent-Type: text/html; charsetUTF-8Transfer-Encoding: chunkedConnection: keep-aliveVary: Accept-EncodingVary: Accept-Encoding,CookieCache-Control: max-age3, must-revalidate !doctype html>html langru-RU itemscope itemtypehttp://schema.org/WebSite prefixog: http://ogp.me/ns# >head> meta charsetUTF-8> meta nameviewport contentwidthdevice-width, initial-scale1> link relprofile hrefhttps://gmpg.org/xfn/11> link relpreconnect href//counter.yadro.ru crossorigin> link relpreload hrefhttps://fonts.gstatic.com/s/lora/v14/0QIhMX1D_JOuMw_LJftLp_A.woff2 asfont crossorigin>title>CSS-LIVE — жизнь во фронтенде/title>!-- All in One SEO Pack 2.6 by Michael Torbert of Semper Fi Web Design-1,-1 -->meta namedescription contentПишем сами и переводим лучшее для верстальщиков и фронтендеров, открываем тайны спецификаций и осваиваем секретные технологии HTML, CSS, JavaScript, SVG и т.д. />meta namekeywords contentвеб, html, html5, css, css3, css4, js, javascript, профессиональная верстка, верстка сайта, веб-приложение, html верстка, фронтенд, семантика, типографика, юзабилити, доступность, производительность, быстродействие />link relnext hrefhttps://css-live.ru/page/2 />link relcanonical hrefhttps://css-live.ru/ />meta propertyog:title contentCSS-LIVE />meta propertyog:type contentwebsite />meta propertyog:url contenthttps://css-live.ru/ />meta propertyog:image contenthttps://css-live.ru/wp-content/themes/happenstance/img/logo-img.svg />meta propertyog:site_name contentCSS-LIVE />meta propertyog:description contentжизнь во фронтенде />meta nametwitter:card contentsummary />meta nametwitter:title contentCSS-LIVE />meta nametwitter:description contentжизнь во фронтенде />meta nametwitter:image contenthttps://css-live.ru/wp-content/themes/happenstance/img/logo-img.svg />meta itempropimage contenthttps://css-live.ru/wp-content/themes/happenstance/img/logo-img.svg />!-- /all in one seo pack -->link reldns-prefetch href//ajax.googleapis.com />link reldns-prefetch href//s.w.org />link relalternate typeapplication/rss+xml titleCSS-LIVE » Лента hrefhttps://css-live.ru/feed />link relalternate typeapplication/rss+xml titleCSS-LIVE » Лента комментариев hrefhttps://css-live.ru/comments/feed /> script typetext/javascript> window._wpemojiSettings {baseUrl:https:\/\/s.w.org\/images\/core\/emoji\/11\/72x72\/,ext:.png,svgUrl:https:\/\/s.w.org\/images\/core\/emoji\/11\/svg\/,svgExt:.svg,source:{concatemoji:https:\/\/css-live.ru\/wp-includes\/js\/wp-emoji-release.min.js?ver4.9.26}}; !function(e,a,t){var n,r,o,ia.createElement(canvas),pi.getContext&&i.getContext(2d);function s(e,t){var aString.fromCharCode;p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,e),0,0);ei.toDataURL();return p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,t),0,0),ei.toDataURL()}function c(e){var ta.createElement(script);t.srce,t.defert.typetext/javascript,a.getElementsByTagName(head)0.appendChild(t)}for(oArray(flag,emoji),t.supports{everything:!0,everythingExceptFlag:!0},r0;ro.length;r++)t.supportsorfunction(e){if(!p||!p.fillText)return!1;switch(p.textBaselinetop,p.font600 32px Arial,e){caseflag:return s(55356,56826,55356,56819,55356,56826,8203,55356,56819)?!1:!s(55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447,55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447);caseemoji:return!s(55358,56760,9792,65039,55358,56760,8203,9792,65039)}return!1}(or),t.supports.everythingt.supports.everything&&t.supportsor,flag!or&&(t.supports.everythingExceptFlagt.supports.everythingExceptFlag&&t.supportsor);t.supports.everythingExceptFlagt.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady!1,t.readyCallbackfunction(){t.DOMReady!0},t.supports.everything||(nfunction(){t.readyCallback()},a.addEventListener?(a.addEventListener(DOMContentLoaded,n,!1),e.addEventListener(load,n,!1)):(e.attachEvent(onload,n),a.attachEvent(onreadystatechange,function(){completea.readyState&&t.readyCallback()})),(nt.source||{}).concatemoji?c(n.concatemoji):n.wpemoji&&n.twemoji&&(c(n.twemoji),c(n.wpemoji)))}(window,document,window._wpemojiSettings); /script> style typetext/css>img.wp-smiley,img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 .07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important;}/style>link relstylesheet idstcr-plugin-style-group-css hrefhttps://css-live.ru/wp-content/plugins/bwp-minify/min/?fwp-content/plugins/subscribe-to-comments-reloaded/includes/css/stcr-plugin-style.css,wp-content/themes/livegrid/css/general.css,wp-content/themes/livegrid/css/header.css,wp-content/themes/livegrid/css/post.css,wp-content/themes/livegrid/css/home.css,wp-content/themes/livegrid/css/single.css,wp-content/themes/livegrid/css/tables.css,wp-content/themes/livegrid/css/style.css,wp-content/themes/livegrid/css/fonts.css typetext/css mediaall />style idgeneral-inline-css typetext/css>html { --theme-color: #e06219; --bg-color: #fff; --color: #000; --header-color: #333; --quote-color: #444; --link-color: #045A91; --lines-color: #f4f8ff; --iframe-filter: none;}@media (prefers-color-scheme: dark) { html { --theme-color: #ff6d17; --bg-color: #222; --color: #eee; --header-color: #ccc; --quote-color: #bbb; --link-color: #61d1ff; --lines-color: #2a2825; --iframe-filter: invert(93%); letter-spacing: .06em; }}/style>link relhttps://api.w.org/ hrefhttps://css-live.ru/wp-json/ />meta namegenerator contentWordPress 4.9.26 />link relicon hrefhttps://css-live.ru/wp-content/uploads/2018/01/favicon.png sizes32x32 />link relicon hrefhttps://css-live.ru/wp-content/uploads/2018/01/favicon.png sizes192x192 />link relapple-touch-icon-precomposed hrefhttps://css-live.ru/wp-content/uploads/2018/01/favicon.png />meta namemsapplication-TileImage contenthttps://css-live.ru/wp-content/uploads/2018/01/favicon.png />/head>body> input typecheckbox classvisually-hidden idshowmenu tabindex-1> header classtop-header> b classvisually-hidden>CSS-live.ru/b> nav classtop-nav aria-labelledbymenulabel> label forshowmenu classmenu-button> span classhidden-logo aria-hiddentrue> span classhidden-if-grid>CSS/span>span classhidden-logo__live>live/span> /span> span classvisually-hidden>Открыть/закрыть/span> span classmenu-button__menu idmenulabel>меню/span> span classmenu-button__close>/span> /label> ul classnav nav-list> li classnav__item item-html item-c>a href/category/html5 classnav__link>HTML5/a>/li> li classnav__item item-css item-vertical item-c>a href/category/css classnav__link>CSS/a>/li> li classnav__item item-js item-vertical item-c>a href/category/javascript classnav__link>JavaScript/a>/li> li classnav__item item-grid item-c>a href/tag/css3-grid-layout classnav__link>Grid/a>/li> li classnav__item item-svg item-c>a href/category/svg classnav__link>SVG/a>/li> li classnav__item item-theory item-s>a href/category/teoriya classnav__link>Теория/a>/li> li classnav__item item-tricks item-vertical item-s>a href/category/tricks classnav__link>Трюки/a>/li> li classnav__item item-practice item-s>a href/praktika classnav__link>Практика/a>/li> li classnav__item item-faq item-vertical item-s>a href/faq classnav__link>FAQ/a>/li> li classnav__item item-secrets item-s>a href/cssjssvg-s-podvypodvertom classnav__link>Примеры/a>/li> li classnav__item item-news>a href/category/vecssti-s-polej classnav__link>Новости/a>/li> li classnav__item item-archive item-vertical>a href/category/tajny-css2-1 classnav__link>Архив/a>/li> li classnav__item item-about>a href/o-nas classnav__link>О нас/a>/li> li classnav__item item-home>a href/ classnav__link link-home nav__link--current titleНа главную>span classhidden-if-grid>На главную/span>/a>/li> li classnav__item item-social> p classhidden-if-grid>Социальные сети и потоки/p> ul classsocial__list> li classsocial__item> a hrefhttp://feeds.feedburner.com/css-live classsocial__link social__link_type_rss> span classvisually-hidden>RSS/span> svg classsocial__img width30 height30 viewBox-18 -20 130 130 aria-labelledbytitle-rss>title idtitle-rss>RSS/title>path fill#F26E21 classicon-rss dM11,1a80,80 0 0180,80a8,8 0 01-16,0a64,64 0 00-64-64a8,8 0 010-16M11,33a48,48 0 0148,48a8,8 0 01-16,0a32,32 0 00-32-32a8,8 0 010-16M3,76a12,12 0 110,.5Z/>/svg> /a> /li> li classsocial__item> a hrefhttps://twitter.com/#!/cssliveru classsocial__link social__link_type_tw> span classvisually-hidden>Twitter/span> svg classsocial__img width30 height30 viewBox-14 -17 92 92 aria-labelledbytitle-tw>title idtitle-tw>Twitter/title>path fill#41ABE1 dM67 7c-3,1-5,2-8,2 3-2 5-4 6-8-3,2-6,3-9,3-3-3-6-4-10-4-8,0-14,6-14,14 0,1 0,2 0,3-11,1-22-6-28-14-1,2-2,4-2,7 0,5 2,9 6,11-2,0-4,1-6-2 0,0 0,0 0,0 0,7 5,12 11,14-1,0-2,1-4,1 1,0-2,0-3,0 2,6 7,9 13,10-5,4-11,6-17,6-1,0-2,0-3,0 6,4 13,6 21,6 25,0 39-21 39-39 0,1 0-1 0-2 3-2 5-4 7-7z>/path>/svg> /a> /li> li classsocial__item> a hrefhttps://t.me/css_live classsocial__link social__link_type_telegram> span classvisually-hidden>Telegram/span> svg classsocial__img width30 height30 viewBox0 0 32 32 aria-labelledbytitle-tg>title idtitle-tg>Telegram/title>path fill#20A0E1 dM24.6,5.7L4.6,13.8C3.2,14.4 3.2,15.2 4.3,15.5L9.3,17.2L11.3,23.3C11.5,24.0 11.4,24.2 12.0,24.2C12.6,24.2 12.8,24.0 13.1,23.7C13.3,23.5 14.4,22.4 15.6,21.1L20.8,25.2C21.7,25.7 22.4,25.4 22.7,24.2L26.1,7.4C26.4,5.9 25.5,5.3 24.6,5.7ZM10.1,16.8L21.4,9.3C21.9,9.0 22.5,9.2 22.0,9.6L12.4,18.7L12.0,22.9L10.1,16.8L10.1,16.8Z/>/svg> /a> /li> li classsocial__item> a hrefhttp://www.facebook.com/csslive classsocial__link social__link_type_fb> span classvisually-hidden>facebook/span> svg classsocial__img width30 height30 viewBox-22 -6 72 72 aria-labelledbytitle-fb>title idtitle-fb>facebook/title>path fill#3b5998 dM2,30h6v26h12v-26h7l2-9h-9v-5a3,3 0 0 1 3-3h5v-9h-11a9,9 0 0 0-9,9v8h-6z>/path>/svg> /a> /li> li classsocial__item> a hrefhttp://vk.com/club36238567 classsocial__link social__link_type_vk> span classvisually-hidden>vkontakte/span> svg classsocial__img width30 height30 viewBox-9 -85 200 200 aria-labelledbytitle-vk>title idtitle-vk>vkontakte/title>path fill#45668e dm173,54 c-6-11-16-18-24-27-3-6 3-11 6-16 7-9 15-18 18-28 2-6-6-6-10-6-8,0-16,0-24,0-6,2-5,11-9,16-4,8-9,16-16,22-8,3-7-9-6-14-0-8 1-16-0-23-3-7-12-5-18-5-6,0-14-1-19,3-7,5 6,3 6,8 3,9 2,19 0,29-3,8-11-1-13-6-5-9-10-19-14-28-3-4-9-2-14-3-5,0-11-0-16,0-6,3 1,10 2,14 9,19 20,38 35,54 11,10 25,18 40,17 4-0 9,1 12-2 2-5-0-12 5-17 5-5 10,3 13,7 5,6 12,14 21,12 8-0 15,0 23-1 4-0 5-5 4-8z>/path>/svg> /a> /li> /ul> /li> /ul> div classforms hidden-when-compacted> form classsearch action/> p classvisually-hidden>Форма поиска/p> input typesearch idsearch classfield search__field placeholder names> button classsearch__button tabindex-1>span classhidden-if-grid>Найти/span>/button> label forsearch classsearch__label>Поиск/label> span classdecor hidden-if-nogrid aria-hiddentrue>span>l/span>span>i/span>span>v/span>span>e/span>/span> /form> form classemail> p classhidden-if-grid>Хотите подписаться на нашу email-рассылку?/p> input classfield email__text placeholderнапр. me@my.addr typeemail required idsubscribe> button classemail__submit typesubmit tabindex-1 aria-labelПодписаться titleПодписаться>/button> label forsubscribe classemail__label hidden-if-nogrid> span classemail__label-part email-part0>Email-рассылка/span> span classemail__label-part email-part1>Ваш email:/span> /label> /form> /div> /nav> /header> div idprimary classcontent-area post-list> main idmain classsite-main> h1 classsection-title section-title--hidden>span classvisually-hidden>Главная страница CSS-live.ru/span>/h1> article classpost> header classpost__header> div classpost__date date> span classdate__value>span classposted-on>time classentry-date published updated datetime2022-07-18T19:28:53+03:00>18.07.2022/time>/span>/span> /div> ul classpost__categories meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/category/css relcategory tag>CSS/a>, a hrefhttps://css-live.ru/category/praktika relcategory tag>Практика/a>, a hrefhttps://css-live.ru/category/tricks relcategory tag>Трюки/a>/li> /ul>h2 classpost__headline>a hrefhttps://css-live.ru/tricks/gologrammy-plenochnye-zasvetki-i-shejdery-na-chistom-css.html relbookmark classarticle__link>Голограммы, пленочные засветки и шейдеры на чистом CSS/a>/h2> div classpost__author> span classpost__author-avatar>img srchttps://css-live.ru/wp-content/uploads/2018/01/selenit-photo-150x150.jpg width60 height60 altSelenIT classavatar avatar-60 wp-user-avatar wp-user-avatar-60 alignnone photo />/span> span classbyline> span classauthor vcard>a classurl fn n hrefhttps://css-live.ru/author/selenit>SelenIT/a>/span>/span> /div>div classpost__comments-bubble>a hrefhttps://css-live.ru/tricks/gologrammy-plenochnye-zasvetki-i-shejdery-na-chistom-css.html#comments classpost__coment-link>6/a>/div>/header> div classpost__content>style>.spec-example{margin:30px 0;display:flex;justify-content:space-between;gap:2.5rem}.spec-example__fixed,.spec-example__static{flex:1;border:15px solid #fff;height:30rem;background-image:linear-gradient(to bottom,#000 20%,#3c5e6d 35%,#f4310e,#f58308 80%,#000)}@media (max-width:512px){.spec-example__fixed,.spec-example__static{border-width:10px}}.spec-example__fixed{background-attachment:fixed}.frame{position:relative;margin:30px auto;max-width:830px;border:15px solid #fff;background:#000}@media (max-width:512px){.frame{border-width:10px}}.frame img{display:block;width:100%;max-width:790px;height:auto;margin:0}.shader{backface-visibility:hidden;position:relative;display:block;overflow:hidden}.shader.is-waiting .shader__layer,.shader.is-waiting .shader__layer::after,.shader.is-waiting .shader__layer::before{display:none}.mask,.mask::after,.mask::before,.specular,.specular::after{background-color:#000;position:absolute;left:0;top:0;width:100%;height:100%;backface-visibility:hidden}.specular{background-color:#000;mix-blend-mode:color-dodge;background-attachment:fixed}.frame--asakusa .specular{z-index:0;background-color:#000;background-position:center;background-size:cover;mix-blend-mode:color-dodge;background-attachment:fixed;background-image:linear-gradient(to bottom,#000 20%,#3c5e6d 35%,#f4310e,#f58308 80%,#000)}.frame--asakusa .mask{z-index:1;background:#fff;background-size:100%;mix-blend-mode:multiply;background-image:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.2)),url(https://robbowen.digital/assets/img/articles/holo/tower_spec.jpg)}.frame--sticker .specular{z-index:0;background-position:top center;background-image:linear-gradient(125deg,#f09 30%,#fc8b00,#ff0,#00ff8a,#00cfff,#cc4cfa 70%)}.frame--sticker .mask{background-repeat:no-repeat;background-size:45%;background-position:center;z-index:1;mix-blend-mode:multiply;background-image:url(https://robbowen.digital/assets/img/articles/holo/hologram.png)}.frame--sticker .mask::after{content:;background-position:center;background-attachment:fixed;z-index:1;mix-blend-mode:color-burn;background-image:linear-gradient(45deg,#333 40%,#ddd 60%,#333)}.frame--leak .specular{z-index:0;mix-blend-mode:color-dodge;background-color:#000;background-position:top center;background-repeat:no-repeat;mix-blend-mode:color-dodge;background-attachment:fixed;background-image:linear-gradient(179deg,#000 40%,red,orange,#fff 60%,#000 80%)}.frame--leak .mask{mix-blend-mode:multiply;background-color:#fff;background-size:cover;background-image:url(https://robbowen.digital/assets/img/articles/holo/pinelake_mask.jpg)}.frame--aurora .specular{z-index:0;background-color:#000;background-position:center;background-size:100% 80%;mix-blend-mode:screen;background-attachment:fixed;background-image:linear-gradient(180deg,#3fd351,#08f,#8000ff,#08f,#3fd351)}.frame--aurora .mask{z-index:1;background:#fff;background-size:cover;mix-blend-mode:multiply;background-image:linear-gradient(to bottom,rgba(0,0,0,.25) 15%,transparent),url(https://robbowen.digital/assets/img/articles/holo/forest_spec.jpg)}.blend-example{margin:30px 0;box-sizing:content-box;border:15px solid #fff;height:min(360px,45vw)!important;display:grid;grid-template-columns:repeat(var(--cols,2),1fr);grid-template-rows:1fr}@media (max-width:512px){.blend-example{border-width:10px}}.blend-example__col{position:relative}.blend-example__col img{width:100%;height:min(360px,45vw)!important;object-fit:cover}.blend-example__layer{position:absolute;top:0;left:0;width:100%;height:100%;mix-blend-mode:var(--blend);filter:brightness(.99)}.example{margin:30px 0}.example--mask .mask,.example--mask .specular,.example--spec .specular,.example--specmask .specular{mix-blend-mode:normal}.example--off .specular,.example--spec .specular .mask,.example--specbase .mask{display:none}/style>p>em>Перевод статьи a hrefhttps://robbowen.digital/wrote-about/css-blend-mode-shaders/>Holograms, light-leaks and how to build CSS-only shaders/a> с сайта a hrefhttps://robbowen.digital/>robbowen.digital/a> для a hrefhttps://css-live.ru/>css-live.ru/a>, автор — a hrefhttps://twitter.com/robb0wen>Робб Оуэн/a>/em>/p>p>Может, я чуть преуменьшаю, но WebGL — это нечто. За пять минут на любом из сайтов, отмечающих лучшие примеры веб-дизайна наградами, можно увидеть, как сайты один за другим полностью полагаются на мощь code>canvas/code>. Инструменты вродеa hrefhttps://threejs.org/> threejs/a> привносят в браузер мощь 3D и GLSL-шейдеров, а с ними — совершенно новый уровень визуальных эффектов./p>p>Но тут я задумался: почему всё веселье должно доставаться JS? Сейчас, когда браузеры наконец широко поддерживают code>mix-blend-mode/code>, многие из типовых приемов шейдинга стали доступны и в CSS. С правильным подбором картинок и тщательным их наложением можно создавать удивительно качественные эффекты без нужды в каких-либо JS-зависимостях./p>p>Взглянем на пример. По мере скроллинга картинки ниже солнечный свет вспыхивает тёплым оранжевым, прежде чем уйти в холодную голубизну. На миг вы увидите еще и размытые блики объектива (боке)./p> /div> footer classentry-footer> div classread-more-wrap> a hrefhttps://css-live.ru/tricks/gologrammy-plenochnye-zasvetki-i-shejdery-na-chistom-css.html classarticle__read-more>читать дальше/a> /div> ul classpost__tags meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/tag/mix-blend-mode reltag>mix-blend-mode/a>, a hrefhttps://css-live.ru/tag/gradienty reltag>градиенты/a>, a hrefhttps://css-live.ru/tag/rezhimy-nalozheniya-v-css reltag>режимы наложения в CSS/a>/li> /ul> /footer>/article>article classpost> header classpost__header> div classpost__date date> span classdate__value>span classposted-on>time classentry-date published updated datetime2022-02-10T13:37:33+03:00>10.02.2022/time>/span>/span> /div> ul classpost__categories meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/category/css relcategory tag>CSS/a>, a hrefhttps://css-live.ru/category/articles relcategory tag>Статьи/a>/li> /ul>h2 classpost__headline>a hrefhttps://css-live.ru/articles/css-vyrazheniya-ot-kontejnera-dlya-dizajnerov.html relbookmark classarticle__link>CSS-выражения от контейнера для дизайнеров/a>/h2> div classpost__author> span classpost__author-avatar>img srchttps://secure.gravatar.com/avatar/a38f2e5fcf32562436d03bcf74428196?s60&dmm&rg width60 height60 alt classavatar avatar-60 wp-user-avatar wp-user-avatar-60 photo avatar-default />/span> span classbyline> span classauthor vcard>a classurl fn n hrefhttps://css-live.ru/author/psywalker>Максим Усачев/a>/span>/span> /div>div classpost__comments-bubble>a hrefhttps://css-live.ru/articles/css-vyrazheniya-ot-kontejnera-dlya-dizajnerov.html#comments classpost__coment-link>5/a>/div>/header> div classpost__content>p>em>Перевод статьи a hrefhttps://ishadeed.com/article/container-queries-for-designers/>CSS Container Queries For Designers/a> с сайта a hrefhttps://ishadeed.com/>ishadeed.com/a>, опубликован на a hrefhttps://css-live.ru/>CSS-live.ru/a> с разрешения автора — a hrefhttps://twitter.com/shadeed9>Ахмада Шадида/a>/em>/p>p>При работе над дизайном для веба приходится иметь дело с макетами для разных размеров экрана. Опираясь на эти макеты, разработчик определяет ширину или высоту окна браузера медиазапросами, а затем, исходя из этого, меняет макет. Именно так мы верстали веб последние 10 лет, и вот-вот всё станет еще лучше. У меня для вас хорошие новости./p>p>CSS-выражения от контейнера — долгожданная для веб-разработчиков фича — скоро появится в CSS и с ней уже можно поэкспериментировать в Chrome Canary. В этой статье мы познакомимся с этой фичей поближе, и узнаем, как она повлияет на вашу работу как дизайнера, и не только. Неважно, пишете ли вы код или нет, если увидите какой-то незнакомый CSS, то можете полностью игнорировать его и идти дальше./p>p>Хватит слов, перейдём к делу!/p> /div> footer classentry-footer> div classread-more-wrap> a hrefhttps://css-live.ru/articles/css-vyrazheniya-ot-kontejnera-dlya-dizajnerov.html classarticle__read-more>читать дальше/a> /div> ul classpost__tags meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/tag/css-container-queries reltag>CSS Container Queries/a>, a hrefhttps://css-live.ru/tag/css-vyrazheniya-ot-kontejnera reltag>CSS-выражения от контейнера/a>, a hrefhttps://css-live.ru/tag/vyrazheniya-ot-kontejnera reltag>Выражения от контейнера/a>/li> /ul> /footer>/article>article classpost> header classpost__header> div classpost__date date> span classdate__value>span classposted-on>time classentry-date published datetime2022-02-03T15:21:06+03:00>03.02.2022/time> (span aria-labelобновлено>обн./span> time classupdated datetime2023-01-27T10:24:39+03:00>27.01.2023/time>)/span>/span> /div> ul classpost__categories meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/category/css relcategory tag>CSS/a>, a hrefhttps://css-live.ru/category/teoriya relcategory tag>Теория/a>/li> /ul>h2 classpost__headline>a hrefhttps://css-live.ru/css/pochemu-u-important-v-css-vosklicatelnyj-znak-v-nachale.html relbookmark classarticle__link>Почему у !important в CSS восклицательный знак в начале?/a>/h2> div classpost__author> span classpost__author-avatar>img srchttps://css-live.ru/wp-content/uploads/2018/01/selenit-photo-150x150.jpg width60 height60 altSelenIT classavatar avatar-60 wp-user-avatar wp-user-avatar-60 alignnone photo />/span> span classbyline> span classauthor vcard>a classurl fn n hrefhttps://css-live.ru/author/selenit>SelenIT/a>/span>/span> /div>div classpost__comments-bubble>a hrefhttps://css-live.ru/css/pochemu-u-important-v-css-vosklicatelnyj-znak-v-nachale.html#comments classpost__coment-link>2/a>/div>/header> div classpost__content>p>Непостижимые алгоритмы Твиттера принесли мне в ленту a hrefhttps://twitter.com/SimonHoiberg/status/1488547984849739781>занятный вопрос/a> Саймона Хойберга, автора нескольких книг про JavaScript:/p>blockquote>p>Почему ‘!important’ перекрывает значения в css? 🤔/p>p>Для меня это читается как «not important», т.е. «не важно», и я ждал бы от него обратного 😅/p>/blockquote>p>Действительно, для программистов, привыкших обозначать знаком ! операцию отрицания (инверсии), эта запись выглядит очень нелогично. Ее даже включили в список a hrefhttps://wiki.csswg.org/ideas/mistakes>ошибок/a>, допущенных при проектировании CSS (последний пункт)./p>p>И мне вдруг пришел в голову неожиданный ответ на этот вопрос, которым я хочу поделиться. Предупреждаю: это ни разу не официальное определение из спецификации, а скорее полушуточный мнемонический прием, поясняющий эту «странность» и, как мне кажется, помогающий лучше понять и запомнить ее логику./p> /div> footer classentry-footer> div classread-more-wrap> a hrefhttps://css-live.ru/css/pochemu-u-important-v-css-vosklicatelnyj-znak-v-nachale.html classarticle__read-more>читать дальше/a> /div> ul classpost__tags meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/tag/important reltag>!important/a>, a hrefhttps://css-live.ru/tag/kaskad reltag>каскад/a>, a hrefhttps://css-live.ru/tag/kaskadnye-sloi reltag>каскадные слои/a>/li> /ul> /footer>/article>article classpost> header classpost__header> div classpost__date date> span classdate__value>span classposted-on>time classentry-date published updated datetime2022-02-01T12:13:30+03:00>01.02.2022/time>/span>/span> /div> ul classpost__categories meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/category/css relcategory tag>CSS/a>, a hrefhttps://css-live.ru/category/articles relcategory tag>Статьи/a>/li> /ul>h2 classpost__headline>a hrefhttps://css-live.ru/articles/ne-borites-s-kaskadom-upravlyajte-im.html relbookmark classarticle__link>Не боритесь с каскадом, управляйте им!/a>/h2> div classpost__author> span classpost__author-avatar>img srchttps://secure.gravatar.com/avatar/a38f2e5fcf32562436d03bcf74428196?s60&dmm&rg width60 height60 alt classavatar avatar-60 wp-user-avatar wp-user-avatar-60 photo avatar-default />/span> span classbyline> span classauthor vcard>a classurl fn n hrefhttps://css-live.ru/author/psywalker>Максим Усачев/a>/span>/span> /div>div classpost__comments-bubble>a hrefhttps://css-live.ru/articles/ne-borites-s-kaskadom-upravlyajte-im.html#comments classpost__coment-link>3/a>/div>/header> div classpost__content>p>em>Перевод статьи a hrefhttps://css-tricks.com/dont-fight-the-cascade-control-it/>Don’t Fight the Cascade, Control It!br />/a> с сайта a hrefhttps://css-tricks.com/>css-tricks.com/a> для a hrefhttp://css-live.ru/>css-live.ru/a>. Автор — a hrefhttps://twitter.com/madsstoumann>Мадс Стуманн/a>/em>./p>p>Если делать всё правильно и em>использовать/em> наследование, которое даёт CSS-каскад, то конечного CSS нужно будет писать em>меньше/em>. Но поскольку часто мы загружаем CSS из разных мест — из-за чего его бывает сложно структурировать и поддерживать, — каскад может сильно расстроить, и CSS из-за него окажется em>больше/em>, чем нужно./p>p>Несколько лет назад Гарри Робертс придумал a hrefhttps://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/>ITCSS/a> — умный способ структурировать CSS./p>p>img loadinglazy classaligncenter size-large wp-image-23375 srchttps://css-live.ru/wp-content/uploads/2022/02/ITCSS-500x318.jpg alt width500 height318 srcsethttps://css-live.ru/wp-content/uploads/2022/02/ITCSS-500x318.jpg 500w, https://css-live.ru/wp-content/uploads/2022/02/ITCSS-400x255.jpg 400w, https://css-live.ru/wp-content/uploads/2022/02/ITCSS-768x489.jpg 768w, https://css-live.ru/wp-content/uploads/2022/02/ITCSS.jpg 1280w sizes(max-width: 500px) 100vw, 500px />/p>p>В сочетании с a hrefhttp://getbem.com/>БЭМ/a> ITCSS стал популярным способом написания и организации CSS./p>p>Но даже с ITCSS и БЭМ em>иногда/em> возникают большие трудности с каскадом. К примеру, я уверен, что вам приходилось делать code>@import/code> внешних CSS-компонентов в определённом месте, чтобы ничего не сломать, или прибегать к жуткому code>!important/code>./p> /div> footer classentry-footer> div classread-more-wrap> a hrefhttps://css-live.ru/articles/ne-borites-s-kaskadom-upravlyajte-im.html classarticle__read-more>читать дальше/a> /div> ul classpost__tags meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/tag/css reltag>CSS/a>, a hrefhttps://css-live.ru/tag/kaskad reltag>каскад/a>/li> /ul> /footer>/article>article classpost> header classpost__header> div classpost__date date> span classdate__value>span classposted-on>time classentry-date published datetime2022-01-22T13:28:37+03:00>22.01.2022/time> (span aria-labelобновлено>обн./span> time classupdated datetime2022-06-12T00:29:27+03:00>12.06.2022/time>)/span>/span> /div> ul classpost__categories meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/category/javascript relcategory tag>JavaScript/a>/li> /ul>h2 classpost__headline>a hrefhttps://css-live.ru/javascript/zapashki-koda-react-komponentov.html relbookmark classarticle__link>«Запашки» кода React-компонентов/a>/h2> div classpost__author> span classpost__author-avatar>img srchttps://secure.gravatar.com/avatar/a38f2e5fcf32562436d03bcf74428196?s60&dmm&rg width60 height60 alt classavatar avatar-60 wp-user-avatar wp-user-avatar-60 photo avatar-default />/span> span classbyline> span classauthor vcard>a classurl fn n hrefhttps://css-live.ru/author/psywalker>Максим Усачев/a>/span>/span> /div>div classpost__comments-bubble>a hrefhttps://css-live.ru/javascript/zapashki-koda-react-komponentov.html#comments classpost__coment-link>0/a>/div>/header> div classpost__content>p>em>Перевод статьи a hrefhttps://antongunnarsson.com/react-component-code-smells/>React component code smells/a> с сайта a hrefhttps://antongunnarsson.com/>antongunnarsson.com/a>, опубликован на a hrefhttps://css-live.ru/>CSS-live.ru/a> с разрешения автора — a hrefhttps://twitter.com/awnton>Антона Гуннарсона/a>/em>/p>p>em>Это не окончательный вариант статьи, могут быть новые дополнения/em>./p>p>Растущая коллекция того, что я считаю «запашками» кода React-компонентов./p>blockquote>p>strong>Что такое «запашок» кода?/strong> «Запашок» кода — что-то такое, что вроде бы и не ошибка, но em>может/em> быть признаком более серьезной проблемы в коде. Больше информации в a hrefhttps://en.wikipedia.org/wiki/Code_smell>Википедии/a>./p>/blockquote>h3>Запашки 💩/h3>ul>li>a href#too-many-props>Слишком много пропсов/a>/li>li>a href#incompatible-props>Несовместимые пропсы/a>/li>li>a href#props-in-state>Копирование пропсов в состояние/a>/li>li>a href#jsx-returns>Возврат JSX из функций/a>/li>li>a href#multiple-booleans>Множественные булевые значения для состояния/a>/li>li>a href#many-usestate>Слишком много useState в компоненте/a>/li>li>a href#large-useeffect>Огромные useEffect/a>/li>/ul> /div> footer classentry-footer> div classread-more-wrap> a hrefhttps://css-live.ru/javascript/zapashki-koda-react-komponentov.html classarticle__read-more>читать дальше/a> /div> ul classpost__tags meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/tag/javascript reltag>JavaScript/a>, a hrefhttps://css-live.ru/tag/react reltag>React/a>, a hrefhttps://css-live.ru/tag/react-xuki reltag>React-хуки/a>/li> /ul> /footer>/article>article classpost> header classpost__header> div classpost__date date> span classdate__value>span classposted-on>time classentry-date published datetime2022-01-20T00:18:17+03:00>20.01.2022/time> (span aria-labelобновлено>обн./span> time classupdated datetime2023-05-23T18:39:17+03:00>23.05.2023/time>)/span>/span> /div> ul classpost__categories meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/category/css relcategory tag>CSS/a>, a hrefhttps://css-live.ru/category/css-snippets relcategory tag>CSS в примерах/a>, a hrefhttps://css-live.ru/category/tricks relcategory tag>Трюки/a>, a hrefhttps://css-live.ru/category/tutorialy relcategory tag>Туториалы/a>/li> /ul>h2 classpost__headline>a hrefhttps://css-live.ru/tricks/border-image-gradients-sorcery.html relbookmark classarticle__link>Тёмная сторона CSS: выходим за рамки и взрываем звезды с border-image и градиентами/a>/h2> div classpost__author> span classpost__author-avatar>img srchttps://css-live.ru/wp-content/uploads/2018/01/selenit-photo-150x150.jpg width60 height60 altSelenIT classavatar avatar-60 wp-user-avatar wp-user-avatar-60 alignnone photo />/span> span classbyline> span classauthor vcard>a classurl fn n hrefhttps://css-live.ru/author/selenit>SelenIT/a>/span>/span> /div>div classpost__comments-bubble>a hrefhttps://css-live.ru/tricks/border-image-gradients-sorcery.html#comments classpost__coment-link>1/a>/div>/header> div classpost__content>p>Как вы думаете, сколько CSS-градиентов нужно, чтобы нарисовать каждую из этих фигур?/p>p>img loadinglazy srchttps://css-live.ru/wp-content/uploads/2022/01/Screenshot-2022-01-19-at-03.38.40.png altскриншот примера width1394 height708 classaligncenter size-full wp-image-23261 srcsethttps://css-live.ru/wp-content/uploads/2022/01/Screenshot-2022-01-19-at-03.38.40.png 1394w, https://css-live.ru/wp-content/uploads/2022/01/Screenshot-2022-01-19-at-03.38.40-400x203.png 400w, https://css-live.ru/wp-content/uploads/2022/01/Screenshot-2022-01-19-at-03.38.40-768x390.png 768w, https://css-live.ru/wp-content/uploads/2022/01/Screenshot-2022-01-19-at-03.38.40-500x254.png 500w sizes(max-width: 1394px) 100vw, 1394px />br />Один! 🤯 Причем его даже не надо дублировать: достаточно указать один раз в одном-единственном свойстве. a hrefhttps://codepen.io/t_afif/pen/gOGEoda>Таким примером в CodePen/a> на днях поделился Темани Афиф, автор занятного и познавательного проекта a hrefhttps://css-challenges.com/>css-challenges.com/a>./p>p>Эта «магия» — заслуга свойства code>border-image/code>. У нас уже есть a hrefhttps://css-live.ru/articles-css/understanding-border-image.html>статья о нем и его возможностях/a>. Увы, громоздкий синтаксис и неинтуитивное поведение — особенно с градиентами — до сих пор мешают ему стать популярным. Сам Афиф в Твиттере a hrefhttps://twitter.com/ChallengesCss/status/1483159213132165124>признал/a>, что «code>border-image/code> принадлежит к тёмной стороне CSS»: очень уж трудно представить себе наглядно, как масштабируются, нарезаются и потом опять масштабируются части картинки. И многие даже не пытаются разобраться в нем. А зря!/p> /div> footer classentry-footer> div classread-more-wrap> a hrefhttps://css-live.ru/tricks/border-image-gradients-sorcery.html classarticle__read-more>читать дальше/a> /div> ul classpost__tags meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/tag/border-image reltag>border-image/a>, a hrefhttps://css-live.ru/tag/gradienty reltag>градиенты/a>, a hrefhttps://css-live.ru/tag/razvlecheniya-verstalshhikov reltag>развлечения верстальщиков/a>, a hrefhttps://css-live.ru/tag/sss-maski reltag>СSS-маски/a>/li> /ul> /footer>/article>article classpost> header classpost__header> div classpost__date date> span classdate__value>span classposted-on>time classentry-date published updated datetime2022-01-18T09:36:06+03:00>18.01.2022/time>/span>/span> /div> ul classpost__categories meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/category/css relcategory tag>CSS/a>, a hrefhttps://css-live.ru/category/html relcategory tag>HTML/a>, a hrefhttps://css-live.ru/category/javascript relcategory tag>JavaScript/a>, a hrefhttps://css-live.ru/category/articles relcategory tag>Статьи/a>/li> /ul>h2 classpost__headline>a hrefhttps://css-live.ru/articles/kak-chitat-w3c-specifikacii.html relbookmark classarticle__link>Как читать W3C-спецификации/a>/h2> div classpost__author> span classpost__author-avatar>img srchttps://secure.gravatar.com/avatar/a38f2e5fcf32562436d03bcf74428196?s60&dmm&rg width60 height60 alt classavatar avatar-60 wp-user-avatar wp-user-avatar-60 photo avatar-default />/span> span classbyline> span classauthor vcard>a classurl fn n hrefhttps://css-live.ru/author/psywalker>Максим Усачев/a>/span>/span> /div>div classpost__comments-bubble>a hrefhttps://css-live.ru/articles/kak-chitat-w3c-specifikacii.html#comments classpost__coment-link>1/a>/div>/header> div classpost__content>p>em>Перевод статьи a hrefhttp://alistapart.com/article/readspec/>How to Read W3C Specs/a> с сайта a hrefhttp://alistapart.com>alistapart.com/a> для a hrefhttp://css-live.ru/>css-live.ru/a>. Автор — a hrefhttps://alistapart.com/author/j-davideisenberg/>Джей Девид Эйсенберг/a>/em>./p>p>em>(Примечание редакции CSS-live.ru: оригинал статьи написан более 20 лет назад. Не удивляйтесь, это не баг, а фича. Иногда полезно оглянуться назад и увидеть за калейдоскопом новинок какие-то неизменные основы. Или лучше понять ход прогресса технологий и порадоваться ему еще больше. В любом случае, многое в статье актуально по сей день, и уж точно стоит обсудить. Приятного чтения и приобщения к суперсиле спецификаций!)/em>/p>p>Консорциум Всемирной паутины — это хранитель спецификаций по всем технологиям в вебе. Как веб-разработчик, вы могли заходить к ним на сайт в поиске ответа на вопрос про XHTML или чтобы узнать больше о новой технологии, такой как «Объекты форматирования XSL» или «Масштабируемая векторная графика»/p>p>Итак, вы обращаетесь к спецификации и практически тут же оказываетесь в замешательстве. Это невозможно читать, думаете вы. Но, на самом деле, это читаемо, если учесть один ключевой момент. Но всё проясняется, если учесть одну важную вещь:/p> /div> footer classentry-footer> div classread-more-wrap> a hrefhttps://css-live.ru/articles/kak-chitat-w3c-specifikacii.html classarticle__read-more>читать дальше/a> /div> ul classpost__tags meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/tag/css reltag>CSS/a>, a hrefhttps://css-live.ru/tag/html5 reltag>HTML5/a>, a hrefhttps://css-live.ru/tag/w3c reltag>W3C/a>, a hrefhttps://css-live.ru/tag/w3c-specifikacii reltag>W3C-спецификации/a>, a hrefhttps://css-live.ru/tag/veb-standarty reltag>веб-стандарты/a>/li> /ul> /footer>/article>article classpost> header classpost__header> div classpost__date date> span classdate__value>span classposted-on>time classentry-date published datetime2021-12-26T18:14:51+03:00>26.12.2021/time> (span aria-labelобновлено>обн./span> time classupdated datetime2023-06-04T17:22:16+03:00>04.06.2023/time>)/span>/span> /div> ul classpost__categories meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/category/css relcategory tag>CSS/a>/li> /ul>h2 classpost__headline>a hrefhttps://css-live.ru/css/psevdoklass-has-ne-tolko-roditelskij-selektor.html relbookmark classarticle__link>Псевдокласс :has() — не только «родительский селектор»/a>/h2> div classpost__author> span classpost__author-avatar>img srchttps://css-live.ru/wp-content/uploads/2018/01/selenit-photo-150x150.jpg width60 height60 altSelenIT classavatar avatar-60 wp-user-avatar wp-user-avatar-60 alignnone photo />/span> span classbyline> span classauthor vcard>a classurl fn n hrefhttps://css-live.ru/author/selenit>SelenIT/a>/span>/span> /div>div classpost__comments-bubble>a hrefhttps://css-live.ru/css/psevdoklass-has-ne-tolko-roditelskij-selektor.html#comments classpost__coment-link>0/a>/div>/header> div classpost__content>p>Браузер Safari часто ругают за редкое обновление и задержку внедрения новинок, но есть у него «любимые» области, в которых он опережает всех. Например, CSS-селекторы 4 уровня. Псевдоклассы code>:matches()/code> — теперь это code>:is()/code>, code>:not()/code> с несколькими селекторами и code>:nth-child()/code>/code>:nth-last-child()/code> c добавочным параметром code>of <что угодно>/code> он поддерживает a hrefhttps://css-live.ru/vecssti-s-polej/webkit-safari-9-vklyuchil-podderzhku-css-selektorov-4-urovnya.html>с 2015 года/a>. И именно в его экспериментальной сборке появилась первая реализация долгожданного псевдокласса code>:has()/code>!/p>p>О code>:has()/code> часто говорят как о «родительском селекторе». Но он может быть не только селектором i>любого предка/i>, но и селектором i>предыдущего соседа/i>. О его непростой судьбе — задержке из-за a hrefhttps://web-standards.ru/articles/parent-selector/>проблемы с производительностью/a>, странном ее «решении» (буквально по анекдоту «чтоб игрушки дольше не ломались, не давайте их детям»:) и a hrefhttps://css-live.ru/vecssti-s-polej/selektor-has-stanet-dostupen-dlya-oformleniya.html>его отмене/a>, и a hrefhttps://css-live.ru/vecssti-s-polej/roditelskij-selektor-has-v-realnost.html>первых попытках/a> реализовать — распространяться не будем. Лучше сразу посмотрим…/p>h2 idusage>Примеры использования/h2> /div> footer classentry-footer> div classread-more-wrap> a hrefhttps://css-live.ru/css/psevdoklass-has-ne-tolko-roditelskij-selektor.html classarticle__read-more>читать дальше/a> /div> ul classpost__tags meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/tag/has reltag>:has()/a>, a hrefhttps://css-live.ru/tag/css-selectors-4 reltag>CSS Selectors 4/a>, a hrefhttps://css-live.ru/tag/safari reltag>Safari/a>, a hrefhttps://css-live.ru/tag/roditelskij-selektor reltag>родительский селектор/a>/li> /ul> /footer>/article>article classpost> header classpost__header> div classpost__date date> span classdate__value>span classposted-on>time classentry-date published updated datetime2021-08-01T18:21:53+03:00>01.08.2021/time>/span>/span> /div> ul classpost__categories meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/category/css relcategory tag>CSS/a>, a hrefhttps://css-live.ru/category/praktika relcategory tag>Практика/a>, a hrefhttps://css-live.ru/category/teoriya relcategory tag>Теория/a>, a hrefhttps://css-live.ru/category/tricks relcategory tag>Трюки/a>/li> /ul>h2 classpost__headline>a hrefhttps://css-live.ru/tricks/ukroshhaem-rezhimy-nalozheniya-difference-i-exclusion.html relbookmark classarticle__link>Укрощаем режимы наложения: difference и exclusion/a>/h2> div classpost__author> span classpost__author-avatar>img srchttps://css-live.ru/wp-content/uploads/2018/01/selenit-photo-150x150.jpg width60 height60 altSelenIT classavatar avatar-60 wp-user-avatar wp-user-avatar-60 alignnone photo />/span> span classbyline> span classauthor vcard>a classurl fn n hrefhttps://css-live.ru/author/selenit>SelenIT/a>/span>/span> /div>div classpost__comments-bubble>a hrefhttps://css-live.ru/tricks/ukroshhaem-rezhimy-nalozheniya-difference-i-exclusion.html#comments classpost__coment-link>3/a>/div>/header> div classpost__content>style>figure { column-count: auto }figcaption { text-align: center; color: var(--header-color) }/style>p>em>Перевод статьи a hrefhttps://css-tricks.com/taming-blend-modes-difference-and-exclusion/>Taming Blend Modes: `difference` and `exclusion`/a> с сайта a hrefhttps://css-tricks.com/>css-tricks.com/a>, переведено для a hrefhttp://css-live.ru/>css-live.ru/a> с разрешения автора — a hrefhttps://css-tricks.com/author/thebabydino/>Аны Тюдор/a>./em>/p>p>До самого 2020-го я не особо увлекалась режимами наложения, во многом потому, что крайне плохо представляла себе будущий результат до того, как попробовать. И этот подход «попробуй и посмотри, что выйдет» почти всегда оставлял меня в ужасе перед тем безобразием, что невольно получалось у меня на экране./p>p>Эта проблема вытекала из незнания механизма их работы. Почти все попадавшиеся мне статьи на эту тему строились на примерах, сравнениях с Фотошопом или многословных художественных описаниях. Примеры бывали великолепны, но без понимания, как работает механизм всего этого, реализация своей творческой задумки путем переделки чужого красивого примера превращается в долгое, мучительное и в конечном итоге бесплодное приключение. А аналогии с Фотошопом практически бесполезны для людей инженерного склада, без дизайнерского опыта. Длинные художественные описания же для меня вообще выглядели каким-то птичьим языком./p>p>Момент просветления случился у меня, когда я наткнулась на спецификацию и нашла в ней математические формулы, по которым работают режимы наложения. Благодаря этому я наконец смогла понять, как это всё работает «под капотом» и где оно может пригодиться. И теперь, узнав это лучше, я поделюсь этим знанием в серии статей./p>p>Сегодня мы рассмотрим, как вообще работает наложение, затем рассмотрим два в чем-то похожих режима наложения — code>difference/code> и code>exclusion/code> — и, наконец, доберемся до главной части этой статьи, где разберем несколько классных примеров использования вроде вот таких./p> /div> footer classentry-footer> div classread-more-wrap> a hrefhttps://css-live.ru/tricks/ukroshhaem-rezhimy-nalozheniya-difference-i-exclusion.html classarticle__read-more>читать дальше/a> /div> ul classpost__tags meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/tag/background-blend-mode reltag>background-blend-mode/a>, a hrefhttps://css-live.ru/tag/mix-blend-mode reltag>mix-blend-mode/a>, a hrefhttps://css-live.ru/tag/rezhimy-nalozheniya-v-css reltag>режимы наложения в CSS/a>/li> /ul> /footer>/article>article classpost> header classpost__header> div classpost__date date> span classdate__value>span classposted-on>time classentry-date published updated datetime2021-05-11T19:02:52+03:00>11.05.2021/time>/span>/span> /div> ul classpost__categories meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/category/css relcategory tag>CSS/a>, a hrefhttps://css-live.ru/category/html5 relcategory tag>HTML5/a>, a hrefhttps://css-live.ru/category/articles relcategory tag>Статьи/a>/li> /ul>h2 classpost__headline>a hrefhttps://css-live.ru/articles/versiya-dlya-slabovidyashhix-a-mozhno-ne-nado-rasshifrovka-doklada.html relbookmark classarticle__link>Версия для слабовидящих? А можно не надо? расшифровка доклада/a>/h2> div classpost__author> span classpost__author-avatar>img srchttps://css-live.ru/wp-content/uploads/2021/01/2021-01-28-13.39.16-150x150.jpg width60 height60 altLena Ryan classavatar avatar-60 wp-user-avatar wp-user-avatar-60 alignnone photo />/span> span classbyline> span classauthor vcard>a classurl fn n hrefhttps://css-live.ru/author/lenaryan>Lena Ryan/a>/span>/span> /div>div classpost__comments-bubble>a hrefhttps://css-live.ru/articles/versiya-dlya-slabovidyashhix-a-mozhno-ne-nado-rasshifrovka-doklada.html#comments classpost__coment-link>2/a>/div>/header> div classpost__content>p>iframe titleYouTube video player srchttps://www.youtube.com/embed/F8RZTWeaDnY width100% height370px frameborder0 allowfullscreenallowfullscreen>/iframe>/p>p>Всем привет, меня зовут Лена. Сейчас я делаю фронтенд в компании AISA и борюсь за вёрстку кнопок кнопками. В сообществе могу быть известна пока что только тем, что модерирую чат Веб-стандартов в Телеграме. В свободное время катаюсь на разных досках. Ну, и погнали к докладу./p>p>Знаком ли вам такой диалог?/p>p>— А вы поддерживаете доступность на своём сайте?br />— Да, у нас есть версия для слабовидящих./p>p>Я не один раз встречала подобный ответ в своей практике. Почему-то очень распространено мнение, что чтобы сайт был доступным, нужно внедрить в него версию для слабовидящих./p>p>Нет. Не нужно./p> /div> footer classentry-footer> div classread-more-wrap> a hrefhttps://css-live.ru/articles/versiya-dlya-slabovidyashhix-a-mozhno-ne-nado-rasshifrovka-doklada.html classarticle__read-more>читать дальше/a> /div> ul classpost__tags meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/tag/a11y reltag>a11y/a>, a hrefhttps://css-live.ru/tag/veb-dostupnost reltag>веб-доступность/a>/li> /ul> /footer>/article>article classpost> header classpost__header> div classpost__date date> span classdate__value>span classposted-on>time classentry-date published updated datetime2021-03-04T14:56:26+03:00>04.03.2021/time>/span>/span> /div> ul classpost__categories meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/category/css relcategory tag>CSS/a>/li> /ul>h2 classpost__headline>a hrefhttps://css-live.ru/css/css-colors.html relbookmark classarticle__link>CSS COLORS/a>/h2> div classpost__author> span classpost__author-avatar>img srchttps://css-live.ru/wp-content/uploads/2021/03/AbkrPCZjblw-150x150.jpg width60 height60 altariarzer classavatar avatar-60 wp-user-avatar wp-user-avatar-60 alignnone photo />/span> span classbyline> span classauthor vcard>a classurl fn n hrefhttps://css-live.ru/author/ariarzer>ariarzer/a>/span>/span> /div>div classpost__comments-bubble>a hrefhttps://css-live.ru/css/css-colors.html#comments classpost__coment-link>1/a>/div>/header> div classpost__content>p>strong>Диклеймер/strong>: в статье нет ничего про браузеры и поддержку, только теория. Статья представляет собой неполный перевод спецификации c некоторыми дополнениями./p>h2>Глоссарий/h2>p>Факт 1: цвет — это не характеристика излучения, это характеристика реакции человеческого мозга на излучение. То есть два излучения с разным спектром могут иметь один цвет с нашей точки зрения./p>p>Факт 2: далеко не все цвета, которые видит среднестатистический человек, можно воспроизвести аппаратными средствами, в том числе с помощью вашего монитора./p> /div> footer classentry-footer> div classread-more-wrap> a hrefhttps://css-live.ru/css/css-colors.html classarticle__read-more>читать дальше/a> /div> ul classpost__tags meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/tag/css reltag>CSS/a>, a hrefhttps://css-live.ru/tag/css_colors reltag>css_colors/a>, a hrefhttps://css-live.ru/tag/budushhee-css reltag>будущее CSS/a>, a hrefhttps://css-live.ru/tag/standarty reltag>стандарты/a>, a hrefhttps://css-live.ru/tag/cveta-v-vebe reltag>Цвета в вебе/a>/li> /ul> /footer>/article>article classpost> header classpost__header> div classpost__date date> span classdate__value>span classposted-on>time classentry-date published updated datetime2021-01-23T16:17:46+03:00>23.01.2021/time>/span>/span> /div> ul classpost__categories meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/category/css relcategory tag>CSS/a>, a hrefhttps://css-live.ru/category/html relcategory tag>HTML/a>, a hrefhttps://css-live.ru/category/html5 relcategory tag>HTML5/a>, a hrefhttps://css-live.ru/category/javascript relcategory tag>JavaScript/a>, a hrefhttps://css-live.ru/category/articles relcategory tag>Статьи/a>, a hrefhttps://css-live.ru/category/articles-css relcategory tag>Статьи по CSS/a>/li> /ul>h2 classpost__headline>a hrefhttps://css-live.ru/articles-css/chtoby-byt-vperedi-veba-veb-standartam-nuzhno-bezhat-v-dva-raza-bystree.html relbookmark classarticle__link>Чтобы быть впереди веба, веб-стандартам нужно бежать в два раза быстрее/a>/h2> div classpost__author> span classpost__author-avatar>img srchttps://secure.gravatar.com/avatar/a38f2e5fcf32562436d03bcf74428196?s60&dmm&rg width60 height60 alt classavatar avatar-60 wp-user-avatar wp-user-avatar-60 photo avatar-default />/span> span classbyline> span classauthor vcard>a classurl fn n hrefhttps://css-live.ru/author/psywalker>Максим Усачев/a>/span>/span> /div>div classpost__comments-bubble>a hrefhttps://css-live.ru/articles-css/chtoby-byt-vperedi-veba-veb-standartam-nuzhno-bezhat-v-dva-raza-bystree.html#comments classpost__coment-link>4/a>/div>/header> div classpost__content>p>Не секрет, что в последние годы веб развивается крайне стремительно. Периодически выходят новые библиотеки, фреймворки и другие полезные для нас инструменты. Всё это безусловно помогает нам решать повседневные задачи. Но в погоне за популярными новинками мы совсем не обращаем внимание на истоки. Многие начинающие разработчики начинают знакомство с кодом именно с инструментов, а не с фундаментальных вещей. Обычно это связывают с тем, что сегодня подавляющее большинство вакансий для фронтенд-разработчиков напичканы «модными» и «хайповыми» словечками вроде «React», «Vue», «styled-components», и множеством других. Поэтому разработчикам важно изучать именно эти вещи, чтобы не остаться без работы. Но разве причина только в этом? Именно поэтому разработчикам не важны основы? Думаю, что только отчасти./p>h2>А в чём, собственно, проблема, и она точно есть?/h2> /div> footer classentry-footer> div classread-more-wrap> a hrefhttps://css-live.ru/articles-css/chtoby-byt-vperedi-veba-veb-standartam-nuzhno-bezhat-v-dva-raza-bystree.html classarticle__read-more>читать дальше/a> /div> ul classpost__tags meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/tag/css reltag>CSS/a>, a hrefhttps://css-live.ru/tag/html reltag>HTML/a>, a hrefhttps://css-live.ru/tag/veb-standarty reltag>веб-стандарты/a>, a hrefhttps://css-live.ru/tag/komponenty reltag>компоненты/a>/li> /ul> /footer>/article>article classpost> header classpost__header> div classpost__date date> span classdate__value>span classposted-on>time classentry-date published updated datetime2020-12-14T04:33:33+03:00>14.12.2020/time>/span>/span> /div> ul classpost__categories meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/category/css relcategory tag>CSS/a>/li> /ul>h2 classpost__headline>a hrefhttps://css-live.ru/css/ubiraem-sdvigi-v-verstke-nalozheniyem-v-css-grid.html relbookmark classarticle__link>Убираем сдвиги в верстке наложением в CSS Grid/a>/h2> div classpost__author> span classpost__author-avatar>img srchttps://css-live.ru/wp-content/uploads/2018/01/selenit-photo-150x150.jpg width60 height60 altSelenIT classavatar avatar-60 wp-user-avatar wp-user-avatar-60 alignnone photo />/span> span classbyline> span classauthor vcard>a classurl fn n hrefhttps://css-live.ru/author/selenit>SelenIT/a>/span>/span> /div>div classpost__comments-bubble>a hrefhttps://css-live.ru/css/ubiraem-sdvigi-v-verstke-nalozheniyem-v-css-grid.html#comments classpost__coment-link>4/a>/div>/header> div classpost__content>p>em>Перевод статьи a hrefhttps://www.hsablonniere.com/prevent-layout-shifts-with-css-grid-stacks--qcj5jo/>Prevent layout shifts with CSS grid stacks/a> с сайта a hrefhttps://www.hsablonniere.com/>www.hsablonniere.com/a> для a hrefhttp://css-live.ru/>css-live.ru/a>, автор — a hrefhttps://twitter.com/hsablonniere>Юбер Саблоньер/a>/em>/p>p>Люди используют CSS Grid по двум причинам:/p>ol>li>CSS — это потрясающе! Факт, как ни крути./li>li>Гриды — отличный инструмент для создания сложных двумерных макетов./li>/ol>p>У меня иногда бывает третья причина использовать CSS Grid: предотвратить strong>сдвиги в верстке/strong>. Я пытался придумать для этого приема прикольное сокращение, но у меня получилось лишь АСПНГ: «АнтиСдвиговый Прием с Наложением в Гридах». Вряд ли у меня получится похвастаться мастерством в «изобретении технических терминов» в резюме на LinkedIn, так что жду ваших предложений получше./p>p>Давайте я объясню прием на реальных примерах. В этой статье я покажу:/p>ul>li>Реальную проблему сдвигов в верстке, с которой я столкнулся в работе над одним компонентом./li>li>Ограничения решения с абсолютным позиционированием./li>li>Преимущества решения с гридом./li>/ul>blockquote>p>Погодите, о каких вообще сдвигах идет речь?/p>/blockquote> /div> footer classentry-footer> div classread-more-wrap> a hrefhttps://css-live.ru/css/ubiraem-sdvigi-v-verstke-nalozheniyem-v-css-grid.html classarticle__read-more>читать дальше/a> /div> ul classpost__tags meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/tag/css3-grid-layout reltag>CSS3 Grid Layout/a>, a hrefhttps://css-live.ru/tag/komponenty reltag>компоненты/a>/li> /ul> /footer>/article>article classpost> header classpost__header> div classpost__date date> span classdate__value>span classposted-on>time classentry-date published updated datetime2020-10-31T18:00:39+03:00>31.10.2020/time>/span>/span> /div> ul classpost__categories meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/category/css relcategory tag>CSS/a>, a hrefhttps://css-live.ru/category/css-snippets relcategory tag>CSS в примерах/a>, a hrefhttps://css-live.ru/category/tricks relcategory tag>Трюки/a>/li> /ul>h2 classpost__headline>a hrefhttps://css-live.ru/tricks/bezumie-na-chistom-html-css.html relbookmark classarticle__link>Безумие на чистом HTML + CSS/a>/h2> div classpost__author> span classpost__author-avatar>img srchttps://css-live.ru/wp-content/uploads/2018/01/selenit-photo-150x150.jpg width60 height60 altSelenIT classavatar avatar-60 wp-user-avatar wp-user-avatar-60 alignnone photo />/span> span classbyline> span classauthor vcard>a classurl fn n hrefhttps://css-live.ru/author/selenit>SelenIT/a>/span>/span> /div>div classpost__comments-bubble>a hrefhttps://css-live.ru/tricks/bezumie-na-chistom-html-css.html#comments classpost__coment-link>2/a>/div>/header> div classpost__content>p>Играми на «чистом CSS» (т.е. без JS) нас уже давно трудно удивить. Но британскому дизайнеру Джейми Коултеру, пожалуй, удалось. Его a hrefhttps://codepen.io/jcoulterdesign/pen/WNxjVbW>недавняя работа/a> в Codepen — полноценный квест с сюжетом, в котором игроку нужно выбраться из мрачного подвала то ли больницы, то ли лаборатории, где накануне произошло что-то ужасное. И заодно узнать шокирующую разгадку… в общем, то, что надо на Хэллоуин!/p>p>Игрок может перемещаться между локациями и взаимодействовать с окружающими предметами. В некоторых предметах бывает спрятано что-то нужное для дальнейшего прохождения (например, ключ), некоторые — скажем, записки на стенах — содержат полезные подсказки, а ещё есть просто приятные «пасхалки» (например, логотип Codepen и аватарки многих «звезд» фронтенда:). Некоторые предметы совмещают всё вышеперечисленное. И такая проработка мелочей, да и вся атмосфера игры, весьма впечатляет./p>p>Но завсегдатаев Codepen — и нашего сайта — не меньше разгадки сюжета игры занимает другой вопрос:/p>h2>Как же это сделано?/h2> /div> footer classentry-footer> div classread-more-wrap> a hrefhttps://css-live.ru/tricks/bezumie-na-chistom-html-css.html classarticle__read-more>читать дальше/a> /div> ul classpost__tags meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/tag/igra reltag>игра/a>, a hrefhttps://css-live.ru/tag/polya-form reltag>поля форм/a>, a hrefhttps://css-live.ru/tag/razvlecheniya-verstalshhikov reltag>развлечения верстальщиков/a>/li> /ul> /footer>/article>article classpost> header classpost__header> div classpost__date date> span classdate__value>span classposted-on>time classentry-date published datetime2020-09-25T23:54:56+03:00>25.09.2020/time> (span aria-labelобновлено>обн./span> time classupdated datetime2020-12-17T01:16:11+03:00>17.12.2020/time>)/span>/span> /div> ul classpost__categories meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/category/html5 relcategory tag>HTML5/a>, a hrefhttps://css-live.ru/category/javascript relcategory tag>JavaScript/a>, a hrefhttps://css-live.ru/category/teoriya relcategory tag>Теория/a>/li> /ul>h2 classpost__headline>a hrefhttps://css-live.ru/javascript/nesbyvshiesya-nadezhdy-veb-komponentov.html relbookmark classarticle__link>Несбывшиеся надежды веб-компонентов/a>/h2> div classpost__author> span classpost__author-avatar>img srchttps://css-live.ru/wp-content/uploads/2018/01/selenit-photo-150x150.jpg width60 height60 altSelenIT classavatar avatar-60 wp-user-avatar wp-user-avatar-60 alignnone photo />/span> span classbyline> span classauthor vcard>a classurl fn n hrefhttps://css-live.ru/author/selenit>SelenIT/a>/span>/span> /div>div classpost__comments-bubble>a hrefhttps://css-live.ru/javascript/nesbyvshiesya-nadezhdy-veb-komponentov.html#comments classpost__coment-link>12/a>/div>/header> div classpost__content>p>em>Перевод статьи a hrefhttps://lea.verou.me/2020/09/the-failed-promise-of-web-components/>The failed promise of Web Components/a> с сайта a hrefhttps://lea.verou.me/>lea.verou.me/a>, опубликован на a hrefhttps://css-live.ru/>CSS-live.ru/a> с разрешения автора — a hrefhttps://twitter.com/LeaVerou>Лии Веру/a>/em>/p>p>Веб-компоненты обещали так много новых возможностей для HTML, с ними веб-разработка должна была стать намного доступнее для непрограммистов и легче для программистов. Помните тот восторг от каждого новёхонького HTML-элемента, который реально em>что-то делал?/em> Помните, как было здорово, когда стало можно делать слайдеры, палитры для выбора цвета, диалоговые окна, раскрывающиеся виджеты прямо в HTML, без необходимости подключать какие-либо библиотеки?/p>p>От веб-компонентов ждали такого же удобства, но для намного более широкого спектра HTML-элементов, и гораздо быстрее, поскольку никому не нужно было бы ждать весь цикл стандартизации и реализации. Просто подключим скрипт, и бац — в нашем распоряжении стало еще больше элементов!/p>p>По крайней мере, так задумывалось. В какой-то момент пространство успели заполонить фанатики JS-фреймворков, балдеющие от сложных API, заумных процессов сборки и графов зависимостей, похожих на корни дерева баньян./p>p styletext-align: center;>img loadinglazy srchttps://live.staticflickr.com/2025/32441377780_e3acf6de12_b.jpg width1024 height768 alt />br />em>Вот как выглядят корни дерева баньян.a hrefhttps://www.flickr.com/photos/79721788@N00/32441377780/> Фото Дэвида Стенли на Flickr (лицензия CC-BY)/a>./em>/p> /div> footer classentry-footer> div classread-more-wrap> a hrefhttps://css-live.ru/javascript/nesbyvshiesya-nadezhdy-veb-komponentov.html classarticle__read-more>читать дальше/a> /div> ul classpost__tags meta-list> li classmeta-list__item>a hrefhttps://css-live.ru/tag/html5 reltag>HTML5/a>, a hrefhttps://css-live.ru/tag/javascript reltag>JavaScript/a>, a hrefhttps://css-live.ru/tag/budushhee-veba reltag>будущее веба/a>, a hrefhttps://css-live.ru/tag/veb-komponenty reltag>веб-компоненты/a>/li> /ul> /footer>/article> nav classnavigation posts-navigation rolenavigation> h2 classscreen-reader-text>Навигация по записям/h2> div classnav-links>div classnav-previous>a hrefhttps://css-live.ru/page/2 >Предыдущие записи/a>/div>/div> /nav> /main> aside classwidget-area activity> section idexecphp-10 classwidget widget_execphp>h2 classvisually-hidden>Последние новости/h2> div classexecphpwidget>h3 classactivity__content news-content>Последние новости/h3>ul classactivity__content activity__list news news-content> li classnews__item> b classnews__date>08.09.2022/b> a hrefhttps://css-live.ru/vecssti-s-polej/has-breaks-jquery.html>Удар откуда не ждали: псевдокласс :has() ломает сайты на jQuery/a> /li> li classnews__item> b classnews__date>31.01.2022/b> a hrefhttps://css-live.ru/vecssti-s-polej/kaskadnye-sloi-uzhe-pochti-standart.html>Каскадные слои уже почти стандарт!/a> /li> li classnews__item> b classnews__date>22.01.2022/b> a hrefhttps://css-live.ru/vecssti-s-polej/roditelskomu-selektoru-has-skoree-vsego-zapretyat-byt-vlozhennym.html>«Родительскому селектору» :has(), скорее всего, запретят быть вложенным/a> /li> li classnews__item> b classnews__date>02.01.2022/b> a hrefhttps://css-live.ru/vecssti-s-polej/novogodnie-podarki-rabochej-gruppy-css-znacheniya-i-edinicy-4-urovnya-mediavyrazheniya-4-i-5-urovnej.html>Новогодние подарки Рабочей группы CSS: значения и единицы 4 уровня, медиавыражения 4 и 5 уровней/a> /li> li classnews__item> b classnews__date>22.12.2021/b> a hrefhttps://css-live.ru/vecssti-s-polej/den-zimnego-solncsstoyaniya-novye-publikacii-css-i-priyatnyj-syurpriz-safari.html>День зимнего солнCSSтояния: новые публикации CSS и приятный сюрприз Safari/a> /li>/ul>/div> /section>section idexecphp-11 classwidget widget_execphp>h2 classvisually-hidden>Последние комментарии/h2> div classexecphpwidget>h3>Последние комментарии/h3>ul classactivity__content activity__list comments-content> li classcomments__item> b classcomments__autor>Max Lensky/b> к a hrefhttps://css-live.ru/articles/display-contents-practice.html classcomments__article>Display: contents и его новые…/a>: q classcomments__text>Вы пишите о симантичности а сами в ссылку поместили…/q> /li> li classcomments__item> b classcomments__autor>Евгений/b> к a hrefhttps://css-live.ru/tricks/gologrammy-plenochnye-zasvetki-i-shejdery-na-chistom-css.html classcomments__article>Голограммы, пленочные засветки и шейдеры…/a>: q classcomments__text>Потрясная статья. Будет полезно знать и иметь что-то такое…/q> /li> li classcomments__item> b classcomments__autor>Михаил/b> к a hrefhttps://css-live.ru/articles/na-osvoenie-react-mne-potrebovalas-vsego-nedelya-a-chem-vy-xuzhe.html classcomments__article>На освоение React мне потребовалась…/a>: q classcomments__text>Конечно можно, притом что ездить ты можешь на механике,…/q> /li> li classcomments__item> b classcomments__autor>green/b> к a hrefhttps://css-live.ru/css/ubiraem-sdvigi-v-verstke-nalozheniyem-v-css-grid.html classcomments__article>Убираем сдвиги в верстке наложением…/a>: q classcomments__text>Статья не о чем,контент всегда сдвигается как не крути,особенно…/q> /li> li classcomments__item> b classcomments__autor>SelenIT/b> к a hrefhttps://css-live.ru/articles/podrobno-o-razmeshhenii-elementov-v-grid-raskladke-css-grid-layout.html classcomments__article>Подробно о размещении элементов в…/a>: q classcomments__text>Как вариант, раз картинки выводятся циклом, можно этим же…/q> /li>/ul>/div> /section>/aside>aside classwidget-area partnership> section idexecphp-12 classwidget widget_execphp> div classexecphpwidget>div classbest__main> h3>Недавние хиты просмотров/h3> ul classbest__list best__list_type_discussion> li classbest__item> span classbest__sum>b>3/b> тыс./span> a hrefhttps://css-live.ru/vecssti-s-polej/has-breaks-jquery.html classbest__link>Удар откуда не ждали: псевдокласс :has() ломает сайты на jQuery/a> /li> /ul> h3>Недавние хиты обсуждений/h3> ul classbest__list best__list_type_view> li classbest__item> b classbest__sum>0/b> a hrefhttps://css-live.ru/vecssti-s-polej/has-breaks-jquery.html classbest__link>Удар откуда не ждали: псевдокласс :has() ломает сайты на jQuery/a> /li> /ul>/div>/div> /section>section idtext-30 classwidget widget_text> div classtextwidget>h3>Поддержите проект/h3>form actionhttps://money.yandex.ru/quickpay/confirm.xml methodPOST target_blank>input namereceiver typehidden value410011391625255 />input nameformcomment typehidden valueРазвитие CSS-live.ru />input nameshort-dest typehidden valueРазвитие CSS-live.ru />input namelabel typehidden value$order_id />input namequickpay-form typehidden valuedonate />input nametargets typehidden valueПожертвование на развитие сайта CSS-live.ru />/p>p>label forpay-sum>Сумма: /label>input namesum idpay-sum typetext value200 data-typenumber size4 classwidget-field /> руб./p>p>label forpay-y-m>input namepaymentType typeradio valuePC idpay-y-m />Яндекс.Деньгами/label>br />label forpay-card>input namepaymentType typeradio valueAC idpay-card />Банковской картой/label>/p>p classform-submit>input typesubmit valueПомочь classwidget-button />/p>/form>/div> /section>/aside> /div> footer classsite-footer> p classcopyright>© CSS-live 2011—2024/p> p classfeedback>a hrefmailto:psywalker09@gmail.com classfeedback__link>Связаться с нами/a>/p> p idcounter>/p> /footer>link relstylesheet idprettifycss-group-css hrefhttps://css-live.ru/wp-content/plugins/bwp-minify/min/?fwp-content/themes/livegrid/css/prettify.css typetext/css mediaall />script typetext/javascript srchttps://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js?ver0.4>/script>script typetext/javascript srchttps://css-live.ru/wp-content/plugins/bwp-minify/min/?fwp-content/plugins/prettify-wordpress/js/min/prettify_mod.js,wp-content/plugins/subscribe-to-comments-reloaded/includes/js/stcr-plugin.js,wp-content/themes/livegrid/js/helper.js,wp-includes/js/wp-embed.min.js>/script>/body>/html>!-- Dynamic page generated in 0.288 seconds. -->!-- Cached page generated by WP-Super-Cache on 2024-09-01 09:58:01 -->!-- Compression gzip -->!-- super cache -->
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
]