Jump to content
  • 0

Прозрачный текст с тенью в Chrome


afdw
 Share

Question

Всем привет!

Наткнулся я на странный баг в браузере Chrome (может есть и в других браузерах, но я заметил в этом). Вот суть бага: если сделать текст с тенью прозрачным цветом, то прозрачный цвет текста будет считаться не от фона, а от чёрного цвета. То есть как будто текст лежит на элементе с чёрным фоном. Вот пример. Без тени и без прозрачности всё ОК.

Чем можно объяснить такое поведение, может это вовсе и не баг, вы с этим сталкивались, и как это обойти?

Edited by afdw
Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

подойдёт?

 

Тени не видно совсем.

 

 

В FF всё также. Скорее всего какие-нибудь шаманства CSS, типа z-index в сочетании с opacity.

 

Может это не баг, а просто очень странное поведение? 

Edited by afdw
Link to comment
Share on other sites

  • 0

Это не баг, всё по спецификации:

 

 

Unlike box-shadow, text shadows are not clipped to the shadowed shape and may show through if the text is partially-transparent.
В отличие от box-shadow, тени текста не обрезаются по контуру фигуры, отбрасывающей тень, и могут просвечивать, если текст частично прозрачен.
Link to comment
Share on other sites

  • 0
В отличие от box-shadow, тени текста не обрезаются по контуру фигуры, отбрасывающей тень, и могут просвечивать, если текст частично прозрачен.
 
Зачем нужно такое поведение?
Link to comment
Share on other sites

  • 0

Именно поэтому можно делать вот так http://jsfiddle.net/y9waxjk6/2/

 

