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

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в 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

Открыть новую тему     Написать ответ в эту тему

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
 

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

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

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

Цитата:
Так одна и та же иконка "лепится" ко всем внешним ссылкам.

ессно будет лепиться ко всем, у которых есть target="_blank" и тех, что ссылка ведет на wikipedia.
если хотите, чтобы определенная картинка на ссылку на определенных сайт, то  
a[href^="URL"]::after {
...
}
https://developer.mozilla.org/ru/docs/Web/CSS/Attribute_selectors

Всего записей: 9716 | Зарегистр. 20-09-2014 | Отправлено: 21:45 08-07-2020
Altruumann



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

Цитата:
a[href^="URL"]::after {
...
}

У меня так и было до того как пришёл за советом.

Всего записей: 225 | Зарегистр. 04-04-2016 | Отправлено: 07:07 09-07-2020
Mavrikii

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

Цитата:
У меня так и было до того как пришёл за советом.

Это - рабочий вариант. Значит показывайте что у вас фактически записано и что не работает.

Всего записей: 9716 | Зарегистр. 20-09-2014 | Отправлено: 07:10 09-07-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Вопрос не актуален.

Всего записей: 2831 | Зарегистр. 30-06-2002 | Отправлено: 15:53 27-07-2020 | Исправлено: WONDROUS, 18:44 27-07-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Просьба подсказать, как в данном коде сделать плавный показ тени. Если наведение без before/after, то всё работает, а с ними нет.

Код:
.box {
    margin-bottom: 45px;
    position: relative;
    background-color: #FFFFFF;
    transition: all 0.3s ease;
}
 
.box:hover:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 180px;
    height: 55px;
    z-index: -1;
    background: rgba(119, 119, 119, 1.00);
    box-shadow: -20px 30px 15px rgba(119, 119, 119, 1.00);
    transform: skew(5deg,-10deg) translate(40px,-15px);
}
.box:hover:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 180px;
    height: 55px;
    z-index: -1;
    background: rgba(119, 119, 119, 1.00);
    box-shadow: 20px 30px 15px rgba(119, 119, 119, 1.00);
    transform: skew(-5deg,10deg) translate(-40px,-15px);
}

Всего записей: 2831 | Зарегистр. 30-06-2002 | Отправлено: 21:39 28-07-2020
Mavrikii

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

Цитата:
transition: all 0.3s ease;

применяется к классу, но не к псевдоклассам.
https://jsfiddle.net/0mqsut2L/1/

Всего записей: 9716 | Зарегистр. 20-09-2014 | Отправлено: 22:28 28-07-2020 | Исправлено: Mavrikii, 22:29 28-07-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо за ответ и пример!

Всего записей: 2831 | Зарегистр. 30-06-2002 | Отправлено: 10:56 29-07-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Просьба подсказать, как в данном примере сделать так, чтобы синий значок был на серой картинке, но чтобы картинка оставалась по центру? И так, чтобы если вместо картинки будет блок текста с выравниванием по левому краю, текст не встал по центру.

Всего записей: 2831 | Зарегистр. 30-06-2002 | Отправлено: 23:12 03-08-2020 | Исправлено: WONDROUS, 23:12 03-08-2020
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
 
left: 50%;
top: 50%;
transform: translate(-16px, -16px);
 

Цитата:
чтобы синий значок был на серой картинке

или не синий по центру?
тогда только сделав display: inline или inline-block для div (или любой другой инлайновый элемент), чтобы обтекало картинку по краям.
тогда :before или :after для этого div поместит контент именно над картинкой.

Всего записей: 9716 | Зарегистр. 20-09-2014 | Отправлено: 23:18 03-08-2020 | Исправлено: Mavrikii, 23:21 03-08-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо за ответ, попробовал, первый вариант ставит синий значок по центру картинки, что не надо.
Надо, чтобы синий значок был по правой и верхней границам картинки, а не на таком расстоянии, как сейчас. Если делать для .badge display: inline-block, то значок становится как и хотелось бы, но тогда картинка смещается влево.

