Скрипты для сайтов — эффекты CSS — меню блокнот

Скрипты для сайтов — эффекты CSS — меню блокнот.

Скрипты для сайтов — эффекты CSS — меню блокнот

Образец выполнения кода: Меню кликабельно при наведении курсора.

Листинг кода:

<style>
.nev-wrapper { 
font-family: Lato, Sans-serif background: #fff;
 margin: 0;
 width: 500px;
 height: 500px;
 padding: 10px;
 perspective: 1500px;
 }
 .nev-menu { 
margin: 200px auto;
 position: relative; 
background: #62278d; 
background: linear-gradient(to bottom, hsl(110, 90%, 50%) 0%, hsl(20, 90%, 40%) 40%);
 width: 300px; 
height: 350px; 
border-width: 20px 0; 
border-style: solid;
 border-color: #fff;
 color: #fff; 
transform-style: preserve-3d;
 box-shadow: 0 0 20px 0 #444;
 transform: translateY(-160px) rotateX(35deg) rotateZ(35deg); 
} 
.nev-menu:before {
 content: '';
 position: absolute; 
height: 30px;
 width: 300px; 
top: 370px; 
left: 0px; 
transform: rotateX(90deg) translateY(-15px) translateZ(15px);
 background: #fff; 
}
 .nev-menu:after { 
content: ''; 
position: absolute; 
height: 350px;
 width: 30px;
 top: -20px;
 right: -30px;
 transform: rotateY(90deg) translateZ(-15px) translateX(15px);
 border-width: 20px 0; 
border-style: solid;
 border-color: #fff; 
background: #fff; 
} 
.nev-top {
 padding: 15px 0px 15px 20px; width: 100%;
 }

 .middle { position: relative; 
min-height: 40px;
 list-style: none; 
padding: 0; 
margin: 0;
 font-weight: bold; 
font-size: 20px; 
transform-style: preserve-3d;
 } 
.book { 
margin: 0; 
padding: 15px 0 15px 40px;
 outline: 0 none; 
position: relative; 
transform-style: preserve-3d;
 transform: translateZ(1px);
 z-index: 1; 
} 
.book:hover {
 box-shadow: inset 0 0 80px 0 rgba(255, 255, 255, 0.3); 
cursor: pointer; 
} 
.menu-back {
 position: absolute;
 background: transparent; 
top: -30px; 
left: 0;
 width: 300px;
 height: 360px; 
transform: translateZ(-29px);
 box-shadow: 70px 70px 50px -20px #555; 
}
</style>
 <div class="nev-wrapper">
<div class="nev-menu"> 
<div class="nev-top"> </div>
 <ul class="middle">
 <li class="book">HTML основы</li> 
<li class="book">CSS основы</li> 
<li class="book">PHP основы</li>
 <li class="book">Анимация</li> 
<li class="book">WordPress</li> 
<li class="book">Заработок</li> </ul>
 <div class="menu-back"></div></div> </div>

Обмен визитами — бесплатная раскрутка сайта.

Самый простой способ, это по старинке, обмен визитами через ввод адреса сайта в форму:

Ссылка не должна превышать 200 символов и должна обязательно являться URL адресом. Без пробелов.

Трейн-чекс Уроки WEB программирования.

1. ПОДДЕРЖАТЬ ПРОЕКТ на WebMoney
2. WEST-HOSTER
3. ПОРТАЛ СООБЩЕСТВА 🕶️
4. HTML JS CSS РЕДАКТОР
5. ШРИФТЫ ДЛЯ САЙТОВ
6. ПРОМПТЫ ДЛЯ ШЕДЕВРУМА
7. Символ неразрывного пробела
8. Скрипт считывания клавиш
9. Файлы куки
10. AJAX счётчик кликов
11. Запрет кэширования JS и PHP
12. Координаты курсора JS
13. Числа от 1 до 10 на JS
14. Перевести двоичный код в кратный на JS
15. CSS на JavaScript
16. Новые теги HTML
17. Может ли HTML 6 заменить JavaScript
18. HTML форма без перезагрузки страницы
19. Смайлы эмоджи — ГЕНЕРАТОР
20. Форматы изображений
21. Скрипт AJAX лайков и дизлайков
22. Горячие клавиши
23. Скачать изображение в CANVAS
24. Какими будут сайты будущего?
25. Что делает администратор сайта
26. Девушка фурри Милка Маус
27. CMS движки для сайтов

28. Мануалы PHP

29. Мануалы PHP — Фильтры
30. Мануалы PHP — Узнать IP адрес
31. Мануалы PHP — Файлы папки директории
32. Мануалы PHP — Вывод файлов scandir()
33. Мануалы PHP — Отправка данных из формы
34. Мануалы PHP — Запись данных в файл
35. Мануалы PHP — Запрет повторной отправки формы
36. Мануалы PHP — Дата и время
37. Мануалы PHP — Отправка E-mail
38. Мануалы PHP — Работа с изображениями
39. Мануалы PHP — Вход по паролю
40. Отправка формы AJAX
41. Геолокация на PHP, узнать город
42. Выполнение PHP скрипта по клику
43. Маскировка ссылок
44. Таблица умножения

45. Анимация JS

46. Шифровка текста на JS
47. Безумный текст
48. Компрессор кода
49. Уведомления на рабочий стол
50. Перезагрузка на JS и PHP
51. Рейтинг на JS и PHP
52. Виджет комментариев на PHP
53. Рекламный баннер на CSS
54. Запрет копирования
55. Узнать код клавиш
56. Скрипт кода клавиш
57. Конвертер кода в спецсимволы
58. Бесконечный алерт
59. Вывод случайных фраз
60. Откуда пришёл посетитель на JS
61. CSS type radio checkbox
62. Эффекты с текстом
63. Посетители онлайн на PHP
64. Cookie счётчик посещений
65. Анимация текста
66. Type — range
67. Лабиринт на JS
68. Дата и время на JS
69. CSS меню блокнот
70. CSS меню книжная полка
71. CSS вращающийся баннер
72. JavaScript азбука морзе
73. JavaScript копирайт
74. JavaScript анимация текста
75. JavaScript звуки
76. Кнопка вверх
77. Подсчёт символов на JavaScript
78. Работа с куками на PHP

79. AXAJ -JS

80. AJAX счётчик кликов
81. Генератор случайных чисел
82. PHP счётчик страниц
83. PHP запись файлов
84. Дата посещения страницы на PHP
85. Счётчик лайков на PHP
86. Дата изменения страницы
87. Игра JS — угадай число
88. Круговое меню для сайта
89. Навигатор
90. Запрет копирования
91. Вычислить дату на JS
92. Кнопка на CSS
93. view-source: исходный код
94. Анимация JS
95. Время проведённое на сайте
96. Календарь JS
97. Снег для сайта
98. Анимация волны
99. Добавить в избранное
100. Срок жизни сайта
101. Таймер на JS
102. Блокировка мыши и клавиатуры
103. Приветствие по времени суток
104. JS время
105. Яндекс поиск