Уроки и статьи
Подписка
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
Мой аккаунт
Моя группа
Опрос
Какая тема Вас интересует больше?
Бесплатный курс
Разработчик игр на Unreal Engine с нуля
Этот курс даст Вам пошаговый план для освоения профессии Unreal-разработчика. Следуя этому плану, Вы освоите профессию всего за 7 месяцев, занимаясь 1 час в день.
Также Вы узнаете, как сделать так, чтобы работодатели сами просили Вас устроиться к ним на работу.
Получите курс сейчас!
Чтобы получить Видеокурс,
заполните форму
Бесплатный онлайн-семинар
10 шагов к созданию своей Web-студии
После семинара:
- Вы узнаете главное отличие богатых от бедных.
- Вы увидите разоблачения множества мифов об успешности и о бизнесе.
- Вы получите свой личный финансовый план прямо на семинаре.
- Мы разберём 10 шагов к созданию своей успешной Web-студии.
- Я расскажу о своих личных историях: об успешных и неуспешных бизнесах. Это мой многолетний опыт, которым я поделюсь с Вами.
Умные цитаты
Мы лишаемся досуга, чтобы иметь досуг, и войну ведем, чтобы жить в мире.
Аристотель
Поиск: padding
Что искали: padding
Всего найдено: 340 записей
- 1. верстка email писем
- HTML/HTML Основы
... для html-тегов
обнуляем все отступы и рамки
<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0">
заменяем:
<div> на <table>
<margin> на <padding> ...
- 2. пишем форму авторизации на python tkinter
- Python/Основы Python
... font_entry = ('arial', 12)
label_font = ('arial', 11)
base_padding = {'padx': 10, 'pady': 8}
header_padding = {'padx': 10, 'pady': 12}
...
- 3. ошибки новичков при верстке сайтов #3
- CSS/CSS Основы
... переполненность контентом и использовать свойство min-height.
.box-info {
padding: 0 0 20px 0;
min-height: 150px;
}
дополнительный контент поломает ...
- 4. верстаем админку на css grid
- HTML/HTML Основы
... .dashboard-header {
background: #000;
color: #fff;
padding-left: 15px;
grid-column: span 2;
}
.dashboard-header__logo {
font-size: 1.2em; ...
- 5. эффект переворачивающейся карточки на css
- CSS/CSS Основы
... </body>
</html>
card.css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height: 100%;
font-family: "segoe ui", tahoma, geneva, verdana, sans-serif; ...
- 6. атрибуты cellpadding и cellspacing на css
- CSS/CSS Основы
... с той проблемой, что в html5 убрали атрибуты cellpadding и cellspacing. безусловно, имеется вариант указать cellpadding и cellspacing через css, о чём я сейчас и напишу. ...
- 7. пример верстки простой секции на css grid #3
- CSS/CSS Основы
... .section-brand {
background-color: #ededed; / * серый цвет фона * /
padding: 80px 0; / * отступы по бокам, сверху и снизу * /
}
.section-brand h2 {
font-size: ...
- 8. пример адаптивной верстки на bootstrap
- CSS/CSS Основы
... медиа-запросы.
@media (max-width: 768px) {
.app__title {
padding-top: 50px;
padding-bottom: 30px;
}
.app__list {
padding-bottom: 20px; ...
- 9. верстка формы обратной связи. часть 5
- HTML/HTML 5
... блока с информацией */
}
.cont-form{
padding-bottom: 25px; /* отступ снизу от формы блока */
}
.cont-form div{
padding: 5px 0 15px;
}
.cont-form input[type="text"],.cont-form input[type="email"],.cont-form ...
- 10. 10 полезных sass миксинов.
- CSS/CSS Основы
... $pseudo: false) {
$padding: unquote( ( $y / $x ) * 100 + '%' );
@if $pseudo {
&:before {
@include pseudo($pos: relative);
width: 100%;
padding-top: $padding;
...
- 11. создаем выпадающее боковое меню на html, css и javascript
- JavaScript/JavaScript Основы
... margin: 0;
padding: 0;
min-height: 100vh;
} ...
- 12. верстка прозрачной логин формы
- CSS/CSS Основы
... за это отвечает css-свойство cover.
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: url(bg_photo.jpg);
background-size: ...
- 13. препроцессор less, начиная с простого
- CSS/CSS Основы
... css, но вместо значений подставляем переменные.
less
div {
padding: 0;
font-family: roboto, sans-serif;
color: @black;
}
после ...
... привлекательность страницы.
body {
line-height: 1.5;
padding: 4em 1em;
}
h2 {
margin-top: 1em;
padding-top: 1em;
}
давайте применим более тонкие ...
- 15. адаптивная навигация на html и css
- HTML/HTML 5
...
height: 100%;
}
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
main { ...
- 16. создание простого списка дел (to-do list) на html, css и javascript
- JavaScript/JavaScript Основы
... margin: 0;
padding: 0;
}
.container { ...
- 17. дизайн и верстка страницы contact us. часть #2
- HTML/HTML Основы
... url('https://fonts.googleapis.com/css?family=poppins:200,300,400,500,600,700,800,900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif; ...
- 18. сквозное шифрование на python: руководство по реализации
- Python/Основы Python
... использованием публичного ключа:
from cryptography.hazmat.primitives.asymmetric import padding
from cryptography.hazmat.primitives import hashes
# сообщение для шифрования ...
- 19. как выделить блок текста на css
- CSS/CSS3
... background: linear-gradient(135deg, #f4e3f0 50%, #e2debe 50%);
color: #49152c;
padding: 30px 50px;
font-family: 'lato', sans-serif;
font-size: 20px; ...
- 20. nodejs. как создать "список дел". часть 1.
- JavaScript/JavaScript Основы
... 0 auto;
padding: 20px;
box-sizing: border-box;
}
#todo-table form:after{
margin: 0;
content: '';
display: block;
clear: both;
}
input[type="text"]{
width: 70%;
padding: 20px; ...
... который мы подключаем в шапке страницы, и пропишем следующее:
* { margin: 0; padding: 0; }
body { font: 14px georgia, serif; }
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: ...
- 22. верстка по сетке bootstrap (часть 2)
- CSS/CSS Основы
... отступы у картинки iphone */
.iphone-wrap{
padding: 40px 100px 5px 8px;
}
/* стили у текста карусели */
.text-wrap{
padding: 100px 0 80px 0;
color: #fff;
font-family: ...
- 23. перемещение placeholder над полем ввода при фокусе
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css2?family=poppins:wght@300;400;500;600;700;800;900&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'poppins', sans-serif;
}
body{
display: flex; ...
- 24. как сделать аккордион на чистом css3.
- CSS/CSS3
... понимания.
body {
margin: 0;
padding: 0;
}
.container {
width: 100%;
max-width: 400px;
margin: 50px auto;
}
.accordion {
width: 100%;
padding: 0;
margin: 0;
list-style-type: ...
- 25. пишем расширение для браузера chrome для поиска по истории посещенных страниц
- JavaScript/JavaScript Скрипты
... margin: 0 auto;
padding: 0 8px;
}
.row { ...
- 26. валидация формы на javascript
- JavaScript/JavaScript Основы
... margin: 0 0 20px;
}
.form {
padding: 30px 40px;
}
.form-control {
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.form-control label { ...
- 27. адаптивная контактная форма
- CSS/CSS3
... .container {
border-radius: 5px; /* скруглим углы */
background-color: #f8bbd0;
padding: 20px;
}
а зададим ширину у колонок, 25% будут занимать лейблы, а 75% – ...
- 28. анимация рамки на css
- CSS/CSS Основы
... css код
// отступы от края браузера
.container{
padding-top: 30px;
padding-bottom: 30px;
}
// фон и шрифт для всей страницы
body{
font-family: ...
- 29. горизонтальное выпадающее меню на css
- CSS/CSS Основы
... ul.menu {
display: inline-block;
margin: 0;
padding: 0;
}
ul.menu li {
float: left;
list-style: none;
}
ul.menu li a {
display: block;
padding: 8px 20px 10px;
text-decoration: none;
}
ul.menu ...
- 30. верстка сайта с нуля. трехколоночный макет. часть 4
- HTML/HTML 5
... секции "обо мне" */
text-align:center; /* позиционирование текста */
padding: 5em 0em; /* отступы для текста */
}
.wrap_about{
width: 90%; /* занимаемая ...
- 31. необычный эффект при наведении на карточку
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css?family=poppins:200,300,400,500,600,700,800,900');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
body{
display: ...
- 32. скрывающееся меню сайта на html и css
- HTML/HTML 5
... margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'open sans', sans-serif; ...
- 33. пишем информер погоды на react
- JavaScript/JavaScript Основы
... reactdom.render(<app />, document.getelementbyid('root'));
index.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'montseratt', sans-serif; ...
- 34. иконки для меню сайдбара
- CSS/CSS3
... top: 0;
left: 0;
background-color: #673ab7;
overflow-x: hidden;
padding-top: 16px; // отступ сверху окна браузера
}
стилизация текста меню и ...
- 35. выравнивание элементов формы на flex
- CSS/CSS3
... инпуту внутренние отступы.
.form__line {
padding: 8px;
}
.form__line > label {
padding: 8px 16px 8px 0;
}
.form__line > input {
padding: 8px;
...
- 36. верстка сайта с нуля. верстка портфолио. часть 3
- HTML/HTML 5
... color:#4d4d4d; /*цвет заголовка */
font-size: 2em; /*размер заголовка */
padding-bottom: 0.5em; /*поля под заголовком */
text-align: center; /*выравнивание заголовка ...
- 37. видео фон для сайта
- HTML/HTML Основы
... остальные свойства - чисто оформление.
* {
margin: 0;
padding: 0;
}
section {
color: white;
font-family: "source sans ...
- 38. вертикальный текст на css
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css2?family=poppins:wght@200;300;400;500;600;700;800;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif; ...
- 39. как создать to do list на чистом css (часть 1)
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css2?family=poppins:wght@200;300;400;500;600;700;800;900&display=swap');
*{
margin: 0; / * обнуление отступов * /
padding: 0; / * обнуление полей * /
font-family: 'poppins', sans-serif; / * название ...
- 40. фильтрация по первым буквам на jquery
- JavaScript/jQuery
... привлекательности с помощью css.
css код
section {
width: 320px;
margin: 20px auto;
padding: 10px;
border: 1px solid #ddd;
font-family: 'roboto slab', sans-serif;
}
#demoinput ...
- 41. коллекция css компонентов
- CSS/CSS Основы
... расположить по 4 карточки в одном ряду */
flex-basis: 25%;
padding-left: 8px; /* отступ слева от карточки */
padding-right: 8px; /* отступ справа от карточки */
">
...
</div> ...
- 42. как сделать текст в html (топ 10 запросов)
- HTML/HTML 5
... текста
за отступы текста отвечают свойства – margin и padding. margin отделяет абзацы друг от друга, а padding создает воздушное пространство, внутри абзаца. ...
- 43. защита страницы с помощью модального окна и пароля в javascript
- JavaScript/JavaScript Скрипты
... padding-top: 60px;
}
.modal-content {
background-color: #fefefe;
margin: 5% auto;
padding: 20px;
border: 1px solid #888; ...
- 44. всплывающее popup окно после нажатия на кнопку
- JavaScript/JavaScript Основы
... url('https://fonts.googleapis.com/css?family=poppins:100,200,300,400,500,600,700,800,900');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif; ...
- 45. примеры теней на css.
- CSS/CSS3
... background: #ccc;
margin: 0;
}
div {
background-color: #fff;
width: 400px;
height: 200px;
padding: 15px;
margin: 15px;
float: left;
}
.shadow {
box-shadow: 5px 5px rgba(150,150,150,.5);
}
...
- 46. красивое оформление html/css кода
- HTML/HTML Основы
... пробелами относительно названия этого селектора.
.header {
padding-top: 20px;
font-size: 15px;
background-color: #333333;
}
каждый ...
- 47. три эффекта наведения на кнопку
- CSS/CSS Основы
... кнопку слева.
.buttonleft {
border-radius: 5px; // скругление
padding: 0 40px; //поля внутри кнопки
overflow: hidden; // скрыть все что выходит ...
- 48. прозрачная панель навигации в css
- CSS/CSS3
... обозначает степень прозрачности.
height: 70px;
line-height: 70px;
background: rgba(255,255,255,0.3);
padding: 0 80px;
на скриншоте ниже мы видим, что список ul не находится внутри ...
- 49. css-эффект при наведении курсора на элемент списка
- CSS/CSS Основы
... поместим наш список в центре экрана.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif; ...
- 50. плавное подчеркивание ссылки при наведении
- CSS/CSS3
... подготовительных работ, прежде чем дойдем до hover эффекта. обнуляем margin и padding, чтобы для всех браузеров, значения этих свойств, были одинаковыми ...
- 51. вертикальное меню на css
- CSS/CSS3
... выбранного шрифт и задаем ему размер.
body {
margin: 0;
padding: 0;
font-family: 'marck script', sans-serif;
font-size: 20px; ...
- 52. чем отличается box-shadow от drop-shadow?
- CSS/CSS Основы
...
.container h2{
font-size: 5em;
line-height: 1em;
padding: 5px 20px;
}
.container .text1{
color: #fff;
border-radius: 20px;
box-shadow: ...
- 53. свойство transform-origin на примере
- CSS/CSS Основы
... меньше, чем у темного за счет паддингов.
.title {
padding-top: 30px;
padding-bottom: 20px;
text-decoration: underline;
}
.sticker_move {
display: ...
- 54. адаптивная форма обратной связи
- CSS/CSS3
... относительно которого и cпозиционируем заголовок с формой.
#newsletter{
padding:20px 0;
text-align:center;
}
сделаем заголовок более заметным, прежде ...
- 55. адаптивное мобильное меню для сайта (часть 1)
- JavaScript/JavaScript Основы
... центре по горизонтали
max-width: 1300px;
padding-top: 50px;
padding-left: 50px;
padding-right: 50px;
}
css для логотипа и ...
- 56. как сделать карточку товара на css
- CSS/CSS3
... обнулять марджины и паддинги, так мы берем их под контроль.
* {
padding: 0;
margin: 0;
}
это мой любимый способ выравнивания элементов ...
- 57. блок с функцией "read more" на javascript
- JavaScript/JavaScript Основы
... url('https://fonts.googleapis.com/css?family=poppins:200,300,400,500,600,700,800,900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif; ...
- 58. дизайн карточки на чистом css
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css?family=poppins:200,300,400,500,600,700,800,900&display=swap');
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;
font-family: ...
- 59. создаем вкладки на js (часть 1)
- JavaScript/JavaScript Скрипты
... .content .info {
width: 100%;
background-color: #000;
padding: 40px;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.8);
}
.content .header {
width: ...
- 60. как сделать купон на css
- CSS/CSS3
...
border-radius: 15px 15px 0 0; /* внизу два угла не закруглены */
}
.box {
padding: 2px 16px; /* поля от текста до бокса */
}
заголовок сделаем пожирнее, ...
- 61. как изменить шапку сайта (часть 1)
- CSS/CSS3
... верхних инфо-блоков */
.top-header {
display: flex;
justify-content: space-around;
padding: 5px;
font-size: 100%;
border-bottom: 1px solid #efd0d0;
position: relative;
}
...
- 62. как изменить шапку сайта (часть 2
- CSS/CSS3
... width: 15%;
align-items: center;
}
/* ссылки языкового меню */
nav .lang-menu a {
padding: 4px;
color: #000;
font-size: 90%;
font-weight: bold;
text-transform: ...
- 63. креативный дизайн блока на css
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css2?family=ubuntu:wght@300;400;500;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'ubuntu', sans-serif; ...
- 64. как сделать плавный якорь на jquery
- JavaScript/jQuery
... 0;
padding: 0;
}
/* размер шрифта для заголовков */
h1 {
font-size: 20px;
}
/* панель навигации */
.header {
padding: 20px 0;
width: ...
- 65. виды css селекторов
- CSS/CSS Основы
... href="#">ссылка #3</a>
// css стили
a:link {
display: block;
padding: 10px;
background-color: yellow;
color: #000;
}
a:visited {
background-color: ...
- 66. верстка прозрачной формы входа
- HTML/HTML 5
... бокса
border-radius: 5px;
размеры ширины бокса - width и полей - padding берем из макета.
width: 400px;
padding: 40px;
код ниже отвечает за местонахождение бокса ...
- 67. красивый эффект при наведении (:before и :after)
- CSS/CSS3
... надо между ними создать пространство.
делается это с помощью свойства padding и margin с неким числовым значением, которые не работает у строчных элементов, ...
- 68. свойство «float» на практике
- CSS/CSS3
... пикселях).
этот код надо разместить в тег <style>…</style>
<style>
aside {
padding: 0px 10px; /* отступы текста от верхней и нижней границы */
margin: 20px; /* ...
- 69. валидация email в форме с помощью js
- JavaScript/JavaScript Основы
... url('https://fonts.googleapis.com/css?family=poppins:300,300i,400,500,500,600,700,800,900&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'poppins', sans-serif;
}
body{
display: flex; ...
... margin: 0;
padding: 5px 8px;
list-style: none;
} ...
- 71. как создать аккордеон на js
- JavaScript/JavaScript Основы
... url("https://fonts.googleapis.com/css?family=poppins:200,300,400,500,600,700,800,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", sans-serif;
}
body ...
- 72. шина событий (eventbus) в javascipt
- JavaScript/JavaScript Основы
... margin: 0;
padding: 0;
min-height: 100%;
} ...
- 73. выпадающий мультиселект на html, css и javascript
- HTML/HTML Основы
... padding: 10px;
cursor: pointer;
}
.section-body {
display: none;
padding: 10px; ...
- 74. всплывающее окно. pop-up на jquery.
- JavaScript/jQuery
... text-align: center;
}
/* стили для нашей кнопки */
button {
border-radius: 5px;
padding: 15px 25px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: ...
- 75. как сделать слияние полей у формы поиска
- CSS/CSS Основы
... в центре
* {
margin: 0; / * обнуление отступов * /
padding: 0; / * обнуление полей * /
font-family: "poppins", sans-serif; / * название ...
- 76. работа с data атрибутами в html/css/js
- JavaScript/JavaScript Основы
... font-size: 30px;
padding: 20px;
}
// селектор по тегу и названию
div [data-size="large"] {
font-size: 30px;
padding: 20px;
}
// селектор по ...
- 77. как использовать свойство «float» в css
- CSS/CSS3
... none; /* убираем маркеры */
margin: 0; /* обнуляем внешние отступы */
padding: 0; /* обнуляем внутренние отступы */
overflow: hidden; /* обрезает лишний ...
- 78. css-эффекты. градиентная рамка у блока
- CSS/CSS Основы
... выровняли их по центру экрана.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: inconsolata;
}
body {
display: ...
- 79. создание простейшего калькулятора на js
- JavaScript/JavaScript Основы
... чтобы им было удобно пользоваться.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: consolas;
}
body{
display: ...
- 80. как сделать выпадающий блок на чистом css?
- CSS/CSS Основы
... .toggler {
padding: 5px;
}
/* стили для заголовка блока, при нажатии на который появляется дополнительный блок */ ...
- 81. верстка формы + скрипт выбора даты
- CSS/CSS3
... маржинов на размеры элементов (border-box).
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
максимальная ...
- 82. счетчик символов в реальном времени на js
- JavaScript/JavaScript Основы
... url("https://fonts.googleapis.com/css?family=poppins:200,300,400,500,600,700,800,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", sans-serif;
}
body ...
- 83. создание движка на mvc. выводим страницы. часть 2.
- PHP/PHP Основы
... файл default.css.
body {
background: silver;
}
#header {
padding: 20px;
background: gold;
}
#content {
background: #fff;
padding: 20px;
}
#footer {
background: green;
padding: 20px;
...
- 84. адаптивное меню на css flexbox
- CSS/CSS3
... экранов. обратите внимание, как мало написано кода.
*{
margin: 0;
padding: 0;
}
body {
background-color: #fff;
font-family: "open sans", sans serif;
line-height: ...
- 85. пример верстки блог-секции на css grid #5
- CSS/CSS Основы
... специально созданный класс с данным свойством.
.section-blog {
padding: 80px 0; / * отступы внутри секции * /
}
.container {
display: grid;
max-width: ...
- 86. как сделать кнопку для плавного прокручивания страницы наверх?
- JavaScript/JavaScript Основы
... .content {
height: 2000px; /* длинный контент */
padding: 20px;
}
/* стиль кнопки "наверх" */
.scroll-top-btn {
position: fixed; ...
- 87. верстка формы входа (часть 2)
- CSS/CSS3
...
.form__login {
width: 90%;
border-radius: 25px;
padding: 0 20px;
background-color: #fff;
border: solid 1px rgba(255, 255, 255, ...
- 88. параллакс эффект на чистом css
- CSS/CSS Основы
... помощью 3d.
body {
margin: 0; /* обнуление полей */
padding: 0; /* обнуление отступов */
perspective: 1px;/* задание перспективы ...
- 89. автоматически загружаемый popup после загрузки страницы (часть #1)
- JavaScript/JavaScript Основы
... url('https://fonts.googleapis.com/css2?family=poppins:wght@200;300;400;500;600;700;800;900&display=swap');
*{
margin: 0; / * обнуление отступов * /
padding: 0; / * обнуление полей * /
box-sizing: border-box; / * ничто не влияет ...
- 90. показать скрытый текст на js
- JavaScript/JavaScript Основы
... background: #f2eaea;
margin: 0 auto;
max-width: 600px;
padding: 20px;
}
#btn {
background: #2196f3;
border: none;
font-size: ...
- 91. плавающая кнопка на reactjs
- JavaScript/JavaScript Основы
... color: rgb(255, 255, 255);
font-size: 2.5rem;
padding-bottom: 6px;
padding-left: 1px;
cursor: pointer;
/** ...
- 92. адаптивная таблица для мобильных устройств
- CSS/CSS3
...
.container {
min-width: 320px;
max-width: 100%;
padding: 0 15px;
box-sizing: border-box;
}
table {
border-collapse: collapse; ...
- 93. показ случайной цитаты в javascript
- JavaScript/JavaScript Скрипты
... стили для цитат
#random-phrase {
margin: 1px auto;
position: absolute;
padding: 15px;
font-size: 1.3em;
font-style: italic;
border: 1px solid #ddd; ...
- 94. уменьшение фоновой картинки при скролле страницы
- JavaScript/JavaScript Основы
... url('https://fonts.googleapis.com/css?family=poppins:300,400,500,600,700&display=swap');
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;/*реальная ширина элемента*/ ...
- 95. php класс-валидатор формы
- PHP/PHP Основы
... border:1px solid #dee;
padding: 10px;
width: 300px;
background: #fff; ...
- 96. верстка по бэм методологии
- HTML/HTML 5
... padding: 0 15px;
margin: 0 auto;
}
.stat {
display: flex;
flex-wrap: wrap;
}
.stat__item {
width: 20%;
padding: 60px ...
- 97. красивое оформление статьи на html
- HTML/HTML 5
... фокус читателя с текста.
blockquote {
margin: 20px 0;
padding-left: 20px;
border-left: 5px solid #ee6e73;
font-style: italic;
line-height: ...
- 98. верстка сайта по psd макету (часть 3)
- HTML/HTML 5
...
css код целиком
body {
font-family: playfairdisplay-regular;
margin: 0;
padding: 0;
}
.clear {
clear: both; /* отменяет обтекание элемента одновременно ...
- 99. изменение css классов через javascript
- JavaScript/JavaScript Основы
... font-weight: 200;
font-family: sans-serif;
text-align: center;
padding: 10px;
}
.green {
color:greenyellow;
}
изменение класса
все ...
- 100. делаем спиннер на html-css
- HTML/HTML Основы
... margin: 0;
padding: 0;
display: flex;
flex-direction: column; ...
- 101. адаптивное боковое навигационное меню
- JavaScript/JavaScript Основы
... url("https://fonts.googleapis.com/css2?family=poppins:wght@200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", sans-serif;
}
body ...
- 102. модальное окно на js
- JavaScript/JavaScript Основы
... height: 60px;
background-color: #c6cfff;
color: white;
padding: 12px 16px;
font-size: 16px;
font-weight: bold;
border: ...
- 103. вставка видео в видеоплеер (html+css)
- HTML/HTML Основы
... поля и отступы для всех элементов
*{
margin: 0;
padding: 0;
}
сделаем изображение tv адаптивным.
img{
max-width: ...
- 104. выноски в стиле комиксов
- CSS/CSS Основы
... #960ccc;
border-radius: 30px;
font-family: sans-serif;
padding: 20px; /* поле между текстом и рамкой */
font-size: 18px;
}
зададим ...
- 105. вcплывающее окно на чистом css
- CSS/CSS Основы
... border-radius: 15px; /* закругляем углы */
background-color: rebeccapurple;
padding: 28px;
text-transform: uppercase;
color: white; /* цвет текста ...
- 106. пример адаптивной верстки на flexbox (#1)
- CSS/CSS Основы
... max-width: 32%;
background-color: white;
margin-left: 3%;
padding: 2%;
}
чтобы заданные паддинги и маржины не влияли на ширину элементов, ...
- 107. фильтр категорий товаров на javascript (часть 1)
- JavaScript/JavaScript Основы
... отступов и полей для всех элементов
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
на страницах некоторые свойства ...
- 108. css3 свойство box-sizing
- CSS/CSS3
... .content-box {
box-sizing: content-box;
margin: 30px;
padding: 20px;
width: 200px;
height: 200px;
background-color: ...
- 109. как сделать спойлер на сайте
- JavaScript/JavaScript Основы
... спойлера
body {
max-width: 600px;
margin: 0 auto;
padding: 50px 15px;
font-family: sans-serif;
font-size: 1rem;
font-weight: ...
- 110. показать и скрыть элемент на js
- JavaScript/JavaScript Основы
... text-decoration: none;
text-align: center;
width: 250px;
padding: 20px 0;
border: solid 1px #004f72;
border-radius: 4px;
font: ...
- 111. эффект раскрытия обложки при наведении курсора
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css?family=roboto:300,400,500,700,900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'roboto', sans-serif; ...
- 112. плавный переход. css свойство transition
- CSS/CSS Основы
... padding: 15px;
background-color: #4d1d49;
}
a {
width: 100px;
border: 1px solid #fff;
border-radius: 10px;
padding: 8px ...
- 113. css свойство position: sticky
- CSS/CSS3
... left: 0;
background-color: #9b59b6;
color: #fff;
padding: 10px;
}
.sticky-second {
position: sticky;
top: 0;
left: ...
- 114. как сделать вкладки на чистом css
- CSS/CSS Основы
... сверху, ограничим ее по ширине и расположим по середине.
.wrap {
padding: 40px 0;
max-width: 900px;
margin: 0 auto;
}
сделаем ...
- 115. настройки стрелок у slick слайдера (часть 3)
- JavaScript/jQuery
... между слайдами и сделаем картинки адаптивными.
.slider__item {
padding: 0px 15px;
}
.slider__item img{
max-width: 100%;
}
4) настройка стрелок ...
- 116. расширяемое поле для поиска на javascript
- JavaScript/JavaScript Основы
... url('https://fonts.googleapis.com/css?family=poppins:200,300,400,500,600,700,800,900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif; ...
- 117. верстка таблицы (scss + flexbox)
- CSS/CSS Основы
... </section>
в секции задаются внутренние отступы.
.section {
padding: 100px 0;
}
внешний контейнер ограничивает всю конcтрукцию по ширине ...
- 118. адаптивная верстка на flex (часть 2)
- CSS/CSS Основы
... для всех элементов поля и отступы.
* {
margin: 0;
padding: 0;
}
зададим для контейнера максимальную и минимальную ширину. ...
- 119. красивый hover эффект для блока
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css?family=poppins:100,200,300,400,500');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif; ...
- 120. как вывести на страницу текущую дату на js
- JavaScript/JavaScript Основы
... url('https://fonts.googleapis.com/css2?family=poppins:wght@200;300;400;500;600;700;800;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif; ...
- 121. пример верстки формы на css grid #4
- CSS/CSS Основы
... формы встали в один ряд и имеют одинаковую ширину.
.form_section {
padding: 30px 0; / * отступы сверху и снизу * /
background-color: #96532c; / * цвет ...
- 122. автоматически загружаемый popup после загрузки страницы (часть #2)
- JavaScript/JavaScript Основы
... text-align: center;
padding: 20px;
padding-top: 0;
}
.close{
top: ...
- 123. адаптивное меню гамбургер
- JavaScript/jQuery
... списка меню */
ul {
list-style: none; /* убрать маркеры */
padding: 0;
margin-top: 60px;
height: 100vh; /* блок занимает всю ...
- 124. как вставить видео на html сайт
- HTML/HTML 5
... bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #fаа;
width: 100%;
padding: 15px;
z-index: 2;
}
свойство object-fit
в случае, если видеофон не отображается ...
- 125. как сделать поиск по сайту на html
- CSS/CSS3
... стилизуем поле для поиска внутри панели навигации.
nav input[type=text] {
padding: 5px;
margin-top: 7px;
border: none;
}
стилизуем кнопку отправить ...
- 126. меню для мобильной версии сайта
- CSS/CSS3
... для ссылок блока навигационного меню.
.nav-wrap a {
color: #fff;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
расположим ...
- 127. имитация клавиш у клавиатуры на css
- CSS/CSS Основы
... в клавишу.
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;
font-family: ...
- 128. создаем excel-подобный файл с помощью python
- Python/Основы Python
... html_content += f' <th style="border: 1px solid black; padding: 4px;">{key}</th>\n'
html_content += ' </tr>\n'
# создание строк данных таблицы ...
- 129. свойство css3 - box-sizing.
- CSS/CSS3
... немного внутренних отступов и рамку.
.block {
width: 70px;
height: 70px;
padding: 10px;
border: 1px solid green;
}
что мы имеем теперь: блок у нас стал по ширине ...
- 130. дизайн и верстка страницы contact us. часть #3
- HTML/HTML Основы
...
google карта
карта должна занять весь блок на 100%.
.map{
padding: 0;
}
.map iframe {
width: 100%;
height: 100%;
border: ...
- 131. как сделать фиксированное меню
- CSS/CSS3
... background-color: #c2185b;
}
ссылки-пункты для меню.
.nav a {
float: left;
padding: 12px 14px;
display: block;
color: #fff;
font-size: 18px;
}
поменяем ...
- 132. красиво оформленная секция с услугами
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css2?family=ubuntu:wght@300;400;500;700&display=swap');
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;
font-family: ...
- 133. как сделать выпадающий список с красивым эффектом на css и jquery.
- JavaScript/jQuery
... #35414a;
$semilight: #86919a;
$blue: #5aafee;
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
@font-face {
font-family: pfs-bold;
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/pfsquaresanspro-bold.otf'); ...
- 134. создаём сокращатель url. часть 1.
- PHP/PHP Основы
... padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
margin: 0;
}
input[type="url"] {
width: 300px;
}
input[type="url"]:focus {
border: 1px solid blue;
}
input[type="submit"] {
padding: ...
- 135. как сделать alert кнопку в css
- CSS/CSS3
... border: none; /* убирает рамки */
color: #fff; /* цвет текста на кнопке */
padding: 12px 26px; /* добавляет некоторые отступы */
cursor: pointer; /* добавляет ...
- 136. простой footer у веб-сайта
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css?family=poppins:200,300,400,500,600,700,800,900&display=swap');
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;/*метод расчета размеров ...
- 137. css эффект при наведении на ссылку
- CSS/CSS3
... стилизация класса container
зададим отступы со всех сторон от края браузера.
padding: 2.1em;
содержимое контейнера (меню навигации) выравниваем по центру. ...
- 138. эффект многослойности при наведении на карточку
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css?family=poppins:200,300,400,500,600,700,800,900');
body{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
display: flex;/*флексбокс сетка*/
justify-content: ...
- 139. полупрозрачный текст на фоне в css
- CSS/CSS3
... обнуляем поля и отступы одновременно у body и h1.
body, h1 {
margin: 0;
padding: 0;
font-family: 'alegreya sans sc', sans-serif;
}
я не зря выше упомянул, ...
- 140. выпадающее меню выбора с использованием javascript
- JavaScript/JavaScript Скрипты
... url('https://fonts.googleapis.com/css?family=poppins:100,200,300,400,500,600,700,800,900');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif; ...
- 141. выдвигающаяся форма поиска по клику
- JavaScript/jQuery
... transition делает это плавно.
.wrap.active{
width: 240px;
padding-left: 18px;
transition: all 0.6s ease;
}
поле ввода в активном состоянии ...
- 142. создание изображения по тексту на html canvas
- JavaScript/JavaScript Скрипты
... input[type="text"] {
padding: 8px;
font-size: 16px;
margin-right: 10px; ...
- 143. адаптивная верстка на flex css
- CSS/CSS3
...
}
section #item {
width: 28%;
text-align: center;
padding: 15px;
}
#item img {
max-width: 100%;
}
#item h2 {
font-weight: 600; ...
- 144. как добавить эффект перехода аккордеону на чистом css3.
- CSS/CSS3
... изменим стили
.accordion-content {
padding: 0;
height: 0;
overflow: hidden;
transition: height 400ms ease;
}
.accordion-conent:target {
height: 150px;
padding: 20px;
overflow-y: scroll;
}
...
- 145. всплывающее окно popup на jquery (часть 1)
- JavaScript/jQuery
... бокса */
margin: 15% auto; /* 15% отступа сверху и снизу окна браузера */
padding: 15px; /* поля между краем бокса и контентом */
border: 1px solid #888;
width: ...
- 146. рейтинг со смайликами на чистом css
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css?family=poppins:200,300,400,500,600,700,800,900&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'poppins', sans-serif;
}
body{
display: flex;/*подключение ...
- 147. закруглённые углы через css
- CSS/CSS Основы
... bottom right no-repeat;
}
.roundborder div div div div {
background: url(../images/b-l.png) bottom left no-repeat;
padding: 20px;
}
по названию картинок, думаю, что их назначение понятно, однако, ...
- 148. material design: современный подход к дизайну интерфейсов
- HTML/HTML 5
... box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.card-header {
padding: 16px;
background-color: #2196f3;
color: white;
}
.card-body {
padding: 16px;
}
.material-icons {
margin-right: 8px; ...
- 149. верстка по сетке bootstrap (часть 1)
- CSS/CSS Основы
... юникода.
/* обертка для навигационной панели */
.top-menu {
padding: 5px;
background: #fff;
}
/* обертка для логотипа */
.logo-wrap {
font-family: ...
- 150. текст, обтекающий картинку нестандартной формы
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css?family=poppins:400,500,600,700,800&display=swap');
*{
margin: 0; / * обнуление отступов * /
padding: 0; / * обнуление полей * /
box-sizing: border-box; / * на ширину блоков ...
- 151. подменю на css
- CSS/CSS Основы
... list-style: none;
margin: 0;
padding: 0;
width: 100px;
}
ul li {
position: relative;
}
ul li a {
display: block;
border: 1px solid #000;
border-bottom: 1px;
padding: 5px;
text-decoration: ...
- 152. mobile first верстка
- JavaScript/jQuery
... выравнивание ссылок по вертикали */
font-size: 16px;
padding: 0 10px;
justify-content: space-around; /* равномерное распределение ссылок ...
- 153. стилизация select на javascript
- JavaScript/JavaScript Основы
... .select {
background-color: #0ee;
border-radius: 10px;
padding: 10px 0;
width: 200px;
}
.select p {
cursor: pointer;
margin: 0;
padding: 5px 20px;
}
.select p.active {
background-color: #ee0;
...
- 154. верстка кнопок на сайте
- HTML/HTML 5
... строчно-блочный */
margin: 100px 400px; /* отступы от края браузера */
padding: 20px 60px; /* расстояние от текста до края кнопки */
background-color: #e44b9b; ...
- 155. верстка портфолио на flexbox (часть 1)
- CSS/CSS3
... отступы.
<section class="section"></section>
/* секция портфолио */
.section {
padding: 80px 0;/* отступы сверху и снизу */
}
у всей секции имеются общие стили. ...
- 156. разница между class и id на примере тега div
- CSS/CSS Основы
... #content {
padding: 20px;
font-size: 20px;
color: black;
background: #ddd;
border: 1px solid black;
width: 250px;
}
/* (.) перед именем обозначает class */.content {
padding: 20px; ...
- 157. стоит ли использовать css reset
- CSS/CSS Основы
... td {
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, ...
- 158. верстка сайта с нуля. меню навигации. часть 1.
- HTML/HTML 5
... auto;
width: 70%; /* отступы относительно окна браузера */
}
.header{
padding: 1.3em 0em; /* поля вокруг текста */
}
.logo{
float: left; /* обтекание логотипа ...
- 159. верстка сайта с нуля. верстка портфолио. часть 2
- HTML/HTML 5
... background: url(images/articles/html_coding_banner.jpg) no-repeat;
background-size: 100% 100%;
}
.mops_text {
padding: 20% 0%;
}
.mops_text h2 {
color: #fff;
font-size: 2.9em;
font-weight: 600;
z-index: ...
- 160. кнопка-перевертыш с 3d-эффектом
- CSS/CSS Основы
... позиционирования кнопки.
body{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
display: flex;/*flexbox сетка*/
justify-content: ...
- 161. делаем вместе анимированное выпадающее меню на css3
- CSS/CSS3
... отступы, так как разные браузеры отображают их по своему.
#nav *{
padding: 0;
margin: 0;
}
/* отступ от края 150 пикселей */
header{
...
- 162. пример @keyframes css анимации
- CSS/CSS Основы
... центре экрана.
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;/*только актуальная ...
- 163. движение фоновой картинки внутри рамки
- CSS/CSS Основы
... для планеты.
* {
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;/* ширина элемента без ...
- 164. трансформация сложенных карточек на css
- CSS/CSS Основы
... 0.5s;/*плавность действий*/
transition-delay: 0s;/*задержка*/
padding: 25px;/*поля вокруг текста*/
text-align: center;/*текст в центре*/ ...
- 165. эффект светящегося блока на css
- CSS/CSS Основы
... align-items: center;
height: 100%;
padding-top:100px;
}
.box {
width: var(--box-width); ...
- 166. креативная css анимация масштабирования
- CSS/CSS Основы
... url("https://fonts.googleapis.com/css?family=poppins:200,300,400,500,600,700,800,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", sans-serif;
}
body ...
- 167. создание интерактивного информационного окна на веб-странице с помощью javascript
- JavaScript/JavaScript Скрипты
... infobox.textcontent = `наведен элемент с тегом: ${tagname}`;
infobox.style.position = 'fixed';
infobox.style.padding = '10px';
infobox.style.backgroundcolor = 'white';
infobox.style.border = '1px solid black'; ...
- 168. эффект расширяющегося облака на css
- CSS/CSS3
... <div class="cloud"></div> <!-- этот div представляет изображение облака -->
</body>
</html>
css
body {
margin: 0;
padding: 0;
height: 100vh;
background: linear-gradient(to bottom, #87ceeb, #1e90ff); /* градиент от голубого к более темному синему */ ...
- 169. пишем конвертер yaml в json c графическим интерфейсом на python
- Python/Основы Python
... self.convertbutton = qpushbutton("конвертировать")
self.convertbutton.setstylesheet("padding: 3px 5px")
self.convertbutton.setcursor(qcursor(qt.pointinghandcursor)) ...
- 170. креативный эффект при наведении на изображения. часть 2
- CSS/CSS Основы
... width: 70%; /*занимаемая ширина контента от ширины контейнера*/
padding: 20px;/*поля между текстом и краями белого блока*/
background: ...
- 171. простой слайдер на javascript
- JavaScript/JavaScript Основы
... color: white;
padding: 10px;
cursor: pointer;
} ...
... body { margin: 0; font-family: sans-serif; }
header { background: #f4f4f4; padding: 1em; }
</style>
4. избегайте асинхронной подгрузки css без нужды ...
- 173. перемешивание и печать списка вопросов с помощью html и javascript
- JavaScript/JavaScript Основы
... list-style-type: none;
padding: 0;
}
/* стили для элементов списка */ ...
- 174. анимация с пузырьками на javascript
- JavaScript/JavaScript Основы
... <h2>bubbles</h2>
</section>
// css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: consolas;
}
body{
overflow: ...
- 175. эффект скользящего индикатора на js
- JavaScript/JavaScript Основы
... url("https://fonts.googleapis.com/css?family=roboto:400,400i,700");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: roboto;
}
body {
display: ...
- 176. кастомизация иконок fontawesome
- CSS/CSS Основы
... позиционирование иконок в центре экрана
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: ...
- 177. javascript анимация на фоне
- JavaScript/JavaScript Основы
... <h2>background animation</h2>
</section>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: consolas;
}
body{
overflow: ...
- 178. создаем простой чат с использованием swoole php и javascript
- PHP/PHP Основы
... border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
} ...
- 179. генератор резюме на html и js
- HTML/HTML 5
... margin: 0;
padding: 20px;
}
.container { ...
- 180. креативный эффект при наведении на изображения. часть 1
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css2?family=quicksand:wght@300;400;500;600;700&display=swap');
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;/*без учета рамок*/
font-family: ...
- 181. генератор изображений с текстом на javascript
- JavaScript/JavaScript Скрипты
... height: 0;
padding-bottom: 56.25%;
}
#canvas { ...
- 182. создание шаблона пагинации на html, css и javascript
- HTML/HTML 5
... .pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s; ...
- 183. пример использования css переменных для анимации
- CSS/CSS Основы
... (фон, позиционирование, размеры).
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: ...
- 184. вставка изображения на страницу из буфера обмена на javascript
- JavaScript/JavaScript Основы
... body {
padding-top: 10px;
height: 100vh;
text-align: center; ...
- 185. эффект стирания верхнего слоя на javascript
- JavaScript/JavaScript Основы
... html разметка
<body></body>
// css код
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100vh;
overflow: ...
- 186. отображение данных json с помощью flask в html
- Python/Основы Python
... border: 1px solid #ddd;
padding: 8px;
text-align: left;
} ...
- 187. как сделать закругленную шапку сайта
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css2?family=quicksand:wght@300;400;500;600;700&display=swap');
*{
margin: 0; /*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box; /*размеры блоков не ...
- 188. изменение внешнего вида курсора при наведении
- JavaScript/JavaScript Основы
... url('https://fonts.googleapis.com/css2?family=quicksand:wght@300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'quicksand', sans-serif; ...
- 189. как сохранить данные из html contenteditable на сервере в php?
- PHP/PHP Основы
... <div id="formatted_input" contenteditable style="border:solid 1px gray;padding:1em;width:100%;min-height:2em;"></div>
<!-- скрытое поле, которое будет содержать текст из блока выше --> ...
- 190. как сменить фон при наведении на ссылку меню
- JavaScript/JavaScript Основы
... url('https://fonts.googleapis.com/css?family=poppins:200,300,400,500,600,700,800,900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif; ...
- 191. практический пример использования функции attr в css
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css2?family=poppins:wght@700&display=swap');
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;/*чистая ширина блоков*/ ...
- 192. многослойный круг на градиентах и тенях
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css?family=poppins:200,300,400,500,600,700,800,900&display=swap');
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;/*размер бокса без учета ...
- 193. имитация праздничной ленты на карточке
- CSS/CSS Основы
... <i></i>
</div>
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;/*способ вычисления ...
- 194. проект на flask и jinja
- Python/Основы Python
... .container {
max-width: 500px;
padding-top: 100px;
}
</style>
</head> ...
- 195. изображения внутри треугольников
- CSS/CSS Основы
... центр страницы.
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;/*метод расчета размеров ...
- 196. анимация для меню с индикатором. часть #1
- JavaScript/JavaScript Основы
... url('https://fonts.googleapis.com/css2?family=ubuntu:wght@300;400;500;700&display=swap');
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;/*поля и рамки не влияют ...
- 197. фигуры с hover-эффектом из сериала "игра в кальмара"
- CSS/CSS Основы
... class="card"></div>
</div>
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;
}
.container{
position: ...
- 198. человек с потрескавшейся кожей на чистом css
- CSS/CSS Основы
... изображений.
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;/*чистый размер блока*/ ...
- 199. эффект рваной бумаги вокруг картинки
- CSS/CSS Основы
... ...
</section>
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;/*рамки и поля не влияют ...
- 200. эффект бегущей волны на чистом css
- CSS/CSS Основы
... class="wavy"></div>
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;/*не учитывать рамки*/ ...
- 201. чтение текстовых данных из буфера обмена в python pyside 6
- Python/Основы Python
... self.convertbutton = qpushbutton("буфер обмена")
self.convertbutton.setstylesheet("padding: 3px 5px")
self.convertbutton.setcursor(qcursor(qt.pointinghandcursor)) ...
- 202. анимированный текст по кругу на javascript
- JavaScript/JavaScript Основы
... </div>
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;/*ширина элемента включает ...
- 203. стильная кнопка при наведении (графика + css)
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css?family=poppins:200,300,400,500,600,700,800,900&display=swap');
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;
font-family: ...
- 204. css эффект пикселизации изображения
- CSS/CSS Основы
... src="female_pixel.jpg">
</div>
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;
}
body{
display: ...
- 205. креативная трансформация радиокнопок
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css2?family=ubuntu:wght@300;400;500;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'ubuntu', sans-serif; ...
- 206. необычный эффект наведения для дизайна веб-сайтов
- CSS/CSS Основы
... </div>
</div>
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;/*включение границ и ...
- 207. креативный css hover-эффект для меню навигации
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css2?family=poppins:wght@200;300;400;500;600;700;800;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif; ...
- 208. имитация печатной машинки при наведении на текст
- CSS/CSS Основы
... навигации.
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
font-family: consolas;/*шрифт*/
}
body{
display: ...
- 209. креативный кастомный чекбокс на css
- CSS/CSS Основы
... </span>
</label>
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;
font-family: ...
- 210. css анимация падающих звезд
- CSS/CSS Основы
... <span></span>
</section>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
overflow: hidden;
}
section{
...
- 211. css анимация секции с эффектом волны
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css?family=poppins:200,300,400,500,600,700,800,900&display=swap');
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;/*чистая ширина*/
font-family: ...
- 212. анимированное круговое меню на javascript
- JavaScript/JavaScript Основы
... элементы контейнера встали в один ряд.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;/*гибкий контейнер*/ ...
- 213. верстаем карточку с эффектом раскрывающейся шторки при наведении на css
- CSS/CSS Основы
... color: black;
padding: 40px;
}
h1 { ...
- 214. как сделать чашку с блюдцем на css
- CSS/CSS Основы
... </div>
</div>
//css стили
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: ...
- 215. имитация пара над чашкой с горячим чаем
- CSS/CSS Основы
... flex;/*технология flexbox*/
z-index: 1;/*показывать на верхнем слое*/
padding: 0 20px;/*отступ снизу*/
}
.vapour span{
position: relative;/*абсолютное ...
- 216. пользовательский чекбокс на javascript
- JavaScript/JavaScript Основы
... код
стилизуем основу чекбокса.
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #dcdcdc;
}
.checkbox{
position: ...
- 217. анимированный неоновый текст на css
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css2?family=monseratt:wght@600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'monseratt', sans-serif; ...
- 218. компонент "пользователь пишет сообщение" на чистом css
- CSS/CSS Основы
... width: 64px;
padding: 0 8px;
display: flex;
align-items: center; ...
- 219. анимация светящегося куба (3d эффект)
- CSS/CSS Основы
... вертикальное вращение.
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;
}
body {
display: ...
- 220. имитация капель дождя с помощью rainyday.js
- JavaScript/JavaScript Основы
... окно на всю ширину и высоту экрана.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
section{
position: relative;
width: ...
- 221. полупрозрачный дизайн для бизнес карты
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css?family=poppins:100,200,300,400,500,600,700,800,900');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif; ...
- 222. как расположить картинку внутри силуэта
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css2?family=poppins:wght@300;400;500;600;700;800;900&display=swap');
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;/*не учитывать ширину ...
- 223. пример использования css функций var() и calc()
- CSS/CSS Основы
... <h3>loading</h3>
</div>
</section>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: consolas;
}
section{
display: ...
- 224. как сделать текст по кругу на javascript
- JavaScript/JavaScript Основы
... url('https://fonts.googleapis.com/css?family=roboto:300,400,500,700,900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'roboto', sans-serif; ...
- 225. анимированный переключатель меню на javascript
- JavaScript/JavaScript Основы
... <span></span>
</div>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;/*сетка flexbox*/ ...
- 226. портрет с текстовым эффектом
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css?family=poppins:200,300,400,500,600,700,800,900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
section {
height: ...
... разместим лоадер в центре страницы.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
section{
display: flex;/*включение ...
- 228. замена картинки с искажением при наведении
- CSS/CSS Основы
... фоне пшеницы.
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;/*правило расчета размеров ...
- 229. эффект многослойного текста
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css?family=poppins:300,400,500,600,700,800,900&display=swap');
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
font-family: 'poppins', sans-serif;/*семейство ...
- 230. управление состоянием в android с помощью livedata и viewmodel
- Android/Основы Android
... android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp"
tools:context=".mainactivity">
<textview
android:id="@+id/textview" ...
- 231. получение координат курсора мыши на js
- JavaScript/JavaScript Основы
... отступ сверху и горизонтальное выравнивание по центру */
padding: 10px; /* поля вокруг, чтобы текст не прилипал к рамке */
font-size: ...
- 232. рисуем капли воды с помощью css
- CSS/CSS Основы
... class="drop"></div>
</div>
/ * css код * /
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: ...
- 233. html шаблон для портфолио
- HTML/HTML 5
... колонками у блоков с указанными классами.
.row,
.row > .column {
padding: 8px;
}
правило, расположения четырех столбцов: каждый занимает 25% ...
- 234. псевдоэлементы after и before. примеры
- CSS/CSS Основы
...
шаг 6
задаем стили для иконочного шрифта.
li:before {
font-family: fa;
padding-right: 5px;
}
.bitcoin:before {
content: "\f15a";
}
.dollar:before {
content: "\f155";
}
.euro:before { ...
- 235. адаптивное меню для сайта. часть 1
- CSS/CSS3
... и ссылками.
зададим поля вокруг пунктов меню.
ul li a {
padding: 10px 20px;
}
текст сделаем заглавными буквами и уберем подчеркивание ...
- 236. адаптивное меню для сайта. часть 2
- CSS/CSS3
... margin-right: 1.5em;
background: #d56287;
color: #fff;
padding: 5px;
cursor: pointer;
text-decoration: none;
}
в медиа-запросе ...
- 237. выбор из выпадающего списка в html
- HTML/HTML 5
... сторон.
.box select{
width: 250px;
height: 50px;
padding: 10px;
}
убираем рамку и обводку:
border: none;
outline: none;
прописываем ...
- 238. маска ввода телефона на jquery
- JavaScript/jQuery
... crossorigin="anonymous">
<style>
form {
background-color: #f3f3f3;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<div ...
- 239. bxslider - настройки и примеры
- JavaScript/jQuery
... селектора ul разместят картинки в центре.
ul {
margin: 0;
padding: 0;
list-style: none;
}
что будет, если картинки будут разного ...
- 240. css позиционирование блоков
- CSS/CSS3
... находиться внутри родителя block-yellow.
.block-yellow {
position: relative;
padding: 10px;
background-color: #ffe70f;
}
поскольку желтый блок имеет относительное ...
- 241. адаптивное навигационное меню с иконками
- CSS/CSS3
... одновременно, поскольку иконки – шрифтовые.
nav a {
float: left;
padding: 12px;
color: #fff;
text-decoration: none;
font-size: 17px;
}
меняем ...
- 242. как сделать таблицу адаптивной
- CSS/CSS3
... border: 1px solid #afb42b;
color: #212121;
}
th, td {
text-align: left;
padding: 8px;
}
стилизация тега tr (ряд) заслуживает отдельного комментария. ...
- 243. псевдоэлемент after и псевдокласс last-child
- CSS/CSS Основы
... цвет */
font-weight: bold; /* поменять жирность */
position: relative;
padding-left: 4px; /* выравнивание относительно текста по гориз. */
top: -2px; ...
- 244. примеры свойства transform в css
- CSS/CSS3
... color: #fff;
display: block; /* это блоковый элемент */
padding: 10px 20px;
text-align: center;
text-transform: uppercase;
width: ...
- 245. что такое less?
- CSS/CSS Основы
... font-size: 14px;
color: @textcolor;
float: left;
padding: 15px 30px;
border-right: 1px solid fadeout(@textcolor, 60%);
.gradient(@maincolor2, ...
- 246. добавление класса по клику в javascript
- JavaScript/JavaScript Основы
... background-color: #1e90ff;
border: none;
color: #fff;
padding: 12px 16px;
font-size: 16px;
}
как это работает?
при событии ...
- 247. плавные переходы в css3.
- CSS/CSS3
... </html>
теперь зададим ему стили, а затем я поясню
.block {
width: 110px;
padding: 15px 3px;
background: #ccc;
color: #fff;
text-align: center;
border-radius: 7px;
...
- 248. как изменить фон у радиокнопки на css
- CSS/CSS Основы
... .r_button {
display: none;
}
.r_button + label {
background: url("radio.png") no-repeat scroll 0 0;
cursor: pointer;
padding-left: 25px;
}
.r_button:checked + label {
background: url("radio_active.png") no-repeat scroll 0 0;
}
сразу ...
- 249. обработка события click на css
- CSS/CSS Основы
... вкладок друг от друга */
}
.content {
display: none; /* скрываем содержимое */
padding-top: 20px; /* чтобы название вкладки было ниже содержимого */
position: absolute; ...
- 250. как прижать футер к низу
- CSS/CSS Основы
... //обязательно, если контента в main будет много
height: 100%;
min-height: 100%;
}
#main {
padding-bottom: 50px;
}
#footer {
bottom: 0;
height: 50px;
position: absolute;
}
здесь всё ...
- 251. как сделать блок с отзывами на html
- CSS/CSS3
... background-color: #eee;
border-radius: 5px; /* скругление углов блока */
padding: 16px; /* внутренние поля */
margin: 16px auto; /* внешние отступы */
}
аватарка ...
- 252. css эффекты при наведении на картинку
- CSS/CSS3
... контент (картинки) внутри блоков.
.column {
flex: 33.33%;
padding: 5px;
text-align: center;
}
при изменении ширины экрана, картинки ...
- 253. изогнутая тень с помощью псевдоэлементов
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css2?family=poppins:wght@700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif; ...
- 254. как сделать красивое текстовое поле
- CSS/CSS Основы
... картинки должны быть одинаковой высоты. следующий этап - это html-код:
<table cellpadding="0" cellspacing="0">
<tr>
<td class="input_left"></td>
...
- 255. css свойство filter grayscale на практике
- CSS/CSS3
... #ccc;
margin: 40px auto;
width: 780px;
height: 270px;
padding: 20px;
box-sizing: border-box;
}
.holder {
width: 200px;
height: ...
- 256. плавный переход в css - transition на примерах
- CSS/CSS3
... border-radius: 15px;
color: #fff;
display: block;
padding: 10px 20px;
text-align: center;
text-transform: uppercase;
width: ...
- 257. верстка по сетке bootstrap (часть 4)
- CSS/CSS Основы
... </div>
</section>
css код
/* обертка для секции с корзиной */
.cart {
padding: 80px 50px 120px 50px;
font-family: "segoewpn";
}
/* выравнивает по центру */
.cart-wrap{ ...
- 258. как сделать изогнутую тень на чистом css3.
- CSS/CSS3
... pointer;
line-height: normal;
margin: 0 0 10px;
text-decoration: none;
text-align: center;
padding: 15px 25px;
font-size: 1rem;
background-color: #009eff;
vertical-align: middle;
color: #fff; ...
- 259. отзывчивый "липкий" подвал сайта.
- CSS/CSS Основы
... css.
html, body {
margin: 0;
display: table;
height: 100%;
width: 100%;
}
.wrapper {
padding: 20px;
height: auto;
}
footer {
background: slategrey;
display: table-row;
height: 1px; ...
- 260. как сделать красивое всплывающее окошко на jquery, используя webui popover.
- JavaScript/jQuery
... функцией
closeable:false,// показывать крестик закрытия окна или нет
padding:true,// отступ у контента
type:'html',// тип контента, значения: 'html', ...
- 261. функция calc() в css3.
- CSS/CSS3
... width: 100%;
width: calc(100% - 100px);
margin: 0 auto;
background: tomato;
color: #fff;
padding: 20px;
box-sizing: border-box;
}
таким образом мы получим блок, который выравнен ...
- 262. как сделать пролистывающийся текст на css3.
- CSS/CSS3
... width: 100%;
white-space: nowrap;
overflow: hidden;
}
.marquee span {
display: inline-block;
padding-left: 100%;
animation: scroll 5s infinite linear;
}
думаю, тут пояснять особо нечего, ...
- 263. как сделать фотографию с вашей веб-камеры на javascript.
- JavaScript/JavaScript Основы
... border: 10px solid #ddd;
margin: 0 auto;
}
.booth-capture-button {
display: block;
margin: 10px 0;
padding: 10px 20px;
background: cornflowerblue;
color: #fff;
text-align: center;
text-decoration: ...
- 264. как выравнять по центру блок переменной ширины.
- CSS/CSS Основы
... overflow: hidden;
display: table;
}
#pagination ul li {
float: left;
border: 1px solid #ccc;
padding: 5px 8px;
margin-right: 3px;
}
т.е. все, что вам нужно сделать, это добавить ...
... position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 25px 50px;
opacity: 0;
transition: all 0.5s ease-in-out;
.arrow {
...
- 266. как создать "выскальзывающее" меню на css.
- CSS/CSS3
... 100%;
width: 100%;
max-width: 250px;
background: cornflowerblue;
box-sizing: border-box;
padding: 20px;
color: #fff;
margin-left: -250px;
transition: margin 200ms ease-in-out;
}
.nav-side.nav-open ...
- 267. как прижать футер к нижней грани страницы(позиционирование).
- 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%;
...
- 268. как сделать прогресс бар на чистом css3.
- CSS/CSS3
... простыми
.wrapper {
width: 500px;
}
.progress-bar {
width: 100%;
background-color: #e0e0e0;
padding: 3px;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}
.progress-bar-fill {
...
- 269. сокрытие элементов на css.
- CSS/CSS Основы
... отображается на странице. никакая часть коробочной модели - область контента, margin, padding, border не появляется на странице и не генерируется.
любой контент в ...
- 270. css прозрачность (opacity vs rgba)
- CSS/CSS3
... значение полупрозрачности фона */
height: 70px;
}
h1 {
padding: 6px;
font-family: arial black;
font-weight: bolder;
font-size: ...
- 271. изучаем sass. основы.
- CSS/CSS Основы
... стили для нашей разметки страницы.
.wrapper {
width: 100%;
max-width: 100%;
padding: 0 20px;
}
не забудьте добавить его в файле app.scss
@import 'framework/layout'; ...
- 272. как сделать многоуровневое меню-аккордион на css3.
- CSS/CSS3
... opacity: 0;
}
.cd-accordion-menu label, .cd-accordion-menu a {
position: relative;
display: block;
padding: 18px 18px 18px 64px;
background: #4d5158;
box-shadow: inset 0 -1px #555960;
color: #ffffff;
...
- 273. конфигурация для sublime text.
- Софт/Софт для создания сайтов
... дополнительные опции
откройте файл preferences->settings – user, добавьте туда следующее:
"line_padding_bottom": 5,
"translate_tabs_to_spaces": true
сохраните файл.
установка шрифта
скачайте ...
- 274. изучаем sass. функции.
- CSS/CSS Основы
... упростить вам верстку.
например, вы можете изменять строки:
$color = #2196f3;
a {
padding: 10px;
color: $color;
}
a:hover {
color: darken($color, 10%);
}
как понятно из названия, ...
- 275. как сделать 3d модель объекта на javascript.
- JavaScript/JavaScript Основы
... также, не забудьте подключить css файл.
.turntable {
margin: 0px;
}
.turntable ul {
padding: 0px;
margin: 0px;
}
.turntable ul li {
list-style-type: none;
display: none;
}
.turntable ul ...
- 276. nodejs. потоковый вывод html страницы.
- JavaScript/JavaScript Основы
... background: skyblue;
font-family: verdana;
color: #fff;
padding: 30px;
}
h1 {
font-size: 48px;
text-transform: uppercase; ...
- 277. bootstrap 4. система сеток.
- CSS/CSS Основы
... занимать в сетке. давайте рассмотрим некоторые примеры:
<style>
.row div {padding:20px 10px; border: 1px solid;}
</style>
<div class="container">
<div class="row" style="background: ...
- 278. как впечатлить заказчика своим портфолио? создаём skill-bar.
- JavaScript/jQuery
... стили тега span в блоке title */
.title span {
display: block;
background: rgba(0,0,0,0.1);
padding: 0 20px;
height: 35px;
line-height: 35px;
border-top-left-radius: 3px;
border-bottom-left-radius: ...
- 279. параллакс эффект. плагин simple parallax scrolling.
- JavaScript/jQuery
... src="js/parallax.js"></script>
</body>
</html>
style.css:
*{
margin: 0; /* сброс отступов */
padding: 0;
}
.parallax-window {
min-height: 500px; /* минимальная высота для картинки ...
- 280. css селекторы выбирают стиль
- CSS/CSS3
... обнулял маржины и паддинги, это устаревший уже способ.
* { margin: 0;
padding: 0;
}
но сейчас все используют normalize.css с github.
6.комбинированные селекторы ...
- 281. верстка по сетке bootstrap (часть 3)
- CSS/CSS Основы
... display: block;
border-radius: 50%;
text-align: center;
margin: auto;
padding: 15px;
width: 170px;
height: 170px;
position: relative;
}
/* цвет круга ...
- 282. верстка портфолио на flexbox (часть 2)
- CSS/CSS3
... адаптивность на планшетах
@media (max-width: 770px) {
.section {
padding: 40px 0;
}
.portfolio {
flex-wrap: wrap;
}
.portfolio_col ...
- 283. dog ear effect, или эффект загнутого уголка на css.
- CSS/CSS Основы
... style.css
.box {
position: relative;
background: #edeff0;
width: 180px;
height: 180px;
padding: 20px;
border-radius: 5px;
border-bottom: 4px solid #ccc;
margin: 20px;
}
.dog-ear:before,
...
- 284. свойство perspective в css
- CSS/CSS Основы
... font-size: 20px;
}
.parent {
width: 50%;
display: inline-block;
padding: .5em;
}
/* чем меньше данное значение, тем сильнее будет эффект*/ ...
- 285. разница между innerhtml и textcontent
- JavaScript/JavaScript Основы
... border: 10px solid plum;
margin: 20px auto;
}
.text-example {
padding: 10px;
font-size: 20px;
font-weight: 200;
font-family: ...
- 286. обработчик события кнопки на javascript
- JavaScript/JavaScript Основы
... #mybtn {
background-color: #9c27b0;
color: white;
padding: 20px;
font-size: 20px;
font-weight: bold;
border: ...
- 287. счетчик обратного отсчета при помощи setinterval
- JavaScript/JavaScript Основы
... color: white;
font-size: 30px;
font-weight: bold;
padding: 0px 5px;
}
после того, как написан html и css код, весь процесс можно ...
- 288. извлечение данных из html формы с помощью javascript
- JavaScript/JavaScript Основы
... form button {
margin-top: 10px;
font-weight: 700;
padding: 10px 20px;
font-size: large;
}
javascript код
после ...
- 289. анимация появления текста на css
- CSS/CSS Основы
... height: 60px;
background: yellow;
border: 3px solid black;
padding: 0 50px; /* отступы по краям */
}
далее стилизуем блок с текстом. ...
- 290. анимированный фон с parallax эффектом
- JavaScript/JavaScript Основы
...
css стили
обнулим маржины и паддинги.
body {
padding: 0;
margin:0;
width: 100%;
height: 100vh; ...
- 291. эффект появления рамки при наведении
- CSS/CSS Основы
... размер шрифта */
background-color: #ad1ca1; /* цвет кнопки */
padding: 30px 60px; /* расстояние от текста до края кнопки */
border: 2px ...
- 292. анимированный блик у кнопки на чистом css
- CSS/CSS Основы
... 30px;/*размер шрифта*/
background-color: darkred;/* цвет кнопки */
padding: 20px 60px;/* расстояние от текста до края кнопки */
position: relative;/* ...
- 293. как размыть фон под блоком, используя svg
- CSS/CSS Основы
... 450px; /* ширина блока */
height: 200px; /* высота блока */
padding: 5px; /* поля для текста */
box-shadow: 1px 1px 4px rgba(14, 14, 14, 0.3); /* тень ...
- 294. css-эффект при наведении на меню
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css2?family=poppins:wght@200;300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif; ...
- 295. css grid. практические примеры #4
- CSS/CSS Основы
... grid-column-end: span 2;
}
.container div {
background-color: plum;
padding: 8px;
}
.container div:nth-child(odd) {
background-color: yellowgreen;
}
- 296. навигационное меню с иконками + hover эффект
- CSS/CSS Основы
... контейнером, где элементы списка стоят в колонке.
ul {
padding: 20px;
width: 270px;
background: #fff;
display: ...
- 297. css grid свойство align-items
- CSS/CSS Основы
... height: 200px;
color: #b0bec5;
border: 1px solid #b0bec5;
padding: 10px;
font-size: 1.4em;
font-weight: 800;
}
...
- 298. переключение меню гамбургер, используя js
- CSS/CSS Основы
... цвет.
<div id="toggle"></div>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
scroll-behavior: ...
- 299. эффект анимированного неонового свечения у кнопки
- CSS/CSS Основы
... сделать это через flex-технологию.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: consolas;
}
body{
display: ...
- 300. css эффект потери фокуса и наоборот
- CSS/CSS Основы
... url('https://fonts.googleapis.com/css?family=poppins:200,300,400,500,600,700,800,900&display=swap');
*{
margin: 0; / * обнуление отступов * /
padding: 0; / * обнуление полей * /
box-sizing: border-box; / * на размер элемента ...
- 301. анимированный loader на градиентах и тенях
- CSS/CSS Основы
... url("https://fonts.googleapis.com/css?family=poppins:100,200,300,400,500,600,700,800,900");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", sans-serif;
}
body ...
- 302. градиентная тень у блока на css
- CSS/CSS Основы
... <h2>shadow</h2>
</div>
// css код
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", sans-serif;
}
body ...
- 303. эффект с текстом при движении мыши
- JavaScript/JavaScript Основы
... class="summer"></div>
</section>
//css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", sans-serif;
} ...
- 304. видеофон внутри текста на чистом css
- CSS/CSS Основы
... url("https://fonts.googleapis.com/css?family=poppins:200,300,400,500,600,700,800,900");
* {
margin: 0;
padding: 0;
font-family: "poppins", sans-serif;
}
section {
position: absolute; ...
- 305. изменение внешнего вида курсора при наведении
- JavaScript/JavaScript Основы
...
стилизация иконок
*{
margin: 0;
padding: 0;
}
body{
background: #000;
display: flex;
justify-content: ...
- 306. css grid. практические примеры #5
- CSS/CSS Основы
... 4fr;
}
}
.container > * {
background-color: plum;
padding: 8px;
}
.container > *:nth-child(odd) {
background-color: powderblue;
}
разобьем ...
- 307. пример простого слайдера на javascript (#2)
- JavaScript/JavaScript Основы
... рамки */
border-radius: 4px;/* радиус скругления углов */
padding: 10px 20px; /* поля внутри кнопок */
font-size: .9rem; /* размер шрифта ...
- 308. стилизация select на css
- CSS/CSS3
... display: block;
width: 100%; /* от ширины блока div */
padding: .75rem 2.5rem .75rem 1rem;/* отступы от текста до рамки */
background: none; ...
- 309. верстка макета на sass
- CSS/CSS Основы
... .container{
max-width:960px;
margin:0 auto;
}
.section{
padding:100px 0;
}
затем идет заголовок. если блок внутри себя содержит заголовок, ...
- 310. стилизация radio на css
- CSS/CSS3
... position: absolute;
}
стилизуем текст внутри тега label.
.radio_label {
padding-left: 25px;/* отступ слева */
font-size: 1rem;
color: #444; ...
- 311. единицы измерения em, rem, vh, vw, vmin, vmax
- CSS/CSS3
... margin-top: 0;
font-size: 16vmin;
font-weight: 900;
padding: 1rem;
text-align: center;
color: #fff;
text-shadow: ...
- 312. как изменить цвет выделенного текста в css.
- CSS/CSS Основы
... box-shadow: 0 0 10px rgba(0,0,0,0.5); /* параметры тени */
padding: 10px;
}
// применяем псевдоэлемент к нашему классу ...
- 313. верстка сайта по psd макету (часть 4)
- HTML/HTML 5
... .button {
margin: 20px 0 0 20px;
padding: 8px 20px;
}
}
однако, новых css правил хватает только до ...
- 314. простой таймер обратного отсчета на javascript
- JavaScript/JavaScript Основы
... .time {
padding: 5px;
display: inline-block;
border: 1px solid #ddd; ...
- 315. конвертирование данных из html таблицы в csv на javascript
- JavaScript/JavaScript Скрипты
... <table id="table2csv" border="1" style="background-color:#ffffcc" width="0%" cellpadding="3" cellspacing="3">
<tr>
<th>товар</th> ...
- 316. как сделать видео на сайте адаптивным
- HTML/HTML 5
... следующие свойства:
.movie-container {
position: relative;
padding-bottom: 56.25%; // сохраняет пропорции
height: 0;
overflow: ...
- 317. динамическое изменение содержимого блока в javascript
- JavaScript/JavaScript Скрипты
... border: 1px solid rgb(117, 117, 117);
padding: 5px;
}
</style>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> ...
- 318. всплывающая подсказка в html
- HTML/HTML 5
... */
z-index: 2; /* блок поверх параграфа с текстом */
padding: 14px;
line-height: 15px; /* выравнивание подсказки по центру */
...
- 319. адаптивная верстка макета (bootstrap 4)
- CSS/CSS Основы
... text-align: left;
}
@media (max-width: 768px) {
.services {
padding: 60px 10px;
}
.services__title {
margin-bottom: ...
... header {
margin-bottom: 30px;
padding-right: 10px;
background: #fff;
color: ...
- 321. пример простого слайдера на javascript (#1)
- JavaScript/JavaScript Основы
... max-width: 1000px;
margin: 20px auto;
background: #f1f1f1;
padding: 20px;
}
создание блока под слайдер
внутри контейнера разместим ...
- 322. пример стилизации slick слайдера (часть 1)
- JavaScript/jQuery
... стилизации слайдера.
.wedding__item {
flex-basis: 340px;
padding: 20px;
}
подключение slick слайдера
открываем сайт с плагином slick slider, ...
- 323. адаптивное мобильное меню для сайта (часть 3)
- JavaScript/JavaScript Основы
... всю высоту шапки
width: 350px; // ширина контейнера
padding: 50px; // отступы от края со всех сторон
background-color: rgba(22, 70, ...
- 324. скошенный блок при помощью clip-path
- CSS/CSS Основы
... .btn:visited {
text-transform: uppercase;
text-decoration: none;
padding: 10px 20px;
border-radius: 100px;
transition: all .2s;
position: ...
... код карты
</div>
</section>
// css
.map {
padding: 40px 0;
text-align: center;
}
.container {
max-width: 1000px;
margin: ...
- 326. создание всплывающей подсказки
- CSS/CSS Основы
... 10px; top: 25px; border: solid 1px #000000; background: #ffffff; color: #000000; white-space: pre; padding: 2px;}</style></head><body>одним из важнейших параметров <a href="/" class="help"> ...
- 327. события drag-and-drop в js
- JavaScript/JavaScript Основы
... height: 200px;
border: 10px solid plum;
margin: 10px auto;
padding: 10px;
}
рассмотрим все события, которые могут происходить при drag-and-drop. ...
- 328. пишем приложение на react
- JavaScript/JavaScript Основы
... ./src/components/card.css
.giftcard {
border: 1px solid #c7c4c4;
padding: 15px;
border-radius: 5px;
background: #fff;
margin: 5px; ...
- 329. как прижать футер к низу страницы
- CSS/CSS Основы
... 100vh;
}
.content {
max-width: 800px;
margin: 0 auto;
padding: 40px 20px;
}
.footer {
margin-top: auto;
}
какие css свойства прижмут ...
- 330. модальное окно на чистом css
- CSS/CSS Основы
... --height: 200px;
}
#content {
display: none;
padding: 5px;
position: absolute;
width: var(--width);
height: var(--height); ...
- 331. ошибки новичков при верстке сайтов #2
- CSS/CSS Основы
... свои настройки для отображения внешнего вида некоторых тегов (h1-h6, margin, padding и другие). чтобы верстка выглядела во всех браузерах одинаково, нужно ...
- 332. комментарии в виде пузырька.
- CSS/CSS3
... 20px;
}
.comment p {
margin: 0 0 10px 0;
}
.bubble {
position: relative;
background: #fff;
padding: 20px;
color: #222;
border-radius: 3px;
margin-left: 20px;
}
.bubble::after {
content: ...
- 333. карточка блог поста на css
- CSS/CSS3
уже давно на главной странице блога для вывода превью-постов, активно применяют не привычный список, а сеточный макет (grid layout) в виде карточек ...
- 334. иконка гамбургер-меню на css+js
- CSS/CSS3
на этом уроке мы создадим на чистом css саму иконку гамбургера-меню и с помощью js функции, поменяем её внешний вид, на крестик (x), символизирующий ...
в этой статье мы разберем основы ajax запросов. научимся настраивать и отправлять запрос, а также получать ответ от сервера.
классическая модель ...
- 336. jquery события мыши
- JavaScript/jQuery
события jquery мгновенно реагируют на действия пользователя, на такие как клик, движение, наведение мыши и.т.д. эта реакция выражается во внешних ...
- 337. jquery эффекты
- JavaScript/jQuery
на этом уроке, мы рассмотрим эффекты в jquery – это такие методы, как hide, show, toggle, slide, fade и animate. создадим тестовый блок для демонстрации примеров ...
- 338. всплывающее окно popup на jquery (часть 2)
- JavaScript/jQuery
на этом уроке мы будем программировать наше всплывающее popup окно. нам надо, чтобы при первом заходе пользователя на страницу, popup окно появилось ...
- 339. таймер отсчета на js
- JavaScript/JavaScript Основы
таймер в js нужен для запуска функции (некий набор действий), через заданное количество времени. без таймера эта функция так и так бы запустилась, ...
- 340. регистрация домена
- Регистрация сайта
регистрация доменовдомен ru - 99 рубдомен com - 350 рубзарегистрируй себе домен!имя: зона: rusucomnetorginfobiznamemobitv2domains.ruесли вы читаете эти строки, значит, ...