Есть background-clip: text , но лучше не стоит. нет поддержки у лисы. И вообще - нет в спецификации
Если вам что то подобное нужно - смотрите альтернативные варианты или действительно обычное opacity

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By andryha2008
      Доброго времени суток!
      Моё имя Андрей. Я представитель сообщества авторов (копирайтинг, рерайтинг). Я хочу обратиться к веб-разработчикам, SEO-оптимизаторам и людям других профессий, работа которых заключается в разработке, поддержке, оптимизации сайтов, онлайн проектов и пр.
       В моей команде есть как начинающие копирайтеры, так и люди с более 10-ти летним опытом. Соответственно они пишут уникальные тексты на разные тематики и по разным ценам. Также делают качественный рерайт. Владельцы сайтов, проектов постоянно нуждаются в контенте. Я могу этот контент предоставить.
      Все мои авторы пишут качественные и уникальные тексты. Здесь важно понимать, что если стоимость текста более низкая, то и качество соответственно тоже. Но каждый текст перед отправкой к заказчику дополнительно проверяется на уникальность и ошибки как орфографические, так и пунктуационные которые сразу же и исправляются. 
      У меня есть предложение. Вы как разработчики web ресурсов, проектов, оптимизаторы  проектов, работаете с заказчиками, создаёте для них проекты, которые постоянно нуждаются в контенте. А посему если вы будете рекомендовать мои услуги вашим заказчикам, и я с ними буду сотрудничать, то и вы сможете получать от меня свой процент от заказа.
      В этой несложной схеме выгода очевидна для всех:
      Заказчик получает желаемый контент не за все деньги мира Вы получаете свой процент от заказа Я распределяю заказы среди своих авторов и тоже зарабатываю Авторы работают и получают свою честно заработанную зарплату Теперь более подробно пройдёмся по пунктам:
      1.Цена для заказчика может колебаться в диапазоне 1$-3$ за 1000 знаков. Заказчику не нужно самостоятельно искать копирайтеров, рерайтеров. Ему не придётся больше долго и нудно искать необходимые ему текста на текстовых биржах и покупать кота в мешке (ведь бывают ситуации, когда приобретённый контент оказывается не такого качества, на который рассчитывал заказчик). Мои авторы пишут на разные темы, недолго и ни в коем случае не срывают сроков выполнения заказа. Ведь если у одного исполнителя «взорвётся микроволновка» или «утонет домашний питомец» то его сразу заменяет другой. И заказ будет выполнен вовремя. Более того, самостоятельный поиск, покупка контента, общение с авторами, вечный поиск нужных статьей на биржах, как правило, отнимают много времени. И так же, после того как заказчик найдет себе исполнителя, далеко не факт что техническое задание будет строго соблюдено.
       Я же предлагаю взять на себя эти все заботы. Таким образом заказчик экономит много времени, которые он будет использовать на другие, более важные дела, например, на развитие, оптимизацию, и рекламу своих проектов. Согласитесь, заказчику должно понравится это предложение.
      2.Вы, приводя мне заказчика, получаете свой процент от заказа, который может колебаться от 5% до 20% стоимости в зависимости от количества и объёмов заказов, которые требуются вашему заказчику. То есть вы просто рекомендуете меня и после того как заказчик проверит контент и произведёт оплату мне, вы просто получаете дополнительный доход, хоть и не такой большой, как от вашей основного вида деятельности. Можно сделать даже вечный процент (когда заказчик, которому вы порекомендовали меня будет делать заказы у меня без вашего ведома, свой процент вы всё равно будете получать от меня прямиком на карту). Все деньги, проценты, обороты, будут складываться в базу данных. Я работаю честно. Никого не забуду и не обижу. Это же и в моих интересах.
      3.Альтруистов в этом мире становится всё меньше и меньше. И я не альтруист. Я тоже хочу зарабатывать, выполняя роль посредника на контенте.
      4.Теперь автору не нужно самостоятельно «вылавливать» одиночные заказы на биржах, постоянно участвовать в тендерах чтобы получить долгожданный заказ, тратить много времени на поиск заказа, а после выполнения, искать следующий. Ведь половину рабочего времени копирайтер тратит именно на это, вместо того чтобы делать то, что он умеет: писать. В этом случае я обеспечиваю авторов постоянным потоком заказов, и они «с головой» погружаются в работу и работают, не переживая о поиске заказов. Многие копирайтеры предпочитают работать именно через посредников, поскольку за то время, что они потратят на поиск заказов они смогут неплохо заработать, если это же время потратить на работу.
      Если эта схема полностью белая и абсолютно всем выгодная, то почему бы вам не попробовать поработать со мной описанным выше методом?
       Связаться со мной можно по почте: tekstiya@gmail.com
      Спасибо за внимание и понимание. С уважением, Андрей
    • By San4ous
      Привет, подскажите пожалуйста, как мне сделать рамку вокруг изображения, между которыми можно вставить текст (как подпись к картинке), т.е как в Википедии. Если что, работаю в Sulime text html
    • By Kristi
      Подскажите можно увеличить расстояние между текстом и картинкой в маркированном списке. Конкретно для маркированного списка? 

    • By pro100blich
      Особо не вдавался в подробности анимации, поэту прошу у вас.

      Нужно сделать так, чтобы буква при загрузки страницы, после 3с (ПРИМЕРНО) с центра экрана переместилась на 300px (ПРИМЕРНО) в любое из четырех направлений.

      P.S. Лишнего не пишите, и ссылки на темы не надо кидать.
       
  • Обсуждения

    • Здравствуйте, подскажите в чем может быть причина такой ситуации. Адаптирую сайт под разные устройства, все было хорошо, проверила как отображается, сохранила, но когда открыла повторно все съехало, но только под одно устройство (575рх) Меню после пролистывания занимает нужную ширину  Остальные размеры сохраняются , начиная с 770рх Код не менялся, проверяла несколько сохраненных на разных этапах верстки, все были рабочие и на всех слетело одно и тоже, хотя с ними дальнейшей работы не было, также проверяла на разных браузерах, проблема одна (( Буду благодарна за помощь 
    • Подскажите пожалуйста, как правильно сделать кастомный список стран используя API. Вот fetch код:   const countryList = document.querySelector('.form-list.country'); fetch('https://restcountries.com/v3.1/all').then(res => { return res.json(); }).then(data => { let output = ''; data.forEach(country => { output += `<li class="form-item" data-value="${country.name.common}">${country.name.common}</li>`; countryList.innerHTML = output; }); }).catch(err => { console.log(err); }); полный код html, css, js Во втором списке "Country" список формируется, но название страны не поставляется в форму, а атрибут "data-value="" " в инпут ниже. В первом списке "Guests Amount" все ок, т.к. данные прописаны в html. Нужен такой же, но со странами. Сразу скажу, с тегом select все работает, но мне нужна стилизованная выпадашка. Заранее спасибо.
    • Скорей всего у контента отступ, который следует убрать стилями CSS. Посмотрите в devTools
    • По поводу HTML — http://htmlbook.ru/samhtml По поводу CSS — http://htmlbook.ru/samcss
    • Здравствуйте. На пример вот так:
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy