Вопросы по CSS - [67] :: Web-программирование :: Компьютерный форум Ru.Board

Перейти из форума на сайт.

Новости • Файловые архивы
Поиск • Активные темы • Топ лист
Правила • Кто в on-line?

Вход • Забыли пароль? • Первый раз на этом сайте? • Регистрация

Компьютерный форум Ru.Board » Интернет » Web-программирование » Вопросы по CSS

Модерирует : Cheery
Версия для печати • Подписаться • Добавить в закладки
Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129

Открыть новую тему

Написать ответ в эту тему

Xrobak

Advanced Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Ссылки для самостоятельного изучения:

Теория + примеры + учебники:
• W3School: CSS Tutorial
• MDN: Cascading Style Sheets (CSS)
• WebReference: Уроки по HTML и CSS
• htmlbook: Справочник CSS
• YouTube: Основы CSS/CSS3
• CSS для JavaScript-разработчика
• Основы CSS - каскадные таблицы стилей
• Статьи по основам CSS

Применение на практике:
• StackOverflow: 'CSS' Questions
• CSS-Tricks

Первый пост темы (до включения шапки).. ··· Текущий бэкап шапки..

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 18:46 27-10-2004 | Исправлено: TheBarmaley, 05:24 27-02-2019

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:

такого нету только с li ul есть

Цитата:

list-style: none;
padding: 0;
margin: 0;

применяется к ul, а не к li
проще уж

Код:

nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.mcd-menuss li {
float: left;
position: relative;
}
.mcd-menuss>li {
width: 14%;
}

Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 21:48 25-11-2018 | Исправлено: Mavrikii, 21:51 25-11-2018

BANNED

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Mavrikii

Цитата:

проще уж

ага, согласен. Дай Бог Вам здоровья.
Спасибо.

Всего записей: 2820 | Зарегистр. 07-02-2006 | Отправлено: 22:12 25-11-2018

Silver Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Если используется button class в коде (расширение для редактора), чем его можно заменить, или как-то указать, чтобы тема Foundation с его button не заменяла на свои значения?

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 10:11 04-12-2018

Mavrikii Platinum Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору WONDROUS http://htmlbook.ru/samcss/kaskadirovanie https://webref.ru/course/css-basics/priority
	Всего записей: 15689 \| Зарегистр. 20-09-2014 \| Отправлено: 10:12 04-12-2018 \| Исправлено: Mavrikii, 10:13 04-12-2018

Silver Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Mavrikii
Спасибо, почитал, но что если этот класс используется в html, как тогда приоритет установить? Если заменить button на что-то другое, то всё остальное ломается. А в html это так выглядит:

Код:

<button class="%id%plus">
здесь код расположен
</button>

Foundation применяет свой цвет кнопки при наведении (чего нет в css в расширении) и сдвигает центрирование значка внутри кнопки. Пример.

И ещё вопрос по этой же кнопке. В ней есть возможность включения/отключения overflow: visible, но оно применяется для всего на странице. Можно ли сделать в CSS так, чтобы это работало только для этой кнопки, чтобы overflow: visible не касалось всего остального на странице?

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 10:28 04-12-2018 | Исправлено: WONDROUS, 12:20 04-12-2018

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

WONDROUS

Цитата:

overflow: visible не касалось всего остального на странице?

переписываете для всего на странице, потом еще раз для нужной вам кнопки.

Цитата:

как тогда приоритет установить?

button.classname, можно еще родителей прописать

Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 21:04 04-12-2018

Silver Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Как можно, на примере, сделать так, чтобы первая картинка, которая поверх другой (путь1), имела repeat, а вторая (путь2) оставалась с no-repeat и cover?
Сам код:

Код:

background-image: url("путь1"), url("путь2");
background-repeat: no-repeat;
background-size: cover;
background-position: center;

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 12:24 06-12-2018 | Исправлено: WONDROUS, 12:27 06-12-2018

Mavrikii Platinum Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору WONDROUS Также, через запятую для разных картинок.
	Всего записей: 15689 \| Зарегистр. 20-09-2014 \| Отправлено: 18:09 06-12-2018

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Спасибо!
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 18:42 06-12-2018

Silver Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Просьба подсказать, почему с таким кодом нет плавности анимации в Firefox и Chrome, а в Safari (и в веб-редакторе, в котором этот код вводится) анимация нормальная, плавная?

Код:

#stack1 img {
transform: translatey(0px);
animation: float 6s ease-in-out infinite;
}

@keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-20px);
}
100% {
transform: translatey(0px);
}
}

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 01:21 19-12-2018

Mavrikii Platinum Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору WONDROUS нет плавности? http://jsfiddle.net/c0zm5ohj/
	Всего записей: 15689 \| Зарегистр. 20-09-2014 \| Отправлено: 09:22 19-12-2018

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii В FF и Chrome немного подёргивается при движении.
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 12:57 19-12-2018

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

WONDROUS

Цитата:

В FF и Chrome немного подёргивается при движении.

не вижу подергиваний. может казаться так из за отсутствия антиалиасинга, но вы на это не повлияете - особенности граф движка браузера

Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 15:36 19-12-2018

Silver Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Mavrikii
Даже в последней версии Chrome это может быть особенность движка самого браузера? На данном маленьком примере не так заметно, а если применить к картинке, например, к логотипу или надписи, то будет заметно. Но спасибо за ответ!

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 17:06 19-12-2018

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

WONDROUS

Цитата:

то будет заметно

http://jsfiddle.net/c0zm5ohj/1/
мне не заметно.

Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 17:19 19-12-2018

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Хм, так она же сама анимированная и маленькая. А если поставить хоть эту, то будет видно.
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 17:25 19-12-2018

Mavrikii Platinum Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору WONDROUS никакой разницы http://jsfiddle.net/c0zm5ohj/2/
	Всего записей: 15689 \| Зарегистр. 20-09-2014 \| Отправлено: 17:27 19-12-2018

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Тогда не понятно, применяю тот же самый код, но в Chrome всё равно почему-то нет плавности. Да и ладно.
	Всего записей: 3440 \| Зарегистр. 30-06-2002 \| Отправлено: 11:26 20-12-2018

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

WONDROUS
значит браузер сильно загружен чем то, что пропускает кадры. много анимаций - плохо.
у меня в хроме все нормально, даже на ноутбуке с маломощным процессором.

Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 15:49 20-12-2018 | Исправлено: Mavrikii, 15:50 20-12-2018

Silver Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Подскажите, пожалуйста, как сделать, чтобы .tops был впереди .twist и по центру? Пересмотрел несколько сайтов, но что-то не получается, или передняя картинка не по центру становится.

Код:

.center {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}

.twist {
text-align: center;
z-index: 1;
}

.tops {
text-align: center;
z-index: 2;
}

.tops img {
max-width: %id=tops_size%px;
}

.twist img {
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
max-width: %id=imgsize%px;
}

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 10:15 22-12-2018

Открыть новую тему

Написать ответ в эту тему

Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129

Компьютерный форум Ru.Board » Интернет » Web-программирование » Вопросы по CSS

Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC