Css плавное появление текста: Как можно реализовать плавное появление текста на картинке? — Хабр Q&A

rosbrus: Блог | Drupal.ru

10 марта 2017 в 18:34

Здравствуйте!
После обновления появилась вот такая проблема подскажите как решить

10 декабря 2016 в 18:44

Есть блок с текстом на главной как сделать плавное появление текста?

6 декабря 2016 в 0:43

Сайт https://rosbrus.by
Установил модуль Advanced CSS/JS Aggregation и включил его и все повисло даже в панель не зайти
Что делать?

6 декабря 2016 в 0:02

Подскажите что можно сделать для ускорения сайта rosbrus.by

5 декабря 2016 в 17:08

Здравствуйте!
Подскажите как увеличить или расширить размер сайта https://rosbrus.by/
Чтоб фон с облаками был меньше а сам сайт больше

18 июля 2016 в 22:18

Здравствуйте !
Помогите разобраться обнаружил на сайте две одинаковые страницы но их править и изменять как другие страницы сайта не могу в содержимое их нет
где они находятся как мне удалить одну из них содержание они выводят одно и тоже

https://rosbrus. by/info/tipy-soedineniy-kleenogo-brusa
https://rosbrus.by/info

18 июня 2016 в 2:08

Установил модуль Page titles настроил как сказано тут http://sirega.ru/nastroyka-zagolovkov-stranic-v-drupal-7.html после этого текст который стоит в Metatag для главной страницы заменился на Добро пожаловать на сайт DECO WOOD не могу найти где он и как его изменить на нужный

23 мая 2016 в 1:01

Здравствуйте! Есть сайт http://rosbrus.by/
все заголовки на сайте сделаны h3 в настройках блока я могу изменить только текст
как мне и где изменить только один заголовок определенного блока h3 на h2 на главной странице?

26 января 2015 в 20:15

Подскажите как сделать такое как на фото
заголовок в блоке выделить фоном и поставить по центру?

11 января 2015 в 13:25

После обновления модуля Entity Construction Kit (ECK) вместо слайдера на сайте появились ошибки
стояла версия 7. х-2.0-rc4 обновил 7.х-2.0-rc6
как сделать откат модуля или исправить ошибку?

Notice: Undefined index: files в функции theme_backup_migrate_file_list() (строка 954 в файле /home/rosbrusb/public_html/sites/all/modules/backup_migrate/backup_migrate.module).
Notice: Undefined index: 1 в функции entity_views_plugin_row_entity_view->render() (строка 91 в файле /home/rosbrusb/public_html/sites/all/modules/entity/views/plugins/entity_views_plugin_row_entity_view.inc).
Notice: Undefined index: 2 в функции entity_views_plugin_row_entity_view->render() (строка 91 в файле /home/rosbrusb/public_html/sites/all/modules/entity/views/plugins/entity_views_plugin_row_entity_view.inc).

11 января 2015 в 13:22

После обновления модуля Entity Construction Kit (ECK) вместо слайдера на сайте появились ошибки

стояла версия 7.х-2.0-rc4 обновил 7.х-2.0-rc6
как сделать откат модуля или исправить ошибку?

Notice: Undefined index: files в функции theme_backup_migrate_file_list() (строка 954 в файле /home/rosbrusb/public_html/sites/all/modules/backup_migrate/backup_migrate. module).
Notice: Undefined index: 1 в функции entity_views_plugin_row_entity_view->render() (строка 91 в файле /home/rosbrusb/public_html/sites/all/modules/entity/views/plugins/entity_views_plugin_row_entity_view.inc).

CSS анимация обводки блоков

Перевод MasterNik / 01 июля 2019 г. /

20094

Предлагаю вашему вниманию 16 видов бесплатных примеров HTML анимации границ блока контента на CSS.

И так, поехали:

CSS3, Эффекты на CSS3

Источник вдохновения для статьи ⤑

Если у вас есть вопросы по статье или нужна помощь в создании сайта, пишите нам в чат на сайте или Вконтакте. Не забудьте оставить свой e-mail и мы ответим в самое ближайшее время.

Понравилась статья?
Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!

Вас может заинтересовать:

Фоновая волна на простом CSS

Рассмотрим в этой статье, как сделать фоновые волны на сайте, используя только возможности CSS3 и SVG файл. Т.е. без применения Javascript.

---

18 января 2023 /

141 ⤑

Градиентная обводка блока на CSS

Как сделать красивую градиентную обводку блока на одном только CSS? Для этого мы сделаем следующее:

1. Создадим div.linear-gradient с градиентным фоном;

2. Создадим внутренний блок div с небольшим отступом.

---

4 января 2019 /

9045 ⤑

Анимация для текста на CSS

В наше время без анимационных эффектов на сайте просто не обойтись. Это и слайдеры и скроллеры, различного рода реагирования элементов дизайна при наведении на них мышкой, это анимация при прокрутке страниц и различные выезжающие, выплывающие, выползающие и т.д. блоки контента. Дизайнеры используют свою фантазию на 100%, чтобы их дсайт выделился из общей массы и запомнился Пользователям. ..

---

1 марта 2022 /

2694 ⤑

Анимационные указатели прокрутки страницы

Такие указатели чаще всего применяют на первом экране Главной страницы сайта, когда на ней размещена полноэкранная картинка, видео или слайдер. Чтобы показать Пользователю, что основной контент расположен ниже, в нижней части экрана размещают стрелку, направленную вниз. Чтобы привлечь к ней дополнительное внимание, её делаю анимационный…

