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

Объявление

Новинка в портфолио: ИКОНКИ ДЛЯ ФОРУМА (РАНГИ, ЗВАНИЯ)

Иконки для системы рангов/званий ролевого проекта с уклоном в Средневековье
Автор: художница forrkass; Время работы: два месяца
Формат/Масштаб: .svg | векторная графика

Прокомментировать работу

Продаётся функционал, упрощающий жизнь админу форума!

Инструментарий позволяет собирать специальные посты как конструктор - без html-ок!
Ивент-календарь и вкладки в постах облегчат оформление и информирование игроков о событиях на форуме.
Скрипт подсчёта постов за вас посчитает активистов и тех кто не пишет посты в указанных разделах и за указанный период времени.
Чат на отдельной странице на форуме, без регистрации, используются форумные аккаунты.

Как купить

Акция! Индивидуальный дизайн бесплатно

Доработаем макет под ваш проект;
Сверстаем и оснастим;
По желанию сделаем мобильную версию.

Подробнее

Ролевой поисковик

Поиск роли на текстовых ролевых
Проект от специалистов FD

Спойлеры и обсуждение

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

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

Подробнее

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 из 25

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