ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Объявление

GEMcross

Кроссовер, ориентированный на активную игру и уютный флуд.
Собираем у себя драгоценных игроков уже почти три года.

Посетить

🔥 Новинка в портфолио: ДИЗАЙН И ГРАФИКА В СТИЛЕ GENSHIN IMPACT

Платформа: MyBB.ru (RusFF)
Стоимость: 6500 рублей;
Авторы: Moju & wasurenagusa

Посмотреть

💰 Крутой функционал от Alex_63 для MyBB.ru

"Мгновенные уведомления от Алекса": скрипт оповещает пользователей о событиях на форуме в реальном времени - Подробности & купить скрипт

"Комментарии к оценкам за сообщения": стабильно работающий функционал для комментирования оценок - Подробности & купить скрипт

Профиль разработчика

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

Заказы можно оплачивать наградными баллами (НБ). Полностью или частично.
Бартер за НБ осуществляется на условиях платного заказа, в качестве оплаты - НБ.
А если у вас есть любой платный заказ, вы можете обменять НБ на скидочные купоны.

узнать подробности

❤️ Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее

SPECIAL OFFER: We distribute designs for free

Finalizing the layout for your project;
Developing a style code;
Mobile version included if you wish.

Details

Support the project

If you want to help us:
Become a moderator
SuggestionsReviews

Details
❗ ❗ ❗ Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, switch to the russian language. This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience.

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Магия CSS или как натягивать сову на глобус

Сообщений 1 страница 10 из 43

1

Да, мне очень нравится это выражение и оно лучше всего подходит под то, что я пытаюсь делать, только моя сова постоянно сопротивляется и требует хоть капельку вазелина и побольше ласки

В далекие 2010 годы были попытки изучить CSS и делать свои дизайны для форумов, но как водится, что-то пошло не так и мои попытки не увенчались особым успехом. Недавно я вернулась к изучению этой темы и весьма удачно меня вдохновили на создание собственной ролевой. Моих знаний достаточно, чтобы сделать какой-то простенький дизайн, но... Мы не ищем легких путей)

Макет дизайна вышел довольно сложным, но ведь на таких вещах и лучше всего учиться. К сожалению или к счастью, я обладаю такой способностью, что мне интереснее учиться именно на чем-то сложном. И конечно я сразу же столкнулась с трудностями, куда же без них?

В общем, мне бы очень хотелось научиться верстке на примере собственного дизайна. Другими словами, прошу помочь мне победить мою фантазию и не разрывать между "хочу" и "могу". Уточню, что конечно было бы проще пойти и попросить наших специалистов просто сделать верстку вместо меня, но мне бы хотелось именно научиться. Если у кого-то будет время и желание, то прошу направить по нужному пути в идеале провести за ручку.

+4

2

Moju
А может ты снимешь "замочек" с части сообщения или хотя бы скрытый текст сделаешь не от 300 сообщений, а ниже? Чтобы больше людей увидело самое главное - макет и ссылку на форум?

Добавлено спустя 2 минуты 14 секунд:
В целом, в целом... Я не знаю как это свёрстано, мастера посмотрят вместо меня, но выглядит это весьма недурно.
Я бы, наверное, добавила всплывающих подсказок при наведении на иконки в меню навигации, а то не очень понятно какие иконки куда ведут. Приходится гадать.

+1

3

#p187395,Automation Baby написал(а):

Moju
А может ты снимешь "замочек" с части сообщения или хотя бы скрытый текст сделаешь не от 300 сообщений, а ниже? Чтобы больше людей увидело самое главное - макет и ссылку на форум?

Сделала ))))

У меня есть подсказки в планах да, но вот есть одна плохая привычка - зацикливаться на мелочах. Я два дня убила на то, чтобы в верхнем меню подсветка была под иконками, но так и не смогла это победить  :crazyfun:

0

4

#p187397,Moju написал(а):

Я два дня убила на то, чтобы в верхнем меню подсветка была под иконками, но так и не смогла это победить  :crazyfun:

Подсветка же делается через text-shadow, верно? Там разве нельзя регулировать как душе угодно?

0

5

#p187399,Automation Baby написал(а):
#p187397,Moju написал(а):

Я два дня убила на то, чтобы в верхнем меню подсветка была под иконками, но так и не смогла это победить  :crazyfun:

Подсветка же делается через text-shadow, верно? Там разве нельзя регулировать как душе угодно?

По логике да, можно было бы сделать через тень, но! text-shadow - задается именно для текста, а у меня там svg изображение. Если копаться дальше в этом направлении, то можно поставить  filter:drop-shadow(0px 0px 7.5px #EAE3C9);. Спасибо за наводку))) Оно работает не так идеально как хотелось бы, но это лучше, чем то, что было у меня )))
На более закрашенных иконках смотрится хорошо, но вот на других не так ярко и теряется
https://i.imgur.com/iG5yuBEm.jpghttps://i.imgur.com/qEXILyOm.png

+1

6

#p187416,Moju написал(а):

На более закрашенных иконках смотрится хорошо, но вот на других не так ярко и теряется

Ну можно подсветить блоком с фоновым цветом или картинкой поставленным через :before или :after (при наведении) с position:absolute; ( на #pun-navlinks li поставить position:relative;, тогда блок с фоном можно расположить нужным образом за иконкой и если через фоновую картинку - то и нужной формой подсветки

Отредактировано Deff (05.09.23 10:46)

0

7

#p187417,Deff написал(а):
#p187416,Moju написал(а):

На более закрашенных иконках смотрится хорошо, но вот на других не так ярко и теряется

Ну можно подсветить блоком с фоновым цветом или картинкой поставленным через :before или :after (при наведении) с position:absolute; ( на #pun-navlinks li поставить position:relative;, тогда блок с фоном можно расположить нужным образом за иконкой и если через фоновую картинку - то и нужной формой подсветки

У меня вот так было, но она упорно подсвечивалась над иконками, а не под ними. Это из-за отсутствия позиционирования?

Код:
#pun-navlinks a:hover::after {
    background: #EAE3C9;
    filter: blur(7.5px);
    content: "";
    width: 100%;
    height: 100%;
}

0

8

#p187418,Moju написал(а):

над иконками, а не под ними.

Наверно z-index:-1; добавить

2-е Иконку нун ставить через :after, а фоновую через :before (тогда она сразу ниже

Отредактировано Deff (05.09.23 12:20)

0

9

#p187416,Moju написал(а):

По логике да, можно было бы сделать через тень, но! text-shadow - задается именно для текста, а у меня там svg изображение.

box-shadow
Точно не помню поможет ли

Добавлено спустя 38 минут 38 секунд:
https://habr.com/ru/companies/netologyr … es/665640/

Отредактировано nou (05.09.23 16:50)

+1

10

Если исходить из моей изначальной попытке поставить через вот такой код

Код:
#pun-navlinks a:hover::after {
    background: #EAE3C9;
    filter: blur(7.5px);
    content: "";
    width: 100%;
    height: 100%;
}
#p187419,Deff написал(а):

z-index:-1

Если добавить сюда z-index, свечение вообще пропадает.

#p187419,Deff написал(а):

2-е Иконку нун ставить через :after, а фоновую через :before

Тут у меня тоже что-то идет не так и сама иконка пропадает  :'(

0