Уроки и статьи
Подписка
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
Мой аккаунт
Моя группа
Опрос
Какая тема Вас интересует больше?
Бесплатный курс
Программирование на Python для начинающих
Бесплатный курс по Python даст Вам всю необходимую базу для начала программирования на языке Python. В курсе Вас ждёт множество уроков (больше 4-х часов видео), исходников и упражнений.
Чтобы получить Видеокурс,
заполните форму
Бесплатный онлайн-семинар
10 шагов к созданию своей Web-студии
После семинара:
- Вы узнаете главное отличие богатых от бедных.
- Вы увидите разоблачения множества мифов об успешности и о бизнесе.
- Вы получите свой личный финансовый план прямо на семинаре.
- Мы разберём 10 шагов к созданию своей успешной Web-студии.
- Я расскажу о своих личных историях: об успешных и неуспешных бизнесах. Это мой многолетний опыт, которым я поделюсь с Вами.
Умные цитаты
Кем бы ты ни был — будь лучше.
Авраам Линкольн
Поиск: overflow
Что искали: overflow
Всего найдено: 96 записей
- 1. навигационное меню с иконками + hover эффект
- CSS/CSS Основы
... width: 60px;
height: 40px;
text-align: center;
overflow: hidden; /* прячем дубли иконок */
margin: 10px;
}
ul li a .icon .fa{
...
- 2. высота и ширина блока в css
- CSS/CSS Основы
... размеров, называется это свойство overflow.
сокрытие лишнего содержимого в блоке
надо добавить в css код свойство overflow: hidden
div {
background: #d56287; ...
- 3. анимация появления текста на css
- CSS/CSS Основы
... этого добавим к контейнеру одно важное свойство, overflow: hidden.
.container {
...
overflow: hidden;
}
теперь остался видимым только ...
- 4. css свойство filter grayscale на практике
- CSS/CSS3
... не помещается в блок holder, спрятать overflow: hidden.
.holder {
width: 200px;
height: 200px;
overflow: hidden;
}
чтобы наши барышни ...
... .accordion-content {
padding: 0;
height: 0;
overflow: hidden;
transition: height 400ms ease;
}
.accordion-conent:target {
height: 150px;
padding: 20px;
overflow-y: scroll;
}
вот так просто мы ...
... шапке, за такое. примените такие же технологии, но с другой темой.
9) search stackoverflow
поиск по сервису вопросов и ответов для программистов. по своим ...
- 7. как использовать свойство «float» в css
- CSS/CSS3
... внешние отступы */
padding: 0; /* обнуляем внутренние отступы */
overflow: hidden; /* обрезает лишний контент */
border: 1px solid #c71584; /* обводка */ ...
- 8. частичная отмена float в css
- CSS/CSS Основы
... очень просто, достаточно в блок #right добавить свойство overflow:
#right {
margin-left: 220px;
overflow: hidden;
}
теперь всё встало на свои места. свойство overflow ...
- 9. имитация печатной машинки при наведении на текст
- CSS/CSS Основы
... absolute;/*абсолютное позиционирование*/
top: -1px;/*позиция сверху*/
overflow: hidden;/*спрятать лишнее*/
color: #1bfaad;/*цвет ссылок*/
transition: ...
- 10. иконки для меню сайдбара
- CSS/CSS3
... всегда оставаться наверху и быть видимым на всю высоту экрана. свойство overflow-x, не даст, длинному названию, выйти за пределы сайдбара, но в тоже ...
- 11. полупрозрачный дизайн для бизнес карты
- CSS/CSS Основы
... blur(10px);/*интенсивность размытия*/
border-radius: 20px;/*закругление углов*/
overflow: hidden;/*лишнее спрятать*/
box-shadow: 0 25px 25px rgba(0,0,0,0.1);/*легкая ...
- 12. красивый hover эффект для блока
- CSS/CSS Основы
... блока icon сдвинулась на 100% вниз по вертикали и невидима, благодаря свойству overflow:hidden.
.container .box:hover .imgbx{
transform: translatey(-100%);
} ...
- 13. эффект бегущей волны на чистом css
- CSS/CSS Основы
... height: 50px;/*высота бокса*/
background: white;
overflow: hidden;/*переполненность скрыть*/
z-index: 1;/*на верхний слой*/ ...
- 14. замена картинки с искажением при наведении
- CSS/CSS Основы
... что выходит за рамки размеров 400x500 пикселей, спрячем при помощи свойства overflow: hidden. сейчас мы видим только одну девушку на фоне пшеницы.
*{
margin: ...
- 15. параллакс эффект на чистом css
- CSS/CSS Основы
... задание стиля трансформации */
overflow-y: scroll; /* разрешить скролл по вертикали */
overflow-x: hidden; /* спрятать все лишнее по горизонтали ...
- 16. аватар внутри круга на css
- CSS/CSS Основы
... 240px;
height: 326px;
background: rgb(194, 127, 127);
overflow: hidden;
}
с помощью псевдоэлемента before закруглим нижнюю часть ...
- 17. переключение меню гамбургер, используя js
- CSS/CSS Основы
... }
body{
background: #f0f4c3;
min-height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: ...
- 18. как создать аккордеон на js
- JavaScript/JavaScript Основы
... два состояния видимости контента.
.accordion .contentbx .content{
overflow: hidden; / * контент скрыт * /
height: 0;
background: #fff; ...
- 19. анимация набора текста на css
- CSS/CSS3
... white-space: nowrap; /* не переносить текст на новую строку */
overflow: hidden; /* скрываем переполнение контентом */
border-right: 3px ...
- 20. адаптивное боковое навигационное меню
- JavaScript/JavaScript Основы
... background: #0091ea;
transition: 0.5s ease-in-out;
overflow: hidden;
overflow-y: auto;
}
.navigation ul {
position: absolute;
top: ...
- 21. 10 полезных sass миксинов.
- CSS/CSS Основы
... @mixin truncate($truncation-boundary) {
max-width: $truncation-boundary;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
это не все
у нас есть больше загрузок от быстрого ...
- 22. выезжающее боковое меню. часть 1.
- CSS/CSS3
... местонахождение дочерних элементов будет рассчитываться от wrapper. свойство overflow-x отвечает за то, чтобы случайно не появилась горизонтальная полоса ...
- 23. как сделать аккордион на чистом css3.
- CSS/CSS3
...
.accordion-content p {
margin: 0 0 20px 0;
}
.accordion-content {
padding: 0;
height: 0;
overflow: hidden;
}
.accordion-content:target {
height: auto;
padding: 20px;
}
в начале мы убираем ...
- 24. портрет с текстовым эффектом
- CSS/CSS Основы
... sans-serif;
}
section {
height: 100vh; /*на всю высоту экрана*/
overflow: hidden;/*лишнее прячем*/
...
}
p {
position: relative;/*относительное ...
- 25. анимированный неоновый текст на css
- CSS/CSS Основы
... align-items: center;
min-height: 100vh;
background: #000;
overflow: hidden;
}
.box{
position: relative;/*относительное позиционирование*/ ...
- 26. эффект расширяющегося облака на css
- CSS/CSS3
... background: linear-gradient(to bottom, #87ceeb, #1e90ff); /* градиент от голубого к более темному синему */
overflow: hidden;
position: relative; /* добавим позиционирование для облаков */ ...
- 27. как сделать чашку с блюдцем на css
- CSS/CSS Основы
... закруглены*/
box-sizing: border-box;/*реальный размер блока*/
overflow: hidden;/*спрятать переполненность*/
}
рисуем чай в чашке
<div ...
- 28. css анимация секции с эффектом волны
- CSS/CSS Основы
... 100%;/*ширина секции*/
height: 100vh;/*высота секции*/
overflow: hidden;/*скрыть переполнение*/
display: flex;/*технология флексбокс*/ ...
- 29. создаем выпадающее боковое меню на html, css и javascript
- JavaScript/JavaScript Основы
... max-height: 0;
overflow: hidden;
}
.menu-item__header-open+.submenu { ...
- 30. валидация email в форме с помощью js
- JavaScript/JavaScript Основы
... background: linear-gradient(#1e2024,#18181c);
border-radius: 4px;
overflow: hidden;
}
#form #email{
width: 300px;
outline: none;
border: ...
- 31. практический пример использования функции attr в css
- CSS/CSS Основы
... выравнивание*/
color: #ffab00;/*вертикальное выравнивание*/
overflow: hidden;/*скрыть переполненность*/
-webkit-text-stroke: 0vw #263238;/*ширина ...
- 32. имитация капель дождя с помощью rainyday.js
- JavaScript/JavaScript Основы
... position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
canvas{
position: absolute;
top: 0;
left: ...
- 33. защита страницы с помощью модального окна и пароля в javascript
- JavaScript/JavaScript Скрипты
... top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4); ...
- 34. движение фоновой картинки внутри рамки
- CSS/CSS Основы
... выравнивание*/
min-height: 100vh;/*на всю высоту экрана*/
overflow: hidden;/*спрятать переполнение*/
}
.planetearth{
position: relative;/*относительное ...
- 35. эффект стирания верхнего слоя на javascript
- JavaScript/JavaScript Основы
... padding: 0;
}
body {
width: 100%;
height: 100vh;
overflow: hidden;
background: repeating-linear-gradient(
0deg, ...
- 36. простой слайдер на javascript
- JavaScript/JavaScript Основы
... position: relative;
overflow: hidden;
}
.carousel-control-prev, .carousel-control-next { ...
- 37. javascript анимация на фоне
- JavaScript/JavaScript Основы
... box-sizing: border-box;
font-family: consolas;
}
body{
overflow: hidden;
height: 100vh;
background: #111;
background: ...
- 38. эффект увеличивающегося изображения при клике на css и javascript
- JavaScript/JavaScript Основы
... /* полная высота */
overflow: auto;
/* включить прокрутку, если необходимо */ ...
- 39. расширяемое поле для поиска на javascript
- JavaScript/JavaScript Основы
... #fff;/*цвет*/
border-radius: 60px;/*закругление углов блока*/
overflow: hidden;/*прячем все лишнее*/
transition: 0.5s;/*плавный переход*/ ...
- 40. как сделать текст по кругу на javascript
- JavaScript/JavaScript Основы
... align-items: center;
min-height: 100vh;
background: #ffeb3b;
overflow: hidden;
}
section .text{
position: absolute;/*абсолютное позиционирование*/ ...
- 41. фигуры с hover-эффектом из сериала "игра в кальмара"
- CSS/CSS Основы
... transition: 0.5s ease-in-out;/*плавность для hovre-эффекта*/
overflow: hidden;/*скрыт выходящее за рамки*/
}
.container .card:hover {
background: ...
- 42. анимированный переключатель меню на javascript
- JavaScript/JavaScript Основы
... justify-content: center;
align-items: center;
cursor: pointer;
overflow: hidden;
}
нарисуем полоски
пока визуально мы видим только ...
- 43. эффект многослойного текста
- CSS/CSS Основы
... 100vh;/*на всю высоту экрана*/
background: #000;/*цвет фона*/
overflow: hidden;/*спрятать переполненность*/
}
ul li{
list-style: none;/*убрать ...
- 44. имитация клавиш у клавиатуры на css
- CSS/CSS Основы
... 0 0 0 2px rgba(0,0,0,0.75),
10px 20px 25px rgba(0,0,0,0.4);
overflow: hidden;
}
span:last-child {
width: 100%;/*последняя широкая клавиша*/ ...
- 45. верстаем карточку с эффектом раскрывающейся шторки при наведении на css
- CSS/CSS Основы
... background: #f2f2f2;
overflow: hidden;
border-radius: 20px;
cursor: pointer; ...
- 46. красиво оформленная секция с услугами
- CSS/CSS Основы
... 20px;/*закругление углов*/
background: #f9f9f9;/*цвет секции*/
overflow: hidden;
}
.container .servicebox .icon {
position: absolute;/*абсолютное позиционирование*/ ...
- 47. анимация с пузырьками на javascript
- JavaScript/JavaScript Основы
... box-sizing: border-box;
font-family: consolas;
}
body{
overflow: hidden;
height: 100vh;
background: #111;
background: ...
- 48. креативный дизайн блока на css
- CSS/CSS Основы
... flex;
justify-content: center;
align-items: flex-start;
overflow: hidden;/*скрыть лишнее*/
border-bottom-left-radius: 160px;/*нижний левый ...
- 49. выпадающее меню выбора с использованием javascript
- JavaScript/JavaScript Скрипты
... background: #fff;
box-shadow: 0 30px 30px rgba(0,0,0,0.05);
overflow: hidden;
display: none;/*прячем пункты меню*/
text-transform: ...
- 50. креативный css hover-эффект для меню навигации
- CSS/CSS Основы
... горизонтали*/
align-items: center;/*в центре по вертикали*/
overflow: hidden;
background: #222;/*цвет фона*/
}
стилизация ссылок ...
- 51. трёхмерный мир на чистом css
- CSS/CSS3
... perspective: 10em;
perspective-origin: 50% calc(50% - 2em);
overflow: hidden;
}
.frontwall, .leftwall, .rightwall {
position: absolute; ...
- 52. дизайн карточки на чистом css
- CSS/CSS Основы
... 340px;/*ширина карточки*/
height: 450px;/*высота карточки*/
overflow: hidden;/*скрыть за пределами карточки*/
background: #fff;/*фон карточки*/ ...
- 53. блок с функцией "read more" на javascript
- JavaScript/JavaScript Основы
... height: 215px;/*текстовый контент занимает высоту 215 пикселей*/
overflow: hidden;/*остальной текст скрыть*/
}
.container .card h3{
color: #fff;/*цвет ...
- 54. css анимация падающих звезд
- CSS/CSS Основы
... margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
overflow: hidden;
}
section{
position: absolute;/*абсолютное позиционирование*/ ...
- 55. пишем расширение для браузера chrome для поиска по истории посещенных страниц
- JavaScript/JavaScript Скрипты
... table {
overflow-wrap: break-word;
table-layout: fixed; ...
- 56. изображения внутри треугольников
- CSS/CSS Основы
... width: 300px;/*ширина блока*/
height: 300px;/*высота блока*/
overflow: hidden;
margin: 0 -68px;
clip-path: polygon(50% 100%, 0 0, 100% 0);/*фигура ...
- 57. как сделать тень на css
- CSS/CSS Основы
... /* прячем область за блоками */
.shadow-block,
.shadow-block .sh-sl,
.shadow-block .sh-content {
overflow: hidden;
}
/* высота верхней и нижней рамки тени, а также углов */
.shadow-block ...
- 58. как вывести на страницу текущую дату на js
- JavaScript/JavaScript Основы
... text-align: center;
border-radius: 8px; / * скругление углов * /
overflow: hidden;
}
далее стилизуем каждый выводимый элемент.
.calendar ...
- 59. hover эффект для кнопки + псевдокласс :nth-child
- CSS/CSS3
... строчка кода в селекторе "a", не даст обеим надписям button выйти за пределы самой кнопки. все лишнее будет спрятано.
a {
overflow: hidden;
}
- 60. как сделать видео на сайте адаптивным
- HTML/HTML 5
... padding-bottom: 56.25%; // сохраняет пропорции
height: 0;
overflow: hidden;
display: block;
}
мы расположили iframe относительно ...
- 61. цифровая лупа на javascript
- JavaScript/JavaScript Скрипты
... background-position: 50% 50%;
position: relative;
width: 500px;
overflow: hidden;
cursor: zoom-in;
}
.zoomer img:hover {
/* ...
- 62. меню для мобильной версии сайта
- CSS/CSS3
... то иконка-гамбургер улетит на правую сторону браузера.
.nav-wrap {
overflow: hidden;
background-color: #5d4037;
position: relative;
}
по умолчанию, блок ...
- 63. модальное окно на css + js
- JavaScript/JavaScript Основы
... полупрозрачное затемнение */
z-index: 1; /* фон на нижнем слое */
overflow: auto; /* при необходимости, то появиться прокрутка */
}
модальное окно ...
- 64. меню аккордеон на js
- JavaScript/JavaScript Основы
... свойства максимальной высоты.
.panel {
..
max-height: 0;
overflow: hidden;
..
}
js код
объявим две переменные, первая переменная ...
- 65. как сделать таблицу адаптивной
- CSS/CSS3
... тега div перестанет влезать в текущую ширину экрана по оси x.
div (
overflow-x: auto;
)
стилизуем остальные теги таблицы:
table {
border-collapse: ...
- 66. адаптивное навигационное меню с иконками
- CSS/CSS3
... фона для тега <nav>.
nav {
width: 100%;
background-color: #673ab7;
overflow: auto;
}
стилизуем ссылки панели навигации, палитра рекомендует для ...
- 67. верстка сайта с нуля. верстка портфолио. часть 3
- HTML/HTML 5
... width: 19%;
margin: 0% 3%;
display: none;
float: left;
}
.portfolio-wrapper {
overflow:hidden;
position: relative;
cursor:pointer;
}
.portfolio img {
max-width:100%; ...
- 68. настройки стрелок у slick слайдера (часть 3)
- JavaScript/jQuery
... слайдера, контент (картинки), выходящий за её пределы.
.slick-list {
overflow: hidden;
}
зададим промежутки между слайдами и сделаем картинки адаптивными. ...
- 69. эффект увеличения картинки.
- CSS/CSS Основы
... wrapper. flexbox ftw.
.grid-wrapper {
display: flex;
flex-wrap: wrap;
height: $container-size;
overflow: hidden;
position: relative;
width: $container-size;
}
// here are the individual grid items—each ...
- 70. анимации модальных окон на javascript.
- JavaScript/JavaScript Скрипты
... переход, когда модальное окно исчезает
animationduration - длительность анимации
overflow - делает ваше модальное окно прокручивающимся или нет
работает ...
- 71. как выравнять по центру блок переменной ширины.
- CSS/CSS Основы
... </div>
</body>
</html>
теперь зададим стили.
#pagination ul {
margin: 0 auto;
overflow: hidden;
display: table;
}
#pagination ul li {
float: left;
border: 1px solid #ccc;
...
... margin: 0 0 20px 0;
background: rgba(215, 215, 215, 0.5);
border: 1px solid #ccc;
height: 65px;
overflow: hidden;
}
.slide-up-boxes h5 {
color: #333;
text-align: center;
height: 65px;
...
- 73. как сделать пролистывающийся текст на css3.
- CSS/CSS3
... translate(-100%,0);
}
}
.marquee {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
}
.marquee span {
display: inline-block;
padding-left: 100%;
animation: scroll 5s ...
- 74. красивые и эффектные слайдеры на jquery.
- JavaScript/jQuery
... 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;">
<div><img u="image" src="image1.jpg" /></div> ...
- 75. как прокрутить скролл у div до низа
- JavaScript/JavaScript Основы
... который необходим, чтобы появилась полоса прокрутки:
div {
height: 100px;
overflow: auto;
width: 200px;
}
теперь перейдём к прокрутке скролла у div. большинство ...
- 76. программистом может быть каждый
- JavaScript/JavaScript Основы
... ошибок, уже давно есть. вот список ресурсов, где следует поискать:
stackoverflow.com
toster.ru
чаты в telegram
сегодня как никогда популярен язык javascript, ...
- 77. эффект размытия и фокуса на css
- CSS/CSS Основы
... .section {
position: relative; // устанавливаем родителя
overflow: hidden;
width: 100%; // ширина секции
height: 100vh; // ...
- 78. рисуем капли воды с помощью css
- CSS/CSS Основы
... justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
background: #edeeed;
}
.drops{
position: relative;
display: ...
- 79. анимированный фон с parallax эффектом
- JavaScript/JavaScript Основы
... background: url(1.jpg) center no-repeat;
background-size: cover;
overflow: hidden;
}
установим размеры для картинок.
img {
max-width: ...
- 80. видеофон внутри текста на чистом css
- CSS/CSS Основы
... position: absolute;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: ...
- 81. эффект с текстом при движении мыши
- JavaScript/JavaScript Основы
... align-items: center;
min-height: 100vh;
background: #ffd600;
overflow: hidden;
}
наложение сверху блока summer
поверх текста ...
- 82. css эффект потери фокуса и наоборот
- CSS/CSS Основы
... секции * /
height: 100vh; / * картинка на всю высоту * /
overflow: hidden; / * скрывать переполненность * /
display: flex; / * отображать ...
- 83. как установить радио на сайт
- HTML/HTML Основы
... после этого вы получите примерно следующее:
<div align="center" style="max-height:250px; overflow:auto;">
<a href="http://radiopotok.ru/" id="rp_link">онлайн радио</a>
<script ...
- 84. css-эффект при наведении на меню
- CSS/CSS Основы
... left: 0;
width: 100%;
height: 100%;
overflow: hidden;
line-height: 100vh;
z-index: -1; /* поставить значения ...
- 85. как размыть фон под блоком, используя svg
- CSS/CSS Основы
... position: relative; /* относительное позиционирование */
overflow-y: scroll; /* разрешить вертикальную прокрутку */
}
body{
background: ...
- 86. анимированный блик у кнопки на чистом css
- CSS/CSS Основы
... позиционирование */
border-radius: 10px;/* радиус скругления углов*/
overflow: hidden;/* спрятать все лишнее за пределами кнопки*/
}
css оформление ...
- 87. как изменить курсор мыши на javascript
- JavaScript/JavaScript Основы
... 100vh;
cursor: none; / * скрываем настоящий курсор * /
overflow: hidden;
}
h2 {
font-family: impact;
font-size: 24px;
text-transform: ...
- 88. рисуем иконку пользователя на css
- CSS/CSS Основы
... родитель, относительно которого позиционированы псевдоэлементы
overflow: hidden; // скрывает дочерние элементы, выходящие за рамки контейнера ...
- 89. конвертация markdown в html c помощью python
- Python/Основы Python
... авторы документации широко используют markdown,
а веб-сайты, такие как github, stackoverflow и индекс пакетов python (pypi), поддерживают его.
в в данной статье мы установим ...
- 90. пример простого слайдера на javascript (#2)
- JavaScript/JavaScript Основы
... добавим в css стили всего одну строку.
.slider {
...
overflow: hidden;
}
язык javascript немного сложнее html/css, но если вы смогли ...
- 91. как прижать футер к низу страницы
- CSS/CSS Основы
... class="footer">footer bottom</footer>
</div>
пропишем css правила:
.container {
overflow: hidden;
display: flex;
flex-direction: column;
min-height: ...
- 92. верстаем админку на css grid
- HTML/HTML Основы
... .sidebar-menu {
background-color: #0e2438;
color: white;
overflow-y: auto;
scrollbar-color: red;
}
.sidebar-menu:hover .sidebar-menu__subitems { ...
... именно удаленной работы, вбиваете в поисковое поле location - слово remote.
stackoverflow jobs - на всем известном ресурсе есть раздел с вакансиями. снова пишем ...
- 94. угловая лента на css
- CSS/CSS Основы
... /* скрыть выступающую часть ленты за пределы бокса */
overflow: hidden;
}
посмотрите демо на codepen
лента в правом верхнем углу ...
- 95. три эффекта наведения на кнопку
- CSS/CSS Основы
... // скругление
padding: 0 40px; //поля внутри кнопки
overflow: hidden; // скрыть все что выходит за родителя
background: #ba7ba1; ...
- 96. создаем простой чат с использованием swoole php и javascript
- PHP/PHP Основы
... height: 300px;
overflow-y: scroll;
border: 1px solid #ccc; ...