Уроки и статьи
Подписка
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
Мой аккаунт
Моя группа
Опрос
Какая тема Вас интересует больше?
Бесплатный курс
Основы Unreal Engine 5
Пройдя курс:
- Вы получите необходимую базу по Unreal Engine 5
- Вы познакомитесь с множеством инструментов в движке
- Вы научитесь создавать несложные игры
Общая продолжительность курса 4 часа, плюс множество упражнений и поддержка!
Чтобы получить Видеокурс,
заполните форму
Бесплатный онлайн-семинар
10 шагов к созданию своей Web-студии
После семинара:
- Вы узнаете главное отличие богатых от бедных.
- Вы увидите разоблачения множества мифов об успешности и о бизнесе.
- Вы получите свой личный финансовый план прямо на семинаре.
- Мы разберём 10 шагов к созданию своей успешной Web-студии.
- Я расскажу о своих личных историях: об успешных и неуспешных бизнесах. Это мой многолетний опыт, которым я поделюсь с Вами.
Умные цитаты
Человек не будет наслаждаться едой и питьем, если не перестрадает от голода и жажды.
Аврелий Августин
Поиск: position
Что искали: position
Всего найдено: 317 записей
- 1. добавление водяного знака на изображение в php 8
- PHP/PHP Основы
... * @param image $watermark
* @param watermarkposition $position
* @return array<int, int>
*/ ...
- 2. конструкторы в java
- Java/Java Основы
... private point2d position2d; // аттрибутом класса может быть пользовательский класс
private point3d position3d;
// конструктор по умолчанию ...
- 3. css свойство position: sticky
- CSS/CSS3
элемент с position: sticky отображается как относительно спозиционированный до тех пор, пока не пересечет заданную границу и тогда он ведет себя как position: ...
- 4. css позиционирование блоков
- CSS/CSS3
... что же это за свойство?
в css стилях это называется позиционированием (position), которое может быть обычным (static), относительным (relative) и абсолютным ...
- 5. продолжаем создание игры с pygame и python
- Python/Основы Python
... поведением и данными.
класс gameobject будет хранить следующие данные:
position (положение): точка в центре объекта на 2d-экране
sprite (спрайт): изображение, ...
- 6. запись координат курсора в файл с использованием c#
- C#/Основы C#
... {
point previousposition = point.empty;
while (!console.keyavailable) ...
- 7. расширяемое поле для поиска на javascript
- JavaScript/JavaScript Основы
... box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
body{
position: relative;/*относительное позиционирование*/
display: flex;/*технология ...
- 8. создаем игру с pygame и python. добавление границы игрового поля
- Python/Основы Python
... экрана. зная это можно создать метод принимающий два аргумента первый это position - позиция спрайта, а второй surface или поверхность игрового поля. далее ...
- 9. canvas и javascript. анимация
- JavaScript/JavaScript Основы
... рисование квадрата
занесем x координату со значением 75 в переменную positionx, поскольку квадрат будет двигаться по горизонтали.
let canvas = document.getelementbyid('canvas'); ...
- 10. эффект переворачивающейся карточки на css
- CSS/CSS Основы
...
position: relative;
min-height: 400px;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.work-card__front,
.work-card__background {
position: absolute; ...
- 11. создаем хаотичное движение объектов в игре с python и pygame
- Python/Основы Python
... import random # импортируем метод random
# и в том же файле создадим метод get_random_position(), который генерирует случайный набор x, y координат на заданной поверхности surface, и возвращает результат в виде экземпляра класса vector ...
- 12. эффект анимированного неонового свечения у кнопки
- CSS/CSS Основы
... стилизация кнопки
задаем кнопке размеры и цвет.
a{
position: relative;
width: 250px;
height: 100px;
line-height: ...
- 13. как сделать чашку с блюдцем на css
- CSS/CSS Основы
... min-height: 100vh;
}
.container{
position: relative;
top: 50px;
}
.cup{
position: relative;/*относительное позиционирование*/ ...
- 14. изогнутая тень с помощью псевдоэлементов
- CSS/CSS Основы
... box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
.wrap{
position: relative;
width: 50%;
height: 50vh;
display: ...
- 15. как загружать файлы с url-адреса в python
- Python/Основы Python
... # получим заголовок content disposition, обозначающий что файл #предназначен для скачивания
content_disposition = response.headers.get("content-disposition") ...
- 16. определение местоположения посетителя на javascript
- JavaScript/JavaScript Основы
... javascript.
сразу привожу код:
<script type="text/javascript">
navigator.geolocation.getcurrentposition(showposition); // запрашиваем местоположение, и в случае успеха вызываем функцию ...
- 17. креативный дизайн блока на css
- CSS/CSS Основы
... flex-wrap: wrap;/*разрешить перенос на новую строку*/
}
.card{
position: relative;/*относительное позиционирование*/
width: 320px;/*ширина ...
- 18. скроллинг текста на кнопке
- JavaScript/JavaScript Скрипты
... javascript (вставлять между тегами <head> и </head>):<script language="javascript">var id = 0;var position = 0;var speed = 50; //скоростьfunction scrolling() { var text = " michael rusakov - personal web site"; ...
- 19. три эффекта наведения на кнопку
- CSS/CSS Основы
... выходит за родителя
background: #ba7ba1; // цвет кнопки
position: relative; // установим позицию родителя
line-height: 40px;
color: ...
- 20. определяем текущее положение курсора мыши с python
- Python/Основы Python
... перемещением курсора по экрану. на уровне кода мы должны вызвать функцию position(), для получения текущих координат, затем при перемещении курсора ...
- 21. верстаем карточку с эффектом раскрывающейся шторки при наведении на css
- CSS/CSS Основы
... .container {
position: absolute;
left: 50%;
top: 50%; ...
- 22. автоматически загружаемый popup после загрузки страницы (часть #1)
- JavaScript/JavaScript Основы
... /
background: #b1e7a1; / * цвет фона страницы * /
}
.popup{
position: fixed; / * фиксированная позиция popup * /
top: 50%; / * центрирование ...
... .m-auto {
margin: 0 auto;
}
3) свойство position: absolute (устаревшее)
когда к дочернему блоку применяется position: absolute, то оно перестает влиять на родителя. ...
- 24. генератор изображений с текстом на javascript
- JavaScript/JavaScript Скрипты
... #canvascontainer {
position: relative;
width: 100%;
height: 0; ...
- 25. продолжаем создание космической аркады. управление кораблем
- Python/Основы Python
... изменим конструктор:
def __init__(self, position):
self.direction = vector2(up)
super().__init__(position, load_sprite("spaceship"), vector2(0))
...
- 26. создание простейшего калькулятора на js
- JavaScript/JavaScript Основы
...
min-height: 100vh;
background: #333;
}
.container{
position: relative;/*относительное позиционирование*/
padding: 40px 30px 30px;/*поля*/ ...
- 27. дизайн карточки на чистом css
- CSS/CSS Основы
... фон*/
min-height: 100vh;/*на всю высоту экрана*/
}
.card{
position: relative;/*относительное позиционирование*/
width: 340px;/*ширина ...
- 28. как отобразить своё местоположение на карте с помощью javascript
- JavaScript/JavaScript Скрипты
... navigator.geolocation.getcurrentposition(function (position) {
const latitude = position.coords.latitude; ...
- 29. как сделать 404 страницу
- HTML/HTML 5
... верстки моего примера 404 страницы, без понимания как работает свойство position, будет трудно. посмотрев на конечный результат 404 страницы, нам надо ...
- 30. iterable в php
- PHP/PHP Основы
... class mycollection implements iterator {
private $items = [];
private $position = 0;
public function __construct($items) {
$this->items = $items; ...
- 31. креативный кастомный чекбокс на css
- CSS/CSS Основы
... выравнивание*/
min-height: 100vh;/*на всю высоту экрана*/
}
label {
position: relative;/*относительное позиционирование*/
width: 160px;/*ширина ...
- 32. анимированная кнопка на чистом css
- CSS/CSS3
... используется для выравнивания элементов по центру.
.square {
position: relative;
width: 150px;
height: 150px;
display: ...
- 33. креативная трансформация радиокнопок
- CSS/CSS Основы
... min-height: 100vh;
background: #1e2b3b;
}
.container {
position: relative;/*относительное позиционирование*/
display: flex;
flex-direction: ...
- 34. адаптивное боковое навигационное меню
- JavaScript/JavaScript Основы
... min-height: 100vh;
background: #150019;
}
.navigation {
position: fixed; / * панель зафиксирована на постоянном месте * /
width: ...
- 35. кастомизация иконок fontawesome
- CSS/CSS Основы
... вертикальную.
ul{
position: relative;
display: flex; / * гибкий контейнер * /
}
ul li{
position: relative;
list-style: none;/ ...
- 36. анимация для меню с индикатором. часть #1
- JavaScript/JavaScript Основы
... выравнивание*/
min-height: 100vh;/*на всю высоту экрана*/
}
.navigation{
position: relative;/*относительное позиционирование*/
width: 350px;/*ширина ...
- 37. всплывающее popup окно после нажатия на кнопку
- JavaScript/JavaScript Основы
... center;
min-height: 100vh;
background: #e57373;
}
.btn{
position: relative;/*относительное позиционирование*/
padding: 15px 20px; ...
- 38. движение фоновой картинки внутри рамки
- CSS/CSS Основы
... overflow: hidden;/*спрятать переполнение*/
}
.planetearth{
position: relative;/*относительное позиционирование*/
min-width: 60%;/*минимальная ...
- 39. эффект раскрытия обложки при наведении курсора
- CSS/CSS Основы
... 100vh;/*на всю высоту экрана*/
background: #ddf1ef;
}
.card{
position: relative;
width: 300px;
height: 400px;
margin: ...
- 40. позиционирование текста на картинке в css
- CSS/CSS3
... займемся текстом.
css-стили
в стилях контейнера, ключевым будет свойство position: relative. этим мы меняем правила и просим вести отсчет координат не от ...
- 41. эффект рваной бумаги вокруг картинки
- CSS/CSS Основы
... box-sizing: border-box;/*рамки и поля не влияют на размеры*/
}
section {
position: relative;/*относительное позиционирование*/
width: 100%;/*секция ...
- 42. анимированный loader на градиентах и тенях
- CSS/CSS Основы
... center;
min-height: 100vh;
background: #fff;
}
.loader {
position: relative;
width: 200px;
height: 200px;
}
рисование ...
- 43. сокрытие элементов на css.
- CSS/CSS Основы
... читается устройствами чтения с экрана и является активным.
.foo {
opacity: 0;
}
position
данное свойство не предназначено конкретно для сокрытия элемента, ...
- 44. аватар внутри круга на css
- CSS/CSS Основы
... min-height: 100vh;
}
создадим блок с фоном для аватара.
.box {
position: relative;
width: 240px;
height: 326px;
background: ...
- 45. полупрозрачный дизайн для бизнес карты
- CSS/CSS Основы
... экран сохраняя пропорции*/
background-position: center;/*картинка в центре*/
}
.card{
position: relative;/*относительное позиционирование*/ ...
- 46. анимация светящегося куба (3d эффект)
- CSS/CSS Основы
... на всю высоту*/
background: #050505;/*цвет фона*/
}
.cube {
position: relative;/*относительное позиционирование*/
width: 300px;/*ширина ...
- 47. 3 способа вертикального выравнивания блока по центру
- CSS/CSS3
... width: 120px;
height: 120px;
background: violet;
}
1) свойство position (древний метод)
если мы блок размещаем относительно браузера, то ...
- 48. css-эффект при наведении курсора на элемент списка
- CSS/CSS Основы
... position: relative;
}
.list h2{
color: #fff;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 10px;
}
.list ul{
position: ...
- 49. скошенный блок при помощью clip-path
- CSS/CSS Основы
... url('landscape.jpg');
background-size: cover;
background-position: center;
position: relative;
clip-path: polygon(0 0, 100% 0, 100% 92%, 0 83%);
}
.brand ...
- 50. выпадающее меню выбора с использованием javascript
- JavaScript/JavaScript Скрипты
... min-height: 100vh;
background: #fafafa;
}
.dropdown {
position: relative;/*относительное позиционирование*/
margin-top: 100px;/*отступ ...
- 51. эффект многослойности при наведении на карточку
- CSS/CSS Основы
... justify-content: center;
align-items: center;
}
.card{
position: relative;/*относительное позиционирование*/
width: 300px;/*ширина ...
- 52. оптимизация потока документа в веб-разработке
- HTML/HTML Основы
... позиционирования элементов
использование css свойств, таких как position: absolute или position: fixed, может изменить поведение элементов в потоке документа, ...
- 53. генератор резюме на html и js
- HTML/HTML 5
... <label for="position">должность:</label>
<input type="text" id="position"><br><br>
...
- 54. пример @keyframes css анимации
- CSS/CSS Основы
... высоту браузера*/
background: #1c1f2f;/*цвет фона*/
}
.container{
position: relative;/*относительное позиционирование*/
-webkit-box-reflect: ...
- 55. css-эффекты. градиентная рамка у блока
- CSS/CSS Основы
... визуальное оформление контента внутри блоков.
.box .content{
position: relative;
z-index: 10;
padding: 20px 40px;
color: ...
- 56. как сменить фон при наведении на ссылку меню
- JavaScript/JavaScript Основы
... box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
.navigation{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: ...
- 57. адаптивная навигация на html и css
- HTML/HTML 5
... <a href="#" style="position: relative">
статьи ...
- 58. анимация подчеркивания ссылок на css
- CSS/CSS Основы
... {
text-decoration: none; /* ссылка без подчеркивания */
position: relative; /* относительное позиционирование */
color: darkred; /* ...
- 59. css анимация падающих звезд
- CSS/CSS Основы
... box-sizing: border-box;
}
body{
overflow: hidden;
}
section{
position: absolute;/*абсолютное позиционирование*/
top: 0;
left: ...
- 60. управляем курсором мыши в python
- Python/Основы Python
... также мы можем определить текущее положение мыши, вызвав функцию pyautogui.position(), которая вернет кортеж позиций
курсора мыши по x и y во время вызова ...
- 61. стилизация radio на css
- CSS/CSS3
... позиционируем относительно родителя – div с классом radio.
.radio {
position: relative;
margin-bottom: 1rem;
}
спрячем дефолтные маленькие кружочки, ...
- 62. верстка по сетке bootstrap (часть 2)
- CSS/CSS Основы
... background-color: #fff;
border-radius: 50%;
width: 20px;
height: 20px;
position: relative;
top: 4px;
}
/* галочка внутри белого круга */
.white-circle:before { ...
- 63. быстрая сортировка массива в js
- JavaScript/JavaScript Основы
... относительно которой будет делиться массив на две части. в переменную pivotposition отправится результат вычислений следующей формулы: случайное значение, ...
- 64. плавающая кнопка на reactjs
- JavaScript/JavaScript Основы
... /** позиция элемента относительно нижнего правого угла */
--button-position: 15px;
position: fixed;
display: flex;
justify-content: center; ...
- 65. пример использования css переменных для анимации
- CSS/CSS Основы
... высоту экрана*/
background: #03a9f4; /*цвет фона*/
}
.loader{
position: relative; /*относительное позиционирование*/
width: 120px; /*ширина ...
- 66. верстка формы входа (часть 1)
- CSS/CSS3
... высоту экрана */
z-index: 1; /* большой фон ниже */
position: relative;
}
.form {
background: url("../img/bg_blur.jpg") center no-repeat;
width: ...
- 67. верстка формы входа (часть 2)
- CSS/CSS3
... будет работать кастомный чекбокс, из макета.
.form__toggle {
position: absolute;
opacity: 0;
margin: 10px 0 0 20px;
}
пропишем ...
- 68. перемещение placeholder над полем ввода при фокусе
- CSS/CSS Основы
... linear-gradient(45deg,#6190e8,#a7bfe8); / * градиентный общий фон * /
}
.container{
position: relative; / * относительное позиционирование * /
padding: 70px 40px; ...
- 69. как создать to do list на чистом css (часть 2)
- CSS/CSS Основы
4) позиционирование инпута и текста
.list ul label{
position: relative; / * относительное позиционирование * /
display: flex; / * отображать ...
- 70. рисуем иконку пользователя на css
- CSS/CSS Основы
... относительно круглой заготовки user. поэтому элементу user следует задать свойство position со значением relative.
.user {
width: 200px; // размер иконки по ...
- 71. рисуем капли воды с помощью css
- CSS/CSS Основы
... .drops{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.drop{
position: absolute;
width: ...
- 72. эффект размытия и фокуса на css
- CSS/CSS Основы
... элементы внутри секции (фон и картинка) по центру.
.section {
position: relative; // устанавливаем родителя
overflow: hidden;
width: ...
- 73. адаптивное мобильное меню для сайта (часть 2)
- JavaScript/JavaScript Основы
... .menu-icon {
z-index: 2; // кнопка сверху других элементов
position: relative; // родитель для линий
display: none; // спрятали обертку ...
- 74. блок с функцией "read more" на javascript
- JavaScript/JavaScript Основы
... высоту экрана*/
background: #313131;/*цвет фона*/
}
.container{
position: relative;/*относительное позиционирование*/
display: flex;
justify-content: ...
- 75. как сделать фиксированное меню
- CSS/CSS3
... случае, когда меню находится над шапкой сайта.
.nav {
width: 100%;
position: fixed;
top: 0;
background-color: #c2185b;
}
ссылки-пункты для меню. ...
- 76. многослойный круг на градиентах и тенях
- CSS/CSS Основы
... linear-gradient(90deg,#49aeff,#ff4c89);/*фон секции*/
}
нарисуем градиентный круг.
.circle{
position: relative;/*относительное позиционирование*/
width: 500px;/*ширина ...
- 77. плавное подчеркивание ссылки при наведении
- CSS/CSS3
... оформление ссылок
ul li a {
text-decoration: none;
color: #03a9f4;
position: relative;
}
меню приняло свой окончательный вид, перед тем, как будет ...
- 78. плавная смена изображения в javascript
- JavaScript/JavaScript Скрипты
... </body>):<div>
<img src='slide_1.jpg' id="image_1" style="position: absolute;" />
<img src='slide_2.jpg' id="image_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
<img src='slide_3.jpg' id="image_3" ...
- 79. использование getboundingclientrect в javascript
- JavaScript/JavaScript Основы
... background-color: lightblue;
position: absolute;
top: 0;
left: 0; ...
- 80. современные возможности javascript api
- JavaScript/JavaScript Основы
... их изменения.
пример использования geolocation api:
navigator.geolocation.getcurrentposition(
(position) => {
console.log(`latitude: ${position.coords.latitude}`);
console.log(`longitude: ${position.coords.longitude}`); ...
- 81. трёхмерный мир на чистом css
- CSS/CSS3
... <head>
<title></title>
<style>
.scene {
position: relative;
transform-style: preserve-3d;
}
body {
background-color: #000; ...
- 82. множественные фоны в css3.
- CSS/CSS3
... no-repeat;
background-position: bottom center;
}
в background-image мы указываем путь к картинке, в background-repeat - повторять или не повторять картинку, а в background-position мы указываем ...
- 83. пользовательский чекбокс на javascript
- JavaScript/JavaScript Основы
... font-family: sans-serif;
background: #dcdcdc;
}
.checkbox{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); ...
- 84. анимированный footer у веб-сайта (продолжение)
- CSS/CSS Основы
... background-position-x: 1000px;
}
100%
{
background-position-x: 0px;
}
} ...
...
а теперь магия - css. в нашем случае scss.
.carousel-wrapper {
position: relative;
.carousel-item {
position: absolute;
top: 0;
bottom: 0;
left: 0;
...
- 86. красиво оформленная секция с услугами
- CSS/CSS Основы
... 100vh;/*обнуление отступов*/
background: #fff;/*цвет фона*/
}
.container {
position: relative;/*относительное позиционирование*/
width: 1200px;/*ширина ...
- 87. имитация праздничной ленты на карточке
- CSS/CSS Основы
... высоту экрана*/
background: #f8f8f8;/*цвет фона*/
}
.card {
position: relative;/*относительное позиционирование*/
width: 300px;/*ширина ...
- 88. плавный переход в css - transition на примерах
- CSS/CSS3
... color: #fff;
font-size: 1.8em;
border-radius: 50%;
position: relative;
cursor: pointer;
text-align: center;
}
для текста ...
- 89. создание анимации с python и pygame
- Python/Основы Python
... # далее создаем функцию my_animation, принимающая следующие аргументы w1, h1 - количество спрайтов в строке и столбце изображения, k - это общее количество кадров в изображении, fps - количество кадров в секунду, name - название и путь к изображению, position - положение анимации на игровом экране.
def my_animation( w1, h1, k, fps, name, position):
# список для хранения кадров и таймер ...
- 90. анимированный текст по кругу на javascript
- JavaScript/JavaScript Основы
... поэтому для наглядности, временно сделаем круг серым.
.circle {
position: relative;/*относительное позиционирование*/
width: 200px;/*ширина ...
- 91. выезжающее боковое меню. часть 1.
- CSS/CSS3
... прокрутки в момент движения секции, пока скроем - hidden.
.wrapper {
position: relative;
overflow-x: hidden;
}
переходим к оформлению меню, опять ...
- 92. креативный css hover-эффект для меню навигации
- CSS/CSS Основы
... box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
section{
position: relative;/*относительное позиционирование*/
width: 100%;/*ширина ...
- 93. имитация печатной машинки при наведении на текст
- CSS/CSS Основы
... 100vh;/*на всю высоту*/
background: #1c234a;/*цвет фона*/
}
ul{
position: relative;/*относительное позиционирование*/
}
ul li{
list-style: ...
- 94. эффект появления рамки при наведении
- CSS/CSS Основы
... border: 2px solid #000; /* толщина стиль и цвет обводки кнопки */
position: relative; /* относительное позиционирование */
}
создание рамки ...
- 95. вставка видео в видеоплеер (html+css)
- HTML/HTML Основы
... align-items: center;
justify-content: center;
padding: 0 10px;
position: relative;
}
растянем блок с видеоплеером на всю ширину контейнера. ...
- 96. градиентная тень у блока на css
- CSS/CSS Основы
... дальнейшем данное свойство закомментируем или удалим.
.card{
position: relative;
width: 300px;
height: 200px;
margin: ...
- 97. эффект с текстом при движении мыши
- JavaScript/JavaScript Основы
... box-sizing: border-box;
font-family: "poppins", sans-serif;
}
section {
position: relative;
display: flex; / * технология флексбокс * /
justify-content: ...
- 98. простой footer у веб-сайта
- CSS/CSS Основы
... flex-end;/*элементы в конце контейнера*/
min-height: 100vh;
}
footer{
position: relative;/*относительное позиционирование*/
width: 100%;/*на всю ...
- 99. красивый hover эффект для блока
- CSS/CSS Основы
... min-height: 100vh;
background: #f7fcff;
}
.container{
position: relative;
width: 1100px;
display: flex;
justify-content: ...
- 100. адаптивное мобильное меню для сайта (часть 1)
- JavaScript/JavaScript Основы
... class="header">..</div>
.header {
font-family: tahoma, sans-serif;
position: relative;
height: 100vh; // высота шапки
background-color: ...
- 101. видеофон внутри текста на чистом css
- CSS/CSS Основы
... padding: 0;
font-family: "poppins", sans-serif;
}
section {
position: absolute;
width: 100%;
height: 100vh;
overflow: ...
- 102. как сделать вкладки на чистом css
- CSS/CSS Основы
... ссылок
}
изначально все вкладки нужно спрятать.
.tab__box {
position: relative; // относительное позиционирование
padding: 20px; // внутренние ...
... 100vh;/*на всю высоту*/
}
стилизация обертки loader
.loader{
position: relative;/*относительное позиционирование*/
width: 50px;/*ширина ...
- 104. верстка прозрачной формы входа
- HTML/HTML 5
... относительно окна браузера. в нашем случае бокс позиционирован точно по центру.
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
на данном этапе форма имеет ...
- 105. изменение внешнего вида курсора при наведении
- JavaScript/JavaScript Основы
... position: relative;
display: flex;
}
ul li{
list-style: none;/ * убираем маркеры * /
margin: 0 20px;
}
ul li a{
position: relative; ...
- 106. эффект увеличения картинки.
- CSS/CSS Основы
... .grid-wrapper {
display: flex;
flex-wrap: wrap;
height: $container-size;
overflow: hidden;
position: relative;
width: $container-size;
}
// here are the individual grid items—each sized
// according to the ...
- 107. пример использования css функций var() и calc()
- CSS/CSS Основы
... min-height: 100vh;
background: #001d10;
}
.loading{
position: relative;/*относительное позиционирование лоадера*/
width: ...
- 108. необычный эффект наведения для дизайна веб-сайтов
- CSS/CSS Основы
... весь экран*/
background: #262626;/*цвет фона*/
}
.container {
position: relative;/*относительное позиционирование*/
display: flex;
/*зеркальное ...
- 109. как создать аккордеон на js
- JavaScript/JavaScript Основы
... .accordion .contentbx {
position: relative;
height: auto;
margin: 10px 20px;
}
.accordion .contentbx .label {
position: relative;
padding: ...
- 110. css эффект потери фокуса и наоборот
- CSS/CSS Основы
... font-family: 'poppins', sans-serif; / * название шрифта * /
}
section{
position: relative; / * относительное позиционирование * /
width: 100%; / ...
- 111. вcплывающее окно на чистом css
- CSS/CSS Основы
... margin: 40px auto; // выравнивание по центру и отступ сверху
position: relative;
}
кнопка "заказать звонок"
внутри контейнера поместим поле ...
- 112. 10 полезных sass миксинов.
- CSS/CSS Основы
... @mixin pseudo($display: block, $pos: absolute, $content: ''){
content: $content;
display: $display;
position: $pos;
}
смотрите ниже пример использованя миксина без каких-либо ...
- 113. как создать to do list на чистом css (часть 1)
- CSS/CSS Основы
... цвет фона * /
}
2) оформление списка
.list{
position: relative; / * относительное позиционирование * /
background: #fff; ...
- 114. как сделать слияние полей у формы поиска
- CSS/CSS Основы
... стилизация полей формы
// общие стили для всех полей
input {
position: relative; / * позиционирование всех полей * /
display: inline-block; ...
- 115. угловая лента на css
- CSS/CSS Основы
... text-transform: uppercase;
}
/* позиционирование блока */
.wrap {
position: relative;
margin: 20px 100px;
}
нарисуем прямоугольник с черной ...
- 116. анимированное круговое меню на javascript
- JavaScript/JavaScript Основы
... background: linear-gradient(45deg,#8460ed,#ff1252);/*линейный градиент*/
}
.menu{
position: relative;/*относительное позиционирование*/
width: 200px;/*ширина ...
- 117. имитация клавиш у клавиатуры на css
- CSS/CSS Основы
... высоту экрана*/
background: #232323;/*цвет фона*/
}
span {
position: relative;/*относительное позиционирование*/
display: inline-block;/*отображать ...
- 118. верстка прозрачной логин формы
- CSS/CSS Основы
... box под формой и укажем его степень непрозрачности.
.box {
position: absolute;
top: 50%; / * позиционирование по центру * /
left: ...
- 119. стилизация радиокнопок на css
- CSS/CSS3
... псевдоэлемента before.
/* рисуем внешний круг радиокнопки*/
.custom-radio-btn {
position: relative; /* родительский элемент*/
display: inline-block; /* для применения ...
- 120. переключение меню гамбургер, используя js
- CSS/CSS Основы
... justify-content: center;
align-items: center;
}
#toggle{
position: relative;
width: 150px;
height: 150px;
background: ...
- 121. космические приключения с python и pygame. перемещение астероидов
- Python/Основы Python
... from pygame.transform import rotozoom
from utils import get_random_velocity, load_sprite, wrap_position
обратие внимание, что вы устанавливаете свое случайное положение ...
- 122. эффект бегущей волны на чистом css
- CSS/CSS Основы
... высоту экрана*/
background: #222;/*цвет фона*/
}
.wavy {
position: relative;/*относительное позиционирование*/
width: 200px;/*ширина ...
- 123. как размыть фон под блоком, используя svg
- CSS/CSS Основы
... url("https://cdn.pixabay.com/photo/2020/07/24/21/58/lemon-5435158_960_720.jpg")
no-repeat fixed center / cover;
position: relative; /* относительное позиционирование */
overflow-y: scroll; ...
- 124. svg hover эффект для кнопки
- CSS/CSS Основы
... вертикали */
margin: 20px auto; /* внешние отступы у кнопки */
position: relative; /* относительное позиционирование */
cursor: pointer; ...
- 125. автоматически загружаемый popup после загрузки страницы (часть #2)
- JavaScript/JavaScript Основы
... которому, пользователь избавится от надоедливой рекламы.
.close{
position: absolute; / * абсолютное позиционирование * /
top: 20px; / * позиция ...
- 126. как сделать текст по кругу на javascript
- JavaScript/JavaScript Основы
... box-sizing: border-box;
font-family: 'roboto', sans-serif;
}
section{
position: relative;
display: flex;
justify-content: center;
align-items: ...
- 127. эффект тени при наведении в css
- CSS/CSS3
... сделаем элементы меню вместо квадратных, круглыми.
ul li {
position: relative; <!-- относительное позиционирование-->
list-style-type: ...
- 128. кнопка-перевертыш с 3d-эффектом
- CSS/CSS Основы
... 100vh;/*растянуть по вертикали*/
background: #ffd600;/*цвет фона*/
}
a{
position: relative;/*относительное позиционирование*/
padding: 30px 60px;/*поля ...
- 129. css анимация секции с эффектом волны
- CSS/CSS Основы
... font-family: 'poppins', sans-serif;/*название шрифта*/
}
section{
position: relative;/*относительное позиционирование*/
width: 100%;/*ширина ...
- 130. css эффект пикселизации изображения
- CSS/CSS Основы
... качества. так и должно быть, именно этого мы и добиваемся.
.box {
position: relative;/*относительное позиционирование*/
width: 600px;/*ширина*/ ...
- 131. валидация email в форме с помощью js
- JavaScript/JavaScript Основы
... center;
min-height: 100vh;
background: #1b1b1d;
}
#form{
position: relative;
border: 2px solid #131313;
background: #242424;
background: ...
- 132. hover эффект для кнопки + псевдокласс :nth-child
- CSS/CSS3
... из которой и будет состоять наша кнопка.
a {
position: absolute;
}
свойство position: absolute в современных браузерах имеет двойное значение ...
- 133. красивый эффект при наведении (:before и :after)
- CSS/CSS3
... уберем маркеры и отобразим пункты меню горизонтально.
ul {
position: absolute;
top: 20%;
left: 30%;
list-style: ...
- 134. выравнивание по центру блока внутри блока
- CSS/CSS3
... width: 250px;
height: 300px;
background-color: red;
position: relative;
исходные размеры картинки-иконки такие же, как и ширина ...
- 135. рейтинг со смайликами на чистом css
- CSS/CSS Основы
... видимой области*/
background: #20152d;/*цвет фона*/
}
.rating{
position: relative;/*относительное позиционирование*/
display: flex;
flex-direction: ...
- 136. трансформация сложенных карточек на css
- CSS/CSS Основы
... </div>
</div>
</div>
css код
.container{
position: relative;/*относительное позиционирование*/
width: 1100px;/*ширина ...
- 137. цифровая лупа на javascript
- JavaScript/JavaScript Скрипты
... добавить следующий код:
.zoomer {
background-position: 50% 50%;
position: relative;
width: 500px;
overflow: hidden; ...
- 138. как расположить картинку внутри силуэта
- CSS/CSS Основы
... flex-wrap: wrap;/*перенос на новую строку разрешен*/
}
.imgbx{
position: relative;/*относительное позиционирование*/
width: 500px;/*ширина ...
- 139. изменение внешнего вида курсора при наведении
- JavaScript/JavaScript Основы
... position: relative;
display: flex;
flex-direction: column;
}
ul li{
list-style: none; /*убираем черные маркеры*/
}
ul li a{
position: ...
- 140. показ сайта на различных девайсах
- CSS/CSS3
... верхней и нижней утолщенной рамки с закругленными углами.
.smartphone {
position: relative; /* позиция блока относительно браузера */
width: 320px;
height: ...
- 141. всплывающее окно. pop-up на jquery.
- JavaScript/jQuery
... padding: 15px 25px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: relative;
display: inline-block;
cursor: pointer;
border: 0;
}
button:active {
transform: ...
- 142. алгоритм линейного поиска в javascript
- JavaScript/JavaScript Основы
... let found = false; // флаг, сигнализирующий о том, что значение найдено
let position = -1; // позиция, в которой значение найдено, или -1, если нет такого значения ...
- 143. бинарный поиск в javascript
- JavaScript/JavaScript Основы
... let last = list.length - 1; // конечный индекс
let position = -1;
let found = false;
let middle; ...
- 144. анимированный неоновый текст на css
- CSS/CSS Основы
... 100vh;
background: #000;
overflow: hidden;
}
.box{
position: relative;/*относительное позиционирование*/
width: 600px;/*ширина ...
- 145. фигуры с hover-эффектом из сериала "игра в кальмара"
- CSS/CSS Основы
... padding: 0;/*обнуление полей*/
box-sizing: border-box;
}
.container{
position: relative;/*относительное позиционирование*/
width: 100%;/*на всю ...
- 146. эффект скользящего индикатора на js
- JavaScript/JavaScript Основы
...
min-height: 100vh;
}
nav {
position: relative;
display: flex;
}
nav a {
position: relative;
margin: 0 20px;
font-size: ...
- 147. меню для мобильной версии сайта
- CSS/CSS3
... свойство position: relative, то иконка-гамбургер улетит на правую сторону браузера.
.nav-wrap {
overflow: hidden;
background-color: #5d4037;
position: relative; ...
- 148. как впечатлить заказчика своим портфолио? создаём skill-bar.
- JavaScript/jQuery
... sans-serif;
text-align: center;
}
/* стили для нашего основного блока */
.skills {
position: relative;
display: block;
margin-bottom: 15px;
width: 100%;
height: 35px;
border-raidus: ...
- 149. верстка сайта с нуля. верстка портфолио. часть 2
- HTML/HTML 5
... font-size: 2.9em;
font-weight: 600;
z-index: 10;
text-align: center;
position: relative; /* относительное позиционирование заголовка */
margin-top: ...
- 150. верстка сайта с нуля. верстка портфолио. часть 3
- HTML/HTML 5
... есть.</p>
</div>
со следующими стилевыми свойствами:
.container-well {
position: relative;
-webkit-transition: all 1s ease; /*плавный переход между экшенами chrome/safari ...
- 151. имитация капель дождя с помощью rainyday.js
- JavaScript/JavaScript Основы
... border-box;
}
section{
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
canvas{
position: absolute;
top: ...
... .sidebar {
position: fixed;
top: 0;
bottom: 0; ...
- 153. css-эффект при наведении на меню
- CSS/CSS Основы
... 'poppins', sans-serif;
}
body {
background: #262626;
}
section {
position: relative;
width: 100%;
height: 100vh;
display: ...
- 154. делаем анимацию загрузки с помощью svg, css и javascript
- JavaScript/JavaScript Основы
... height: 100%;
position: relative;
}
.progress-ring__circle { ...
- 155. загрузка и отображение картинки в windows forms c c#
- C#/Основы C#
... this.name = "form1";
this.startposition = system.windows.forms.formstartposition.centerscreen;
this.text = "главное окно"; ...
- 156. имитация пара над чашкой с горячим чаем
- CSS/CSS Основы
... style="--i:3;"></span>
<span style="--i:15;"></span>
</div>
.vapour{
position: relative;/*относительное позиционирование*/
display: flex;/*технология ...
- 157. css grid свойство align-items
- CSS/CSS Основы
... поровну.
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
.container{
position: relative;
width: 940px;
margin: 20px;
display: ...
- 158. эффект расширяющегося облака на css
- CSS/CSS3
... overflow: hidden;
position: relative; /* добавим позиционирование для облаков */
}
.cloud {
position: absolute;
background-image: url('cloud5.png'); /* замените 'cloud.png' на путь к вашему изображению облака */ ...
- 159. скрывающееся меню сайта на html и css
- HTML/HTML 5
... background: var(--primary-color);
position: fixed;
top: 0;
left: 0; ...
- 160. простой слайдер на javascript
- JavaScript/JavaScript Основы
... .carousel {
position: relative;
overflow: hidden;
} ...
- 161. необычный эффект при наведении на карточку
- CSS/CSS Основы
... auto;
}
обозначение границ одной карточки
.container .card{
position: relative;
width: 300px;
height: 400px;
margin: ...
- 162. валидация формы на javascript
- JavaScript/JavaScript Основы
... padding: 30px 40px;
}
.form-control {
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.form-control label {
color: rgb(58, 58, 58);
display: block; ...
- 163. эффект стирания верхнего слоя на javascript
- JavaScript/JavaScript Основы
...
span {
display: block; /*отображать как блочный тег*/
position: absolute; /*абсолютное позиционирование */
width: 100px; /*ширина ...
- 164. изображения внутри треугольников
- CSS/CSS Основы
... выравнивание*/
min-height: 100vh;/*на всю высоту*/
}
.container {
position: relative;/*относительное позиционирование*/
display: flex;
flex-wrap: ...
- 165. как вывести на страницу текущую дату на js
- JavaScript/JavaScript Основы
... cover; / * масштабирование с сохранением пропорций * /
}
.calendar{
position: relative; / * относительное позиционирование * /
width: 200px; / ...
- 166. анимация для меню с индикатором. часть #2
- JavaScript/JavaScript Основы
... transform: translatey(-6px);/*смещение по оси y*/
}
.navigation ul li a .text {
position: absolute;
font-size: 12px;
color: #fff;
bottom: ...
- 167. анимация с пузырьками на javascript
- JavaScript/JavaScript Основы
... ...
внешний вид пузырька с бликом
span{
position: absolute;
bottom: -50px;
width: 100px;
height: ...
- 168. переключатель для бокового меню
- JavaScript/JavaScript Основы
... разместим куда надо - в правый верхний угол страницы.
.toggle{
position: absolute;
top: 0; / * прибить наверх страницы * /
right: ...
- 169. эффект многослойного текста
- CSS/CSS Основы
... li{
list-style: none;/*убрать черные маркеры*/
}
ul li a{
position: relative;/*относительное позиционирование*/
display: block;/*отображать ...
- 170. креативный эффект при наведении на изображения. часть 1
- CSS/CSS Основы
... высоту экрана*/
background: #111;/*цвет фона*/
}
.container{
position: relative;/*относительное позиционирование*/
width: 800px;/*ширина ...
- 171. дизайн и верстка страницы contact us. часть #2
- HTML/HTML Основы
... background: linear-gradient(90deg,#0e3959 0,#0e3959 30%,#03a9f5 30%,#03a9f5 100%);
}
.contactus{
position: relative;/*относительное позиционирование*/
width: 100%;/*растянуть ...
- 172. замена картинки с искажением при наведении
- CSS/CSS Основы
... выравнивание*/
min-height: 100vh;/*на вю высоту экрана*/
}
.imgbx{
position: relative;/*относительное позиционирование*/
width: 400px;/*ширина*/ ...
- 173. портрет с текстовым эффектом
- CSS/CSS Основы
... overflow: hidden;/*лишнее прячем*/
...
}
p {
position: relative;/*относительное позиционирование*/
font-size: 1.5em;/*размер ...
- 174. анимированный переключатель меню на javascript
- JavaScript/JavaScript Основы
... 100vh;/*на всю высоту*/
background: #f5f5f5;/*цвет фона*/
}
.toggle{
position: relative;/*относительное позиционирование*/
width: 70px;/*ширина ...
- 175. человек с потрескавшейся кожей на чистом css
- CSS/CSS Основы
... box-sizing: border-box;/*чистый размер блока*/
}
.portrait{
position: absolute;/*абсолютное позиционирование*/
top: 0;/*верхняя позиция*/ ...
- 176. уменьшение фоновой картинки при скролле страницы
- JavaScript/JavaScript Основы
... font-family: 'poppins', sans-serif;/*название шрифта*/
}
#header{
position: relative;/*относительное позиционирование*/
width: 100%;/*на всю ...
- 177. креативная css анимация масштабирования
- CSS/CSS Основы
... flex-direction: column;/*вертикальная главная ось*/
}
.box {
position: relative;/*относительное позиционирование*/
width: 200px;/*ширина ...
- 178. практический пример использования функции attr в css
- CSS/CSS Основы
... высоту экрана*/
background: #0091ea;/*цвет фона*/
}
h1{
position: relative;/*относительное позиционирование*/
font-size: 14vw;/*размер ...
- 179. стильная кнопка при наведении (графика + css)
- CSS/CSS Основы
... 300x75 пикселей, который будет занимать каждая кнопка.
a{
position: relative;/*относительное позиционирование*/
width: 300px;/*ширина ...
- 180. модальное окно на чистом css
- CSS/CSS Основы
... #content {
display: none;
padding: 5px;
position: absolute;
width: var(--width);
height: var(--height); ...
- 181. анимированный блик у кнопки на чистом css
- CSS/CSS Основы
... padding: 20px 60px;/* расстояние от текста до края кнопки */
position: relative;/* относительное позиционирование */
border-radius: 10px;/* ...
- 182. как изменить шапку сайта (часть 2
- CSS/CSS3
... content: "\005c\005c"; /* из таблицы юникода */
color: #c5e56e;
font-size: 90%;
position: relative;
right: 20px;
}
выпадающее меню
из раздела меню "услуги", ...
- 183. примеры анимации блока и картинки в css
- CSS/CSS3
... src="demo.jpg">
.scale {
width: 200px;
height: 200px;
position: absolute;
animation: scale 3s infinite;
position: absolute;
top: 30%;
left: 40%;
transform: ...
- 184. как сделать видео на заднем фоне с помощью jquery.
- JavaScript/jQuery
... <div style="width: 1000px; height: 500px;"
data-vide-bg="path/to/video" data-vide-options="loop: false, muted: false, position: 0% 0%">
</div>
также, вы можете сделать инициализацию через javascript. ...
- 185. комментарии в виде пузырька.
- CSS/CSS3
... .bubble {
position: relative;
background: #fff;
padding: 20px;
color: #222;
border-radius: 3px;
margin-left: 20px;
}
.bubble::after {
content: '';
display: block;
position: absolute; ...
- 186. как выделить блок текста на css
- CSS/CSS3
... font-family: verdana, 'open sans', sans-serif;
padding: 10px 14px 10px 44px;
position: relative;
box-shadow: 0px 1px 5px #999;
background-color: #8a9bab;
...
- 187. dog ear effect, или эффект загнутого уголка на css.
- CSS/CSS Основы
... </body>
</html>
html структура написана. можно перейти к файлу style.css
.box {
position: relative;
background: #edeff0;
width: 180px;
height: 180px;
padding: 20px;
border-radius: ...
- 188. drag and drop загрузка файлов на сервер. часть 2.
- JavaScript/JavaScript Основы
... {
foreach($_files['file']['name'] as $position => $name) {
if(move_uploaded_file($_files['file']['tmp_name'][$position], 'uploads/'.$name)) {
$uploaded[] ...
- 189. как изменить шапку сайта (часть 3)
- CSS/CSS3
... position: relative; /* относительное позиционирование */
}
/* позиционирование ссылок меню */
.move-links {
position: absolute; ...
- 190. красивые и эффектные слайдеры на jquery.
- JavaScript/jQuery
... код также несложен:
<div id="slider1_container" style="position:relative;top:0px;left:0px;width:600px;height:300px;">
<div u="slides" style="cursor:move;position:absolute;overflow:hidden;left:0px;top:0px;width:600px;height:300px;"> ...
- 191. верстка по сетке bootstrap (часть 1)
- CSS/CSS Основы
... border-radius: 50%;
width: 33px;
height: 33px;
position: relative;
top: 3px;
}
/* кавычки внутри синего круга */
.quotes-circle:before ...
- 192. верстка по сетке bootstrap (часть 3)
- CSS/CSS Основы
...
margin: auto;
padding: 15px;
width: 170px;
height: 170px;
position: relative;
}
/* цвет круга */
.blue{
background: #5094f2;
}
/* цвет круга */ ...
- 193. адаптивное меню гамбургер
- JavaScript/jQuery
... классом menu, где мы позиционируем его с отрицательным значением при заданным position: fixed. единицы измерения vw, указывают на ширину относительно браузера, ...
- 194. как сделать плавный якорь на jquery
- JavaScript/jQuery
... background-color: #eb8b8d;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: ...
- 195. прокрутка страницы вверх
- JavaScript/jQuery
... превратиться в стрелочку вверх.
/* основа кнопки вверх */
.scroll_top {
position: fixed; /* фиксированное положение */
bottom: -50px; /* расстояние ...
- 196. плавная кнопка "наверх" на jquery
- JavaScript/jQuery
... font-size: 150%;
position: fixed;
right: 0;
}
безусловно, стили могут быть любыми. главное, у кнопки "наверх" поставить изначально display: none; и position: fixed; с соответствующими ...
- 197. гамбургер меню на css или js? часть 2
- JavaScript/jQuery
... надо добавить
.menu {
position: relative;
}
в медиа-запросе:
.menu {
background: #eee;
position: absolute;
}
после этого, ...
- 198. как быстро сделать всплывающие подсказки.
- JavaScript/JavaScript Основы
... поместите его где-нибудь на странице и покажите:
var tip = new tooltip('foo bar!');
tip.position(200, 200).show();
использование картинки в контенте:
var img = document.createelement('img'); ...
- 199. как сделать всплывающую форму
- JavaScript/JavaScript Основы
... определенном месте – в правом и нижнем углу браузера.
.open-button {
position: fixed;
bottom: 22px;
right: 26px;
width: 290px; ...
- 200. препроцессор less, начиная с простого
- CSS/CSS Основы
... названия селектора, используем символ амперсанд.
.portfolio__item {
position: relative;
background-color: #3c3c3c;
}
&:hover {
background-color: ...
- 201. как сделать многоуровневое меню-аккордион на css3.
- CSS/CSS3
... .cd-accordion-menu input[type=checkbox] {
/* hide native checkbox */
position: absolute;
opacity: 0;
}
.cd-accordion-menu label, .cd-accordion-menu a {
position: relative;
display: block;
padding: 18px 18px 18px 64px; ...
- 202. свойство css background-image в веб-дизайне
- CSS/CSS3
... горизонтали</p>
</body>
</html>
следующий помощник - свойство background-position, позволяет позиционировать фоновую картинку в любом месте экрана. ...
- 203. всплывающие подсказки при наведении
- CSS/CSS3
... это текст в теге span. расположим подсказки выше иконок.
ul li span {
position: absolute;
top: -30px;
left: 50%;
transform: translatex(-50%) translatey(-20px); ...
- 204. делаем вместе анимированное выпадающее меню на css3
- CSS/CSS3
... top: 100%;
display: none;
position: absolute;
}
/* ставим видимые списки в ряд */
#nav > ul > li{
float: left;
position: relative;
width: 180px;
} ...
- 205. анимированная кнопка обратного звонка
- CSS/CSS3
... измерения ведётся от левого верхнего угла окна браузера.
.pulse {
position: absolute;
top: 50%;
left: 50%;
}
кнопка пока не стоит ...
- 206. как сделать индикатор прокрутки на css3.
- CSS/CSS3
... индикатора прокрутки.
css
теперь перейдем к css коду:
html,body{margin:0;}
header{
position: fixed;
top:0;
height: 125px;
width: 100%;
background: white;
}
main{
margin-top: ...
- 207. вертикальное меню на css
- CSS/CSS3
... что эти цифры взяты с "потолка", у вас они будут свои.
ul {
position: absolute;
top: 10%;
left: 20%;
}
фиксируем ширину ...
- 208. выбор из выпадающего списка в html
- HTML/HTML 5
... позиционируем контейнер с классом box в центре окна.
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, ...
- 209. как вставить видео на html сайт
- HTML/HTML 5
... z-index: 1, это значение должно быть меньше чем у класса content.
#movie {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: ...
- 210. прозрачная панель навигации в css
- CSS/CSS3
... фиксированной position: fixed - при прокрутке странице, она всегда будет оставаться сверху экрана, благодаря нулевым top и left.
nav {
position: fixed; ...
- 211. как сделать изогнутую тень на чистом css3.
- CSS/CSS3
... font-family: "helvetica", sans-serif;
font-size: 1rem;
}
button, .button {
display: inline-block;
position: relative;
border-width: 0;
cursor: pointer;
line-height: normal;
margin: 0 0 10px;
...
- 212. как прижать футер к нижней грани страницы(позиционирование).
- CSS/CSS Основы
... html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
position: relative;
}
.content {
padding-bottom: 57px;
}
.footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
...
- 213. как создать "выскальзывающее" меню на css.
- CSS/CSS3
... sans-serif;
line-height: 1.4;
font-weight: 200;
}
.wrapper {
margin-left: 50px;
}
.nav-side {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
max-width: 250px;
background: ...
- 214. "липкая" библиотека stickyfill.
- JavaScript/JavaScript Скрипты
... такой, если используете jquery:
$('.sticky').stickyfill();
css:
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
также стоит иметь clearfix:
.sticky:before,
.sticky:after ...
- 215. как сделать выпадающий список с красивым эффектом на css и jquery.
- JavaScript/jQuery
... 20em;
margin: 5em auto;
font-family: pfs-bold;
color: $semilight;
text-transform: uppercase;
position: relative;
transition: width 0.5s;
will-change: width;
.option {
padding: 1em;
cursor: ...
- 216. библиотека shine.js. делаем динамические тени.
- JavaScript/JavaScript Основы
... позицию света
window.addeventlistener('mousemove', function(event) {
shine.light.position.x = event.clientx;
shine.light.position.y = event.clienty;
shine.draw();
}, false);
особенности:
динамическая ...
- 217. изменение размеров div на javascript
- JavaScript/JavaScript Основы
... min-width: 200px;
position: relative;
width: 400px;
}
#block_resize {
background-color: #000;
bottom: 0;
cursor: se-resize;
height: 12px;
margin-top: 9px;
position: absolute;
right: ...
- 218. стилизация select на css
- CSS/CSS3
... позиционирования кастомной стрелочки, относительно этого блока.
.select {
position: relative;
}
стилизуем тег select. с помощью свойства appearance, убираем стандартные ...
- 219. как сделать фон в css
- CSS/CSS Основы
... background: url('kabachok.jpg') no-repeat fixed center / cover;
position: relative;
}br
.block {
position: absolute;
top: 0;
left: 0;
bottom: ...
- 220. как сделать выпадающий блок на чистом css?
- CSS/CSS Основы
... .toggler__content-box {
position: absolute;
transform: translate(9999px); ...
- 221. блок со скошенным углом на css
- CSS/CSS Основы
... 300px; // высота блока
background-color: red; // цвет блока
position: relative; // позиционируем относительно этого блока
}
.block::before {
display: ...
... center center;
background-size: cover; // без потери пропорций
position: fixed; // фиксация картинки наверху
height: 100vh; // высота на ...
- 223. первая буква логотипа google
- CSS/CSS Основы
... 125px; /* ширина блока */
height: 150px; /* высота блока */
position: relative; /* позиция родителя */
border-top: 50px solid #3a7cec;
border-right: ...
- 224. выноски в стиле комиксов
- CSS/CSS Основы
... прямоугольники с закругленными углами для обоих блоков.
.bubble {
position: relative; /* относительное позиционирование */
width: 300px; /* ...
- 225. что такое css спрайты?
- CSS/CSS Основы
... котором находится много различных картинок, и с помощью свойства background-position мы выставляем нужную картинку в нужном месте. допустим, у нас есть ...
- 226. пишем информер погоды на react
- JavaScript/JavaScript Основы
... background-image: url('./assets/cold-bg.jpg');
background-size: cover;
background-position: bottom;
transition: 0.4 ease;
}
.app.warm {
background-image: url('./assets/warm-bg.jpg'); ...
- 227. создание всплывающей подсказки
- CSS/CSS Основы
... color: #000000; border-bottom: dashed 1px #000;}a.help span { display: none;}a.help:hover { position: relative;}a.help:hover span { position: absolute; display: block; left: 10px; top: 25px; border: solid 1px #000000; ...
- 228. свойство transform-origin на примере
- CSS/CSS Основы
... 300px;
background-color: #666;
margin: 0 50px 50px 0;
position: relative; // родитель для магнита
}
нарисуем небольшой магнит с ...
- 229. как сделать всплывающее окно с затемнением
- CSS/CSS Основы
... height: 100%;
opacity: 0.9;
position: fixed;
width: 100%;
z-index: 100;
top: 0;
left: 0;
}
#popup {
background-color: #00f;
height: 200px;
position: fixed;
top: 100px;
...
- 230. отправка файла по e-mail на php
- PHP/PHP Скрипты
... "content-type: text/html; charset='utf-8'\n";
$body .= "content-transfer-encoding: quoted-printablenn";
$body .= "content-disposition: attachment; filename==?utf-8?b?".base64_encode($filename)."?=\n\n";
$body .= $message."\n";
$body .= "--$boundary\n"; ...
- 231. выпадающее изображение из ссылки на javascript
- JavaScript/JavaScript Скрипты
... onmouseout="hidelinkimage('float_1')">моя бабушка (82 года)</a>
<div id="float_1" style="display: none; position: absolute;">
<img src="foto5.jpg" alt="фото 1" />
...
- 232. подменю на css
- CSS/CSS Основы
... li {
position: relative;
}
ul li a {
display: block;
border: 1px solid #000;
border-bottom: 1px;
padding: 5px;
text-decoration: none;
}
li ul {
display: none;
left: 99px;
position: absolute; ...
- 233. создаем игру с pygame и python. реализация класса корабля
- Python/Основы Python
...
class spaceship(gameobject):
def __init__(self, position):
super().__init__(position, load_sprite("spaceship"), vector2(0))
на данный ...
- 234. создание космической аркады с python и pygame. добавляем класс астероида
- Python/Основы Python
...
class asteroid(gameobject):
def __init__(self, position):
super().__init__(position, load_sprite("asteroid"), (0, 0))
# как и раньше, вы начинаете с вызова конструктора gameobject с определенным изображением. вы добавили изображение на одном из предыдущих шагов. ...
- 235. анимация рамки на css
- CSS/CSS Основы
... background-size: cover;
margin: 6% auto;
border: 1px solid #2a3cad;
position: relative;
}
css свойства для блока с рамкой
.box{
top: ...
- 236. рисуем сердечко на css
- CSS/CSS Основы
... background-color: red; // цвет
transform: rotate(45deg);
position: relative; // установим родителя
}
теперь создадим два псевдоэлемента ...
- 237. всплывающая подсказка в html
- HTML/HTML 5
... добавился вопросительный знак.
/* текст в контейнере */
[aria-label] {
position: relative;
cursor: help;
}
опишем свойства для псевдоэлемента ...
- 238. настройки стрелок у slick слайдера (часть 3)
- JavaScript/jQuery
... .slider {
position: relative;
padding: 0px 60px; // поля между стрелкой и краем слайдера
}
.slider .slick-arrow{
position: absolute;
top: ...
- 239. пример анимации движения в js
- JavaScript/JavaScript Основы
... свойства кнопки
.btn {
width: 120px;
height: 40px;
position: absolute;
top: 0;
left: 0;
}
// css свойства блока ...
- 240. модальное окно на js
- JavaScript/JavaScript Основы
... cursor: pointer;
position: absolute;
left: 100px;
top: 20px;
}
.modal {
position: absolute;
left: 100px;
top: ...
- 241. создание интерактивного информационного окна на веб-странице с помощью javascript
- JavaScript/JavaScript Скрипты
... infobox.textcontent = `наведен элемент с тегом: ${tagname}`;
infobox.style.position = 'fixed';
infobox.style.padding = '10px';
infobox.style.backgroundcolor = 'white'; ...
- 242. круговой индикатор выполнения с html и css. часть 2
- CSS/CSS Основы
... .circle-wrap .circle .mask,
.circle-wrap .circle .fill {
width: 150px;
height: 150px;
position: absolute;
border-radius: 50%;
}
.mask .fill {
clip: rect(0px, 75px, 150px, 0px); ...
- 243. падающий снег на javascript
- JavaScript/JavaScript Скрипты
... } } var timer=settimeout("movesnow()",50);}for (i=0;i<=snowmax;i++) { document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")}</script>код html (вставлять между ...
- 244. класс для отправки e-mail на php
- PHP/PHP Скрипты
... устанавливаем необходимые заголовки письма
if ($this->notify) $headers .= "disposition-notification-to: ".$this->from."\r\n"; // добавляем запрос подтверждения получения ...
- 245. слайдер изображений на jquery без плагинов
- JavaScript/JavaScript Основы
... добавим css:
#container {
text-align: center;
width: 300px;
}
#slider div {
opacity: 0;
position: absolute;
}
#slider div.show {
opacity: 1;
z-index: 100;
}
#switch {
margin-top: 360px;
} ...
- 246. nodejs. как создать "список дел". часть 1.
- JavaScript/JavaScript Основы
... styles.css:
body{
background: #0d1521;
font-family: tahoma;
color: #989898;
}
#todo-table{
position: relative;
width: 95%;
background: #090d13;
margin: 0 auto;
padding: 20px;
box-sizing: ...
- 247. круговой индикатор выполнения с html и css. часть 4
- CSS/CSS Основы
... text-align: center;
margin-top: 14px;
margin-left: 14px;
color: #1e51dc;
position: absolute;
z-index: 100;
font-weight: 700;
font-size: 2em;
...
- 248. как анимировать фавиконку на сайте.
- JavaScript/JavaScript Скрипты
... просто, не правда ли?
присутствуют другие анимации:
fade
pop
pop & fade
position
without animation
помимо анимации вы можете выбрать тип фигуры: круг, прямоугольник ...
- 249. как сделать кнопку для плавного прокручивания страницы наверх?
- JavaScript/JavaScript Основы
... }
/* стиль кнопки "наверх" */
.scroll-top-btn {
position: fixed;
bottom: 40px;
right: 40px;
background-color: #3498db; ...
- 250. закруглённые углы через css
- CSS/CSS Основы
... solid #ffd460;
}
.roundborder div {
background: url(../images/t-l.png) top left no-repeat;
margin: -2px;
position: relative;
}
.roundborder div div {
background: url(../images/t-r.png) top right no-repeat;
margin: 0; ...
- 251. как сделать затемнение фона через css
- CSS/CSS Основы
... left: 0; /* нулевой отступ слева */
opacity: 0.50; /* степень прозрачности */
position: fixed; /* фиксированное положение */
top: 0; /* нулевой отступ сверху ...
- 252. счётчик обращений к файлам
- PHP/PHP Основы
... закрываем дескриптор
$file = "price.xls"; // скачиваемый файл
header("content-disposition: attachment; filename=your_price.xls;"); // сообщаем браузеру, что сейчас должна начаться ...
- 253. как сделать экскурсию по сайту на jquery.
- JavaScript/jQuery
... description: "какое-то описание нашего элемента",
previous: true,
position: 'bottom'
});
$.tourtip.start();
});
</script>
отбираем ...
- 254. drag and drop загрузка файлов на сервер. часть 1.
- JavaScript/JavaScript Основы
... height: 300px;
border: 2px dashed #aaa;
color: #aaa;
line-height: 280px;
text-align: center;
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -150px;
}
.dropzone.dragover ...
- 255. как сделать видео в качестве фона сайта на html5. (1/2).
- HTML/HTML 5
... к стилям
body {
background: url('video.png');
background-size: cover;
}
.bgvideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
...
- 256. как сделать блоки со слайдер эффектом на чистом css3.
- CSS/CSS3
... linear;
}
.slide-up-boxes a:hover h5 {
margin-top: -65px;
opacity: 0;
}
.slide-up-boxes div {
position: relative;
color: white;
font: 12px/15px georgia, serif;
height: 45px;
padding: 10px; ...
- 257. создание проекта html, css, js с использованием python
- Python/Основы Python
... <body>
<div style="text-align: center; top: 50%; left: 50%; position: absolute; transform: translate(-50%, - 50%);">
<h1>myrusakov!</h1> ...
- 258. горизонтальное выпадающее меню на css
- CSS/CSS Основы
... }
ul.menu li ul {
display: none;
padding-left: 10px;
}
ul.menu li:hover ul {
display: block;
position: absolute;
}
ul.menu li:hover ul li {
float: none;
}
ul.menu li:hover ul li a {
padding: 6px 0 8px; ...
- 259. перетаскиваемый div на javascript
- JavaScript/JavaScript Основы
... рассмотрим прокомментированный код:
<div id="block" style="border: 1px solid #000; cursor: move; position: absolute;">перетащи меня</div>
<script type='text/javascript'>
/* определяем ...
- 260. эффект увеличивающегося изображения при клике на css и javascript
- JavaScript/JavaScript Основы
... /* по умолчанию скрыто */
position: fixed;
/* фиксированное положение */ ...
- 261. обработка события click на css
- CSS/CSS Основы
... */
padding-top: 20px; /* чтобы название вкладки было ниже содержимого */
position: absolute; /* чтобы содержимое не двигало элементы на странице */
}
.tabs:active ...
- 262. как скрыть url скачиваемого файла на php
- PHP/PHP Основы
...
/* если файл существует */
header("content-disposition: attachment; filename='" . basename($filename) . "';"); // указываем имя при сохранении в браузере ...
- 263. как прижать футер к низу
- CSS/CSS Основы
... min-height: 100%;
}
#main {
padding-bottom: 50px;
}
#footer {
bottom: 0;
height: 50px;
position: absolute;
}
здесь всё прозрачно, но скажу только, что строчка "height: auto ...
- 264. защита страницы с помощью модального окна и пароля в javascript
- JavaScript/JavaScript Скрипты
... /* стили для модального окна */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0; ...
- 265. reflection api. reflectionparameter.
- PHP/PHP Основы
... по-умолчанию - константа или null
$rp->getname(); // возвращает имя аргумента
$rp->getposition(); // возвращает позицию аргумента
$rp->isarray(); // ожидает ли аргумент ...
- 266. гамбургер меню на css или js? часть 1
- JavaScript/jQuery
... display: none; /* пункты меню скрыты */
background: #f1f2f4;
position: absolute;
}
.menu li {
float: none; /* пункты меню в столбцах ...
- 267. анимированный градиент granim.js
- JavaScript/JavaScript Скрипты
... центре, по осям x и y, но эти значения можно заменить на left, right, top, bottom.
position: ['center', 'center']
вариант анимированного градиента поверх ...
...
header {
background-color: #263d36;
background-image: url("header.jpg");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
line-height: ...
- 269. счетчик символов в реальном времени на js
- JavaScript/JavaScript Основы
... заголовком и полем * /
color: #333;
}
.container textarea {
position: relative; / * относительное позиционирование * /
margin-bottom: ...
- 270. javascript анимация на фоне
- JavaScript/JavaScript Основы
... физически нет в html разметке. откуда же он тогда появится?
span{
position: absolute;
width: 100px;
height: 100px;
background: ...
- 271. показ случайной цитаты в javascript
- JavaScript/JavaScript Скрипты
...
});
стили для цитат
#random-phrase {
margin: 1px auto;
position: absolute;
padding: 15px;
font-size: 1.3em;
font-style: italic; ...
- 272. смена фона при перезагрузке страницы на javascript
- JavaScript/JavaScript Скрипты
... background-attachment:fixed;
background-repeat: no-repeat;
background-position:cover;
background-size: 100%;
}
</style>
</head>
<body class="bg"> ...
- 273. как сделать видео на сайте адаптивным
- HTML/HTML 5
... зададим классу movie-container следующие свойства:
.movie-container {
position: relative;
padding-bottom: 56.25%; // сохраняет пропорции
height: ...
- 274. текст, обтекающий картинку нестандартной формы
- CSS/CSS Основы
... font-family: 'poppins', sans-serif; / * семейство шрифта * /
}
section{
position: relative; / * относительное позиционирование * /
width: 100%; / ...
- 275. верстка адаптивной шапки на bootstrap
- CSS/CSS Основы
... height: 40px;
cursor: pointer;
position: absolute;
top: 6px;
right: ...
- 276. пример адаптивной верстки на bootstrap
- CSS/CSS Основы
... background-image: url(/assets/img/app_bg.png);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: ...
- 277. адаптивная верстка на flex (часть 2)
- CSS/CSS Основы
... background-color: #fff;
flex-basis: 32%;
margin-bottom: 22px;
position: relative; // для позиционирования контента внутри поста
}
растянем ...
- 278. плавная анимация движения на css
- CSS/CSS Основы
... 200px;
border-radius: 10px;
background-color: #d42929;
position: absolute;
top: 0;
left: 0;
z-index: 1;
animation: ...
- 279. адаптивное мобильное меню для сайта (часть 3)
- JavaScript/JavaScript Основы
... z-index: 1; // навигация под кнопкой
display: block;
position: absolute;
right: -350px; // блок спрятан за экраном
top: ...
- 280. единицы измерения em, rem, vh, vw, vmin, vmax
- CSS/CSS3
... url(https://cdn.pixabay.com/photo/2019/03/11/09/53/car-4048220_1280.jpg) #000;
background-size: cover;
background-position: bottom center;
line-height: 1;
margin-top: 0;
font-size: ...
- 281. как сделать спойлер на сайте
- JavaScript/JavaScript Основы
... display: flex;
flex-direction: column;
}
.list-group-item {
position: relative;
display: block;
padding: 0.75rem 1.25rem;
margin-bottom: ...
- 282. чем отличается box-shadow от drop-shadow?
- CSS/CSS Основы
... <h2 class="text1">box shadow</h2>
</div>
.container{
position: relative;
width: 900px;
display: flex;
justify-content: ...
- 283. пример простого слайдера на javascript (#1)
- JavaScript/JavaScript Основы
... относительно своего родителя slider.
.slider-row {
...
position: relative; /* относительное позиционирование к родителю */
left: ...
- 284. строковые методы includes(), indexof() и lastindexof() в js
- JavaScript/JavaScript Основы
... подстроку и позицию (index), с которой нужно начинать поиск.
str.includes(searchstring[, position])
у каждого элемента в строке есть свой индекс (порядковый ...
- 285. навигационное меню с иконками + hover эффект
- CSS/CSS Основы
...
}
10) стилизация ссылок меню
ul li a .name{
position: relative;
top: 20px;
height: 20px;
width: ...
- 286. пример верстки фотогалереи на css grid #1
- CSS/CSS Основы
... background-size: cover; / * растянуть картинку на весь блок * /
background-position: center; / * расположение картинки в центре блока * /
text-align: ...
- 287. пример верстки блог-секции на css grid #5
- CSS/CSS Основы
... .blog-item-img {
height: 270px;
background-size: cover;
background-position: center;
}
.blog-item-content {
padding: 25px;
text-align: center; ...
- 288. динамическая загрузка excel-файла, созданного с помощью phpspreadsheets
- PHP/PHP Основы
... header('content-type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'); // формат файла
header('content-disposition: attachment;filename="' . report_file_name .'"'); // название файла при загрзуке ...
- 289. как изменить курсор мыши на javascript
- JavaScript/JavaScript Основы
... pointer-events: none;/ * курсор не является объектом события мыши * /
position: absolute;
border: 4px solid red;
border-radius: 50%;
box-sizing: ...
- 290. почему нужно использовать svg графику на сайтах
- HTML/HTML Основы
... например позиционировать, изменять размер и цвет.
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, ...
... разместим в центре, родительский блок с классом box.
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, ...
- 292. как сделать закругленную шапку сайта
- CSS/CSS Основы
... min-height: 120vh; /*минимальная высота видимой области*/
}
section{
position: relative; /*относительное позиционирование*/
width: 100%; /*на ...
- 293. примеры свойства transform в css
- CSS/CSS3
... подбираем позиционирование относительно блока с кнопкой.
img {
position: relative;
left: -245px;
top: 6px;
border: none; ...
- 294. параллакс эффект на чистом css
- CSS/CSS Основы
... display: block; /* позиционирование псевдоэлемента */
position: absolute; /* позиционирование псевдоэлемента */
left: 0; /* левая ...
- 295. полупрозрачный текст на фоне в css
- CSS/CSS3
... бы фон сам по себе, а заголовок сам по себе.
h1 {
font-size: 6em;
position: absolute;
top: 30%;
text-align: center;
text-transform: uppercase;
}
...
- 296. иконки font awesome на сайте
- CSS/CSS3
... выравнивать и задавать цвета и размеры какие угодно.
ul li .icon {
position:relative;
top: 2px;
display: inline-block;
width: ...
- 297. адаптивное меню для сайта. часть 1
- CSS/CSS3
... телефонах, без выравнивания фона по центру, он может срезаться.
background-position: center center;
секция подготовлена, в ней мы пропишем стили для шапки. ...
- 298. создание прелоадера для сайта на css
- CSS/CSS3
... пикселей (10px+10px) меньше
.loader:before {
content: '';
position: absolute;
top: 10px;
left: 10px;
bottom: 10px; ...
- 299. выдвигающаяся форма поиска по клику
- JavaScript/jQuery
... 22px;
}
позиционируем иконку относительно родителя - wrap.
position: absolute;
right: 17px;
top: 15px;
в активном состоянии ...
- 300. выезжающее боковое меню. часть 2
- CSS/CSS3
... быть на нижнем слое - z-index: 0.
section {
transition: 0.5s;
position: relative;
z-index: 0;
}
вытащим меню поверх секции
.menu { ...
- 301. поворот карточки с картинкой в css
- CSS/CSS3
... местоположение div-а с классом card относительно оберточного div-а.
.card {
position: relative;
}
позиционируем две стороны карточки так, чтобы они наложились ...
- 302. bxslider - настройки и примеры
- JavaScript/jQuery
... контейнера bx-wrap задать относительную ширину, например в %.
.bx-wrap {
position: absolute;
width: 50%;
left: 20%;
top: 10%; ...
- 303. css эффект при наведении на ссылку
- CSS/CSS3
... для позиционирования его дочерних элементов относительно его самого.
position: relative;
переводим ссылки из строчных элементов в строчно-блочные, ...
- 304. градиент поверх фоновой картинки в css
- CSS/CSS3
... позиционировали его относительно окна браузера ровно посередине.
.header_box {
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
text-align: ...
... completionhandler: @escaping (urlsession.authchallengedisposition, urlcredential?) -> void) {
// получить серверный сертификат и сравнить с локально сохранённым ...
- 306. креативный эффект при наведении на изображения. часть 2
- CSS/CSS Основы
... </div>
</div>
стилизация контента
.clip .content{
position: absolute;/*абсолютное позиционирование*/
bottom: -100%;/*позиционирование ...
... javascript отключен.
progress {
/* позиционирование */
position: fixed;
left: 0;
top: 0;
/* размеры */
...
- 308. как сделать чекбокс на html/css
- CSS/CSS3
... применив псевдоэлемент after.
.checkmark:after {
content: "";
position: absolute;
display: none;
}
делаем видимой галочку, только для ...
- 309. как сделать карточку товара на css
- CSS/CSS3
... неизвестна заранее высота и ширина размещаемых элементов.
section {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
создание ...
- 310. псевдоэлемент after и псевдокласс last-child
- CSS/CSS Основы
... color: #fff; /* поменять цвет */
font-weight: bold; /* поменять жирность */
position: relative;
padding-left: 4px; /* выравнивание относительно текста по гориз. ...
- 311. иконки для меню сайдбара
- CSS/CSS3
... обрежет его, а перенесет ниже.
.sidebar {
height: 100%;
width: 180px;
position: fixed;
z-index: 1; // сайдбар выше main колонки
top: 0;
left: ...
- 312. jquery эффекты
- JavaScript/jQuery
... background:#bdfa02;
height:100px;
width:200px;
position:absolute;
}
для запуска эффектов нам потребуются кнопки с разными классами. ...
- 313. всплывающее окно popup на jquery (часть 1)
- JavaScript/jQuery
... затемнением для popup окна */
#popup {
display: none; /* изначально скрытно */
position: fixed; /* закреплено к верхнему левому углу браузера */
left: 0;
top: ...
- 314. фильтрация по первым буквам на jquery
- JavaScript/jQuery
... background-image: url('searchicon.png'); /* размещение иконки с лупой */
background-position: 10px 12px; /* позиционирование иконки */
background-repeat: no-repeat; /* запрет ...
- 315. как изменить шапку сайта (часть 1)
- CSS/CSS3
... space-around;
padding: 5px;
font-size: 100%;
border-bottom: 1px solid #efd0d0;
position: relative;
}
выделим некоторые слова зеленым цветом.
/* зеленый цвет ...
- 316. верстка портфолио на flexbox (часть 2)
- CSS/CSS3
... */
.portfolio_col {
width: 25%;
}
/* ячейка внутри колонки */
.portfolio_item {
position: relative;
}
/* фото в ячейке */
.portfolio_image {
display: block;
max-width: ...
последнее время мне все чаще задают вопросы о том, как устроены индикаторы,
показывающие текущую позицию чтения текста (количество прочитанного ...