---

1 марта 2022 /

1271 ⤑

Разные «вкусняшки» на CSS и HTML5 для начинающих вебдизайнеров

Подборка различных проектов с открытым кодом на CSS и HTML, от бордеров до слайдера, которые могут вам пригодиться при создании веб сайта.

---

27 февраля 2022 /

3715 ⤑

Несколько полезных CSS-трюков для Front-end разработчиков

Хотим поделиться с вами несколькими CSS трюками, которые вам точно пригодятся при создании сайтов.

Они позволят вам без использования Javascript создать анимацию и эффекты.

---

19 марта 2022 /

997 ⤑

javascript — Гладкие шрифты с CSS

спросил 12 лет, 8 месяцев назад

Изменено 7 лет, 4 месяца назад

Просмотрено 4к раз

Как получить гладкие шрифты? Я не хочу, чтобы края выглядели размытыми.

Хакерские решения не проблема 🙂

• javascript
• css
• шрифты
• сглаживание

2

Вы можете использовать какое-нибудь решение для замены шрифта, такое как Cufón, для заголовков, но оно слишком неэффективно для больших блоков текста.

Если вы хотите изменить рендеринг шрифта в браузере, вам, вероятно, не повезет, потому что все они имеют свои собственные процедуры рендеринга текста (но взгляните на -webkit-font-smoothing для последних версий Safari и Chrome).

2

Как уже упоминалось, есть свойство CSS для font-smooth , но я не уверен, насколько широко это поддерживается. Скорее всего, это свойство, которое вам придется настроить в вашей ОС, или сам шрифт, что, конечно, означает, что он будет только локальным. Я знаю, что в Windows есть функция ClearType, которая позволяет вам настроить сглаживание, чтобы оно хорошо работало с вашим монитором.

Как упомянул Бен Алперт, решения для замены шрифтов, такие как Cufon или TypeKit, являются другими потенциальными решениями для текста заголовков.

На самом деле существует свойство CSS под названием text-rendering, которое действительно работает в браузерах семейства Firefox.

Как сказал Бен, для семейства Safari и Chrome также есть -webkit-font-smoothing. Я не знаю, работает ли рендеринг текста в Internet Explorer, но этот фрагмент кода работает вполне нормально: -webkit-font-smoothing: сглаживание;

Также, если вы настраиваете свой браузер:

 html {
    рендеринг текста: оптимизация разборчивости !важно;
    -webkit-font-smoothing: сглаживание !важно;
}
 

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html — Нужна помощь в плавном CSS-переходе текстового содержимого

Задавать вопрос

спросил 6 лет, 8 месяцев назад

Изменено 6 лет, 8 месяцев назад

Просмотрено 1к раз

У меня есть классный эффект перехода CSS для ссылки (называемой «Ссылки»), когда при наведении на нее появляются две дополнительные ссылки.

Кроме того, само слово «Ссылки» меняется на «LinkedIn».

Проблема в том, что переход непрозрачности для двух дополнительных ссылок очень плавный, а переход текста «Ссылки» на «LinkedIn» — нет. Он просто сразу включает наведение.

Есть ли способ сделать его более плавным, чтобы он соответствовал другим ссылкам? Каким-то образом исчезают ссылки на LinkedIn?

Спасибо!

 .ссылки {
  дисплей: гибкий;
  flex-направление: столбец;
  поле слева: 5%;
  белый цвет;
  семейство шрифтов: 'heebo';
  размер шрифта: 30px;
  выравнивание текста: по центру;
  ширина: 140 пикселей;
}
.ссылки ул {
  ширина: 100%;
  дисплей: гибкий;
  flex-направление: столбец;
}
.linksG {
  цвет: #F28500;
  текстовое оформление: нет;
  непрозрачность: 0;
  переход: непрозрачность 0,55 с;
  -moz-transition: непрозрачность 0,55 с;
  -webkit-transition: непрозрачность 0,55 с;
}
.linksL: перед {
  белый цвет;
  текстовое оформление: нет;
  содержание: «Ссылки»;
  переход: контент 1с;
  -moz-переход: контент 1с;
  -webkit-transition: контент 1с;
}
. links {
  цвет: #D95Д39;
  текстовое оформление: нет;
  непрозрачность: 0;
  переход: непрозрачность 1 с, плавность входа-выхода;
  -moz-transition: непрозрачность 1s легкость входа-выхода;
  -webkit-transition: непрозрачность 1s легкость входа-выхода;
}
.links: наведите курсор .linksG {
  непрозрачность: 1,0;
  переход: непрозрачность 0,55 с;
  -moz-transition: непрозрачность 0,55 с;
  -webkit-transition: непрозрачность 0,55 с;
}
.links: наведите курсор .linksS {
  непрозрачность: 1,0;
  переход: непрозрачность 1 с, плавность входа-выхода;
  -moz-transition: непрозрачность 1s легкость входа-выхода;
  -webkit-transition: непрозрачность 1s легкость входа-выхода;
}
.links:hover .linksL:before {
  контент: «LinkedIn»;
  текстовое оформление: нет;
  переход: содержание .55с;
  -moz-переход: контент .55s;
  -webkit-transition: контент .55s;
} 

 <тело>
  <дел>
    <ул>
      

        Гитхаб
      
      

         com/">
      
      

        S/Переполнение