Jump to content
  • 0
Sign in to follow this  
-Vladislav-

Не получается прикрутить стиль

Question

-Vladislav-    26

Пытаюсь воспроизвести по этому примеру:

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

Скачал исходник, дернул кусок из первого примера, подключил js, вставил нужный кусок кода вставкой html, - все работает, но как подцепить это все к обычному тексту (без вставки html)? Перепробовал все что знал, - не получается. Помогите разобраться.

В архиве файлик muse+js

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

Share this post


Link to post

3 answers to this question

Recommended Posts

  • 0
banneroom    51

Подготовка: В файле CSS стили для первого примера выглядят так .cl-effect-1 a::before { , уберите во всех правилах "a", иначе стили будут касаться только ссылок.

Подключите отредактированный кусок стилей на страничку - свойства страницы - метаданные:

<style>
.cl-effect-1 ::before,
.cl-effect-1 ::after {
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s;
}

.cl-effect-1 ::before {
    margin-right: 10px;
    content: '[';
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    transform: translateX(20px);
}

.cl-effect-1 ::after {
    margin-left: 10px;
    content: ']';
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    transform: translateX(-20px);
}

.cl-effect-1 :hover::before,
.cl-effect-1 :hover::after,
.cl-effect-1 :focus::before,
.cl-effect-1 :focus::after {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px);
}
</style>

Можете скопировать и вставить вот этот кусок для первого эффекта.

Далее пишите  слово или текст и задаете ему стиль .cl-effect-1. В текстовом фрейме  поставтьте мышку вначале слова и нажмите пробел иначе "скобочка" из эффекта не вмещается и показывается на новой строке. Подключение  modernizr необязательно.

Share this post


Link to post

Новая статья

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

Ура)), Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке. спасибо, все заработало, ошибка моя была в том, что стиль cl-effect-1 с точкой впереди прописал в названии стиля, - не работало не на ссылках не на тексте естественно.

Share this post


Link to post
  • 0
banneroom    51

Вот и хорошо, для других эффектов  нужно подключить иконочный шрифт и действовать аналогично, 

Share this post


Link to post
Sign in to follow this  

×
×
  • Create New...