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

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

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

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
 

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

Всего записей: 926 | Зарегистр. 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

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



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

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

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

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

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

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

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

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



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

Всего записей: 2756 | Зарегистр. 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);
}

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

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

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

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

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



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

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



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

Всего записей: 2756 | Зарегистр. 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 поместит контент именно над картинкой.

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



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

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

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

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

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

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



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

Всего записей: 2756 | Зарегистр. 30-06-2002 | Отправлено: 23:53 03-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

Компьютерный форум 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