<MyRusakov.ru />

Программирование на C++ в Unreal Engine 5

Программирование на C++ в Unreal Engine 5

Данный курс научит Вас созданию игр на C++ в Unreal Engine 5. Курс состоит из 12 разделов, в которых Вас ждёт теория и практика. Причём, в качестве практики будет создан весьма крупный проект объёмом свыше 5000 строк качественного кода, который уже на практике познакомит Вас с принципами создания игр на C++ в Unreal Engine 5.

Параллельно с курсом Вы также будете получать домашние задания, результатом которых станет, в том числе, полноценная серьёзная работа для портфолио.

Помимо самого курса Вас ждёт ещё и очень ценный Бонус: «Тестирование Unreal-проектов на Python», в рамках которого Вы научитесь писать очень полезные тесты для тестирования самых разных аспектов разработки игр.

Подробнее
Уроки и статьи
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Поиск: при наведении

Что искали: при наведении

Всего найдено: 121 записей

...     background: #3d3d3d;     width: 198px;     height: 198px;     margin: 0 auto;     line-height: 200px;     color: #fff;     font-size: ...
... визуализация рамки: border: 2px solid #364856; content: ' '; плавный переход при наведении на ссылку обеспечивает свойство. transition: transform 0.4s, opacity 0.4s; ...
...     text-decoration: none;     transition: all 1s ease; /* плавный переход */     line-height: 39px; /* вертикальное выравнивание текста */ } для иконки подбираем ...
... понятных и визуально привлекательных интерфейсов. в этой статье мы рассмотрим как оно выглядит на практике. основные принципы material design материальные ...
... block; } :invalid – применяется к полям формы, когда вводимые пользователем данные не подходят под заданный тип (невалидные данные). например, в ...
...     z-index: 1; // текст сверху } изменение положения кнопки при наведении (эффект 2) при наведении мыши на центральную кнопку, нужно ...
... эффект будет виден. z-index: -1; посмотреть, как работает этот эффект при наведении, вы можете на демо странице. код hover эффекта целиком: ...
... на html странице реальные размеры картинок будут соответствовать, тем что прописаны в атрибутах. <img src="images/wedding_invite.jpg" width="300" height="300" alt="свадебное ...
... описывает только тег h1. <h1 class="product_title entry-title">the red baron – dog hat and scarf set</h1> inherit from - история наследования зачеркнутые строчки – переопределенные ...
...   position: relative;   right: 20px; } выпадающее меню из раздела меню "услуги", при наведении мыши, выпадает подменю. html сначала, мы создали контейнер ...
... translatey(-20px); } размеры боксов зададим следующие фиксированные размеры. ul li span {   width: 120px;   height: 24px; } выравнивание текста по центру ...
... document.bgcolor = color;}function setdefaultcolor(color) {  default_color = color;  document.bgcolor = default_color;}function defaultcolor() {  document.bgcolor = default_color;}</script></head><body>  <a onmouseover = "settempcolor('white');" ...
... открывается более привлекательная подсказка, сформированная с помощью библиотеки jquery ui. внешний вид которой мы можем настроить, прописав свои стили. ...
... фотографии разного размера. как сделать так, чтобы визуально они выглядели одинаковыми, без правок в графическом редакторе? надо задать нужные вам ...
...   font: 17px "tahoma"; } вот, что у нас получилось: теперь зададим стили при наведении .block:hover {   background: #fafafa;   color: #ccc;   box-shadow: 1px 3px 5px #ccc; } ...
...     transition: 0.2s;     transform: scaley(1); } появление рамки при наведении белая рамка (картинка ниже), должна появиться при наведении ...
... ширина линии */     height: 4px; /* толщина линии */     background-color: darkred; /* цвет линии */     transition: 0.6s; /* плавный переход */ } .left ...
... увеличения } усиление эффекта эффект можно еще больше усилить, если при наведении на самолет добавить проявляющийся текст. .text {     position: ...
... пользователь. давайте посмотрим на простых примерах, какие это могут быть события. jquery событие клик пример демонстрирует, что при клике по кнопке, ...
... прозрачный*/     transition: 0.5s;/*плавный переход*/ } hover-эффект при наведении превью-картинка занимает собою весь контейнер и внизу появляется ...
... давайте начнём с "target".атрибут "target" может принимать три значения (их чуть больше, но они слишком редко применяются, поэтому не буду их даже упоминать): ...
...     filter: blur(20px); <!-- размытие тени-->     z-index: -1; <!-- порядок слоев-->     opacity: 0;     transition: 1s; <!-- плавная прорисовка ...
... закончились, теперь приступим к созданию hover-эффекта. первым делом уменьшим прозрачность текста через альфа-канал, при наведении мыши. ul li ...
... transform: translatex(-0.5em) skewx(-45deg); если мы хотим, чтобы блик появлялся при наведении, то изначально нужно его скрыть, изменив значение у translatex. ...
...     opacity: 0;     transition: 0.5s; } шаг 8) неоновый эффект при наведении неоновая подсветка должна появляться только при наведении ...
...     background: transparent;     border: 2px solid #b71c1c; } .container .card .face.face2 h2{     margin: 0;     padding: 0;     font-size: 10em;     color: ...
... а теперь javascript: <script type="text/javascript">   function opacityup(img) {     /* при наведении курсора мыши на изображение */     img.style.opacity = 1; // для ...
... attr(aria-label); /* атрибут метка */     display: none; /* скрываем контейнер */     position: absolute;     top: 110%; /* расстояние от ссылки от верхней ...
... 0.5s ease in 1s; } пример перехода цвета рассмотрим на примере, как применить css-свойство transition в качестве анимационного эффекта при наведении на ...
... библиотека imagehover – это коллекция различных css эффектов при наведении на картинку (hover effects), которые можно применять как к одиночным картинкам, так и к галереям. ...
... действию – как сделать само выпадающее меню. только две строчки кода и при наведении курсора невидимая часть станет видимой. #nav li:hover .second{    ...
... обнуляем margin и padding, чтобы для всех браузеров, значения этих свойств, были одинаковыми изначально, ведь по умолчанию у браузеров, они у каждого ...
...     transform-origin: left;/*направление движения*/     transition: .5s; } при наведении на ссылку, у картинки плавно увеличивается ширина до 100%. ...
доброго времени суток! в данном примере мы рассмотрим пример карточки, которая показывает свое содержимое при наведении указателя на нее. ...
...         <a href="#" onmouseenter="imgslider('img3.jpg')">services</a>     </li>     <li>         <a ...
... использовать, чтобы стилизовать элементы. <div data-name="myname"></div> <style>   div[data-name=myname] {    width: 100px;    height: 100px;    background: green;   } </style> ...
...     opacity: 0.2; } но мы не должны видеть все смайлики одновременно. при наведении мыши, должен показываться только один смайлик. как это сделать? ...
... убираем дефолтный курсор * / } создание hover-эффекта сейчас при наведении на иконку, меняется только ее цвет. внешний вид курсора меняется ...
... псевдоэлементов before и after создадим еще два слоя с тем же самым текстом. функция attr() получит значения из заданных атрибутов data-text и вставит их в стили. на ...
... псевдоэлемент с помощью opacity. ul li a:before {     opacity: 0; } а при наведении на текст, меняем значение opacity. ul li:hover a:before {     opacity: ...
... давайте с вами поставим задачу. у нас есть картинка. мы хотим, чтобы при наведении на неё курсора мыши, она изменялась. более того, мы хотим, чтобы ...
... отображают дополнительную информацию при наведении курсора на элемент. давайте рассмотрим простой пример кода, который позволяет создать ...
... вами как сделать боковое меню с выпадающим подменю, причем состояние меню будет сохраняться при перезагрузке страницы. реализация будет на чистом ...
... вставлять любой контент (текст, изображения). но не надо забывать, что если при нажатии кнопки, должны отправиться данные на сервер, то теги input и button, ...
... ul li:hover ~ .cursor {     transform: translate(-50%,-50%) scale(5); /*масштабирование при наведении*/ } js код далее нужно заставить курсор двигаться ...
... навигация при посещении сайтов, можно часто увидеть навигационное меню, которое отображает дополнительную информацию при наведении на ...
... класс. все кнопки будут белые с черной сплошной рамкой. но в реальности у кнопок будут рамки своего цвета. для того, чтобы рамка вообще появилась, ...
... треугольник и мы делаем свой выбор. эффект при наведении на событие мышью он никак не влияет, но так интереснее. при наведении курсора на иконку меняется ...
...     transition: 1s; } как мы увидим обратную сторону карточки товара? при наведении мышки на картинку должна появиться задняя сторона карточки, ...
... js коде – меню аккордеон с тремя секциями, при клике на которые, будет открываться панель с текстом, а при втором клике обратно закрываться. меню ...
... меню</h3>   <p>демонстрация примера, как может выглядеть меню для мобильной версии сайта.</p>   <p>при клике по иконке гамбургер-меню, ...
...                 <!-- фоновая часть, отображается при наведение мыши -->                 <div class="work-card__background"> ...
... вырабатывается привычка людей совершать покупки в интернет-магазинах. ведь не зря большая доля заказов на фриланс биржах, как раз приходится на ...
... обычно html структура смотрится очень просто - чистый код и ничего лишнего, приятно посмотреть. однако, если посмотреть на результат в браузере, то ...
... прописываем bottom: 0, и соответственно вместо margin-top, пишем margin-botom: 35px. итак, выяснилось, что сделать фиксированное меню очень просто, даже начинающему веб-разработчику. ...
... размещать контент на сайте во вкладках? первая причина – в целях экономии места на странице. вторая причина – когда содержимое сайта разнородное. ...
... } body{     display: flex;/*flexbox сетка*/     justify-content: center;/*горизонтальное выравнивание*/     align-items: center;/*вертикальное выравнивание*/ ...
... указать путь к изображению курсора. вот таким простым образом изменяется вид курсора при наведении мыши, и безо всяких скриптов, что очень хорошо.
... .grayscale-image:hover {     -webkit-transition: 3s;     -moz-transition: 3s;     -ms-transition: 3s;     -o-transition: 3s;     transition: 3s; ...
... solid rgba(0, 0, 0, 0.1);     background: #cfd8dc; } эффект при наведении при наведении мыши, иконки будут плавно приподниматься вверх, подтягивая ...
... масштаб по оси x. свойство transform-origin задает направление трансформации. при наведении курсора на элемент увеличим масштаб на единицу. в результате ...
... красиво, - задача не из легких. чтобы облегчить этот трудоемкий процесс, придумано достаточно много javascript плагинов. и вот один из них мы сегодня ...
... использование пространства на маленьких дисплеях. иногда к такому приему организации меню, прибегают и для больших мониторов. html разметка поместим ...
... уже всем привычного крестика. создание переключателя создадим в html разметке обычный блок с классом toggle и повесим ему событие клика. при клике ...
... элемента slider-row, с которым мы будем активно работать. обе кнопки также занесем в переменные. итак основные действующие игроки определены и записаны ...
... hidden;/*скрыть задний вид элемента*/ } наведение курсора на карточку при наведении курсора обложка раскрывается. .card:hover .imgbox{     transform: ...
... изображения вверх. .card:hover:before{     transform: rotate(20deg);/*поворот карточки на 20 градусов*/     box-shadow: 0 2px 20px rgba(0,0,0,.2);/*новая тень*/ } .card:hover:after{ ...
... также, вы можете задать свои стили для кнопки в обычном состоянии, при наведении и при нажатии на кнопку. все зависит лишь от вашей фантазии, дерзайте. ...
... поворот вокруг своей оси на 360 градусов. a:hover{     transform: rotatex(360deg);/*поворот на 360*/ } текст на кнопке совсем не адаптирован ...
... .tag-icon:hover {     fill: darkorange;     cursor: pointer; } при наведении на png иконку меняется цвет фона, а не самой иконки. img:hover ...
... абсолютное позиционирование */     top: 0; /* привязка к верхнему углу */     left: 0; /* привязка к левому углу */ } svg rect {     stroke: ...
... активного фона */ } наконец-то мы подошли к верстке анимированных иконок. при наведении курсора на иконку, появляется маленькая иконка лупы, текст, ...
...     let zoomer = event.currenttarget;     event.offsetx ? (offsetx = event.offsetx) : (offsetx = event.touches[0].pagex);     event.offsety ? (offsety = event.offsety) : (offsetx = event.touches[0].pagex); ...
... рамка будет исчезать. благодаря псевдоэлементам, казалось бы непростую задачу, мы решили очень легко и без использования javascript, что вообще прекрасно. ...
... сайтов и их seo оптимизаторы молятся на показатели скорости загрузки сайта, по версии самого google. пускай бы они себе молились, если бы это не задевало ...
... базовый принцип создания подменю на css я изложу здесь. а уже дальше, отталкиваясь от этой базы, можно совершенствовать подменю дальше. привожу ...
... полоску в отдельности, чтобы в результате гамбургер-меню трансформировался бы в крестик (x). верхняя и нижняя повернутся на 45 градусов, но в противоположных ...
... мы можем задавать иконкам любой цвет, размер, а также менять им цвет при наведении. не стоит паниковать, если иконки не отображаются в chrome на ...
... проще. итак, вот наш конечный результат: теперь реализуем поведение при наведении на блок .button:hover {   box-shadow: inset 0 0 20px rgba(0,0,0,.2),   0 2px 0 rgba(255,255,255,.4), ...
... сортировку по городам, природе, промышленности, рассвету, закату или показать все фотографии(значение по умолчанию). присутствует кнопка shuffle, ...
... всплывающую форму на css+js, чтобы она появлялась и исчезала при клике на кнопку. по такому же принципу вместо всплывающей формы, можно сделать всплывающее ...
... a:active {     color: red; } ссылка при наведении чтобы изменить внешний вид ссылки (как правило цвет), при наведении на неё курсора, следует ...
... автоматически. align-items-center – ставит в центр логотип по вертикали align-items-end – прижимает навигационное меню к нижнему краю justify-content-end – выравнивает ...
... укажем у transform-origin значение top. вы увидите как работает данное свойство, при наведении мыши на объект. .sticker_move:hover {     transform: rotate(10deg); ...
на этом уроке, мы создадим сайдбар с иконками, для этого нам пригодится иконочный шрифт и хорошие знания в html + css. надо сказать, что мода на ...
...   background: #8bc34a;   border: none;   cursor: pointer; } меняем цвет кнопки при наведении. nav .search-box button:hover {   background: #bdbdbd; } до ширины экрана ...
... ::-webkit-scrollbar-thumb {     background: linear-gradient(to bottom, #c471f5 0%, #fa71cd 100%);     background-size: contain;     border-radius: 8px;     border: 3px solid #f5cdcd; ...
... концепции компонентов - независимых строительных блоков интерфейса. в данном примере я покажу вам как просто можно сделать переиспользуемый react-компонент ...
... пунктов списка? hover эффект для иконок создадим hover эффект, при котором при наведении курсора, у рамок меняться цвет. .box ul li:hover {     border: ...
...         width: 0;     }     100%     {         width: 387.063px;     } } @keyframes animate2{     0% ...
...                     <a href="#">                         <span class="icon"><i class="fas fa-user-friends"></i></span> ...
... воспользуемся бесплатной библиотекой иконок ionicons, найдем нужные нам фигуры и вставим код с иконками между тегами div. а перед закрывающим тегом body вставьте ...
...   }   100% {    здесь код   } } давайте дальше смотреть уже на примере. создадим html разметку <html> <head>   <title>animation</title> ...
... используя данное свойство, можно создавать самые разные визуальные эффекты, будь-то 3d объект или же поворот при наведении на карточку товара.
...     </div> </div> css код тег body будет служить флекс-контейнером для квадрата. следующий код поставит будущую кнопку в центре браузера. ...
... увеличение текста * / } / * обнуление всех свойств связанных с фокусированием * / h2:hover ~ img{     top: 0%;     left: 0%;     width: 100%;     height: ...
... 2px;   border: 2px solid #bdbdbd; } button {   border-color: #616161;   background: #616161;   color: #f6f7f8;   text-transform: uppercase;   letter-spacing: 1px;   cursor: pointer; ...
... активный класс с трансформацией мобильного меню влево на свою ширину. .mobile-nav--active {     transform: translatex(-100%); } запрограммируем на javascript, ...
... убрать overflow:hidden, то это будет выглядеть вот так: hover эффект при наведении мыши, мы возвращаем обратно на место розовый блок и возникает ...
... right, top, bottom. делаем поля формы слитными select {     ...     left: -3px;     top: -2px;     ...     margin-left: ...
... эффект (магия) на этом шаге произойдет ключевой момент hover-эффекта. при наведении на иконку, основная видимая иконка поднимется наверх, а на ...
...     font-size: 2em;     color: #fff;     margin-bottom: 10px; } .box .content p{     font-size: 1.1em;     color: #fff;     margin-bottom: 10px;     line-height: ...
... нужном месте. допустим, у нас есть кнопка, и эта кнопка меняет свой вид при наведении на неё курсора мыши. можно сделать, например, 2 картинки и затем ...
... индикатора для каждого пункта меню создадим активный класс со своим цветом. при наведении на пункт меню, индикатор переместится по оси x и подсветит ...
... } все элементы стилизованы, на десктопном экране все хорошо. работа над адаптивностью теперь посмотрим, что у нас с адаптивностью, уменьшаем ...
... должен появиться кастомный курсор. но как узнать, где находится курсор? при возникновении события, браузер собирает очень много информации о ...
... выравниваем кнопку посередине относительно окна браузера. top: 50%; left: 50%; transform: translate(-50%,-50%) задаем ширину и высоту кнопки. width: 250px; height: 80px; это ...
всем привет! иногда на сайте нужно сделать функционал, который позволит увеличивать изображения при наведении на них мышки, но в то же время ...
... невидимой и резервирует для неё место. это хорошо видно в панели для разработчиков при наведении мыши на border в блочной модели элемента.
...     transition: 0.5s; } .container .card:hover img{     transform: scale(1.5);/*масштабирование при наведении*/ } если вам не хватает знаний для лучшего восприятия ...
... 300px;/*ширина карточки*/     height: 400px;/*высота карточки*/     background: #fff;/*цвет карточки*/     z-index: calc(-1 * var(--i));/*формула для распределения ...
... наведет мышку на меню, оно развернется и фон под текстом с иконкой изменит цвет. .navigation.active, .navigation:hover{     width: 300px; } .navigation ul li:hover{     background: ...
... rp_a_color = 'blue'; // цвет ссылки     var rp_a_color_hover = 'red'; // цвет ссылки при наведении     var rp_new_window = false; // слушать радио в новом окне ...
... простой скрипт, основанный на таймерах javascript. всё, что он делает, так это при наведении мышки начинает переливаться цветом, а при отвода кнопки мыши ...
... .container:hover input ~ .checkmark {     background-color: #ccc678; } для отмеченного чекбокса, задаем другой цвет для фона. .container input:checked ~ .checkmark {     background-color: ...
...     transition: 0.5s;     transition-delay: 0.25s; } hover-эффект при наведении на секцию, иконка уменьшается в размерах и становится видим ...
на это уроке мы создадим интересную анимацию. при наведении на иконку, на ней появляется кнопка-индикатор. а на каждом пункте меню, индикатор ...
... #ff61ae 75%,     #444 75%, #444 100%);     background-size: 40px 40px; } при наведении на фотографию, черно-белый фон становится цветным и увеличивается ...
на этом уроке вы узнаете, как можно креативно расположить превью-картинки, ведущие на полные статьи в блогах. создание контейнера начнем ...
...   color: #fff;   text-decoration: none;   font-size: 17px; } меняем цвет фона при наведении мышки на ссылки. nav a:hover {   background-color: #d1c4e9; } задаем ...
... класс .dragover, который мы написали в прошлой статье, и я говорил, что он будет применяться, когда над нашим блоком будет какой-то файл? вот, собственно, ...