T
P
I
O
DESIGN
Как сделать
Примеры
Бегущая строка на чистом CSS с использованием кастомных классов в Zero block
Тексту бегущей строки указан класс: marquee
Важно!!! При указании другого имени класса, работать не будет.
<style>
.marquee {
    text-align:left;
    width:100%;
    overflow:hidden;
    white-space: nowrap;
}
    
.marquee span { 
    display:inline-block;
    width:100%;
    text-indent:0;
    animation: marquee 15s linear infinite !important;
}

.marquee span:hover {
    animation-play-state: paused
}

@keyframes marquee {
    0%  { transform: translate(100%, 0); }
    100% { transform: translate(-100%, 0); 
    }
}

@media only screen and (max-width: 440px) {
    .marquee span{
      animation:none;
      padding-left:0;
    }
}
  
</style>
Обязательно!!!
Цвет текста указать через эту панель
Тогда к тексту добавится тэг span
Никакой анимации к тексту добавлять не нужно, вся анимация в коде.
Ссылка на документацию - http://htmlbook.ru/html/marquee
Эффекты для изображений в Zero block
Tilda Publishing
Элементу Shape присвоен класс: coloron
<style>
.coloron {
filter: grayscale(100%);
transition: .3s ease;
}

.coloron:hover {
filter: none;
}
</style>
Наведи на изображение и оно плавно станет цветным.
<style>.coloron { filter: grayscale(100%); transition: .3s ease;
}.coloron:hover { filter: none;
}</style>
Tilda Publishing
Элементу Shape присвоен класс: coloroff
<style>
.coloroff {
transition: .3s ease;
}

.coloroff:hover {
filter: grayscale(100%);
}
</style>

Наведи на изображение и оно плавно станет чёрно-белым.
Tilda Publishing
Элементу Shape присвоен класс: bluroff
<style>
.bluroff {
filter: blur(1px);
transition: .3s ease;
}

.bluroff:hover {
filter: blur(0px);
}
</style>

Наведи на изображение и оно плавно приобретёт резкость.
Tilda Publishing
Элементу Shape присвоен класс: bluron
<style>
.t396__elem.bluroff {
overflow: hidden;
}

.bluroff .tn-atom {
filter: blur(3px);
transition: 0.2s ease;
transform: scale(1.01);
}

.bluroff .tn-atom:hover {
filter: none;
}
</style>
Наведи на изображение и оно плавно станет размытым.
Tilda Publishing
Элементу Shape присвоен класс: zoomon
<style>
.t396__elem.zoomon {
overflow: hidden;
}

.zoomon .tn-atom {
transition: all 0.5s ease;
}

.zoomon .tn-atom:hover {
transform: scale(1.6);
}
</style>
Наведи на изображение и оно плавно увеличится в рамке.
Tilda Publishing
Элементу Shape присвоен класс: zoomoff
<style>
.t396__elem.zoomoff {
overflow: hidden;
}

.zoomoff .tn-atom {
transform: scale(1.6);
transition: 0.5s ease;
}

.zoomoff .tn-atom:hover {
transform: none;
}
</style>
Наведи на изображение и оно плавно уменьшится в рамке.
Tilda Publishing
Элементу Shape присвоен класс: zoomrotateon
<style>
.t396__elem.zoomrotateon {
overflow: hidden;
}

.zoomrotateon .tn-atom {
transition: 0.5s ease;
}

.zoomrotateon .tn-atom:hover {
transform: scale(1.6) rotate(-20deg);
}
</style>
Наведи на изображение и оно плавно увеличится в рамке, с поворотом.
Tilda Publishing
Элементу Shape присвоен класс: zoomrotateoff
<style>
.t396__elem.zoomrotateoff {
overflow: hidden;
}

.zoomrotateoff .tn-atom {
transform: scale(1.6) rotate(-20deg);
transition: 0.5s ease;
}

.zoomrotateoff .tn-atom:hover {
transform: none;
}
</style>
Наведи на изображение и оно плавно уменьшится в рамке, с поворотом.
Tilda Publishing
Элементу Shape присвоен класс: rotatecircle
<style>
.t396__elem.rotatecircle {
overflow: hidden;
}

.rotatecircle {
transition: all 0.6s ease;
}

.rotatecircle:hover {
border-radius: 100%;
transform: rotate(360deg);
}
</style>
Наведи на изображение и оно повернётся, и станет круглым
Tilda Publishing
Элементу Shape присвоен класс: circleon
<style>
.t396__elem.circleon {
overflow: hidden;
}

.circleon {
transition: 0.5s ease;
}

.circleon:hover {
border-radius: 100%;
}
</style>
Наведи на изображение и оно станет круглым
Tilda Publishing
Элементу Shape присвоен класс: circleoff
<style>
.t396__elem.circleoff {
overflow: hidden;
}

.circleoff {
border-radius: 100%;
transition: 0.5s ease;
}

.circleoff:hover {
border-radius: 0%;
}
</style>
Наведи на изображение и оно станет квадратным
Tilda Publishing
Элементу Shape присвоен класс: mooveleft
<style>
.t396__elem.mooveleft {
overflow: hidden;
}

.tn-elem.mooveleft .tn-atom {
transition: 0.5s ease;
background-position: center left !important;
}

.tn-elem.mooveleft:hover .tn-atom {
background-position: center right !important;
}
</style>
Наведи на изображение и оно cдвинется влево внутри рамки
Как сделать
Загрузи в Shape изображение и опубликуй страницу.
Примеры использования
Эффект - увеличение с поворотом и добавлением цветности.
Вы можете комбинировать варианты из примеров. Код находится под примером.
Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.
Good design is obvious. Great design is transparent.
There is no design without discipline. There is no discipline without intelligence.
<style>
.t396__elem.zoomrotateonprim {
  overflow: hidden;
}

.zoomrotateonprim .tn-atom  {
  filter: grayscale(100%);
  transition: 0.5s ease;
}

.zoomrotateonprim .tn-atom:hover {
  transform: scale(1.6) rotate(-20deg);
  filter: none;
}
</style>
Эффект - все свойства из примеров в одном
Вы можете комбинировать варианты из примеров. Код находится под примером.
Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.
Good design is obvious. Great design is transparent.
There is no design without discipline. There is no discipline without intelligence.
<style>
.t396__elem.fulleffect {
  overflow: hidden;
}

.fulleffect .tn-atom  {
  filter: grayscale(100%) blur(1px);
  background-position: center left !important;
  transition: 0.5s ease;
}

.fulleffect .tn-atom:hover {
  transform: scale(1.6) rotate(-20deg);
  background-position: center right !important;
  filter: none;
}
</style>
Design creates culture. Culture shapes values. Values determine the future.
There is no design without discipline. There is no discipline without intelligence.
Design creates culture. Culture shapes values. Values determine the future. Design creates culture. Culture shapes values. Values determine the future. Design creates culture. Culture shapes values. Values determine the future.
There is no design without discipline. There is no discipline without intelligence.
Everything should be made as simple as possible, but not simpler.
There is no design without discipline. There is no discipline without intelligence.
Made on
Tilda