Симпатичная и грамотная! Но есть уточнения. ":" - это псевдокласс (pseudo class), "::" - это псевдоэлемент (pseudo element) Поэтому для after, before правильнее именно так ::after Так как это - именно псевдоэлементы, а не классы. У самогО псевдоэлемента не может быть псевдокласса(hover, active, ...). Именно поэтому можно использовать только: myElement:hover::before , что означает: "браузер должен задать свойства псевдоэлемента ::before для элемента myElement в состоянии :hover "
Анна,сегодня впервые за шел в Ваш блог и Вы знаете-мне понравилось,без бубнения,без --и...,-это...,-ну-у-у,короче я Ваш поклонник...в смысле я начинающий верстальщик и такие прямые ,без загибонов, очень хорошо воспринимаютя...стал Вашим/громко сказано/спонсором...
Наверное нужно было бы упомянуть, что элементы будут лежать внутри тега, к которому они применяются, для меня это было непонятно, думал что элемент образовывается до самого тега, а оказывается до контента внутри него.
очень приятно смотреть, хоть и 2 трети информации и так знал, а другая пока не была нужна , повторить-всегда полезно. Информация изложена грамотно и доступно . Вобщем спасибо за отличный контент
Спасибо, стало больше ясности. В принципе все и так интуитивно понятно, но нужно было убедиться. Смотрел футеры на разных сайтах и встретил :before на wildberries, сам попробовал, и вроде как понятно
Псевдоэлементами являются ::after, ::before и ::selection (+ некоторые вендорные стили). Такие штуки как :hover, :active, :nth-child - это псевдоклассы. В CSS3 можно писать псевдоэлементы как через одно так и через 2 двоеточия, но корректным вариантом именно в CSS3 является написание через 2. 3:20 Если добавила position: absolute, то display: block уже не нужен: absolute по умолчанию придаёт формы блочного поведения (кроме заполнения элементом всей строки). Не затронут момент, что в content можно передать значение атрибута тега, вроде немаловажный пункт
Маркеры списков так же можно стилизовать, с помощью псевдоэлемента "::marker", но там есть некоторые ограничения. Например, свойства background-color, margin, border, padding не поддерживаются. В целом познавательно, спасибо.)
в css2 не использовалось двойное двоеточие (htmlbook.ru/css3/before). Это стандарт css3. В css2 - это только одно двоеточие. Для css3 - вполне приемлемо использование также старого способа (css2) с одинарным двоеточием
Простите, а есть у вас видео про выбор шрифтов на сайте? К примеру, смотрю, что вы любите тот же Montserrat, почему? И sans-serif запасной как системный? Можно чуть побольше про это? Спасибо.
у каждого свое мнение но факт остается фактом. ань. спасибо. поделилась полезнейшей информацией. а все остальное? а это как в рекламе nivea: добейся этого сам. для этого есть голова.
Есть список из 4 рядков с разными стилями . Через :before я вставила галочку для каждого рядка. И эта каждая галочка приняла стили текста . Как сделать так , чтобы галочка не менялась. У вас слово Hello приняло стиль текста.
Почему псевдоклассы не применяются к блоку section. При использовании after с bottom:0 position: absolute уходит вниз на середину следующего блока. Убираю bottom становится на середине.
А можно чуть пояснить по position absolute и relative, этот нюанс не до конца понял. Когда и как надо, и как это работает именно в данном примере для обрамления h2. Спасибо.
Понятно 🤔 что ни чего не понятно! Объяснение и т.д норм спс но вот я так и не понял зачем псевдоэлементы нужны это нельзя сделать в css!? Второе есть видео что бы узнать все о них и понимать когда их вообще применять 😄 ссорян за мою тупость! Анна и еще вы пишите в. Браузере кажется в CodePen . Эта платформа специально для проверки кода и возможность его копирования потом в проект или как ?! Одним словом для чего он и как в нем работать ! Просто было как то время я что то у вас в нем что то проходил и вот решил еще раз заняться этим вопросом так как не отнёсся на тот момент к той задаче серьезно ! Подскажите есть ли видео о том как в нем работать !!! Спс
Здравствуйте! подскажите пожалуйста, можно ли найти псевдоэлемент ::before в поиске на странице? Если да, то какой верный синтаксис его добавления в селектор? Приведите пожалуйста пример.
У меня вопрос насчет примера с лапкой (на пятой минуте), мне нужно эту лапку сделать больше кружочка, а бэкграундом это не получается. лапка внутри кружка. Есть какие-то варианты?
Добрый день. Я начинающий верстальщик. Столкнулась с проблемой отображения псевдоэлементов на разных экранах. Например, делаю обводку вокруг иконки соцсети, цепляя before к "a" (линку). Позиционирую пикселями: top: 20px, left: 15px. На другом мониторе обводка едет вбок, либо вверх. Есть подозрения, что это из-за разных разрешений. Как это предотвратить? Прописывать позиционирование в %?
У меня пример с черной линией перед и после заголовка не получался. После долгих экспериментов понял в чем дело. Как только задаем правило position: absolute; для h2 , то сразу теряется смысл в top: calc(50% - 2px); для .box::befor . И Anna, не озвучив, поменяла его значение на 30px; На 8.24 это видно.
Пример с линией немного неудачный. Все можно сделать на flex'ах. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, labore? ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, labore? div{ display: flex; justify-content: center; align-items: center; &::before, &::after{ content:''; min-width: 50px; height: 4px; background: red; flex: 1 1 0; } &::before{ margin-right: 20px; } &::after{ margin-left: 20px; } } h1{ margin: 0; } 0) Flex сила, можно выравнивать так как нужно вам 1) Не приходится вырывать из потока текст 2) При слишком длинном заголовке текст переносится на следующую строку а линии остаются видны 3) Удобнее применят в боках со сложным фоном З.Ы. За видос спасибо, пили дальше
раз уж упомянули о after и before, не мешало бы упомянуть о переносе текста из атрибутов в content из html, может пригодиться. Об этом мало где говорят, и многие не знают. content: attr(data);
Избытка не будет, т.к. по сей день ценных специалистов, которые готовы развиваться и не останавливаться, не так много. К сожалению, много посредственных. Следовательно, спрос на хороших спецов не спадёт.
@@annblok_webdev Насколько я знаю, фронтендеров больше, чем бэкендеров. Если я хочу стать бэк-разработчиком, как думаешь, будет ли эта сфера перспективной. Логика строгая без дизайна как-то больше меня привлекает.
@@alarm_ytнужен узкий профиль, мне сложнее найти фронтенда, с беком проблем меньше, там выше порог вхождения. Надо делать, то что нравится, везде есть деньги
@@alarm_yt А что мешает с фронта перейти на бек? Nodejs, GraphQl, Apollo + на мобилку React native. Изучая чистый бек тебе все равно придется много работать с фронтом и JS. Изучай все сразу. На самом деле там не много и не особо сложно. После MVC php (laravel Yii и пр) React js or Vue или Node покажется весьма простым. По факту в работе над проектом в компании (аутсорс) лучше быть средним фулстаком, чем гуру бекэнд, без знания JS либ или фреймворков. На пайтоне не советую начинать. На джанго мало проектов, как и на JAva Spring или Ruby. CSS база. Совет изучай их вне зависимости от инструмента. Также базовый JS, особенно ES6 на котором построены все юзабельные Либы.
Спасибо за урок! :) Не очень понимаю, почему в примере с декоративной линией нужно прописать "width: 100%" для псевдоэлемента, если у него есть свойство "display: block". Как я ранее понял, блочные элементы и так занимают всю ширину. При этом без "width" он совсем не отображается. Как это работает?
Двойное двоеточие перед псевдоэлементами пришло из СSS2??? В CSS3 можно использовать любой вариант?? А гуру CSS пишут, что двойное двоеточние появилось в CSS3 специально для разграничения псевдоэлементов и псевдоклассов и что НУЖНО использовать двойное двоеточие. А одинарное используется только если нужна обратная совместимость. Так где же правда?
Спасибо Вам за урок! Есть маленький вопрос: есть ли разница в наличии или отсутствии пробела между свойством и значением? Знаю что оба варианта рабочие, но все же...
Разницы нет, но обычно, если делать минификацию CSS, то эти пробелы удаляются и стили устанавливаются в одну строчку (максимально сжатие). Поэтому на начальном этапе написания CSS вы можете просто выбрать любой удобный для вас способ отображения. Желательно, чтобы это использовалось везде, а не только в отдельных свойствах.
Аня, пишу код за вами буква в букву, но все равно пример с линией не получается так как у вас(((( линия почему то сверху заголовка. Уже пробовал и в aVisual studio и в codepen - результат такой же... В чем может быть проблема? Код перепроверял 5 раз
тоже самое было, обратите внимание, что потом для box::before значение top становится 30px, а не считается через калькулятор, жаль Аня не обьяснила этот момент
Типичный Верстальщик ещё такой вопрос. Я всё сделал как на видео, но сама полоска странно отображается(почему-то выше заголовка) я решил проблему тем, что прописал вместо top:calc(50% - 2px) top:calc(50% + 25px) и всё тоже стало по центу. Дальше внутренний отступ задал и всё отобразилось хорошо, но почему изначально у меня не работало как у вас? (Код точно такой же, переписывал 2 раза, работаю в мозиле, но в других браузерах таже фигня) Вы не объясните, пожалуйста?
Может лучше прямо так?) Просто код не особо длинный...article просто так добавил, но он по идее и не должен влиять) CSS Потрясающий мир CSS *_CSS:_* h1{ text-transform: uppercase; text-align: center; font-size: 50px; position: absolute; margin-top: 0; background-color: #fff; padding: 0 20px; } .box{ margin-top: 70px; position: relative; display: flex; justify-content: center; } .box:before{ content: ''; display: block; width: 100%; height: 4px; background-color: #000; position: absolute; top:calc(50% + 25px); } @@annblok_webdev
Анна, почему свойство top изначально задавалось со значением через calc, а в итоговом коде top:30px? То есть, почему - понятно... через calc этого эффекта сделать не получится, верно?
за пять минут можно узнать столько полезного, что дяди и за час не расскажут. ясно и доступно и понятно. Больше видосов!) Спасибо
Видосы выходят раз в неделю ;)
Излишнего пиздостралания не надо.
Моя богиня. Целый час пыталась разобраться, а ты за 10 минут все разложила! Обожаю)
🤗🤗🤗
Как верстальщик со стажем скажу - девочка излагает вполне грамотно, лаконично, доступно, подписался, продолжай в том же духе.
Скорее всего текст был заранее подготовлен, отдельно зачитан, и наложен на видео. По итогу выглядит очень понятливо, согласен.
Если бы не твой коммент, я бы переключил
@@johnd1431 ну уж очень быстро, для чайников это не есть правильно
Как верстальщик со стажем, скажи пожалуйста
Какой смысл в :after и :before, если все это можно сделать и с помощью других тегов?
@@hikkikomori9072 тот же span
Симпатичная и грамотная! Но есть уточнения. ":" - это псевдокласс (pseudo class), "::" - это псевдоэлемент (pseudo element) Поэтому для after, before правильнее именно так ::after Так как это - именно псевдоэлементы, а не классы. У самогО псевдоэлемента не может быть псевдокласса(hover, active, ...). Именно поэтому можно использовать только: myElement:hover::before , что означает: "браузер должен задать свойства псевдоэлемента ::before для элемента myElement в состоянии :hover "
поправил и, при этом, не унизил...Побольше бы таких людей как Вы!
Просто, доступно и без лишней болтовни. Однозначно лайк)
Анна,сегодня впервые за шел в Ваш блог и Вы знаете-мне понравилось,без бубнения,без --и...,-это...,-ну-у-у,короче я Ваш поклонник...в смысле я начинающий верстальщик и такие прямые ,без загибонов, очень хорошо воспринимаютя...стал Вашим/громко сказано/спонсором...
Я безумно рада, что вам понравился мой канал 🥳 Поздравляю вас с появлением красного значка!
Наверное нужно было бы упомянуть, что элементы будут лежать внутри тега, к которому они применяются, для меня это было непонятно, думал что элемент образовывается до самого тега, а оказывается до контента внутри него.
Як все доступно пояснюєте! Прям насолоджуюсь слухаючи вас.
Очень информативно, полное отсутствие воды. Огромное спасибо!
Блин, я тебя обожаю, вчера промудохался с макетом, не мог понять как вставляются такие вот изображения, через before, теперь вроде понял)
очень приятно смотреть, хоть и 2 трети информации и так знал, а другая пока не была нужна ,
повторить-всегда полезно. Информация изложена грамотно и доступно . Вобщем спасибо за отличный контент
Спасибо, приятно знать, чтоы контент вам нравится 😊
Хорошо подготовилась, без лишней инфы, спасибо.
С псевдо вообще много интересного. like you.
Отличный урок. Всё максимально подробно. Ну и радует что в речи нету запинаний, междометий и прочих недостатков присущих во время записи уроков.
Спасибо :)
@@annblok_webdev вам спасибо за качественный урок)
Спасибо, стало больше ясности. В принципе все и так интуитивно понятно, но нужно было убедиться. Смотрел футеры на разных сайтах и встретил :before на wildberries, сам попробовал, и вроде как понятно
Ого, вот это вы крутая в этом. Я вообще в шоке как у вас все быстро и легко, это же сколько нужно было времени потратить на изучение))
Спасибо 😊
Офигенная полезная информация! Спасибо, Анна! За шпаргалку по флексам - отдельный поклон, 2 страницы на учебе сделал благодаря ей!
Здорово, я рада! 🤗
Аааа как приятно слушать этот голос, так и еще по поводу css 😍
Like
Спасибо большое, голос приятный, все кратко и ясно! Вы умница.
Боже мой , вот это урок ! Спасибо Анна и с праздником ! Удачи.
Спасибо ☺️
Благодарю Вас, теперь всё понятно, а то не знал как подчёркивание у заголовка через псевдоэлемент делать 👍
Псевдоэлементами являются ::after, ::before и ::selection (+ некоторые вендорные стили). Такие штуки как :hover, :active, :nth-child - это псевдоклассы. В CSS3 можно писать псевдоэлементы как через одно так и через 2 двоеточия, но корректным вариантом именно в CSS3 является написание через 2.
3:20 Если добавила position: absolute, то display: block уже не нужен: absolute по умолчанию придаёт формы блочного поведения (кроме заполнения элементом всей строки).
Не затронут момент, что в content можно передать значение атрибута тега, вроде немаловажный пункт
спасибо большое, не мог картинку поставить, оказывается надо высоту и ширину ставить
Спасибо. как всегда супер (как всегда), продолжайте в том же духе!
Какой отморозок поставил дизлайк??
Все хорошо и ясным языком объясняет. Thank you! Лайк))))
бэк эндер)
@@AlibekKulseitov бэкэндеры заходят и не глядя ставят дизлайки)
Вы прекрасны, продолжайте !
Контент, взрывающий мозг. Все отлично
Маркеры списков так же можно стилизовать, с помощью псевдоэлемента "::marker", но там есть некоторые ограничения. Например, свойства background-color, margin, border, padding не поддерживаются. В целом познавательно, спасибо.)
в css2 не использовалось двойное двоеточие (htmlbook.ru/css3/before). Это стандарт css3. В css2 - это только одно двоеточие. Для css3 - вполне приемлемо использование также старого способа (css2) с одинарным двоеточием
👍👍👍🔥 - все по теме обсуждения. ничего лишнего. спасибо. изучаю цсс по твоим урокам.
🔥🥳
Очень лаконично! Спасибо!
Инфо легко заходит. Спасибо за труд.
Простите, а есть у вас видео про выбор шрифтов на сайте? К примеру, смотрю, что вы любите тот же Montserrat, почему? И sans-serif запасной как системный? Можно чуть побольше про это? Спасибо.
у каждого свое мнение но факт остается фактом. ань. спасибо. поделилась полезнейшей информацией. а все остальное? а это как в рекламе nivea: добейся этого сам. для этого есть голова.
Узнал как сделать так, чтобы линия не перечеркивала заголовок. Спасибо)
Огромное тебе спасибо, я только обучаюсь CSS и твой ролик мне очень помог) еще раз спасибо😘
Есть список из 4 рядков с разными стилями . Через :before я вставила галочку для каждого рядка. И эта каждая галочка приняла стили текста . Как сделать так , чтобы галочка не менялась. У вас слово Hello приняло стиль текста.
Узнал что то новое, спасибо Аня :)
Как всегда информативно и доступно. Благодарю)
Почему псевдоклассы не применяются к блоку section. При использовании after с bottom:0 position: absolute уходит вниз на середину следующего блока. Убираю bottom становится на середине.
афигеть девушка программист, это так круто )
p.s. больше всего хотел что бы моя девушка была программистом
Очень познавательно и понятно!! Молодец, продолжай в том же духе))
А чем вы пользоваетесь для написания кода , что бы сразу рядом отображались изменения страницы?
Codepen
@@annblok_webdev спасибо большое 🤗🤗
Спасибо! Очень помогла!
За стилизованный лист - спасибо :)
Это было КРУТО 😊
Привет. Спасибо за инфу! продолжай в том же духе )))
А можно поставить линии по бокам не для заголовка, а для того что будет записано внутри content: " ";
А можно чуть пояснить по position absolute и relative, этот нюанс не до конца понял. Когда и как надо, и как это работает именно в данном примере для обрамления h2. Спасибо.
Чтоб перемещать элемент с помощью top нужно назначить ему position absolute, а его родителю position relative. Иначе top работать не будет.
Понятно 🤔 что ни чего не понятно! Объяснение и т.д норм спс но вот я так и не понял зачем псевдоэлементы нужны это нельзя сделать в css!? Второе есть видео что бы узнать все о них и понимать когда их вообще применять 😄 ссорян за мою тупость! Анна и еще вы пишите в. Браузере кажется в CodePen . Эта платформа специально для проверки кода и возможность его копирования потом в проект или как ?! Одним словом для чего он и как в нем работать ! Просто было как то время я что то у вас в нем что то проходил и вот решил еще раз заняться этим вопросом так как не отнёсся на тот момент к той задаче серьезно ! Подскажите есть ли видео о том как в нем работать !!! Спс
Здравствуйте! подскажите пожалуйста, можно ли найти псевдоэлемент ::before в поиске на странице? Если да, то какой верный синтаксис его добавления в селектор? Приведите пожалуйста пример.
Очень хорошо все рассказано, спасибо большое) Лайк + подписка
У меня вопрос насчет примера с лапкой (на пятой минуте), мне нужно эту лапку сделать больше кружочка, а бэкграундом это не получается. лапка внутри кружка. Есть какие-то варианты?
Какая крутая, просто жесть!!!!
Ничего нового, я думал может там будет рассказываться про :before display:table; как у бутстрапа, принцип его работы...
Добрый день. Я начинающий верстальщик. Столкнулась с проблемой отображения псевдоэлементов на разных экранах. Например, делаю обводку вокруг иконки соцсети, цепляя before к "a" (линку). Позиционирую пикселями: top: 20px, left: 15px. На другом мониторе обводка едет вбок, либо вверх. Есть подозрения, что это из-за разных разрешений. Как это предотвратить? Прописывать позиционирование в %?
Привет, отличное видео, спасибо. Удачи.
Видео просто бомба, молодец!
P.S Куда делся розоватый оттенок волос?
Cмылся :D
@@annblok_webdev Понял, тебе он был очень к лицу)
@@annblok_webdev я думал стили слетели.
Спасибо большое за видео!)
Все очень понятно и коротко, это очень важно!)
У меня пример с черной линией перед и после заголовка не получался. После долгих экспериментов понял в чем дело. Как только задаем правило position: absolute; для h2 , то сразу теряется смысл в top: calc(50% - 2px); для .box::befor . И Anna, не озвучив, поменяла его значение на 30px; На 8.24 это видно.
Пример с линией немного неудачный. Все можно сделать на flex'ах.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, labore? ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, labore?
div{
display: flex;
justify-content: center;
align-items: center;
&::before,
&::after{
content:'';
min-width: 50px;
height: 4px;
background: red;
flex: 1 1 0;
}
&::before{
margin-right: 20px;
}
&::after{
margin-left: 20px;
}
}
h1{
margin: 0;
}
0) Flex сила, можно выравнивать так как нужно вам
1) Не приходится вырывать из потока текст
2) При слишком длинном заголовке текст переносится на следующую строку а линии остаются видны
3) Удобнее применят в боках со сложным фоном
З.Ы. За видос спасибо, пили дальше
Дима Лаврик , трепещи ! ) Это Она создавала CSS
Очень круто объясняет. У неё талант.
Спасибо, очень интересно и понятно, Ваше видео очень мне помогло)
У меня такая странная проблема, before не перекрывает цветом контент но перекрывает своими габаритами, то есть нельзя нажать на что то в контенте
раз уж упомянули о after и before, не мешало бы упомянуть о переносе текста из атрибутов в content из html, может пригодиться. Об этом мало где говорят, и многие не знают.
content: attr(data);
так же что и то что не стоит злоупотреблять ими. с какими элементами он не работает и еще по мелочи(короче тема не раскрыта полностью)
ТВОЙ ВИДОС ТОП👍👍👍
Как думаешь, будет ли в этом году избыток front-end разработчиков и спрос на них спадет?
Избытка не будет, т.к. по сей день ценных специалистов, которые готовы развиваться и не останавливаться, не так много. К сожалению, много посредственных. Следовательно, спрос на хороших спецов не спадёт.
@@annblok_webdev Насколько я знаю, фронтендеров больше, чем бэкендеров. Если я хочу стать бэк-разработчиком, как думаешь, будет ли эта сфера перспективной. Логика строгая без дизайна как-то больше меня привлекает.
Anti/Lis бэкенд всегда перспективен
@@alarm_ytнужен узкий профиль, мне сложнее найти фронтенда, с беком проблем меньше, там выше порог вхождения. Надо делать, то что нравится, везде есть деньги
@@alarm_yt А что мешает с фронта перейти на бек? Nodejs, GraphQl, Apollo + на мобилку React native. Изучая чистый бек тебе все равно придется много работать с фронтом и JS. Изучай все сразу. На самом деле там не много и не особо сложно. После MVC php (laravel Yii и пр) React js or Vue или Node покажется весьма простым. По факту в работе над проектом в компании (аутсорс) лучше быть средним фулстаком, чем гуру бекэнд, без знания JS либ или фреймворков. На пайтоне не советую начинать. На джанго мало проектов, как и на JAva Spring или Ruby.
CSS база. Совет изучай их вне зависимости от инструмента. Также базовый JS, особенно ES6 на котором построены все юзабельные Либы.
Спасибо за урок! :)
Не очень понимаю, почему в примере с декоративной линией нужно прописать "width: 100%" для псевдоэлемента, если у него есть свойство "display: block". Как я ранее понял, блочные элементы и так занимают всю ширину. При этом без "width" он совсем не отображается. Как это работает?
Идеально объясняешь! Только вот скажи, зачем задавать по отдельности background? Т.е. background-image, background-size и т.д.
Чтобы легче воспринимали не такие профит как ты:)
Спасибо, Солнышко =)
Вообще топ 😎😎👍👍👍👍👍❤️
Двойное двоеточие перед псевдоэлементами пришло из СSS2??? В CSS3 можно использовать любой вариант?? А гуру CSS пишут, что двойное двоеточние появилось в CSS3 специально для разграничения псевдоэлементов и псевдоклассов и что НУЖНО использовать двойное двоеточие. А одинарное используется только если нужна обратная совместимость. Так где же правда?
Можно ли при помощи :before выводить надпись реклама над рекламным блоком?
вы хотите кириллицу записать в свойства content? если да, то не рекомендую
А Фронтенд разработка будет актуальна лет так через 5-8?
Добрый день! Не получается "завести" линию за h2. После добавления заголовку position: absolute, заголовок "проваливается" за имеющийся ниже текст
Добрый день. Скиньте ссылку на код в Codepen.
@@annblok_webdev codepen.io/kulikonch/pen/YzPWLgY
Спасибо Вам за урок!
Есть маленький вопрос: есть ли разница в наличии или отсутствии пробела между свойством и значением? Знаю что оба варианта рабочие, но все же...
Разницы нет, но обычно, если делать минификацию CSS, то эти пробелы удаляются и стили устанавливаются в одну строчку (максимально сжатие). Поэтому на начальном этапе написания CSS вы можете просто выбрать любой удобный для вас способ отображения. Желательно, чтобы это использовалось везде, а не только в отдельных свойствах.
@@annblok_webdev Спасибо за ответ!
Очешуенно!
Глаза космос)
Тут нельзя лайк не поставить )
Ля, ты так хорошо объясняешь!!!
Аня, пишу код за вами буква в букву, но все равно пример с линией не получается так как у вас(((( линия почему то сверху заголовка. Уже пробовал и в aVisual studio и в codepen - результат такой же... В чем может быть проблема? Код перепроверял 5 раз
тоже самое было, обратите внимание, что потом для box::before значение top становится 30px, а не считается через калькулятор, жаль Аня не обьяснила этот момент
глаза просто супер!
Очень здорово. Мне понравилось.
Кстати, Ваш сайт не доступен с територии Украины как минимум у провайдера "Интелект"
у меня небольшая проблема, когда я делаю ховер на бефор или афтер, то он меняет цвет при наведении на текст, а не сам элемент бефор или афтер
Нужен ваш код)
@@annblok_webdev код был точно какой же как в видео у вас
А как сделать чтобы HOVER работал непосредственно при наведении на иконку, а не на весь текст?
.element:hover:before или .element:hover:after
Отличное видео, благодараю!
Что это за глаза, я от них оторватся не могу....
Фу. Каблук.
Это называется Линзы, а не глаза :)
Таже херня, видео по два раза смотрю, первый на глаза залипаю, а во второй раз информацию впитываю)
Учи, сиди. На глаза он засмотрелся. ))
Ты вродь пришёл урок смотреть)
Как посмотреть модули уроков курса?
Данияр Булдаков ☀ Базовый tpverstak.ru/training/
☀ Продвинутый tpverstak.ru/training-profi/
8:10 А для чего мы задаём заголовку h2 абсолютное позиционирование? Я просто не совсем разобрался с этим свойством.
Pr1zrak ______ чтобы установить заголовок поверх линии before, создать слой absolute благодаря этому
Типичный Верстальщик ещё такой вопрос. Я всё сделал как на видео, но сама полоска странно отображается(почему-то выше заголовка) я решил проблему тем, что прописал вместо top:calc(50% - 2px) top:calc(50% + 25px) и всё тоже стало по центу. Дальше внутренний отступ задал и всё отобразилось хорошо, но почему изначально у меня не работало как у вас? (Код точно такой же, переписывал 2 раза, работаю в мозиле, но в других браузерах таже фигня) Вы не объясните, пожалуйста?
@@andrTaylor ссылку на код можно?
Может лучше прямо так?) Просто код не особо длинный...article просто так добавил, но он по идее и не должен влиять)
CSS
Потрясающий мир CSS
*_CSS:_*
h1{
text-transform: uppercase;
text-align: center;
font-size: 50px;
position: absolute;
margin-top: 0;
background-color: #fff;
padding: 0 20px;
}
.box{
margin-top: 70px;
position: relative;
display: flex;
justify-content: center;
}
.box:before{
content: '';
display: block;
width: 100%;
height: 4px;
background-color: #000;
position: absolute;
top:calc(50% + 25px);
}
@@annblok_webdev
Анна, почему свойство top изначально задавалось со значением через calc, а в итоговом коде top:30px? То есть, почему - понятно... через calc этого эффекта сделать не получится, верно?
Пожалуйста, ставьте правильно ударения. Image - ударение на I! На первую букву.
Автор зачет
Сними обзор на твои книги, какие у тебя есть
всему свое время
А что я не понял а толку от них можно и в самом html это написать
Я знаю, что я ни бум-бум в английском, но все же, "маргин" и "ресёт"... Вы знаете толк в извращениях. А так отличный видос, спасибо
Надеюсь, в скором времени я перестану их так произносить)) Действительно бывает проскальзывает неверное произношение, но я работаю над этим))
@@annblok_webdev Мне без разницы, я иногда так коверкаю произношение, что мама не горюй, но зато все запоминается
всё как бы и понятно, но не понятно зачем! Оформить так можно и без псевдоэлементов, увидеть бы где это необходимо и почему.
Спасибо, шикарно🎓
что только на свете не бывает :)
Смотрю ваши видосы и думаю может самому такие видосы пилить?)
влад коноплёв Пили
Я вообще поражаюсь тем упырям, которые тут дизлайков наставили....
Спасибо, я в шоке