Как сделать такие переходы

@Poliarh · Регистрация: 25.05.2017

Студворк — интернет-сервис помощи студентам

Добрый день, у "Гугл" новая страница авторизации, очень понравилось как сделано поле ввода (при нажатии плавное подчеркивается и надпись улетает вверх). Можете подсказать как такое реализовать?

@mrtoxas · 25.05.2017, 21:34

Если не подсматривать как сделано у гугла, тогда можно такое изобразить:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    body{
      padding:40px;
    }
    .wrapper{
 
      position: relative;
      font-size: 16px;
    }
    input{
      width:400px;
      background:0;  
      border:1px solid gray;
      position: relative;
      z-index: 2;
    }
    .placeholder{
      position: absolute;
      top:3px;
      left:5px;
      color:gray;
      transition:.2s linear;
    }
    input:focus + .placeholder{
      top:-3px;
      left:0;
      transform:translateY(-100%);
      font-size:10px;
      color:blue;
    }
  </style>
</head>
 
<body>
  <div class="wrapper">
    <input type="text" />
    <div class="placeholder">Телефон или адрес электронной почты</div>
  </div>
</body>
 
</html>

А так, то перед вами страница с работающим кодом. Открываете инструменты разработчика и смотрите, как там все устроено.

@Poliarh · 26.05.2017, 10:13 **[ТС]**

Сообщение от mrtoxas

Если не подсматривать как сделано у гугла, тогда можно такое изобразить:
А так, то перед вами страница с работающим кодом. Открываете инструменты разработчика и смотрите, как там все устроено.

А как сделать чтобы placeholder не возвращался назад если в поле ввели данные?

Я смотрела на код на их странице, в таком хаосе я просто ничего не поняла)

@Skofild2016 · 26.05.2017, 10:58

Добрый день
Только учусь, попробуйте так )))))

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style>
    
    body {
        padding: 50px;
    }
    
    input {
        width: 300px;
        border: 0;
        border-bottom-style: solid;
        border-bottom-width: 1px;
    }
    
    .placeholder-tooltip {
        color: blue;
        position: fixed;
    }
    
    </style>
</head>
<body>
    <div class="conteiner">
    <div>
        <input type="email" data-placeholder="телефон или адрес электронной почты">
        
        <script>
    var input = document.querySelector('[data-placeholder]');
 
    showPlaceholder(input);
 
    function showPlaceholder(input) {
      input.classList.add('placeholder');
      input.value = input.dataset.placeholder;
    }
 
    function showTooltip(input) {
      var tooltip = document.createElement('span');
      tooltip.innerHTML = input.dataset.placeholder;
      tooltip.className = 'placeholder-tooltip';
      tooltip.style.fontSize = getComputedStyle(input).fontSize;
      tooltip.style.left = input.getBoundingClientRect().left + 'px';
      document.body.appendChild(tooltip);
      tooltip.style.top = input.getBoundingClientRect().top - tooltip.offsetHeight - 4 + 'px';
      input.tooltip = tooltip;
    }
    
    input.onfocus = function() {
      if (input.classList.contains('placeholder')) {
        input.classList.remove('placeholder');
        input.value = '';
      }
 
      showTooltip(input);
    };
 
    input.onblur = function() {
      document.body.removeChild(input.tooltip);
      delete input.tooltip;
 
     if (input.value == '') {
        showPlaceholder(input);
      }
    };
  </script>
        
        
    </div>
    </div>
    
</body>
</html>

@Poliarh · 26.05.2017, 11:07 **[ТС]**

Сообщение от Skofild2016

Добрый день
Только учусь, попробуйте так )))))

Добрый день)
После ввода, надпись полностью пропадает если переключиться на другое поле.
+ нету того плавного перехода надписи вверх

@mrtoxas · 26.05.2017, 12:13

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    body{
      padding:40px;
    }
    .wrapper{
 
      position: relative;
      font-size: 16px;
    }
    input{
      width:400px;
      background:0;  
      border:1px solid gray;
      position: relative;
      z-index: 2;
    }
    .placeholder{
      position: absolute;
      top:3px;
      left:5px;
      color:gray;
      transition:.2s linear;
    }
    input:focus + .placeholder,
    input:valid + .placeholder{
      top:-3px;
      left:0;
      transform:translateY(-100%);
      font-size:10px;
      color:blue;
    }
    
  </style>
</head>
 
<body>
  <div class="wrapper">
    <input type="text" required />
    <div class="placeholder">Телефон или адрес электронной почты</div>
  </div>
</body>
 
</html>

@Poliarh · 26.05.2017, 12:34 **[ТС]**

Сообщение от mrtoxas

[HTML]

input:valid + .placeholder{

Спасибо!!)
А не подскажете как еще сделать border, чтобы он цвет плавно менял?

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@Poliarh 0 / 0 / 0 Регистрация: 25.05.2017 Сообщений: 4

	Как сделать такие переходы 25.05.2017, 11:21. Показов 1965. Ответов 6 Метки css, html (Все метки) Добрый день, у "Гугл" новая страница авторизации, очень понравилось как сделано поле ввода (при нажатии плавное подчеркивается и надпись улетает вверх). Можете подсказать как такое реализовать? Миниатюры 0