Всего записей: 2831 | Зарегистр. 30-06-2002 | Отправлено: 23:31 03-08-2020
Mavrikii

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

Цитата:
но тогда картинка смещается влево.

потому, что родителю .badge нужно сделать центровку содержимого

Всего записей: 9716 | Зарегистр. 20-09-2014 | Отправлено: 23:39 03-08-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Понятно, спасибо. Сделал так, вроде работает. Просто иногда при создании внешнего div и применения text-align: center, всё, что помещалось внутрь, становилось по центру.

Всего записей: 2831 | Зарегистр. 30-06-2002 | Отправлено: 23:53 03-08-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ещё вопрос, пожалуйста, почти по тому же примеру. С круглым значком понятно, а как правильно сделать по центру по горизонтали значок с текстом?

Всего записей: 2831 | Зарегистр. 30-06-2002 | Отправлено: 02:10 05-08-2020
Mavrikii

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

Цитата:
а как правильно сделать по центру по горизонтали значок с текстом?

пример, что я привел, работает для фиксированной ширины элемента в 26px
 
в данной ситуации (может не работать в старых браузерах)
transform: translate(-50%, 0%);

Всего записей: 9716 | Зарегистр. 20-09-2014 | Отправлено: 03:28 05-08-2020 | Исправлено: Mavrikii, 03:35 05-08-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо за ответ, работает

Всего записей: 2831 | Зарегистр. 30-06-2002 | Отправлено: 06:00 05-08-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Снова просьба подсказать и снова по значку. Сделав у .badge display: inline-block, он расположился сразу после объекта, но при этом пошли косяки в другом. Если применить его к подобным вещам/объектам (без фиксированной ширины), то они сужаются. Если отключить это правило, то ширина становится нормальной, задуманной, но всё смещается влево. Как правильно сделать, чтобы и значок был по периметру, и ширина объектов внутри него не сужалась, и чтобы всё по центру было?

Всего записей: 2831 | Зарегистр. 30-06-2002 | Отправлено: 10:14 07-08-2020 | Исправлено: WONDROUS, 17:04 07-08-2020
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
чтобы значок был по периметру, границы объекта должны обтекать его размеры, то есть

Цитата:
то они сужаются

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

Всего записей: 9716 | Зарегистр. 20-09-2014 | Отправлено: 20:06 07-08-2020 | Исправлено: Mavrikii, 20:07 07-08-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Так пример в сообщении есть. Просто с картинками проблем таких нет. Если у того же .chat поставить просто width (или min-width), то в обычном браузере нормально всё, а в мобильном будет обрезаться, так как больше ширины экрана. Даже и не знаю, делать ширину у вставляемого объекта или задавать ширину badge, для обычного и для мобильного браузеров.

Всего записей: 2831 | Зарегистр. 30-06-2002 | Отправлено: 20:54 07-08-2020
Mavrikii

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

Цитата:
Так пример в сообщении есть.

проблемный пример, а не в общем виде.

Цитата:
 Даже и не знаю, делать ширину у вставляемого объекта или задавать ширину badge, для обычного и для мобильного браузеров.

задавать min-width в процентах или же свои правила для разных ширин, но сначала почитать как делаются responsive сайты.

Всего записей: 9716 | Зарегистр. 20-09-2014 | Отправлено: 21:14 07-08-2020 | Исправлено: Mavrikii, 21:15 07-08-2020
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо за ответ, сделал просто ширину в процентах и отдельно для мобильников.
 
Не пойму, можно ли сделать overflow: visible не только для самого объекта, но и для внешнего тоже? То есть, есть объект с анимацией пульсации, для него сделан overflow: visible, но если он находится, например, в колонках (columns), то пульсация обрезается.

Всего записей: 2831 | Зарегистр. 30-06-2002 | Отправлено: 17:22 09-08-2020
Открыть новую тему     Написать ответ в эту тему

Страницы: 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

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


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

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.Board
© Ru.Board 2000-2020

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru