Jump to content
  • 0
Sign in to follow this  
евгений designer

как сделать прозрачный текст на белом фоне с подложкой из изображения?плз нид хелп

Question

Recommended Posts

  • 0

чтоб не "танцевать с бубном", id, стилями и opacity, тогда сделать нужную картинку с нужным шрифтом в фотошопе, закинуть ее в музу, а поверх нее написать текст того же размера и шрифта, и сделать его непрозрачным 

Share this post


Link to post

Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
  • 0
3 часа назад, Игорь Ясинский сказал:

чтоб не "танцевать с бубном", id, стилями и opacity, тогда сделать нужную картинку с нужным шрифтом в фотошопе, закинуть ее в музу, а поверх нее написать текст того же размера и шрифта, и сделать его непрозрачным 

Лично я совсем не понял что нужно Евгению. Вернее я понял, но не на столько глубоко как Вы :lol:. Поэтому ничего отвечать не буду, ждем уточнений и примеров того что нужно, от Евгения.

Share this post


Link to post
  • 0
6 часов назад, Игорь Ясинский сказал:

чтоб не "танцевать с бубном", id, стилями и opacity, тогда сделать нужную картинку с нужным шрифтом в фотошопе, закинуть ее в музу, а поверх нее написать текст того же размера и шрифта, и сделать его непрозрачным 

свойства - вкладка метаданные  - в html для head  вставляем 

<style>color: transparent; -webkit-text-stroke: 1px white; text-stroke: 1px white; </style>

ну и стиль графики с именем transparent создаем и применяем к тексту. все.

проблема только одна - осел(кроме 15) и опера мини это свойство не поддерживают  

Share this post


Link to post
  • 0
27 минут назад, Алексей Чувелев Greymouse2 сказал:

свойства - вкладка метаданные  - в html для head  вставляем 

<style>color: transparent; -webkit-text-stroke: 1px white; text-stroke: 1px white; </style>

ну и стиль графики с именем transparent создаем и применяем к тексту. все.

проблема только одна - осел(кроме 15) и опера мини это свойство не поддерживают  

Ну это вы вообще не в ту степь ушли :lol:. Причем здесь обводка?  Говорю же, пусть ТС уточнит.
На сколько я понимаю, требуется что то типа этого

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Если да, то это не возможно сделать в Музе. Это делается только в фотошопе. Муза не графический редактор. Даже тем способом о котором написал Игорь - не получится, потому что один и тот же шрифт в фотошопе и музе имеет разное расстояние между буквами и размер (имеется ввиду системный шрифт фотошопа с веб шрифтом музы). Подогнать точно практически не возможно. Да и смысл накладывать текст?

Share this post


Link to post
  • 0

да такой эффект только в фотожабе

ВОЗМОЖНО!!!!!

вот код css тут только картинку поменять

<style>

.box-with-text {

  background-image: url("http://mnogoblog.ru/wp-content/uploads/2016/09/image1.jpg");

  -webkit-text-fill-color: transparent;

  -webkit-background-clip: text; }

.box-with-text {

  overflow: hidden;

  background-position: 50% 50%;

  background-size: cover;

  white-space: nowrap;

  text-align: center;

  text-transform: uppercase;

  font-size: 60px;

  font-weight: 800;

  margin: 0 0 100px; }

</style>

Share this post


Link to post
  • 0
2 часа назад, Павел Хомерики сказал:

Да и смысл накладывать текст?

Да вот я и сам не пойму... разве что для сео.. да и т.к. он прозрачный, то и подгонка наверное не так важна. 

Share this post


Link to post
  • 0
17 минут назад, Игорь Ясинский сказал:

Да вот я и сам не пойму... разве что для сео.. да и т.к. он прозрачный, то и подгонка наверное не так важна. 

Прозрачный текст для сео чреват АГС фильтром

Share this post


Link to post
  • 0
4 часа назад, Павел Хомерики сказал:

Прозрачный текст для сео чреват АГС фильтром

6 часов назад, Павел Хомерики сказал:

Ну это вы вообще не в ту степь ушли :lol:. Причем здесь обводка?  Говорю же, пусть ТС уточнит.
На сколько я понимаю, требуется что то типа этого

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Если да, то это не возможно сделать в Музе. Это делается только в фотошопе. Муза не графический редактор. Даже тем способом о котором написал Игорь - не получится, потому что один и тот же шрифт в фотошопе и музе имеет разное расстояние между буквами и размер (имеется ввиду системный шрифт фотошопа с веб шрифтом музы). Подогнать точно практически не возможно. Да и смысл накладывать текст?

Да, нужно именно это, вы правильно поняли

Share this post


Link to post
  • 0
4 часа назад, Алексей Чувелев Greymouse2 сказал:

да такой эффект только в фотожабе

ВОЗМОЖНО!!!!!

вот код css тут только картинку поменять

<style>

.box-with-text {

  background-image: url("http://mnogoblog.ru/wp-content/uploads/2016/09/image1.jpg");

  -webkit-text-fill-color: transparent;

  -webkit-background-clip: text; }

.box-with-text {

  overflow: hidden;

  background-position: 50% 50%;

  background-size: cover;

  white-space: nowrap;

  text-align: center;

  text-transform: uppercase;

  font-size: 60px;

  font-weight: 800;

  margin: 0 0 100px; }

</style>

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

Share this post


Link to post
  • 0
16 минут назад, евгений designer сказал:

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

правой кнопкой на страницу -выбираем свойства -  там выбираем вкладку метаданные - и в поле html для <HEAD> вставляем то что я дал

после этого выделяем текст и выделяем стили графики.. создаем новый переименовываем его в box-with-text

проверяем что для текста он применен. все..

мой скайп greymouse41 - если непонятно пишите

Share this post


Link to post
  • 0
16 часов назад, евгений designer сказал:

как сделать прозрачный текст на белом фоне с подложкой из изображения?плз нид хелп

По-моему, все просто, это называется маска: Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке., или второй Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post
  • 0
1 час назад, Алексей Чувелев Greymouse2 сказал:

правой кнопкой на страницу -выбираем свойства -  там выбираем вкладку метаданные - и в поле html для <HEAD> вставляем то что я дал

после этого выделяем текст и выделяем стили графики.. создаем новый переименовываем его в box-with-text

проверяем что для текста он применен. все..

мой скайп greymouse41 - если непонятно пишите

Спасибо Алексей еще раз,да, в мьюсе так можно оказывается)

Share this post


Link to post
  • 0
56 минут назад, Igor Gavrilenko сказал:

По-моему, все просто, это называется маска: Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке., или второй Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

да функционально это оно. 

Share this post


Link to post
  • 0
6 минут назад, Алексей Чувелев Greymouse2 сказал:

да функционально это оно. Но за такое брать деньги... это жестко.

Да вроде бесплатные оба - я скачал. Только тот что с анимацией, сейчас уже не работает нормально, начиная с СС 2015.2

Share this post


Link to post
  • 0
23 часа назад, Павел Хомерики сказал:

Да вроде бесплатные оба - я скачал. Только тот что с анимацией, сейчас уже не работает нормально, начиная с СС 2015.2

гм надо глянуть почему и сделать чтобы работал.. и положить в папочку где лежат мои личные наработочки ))

Share this post


Link to post
Sign in to follow this  

×
×
  • Create New...