CSS-club – настройка внешнего вида сайта

КлубыCSS-club – настройка внешнего вида сайтаТопики
Murasaki Renko
Murasaki RenkoвCSS-club – настройка внешнего вида сайта
18
Текст почти полностью взят из аналогичного поста от уважаемого @Narso, с небольшими изменениями.

Как вы уже могли заметить, возможность редактировать css личной страницы сайта, не всегда лучшим образом отражается на странице некоторых пользователей. Это не личный взгляд автора статьи, скорее нарушение простых правил оформления и дизайна большинством пользователей, которые сразу же побежали менять цвета и шрифты как душе угодно. Не каждому человеку, что может зайти к Вам на страницу, может прийтись по вкусу чрезмерно броский дизайн, а посему я хотел бы дать несколько советов, которые могут помочь вам этого избежать. Всё описанное ниже - всего лишь рекомендации, ничего более, но они могут помочь вам не ударить в грязь лицом при оформлении вашего профиля.

1. Диссонанс в дизайне сайта и вашей страницы.
Старайтесь избегать слишком сильных различий вашего дизайна с дизайном сайта.
Используйте картинки с белым, а ещё лучше прозрачным фоном, не уходите слишком далеко от стандартных цветов сайта, не меняйте цвет каждого элемента страницы просто "для красоты". Это может стать очень серьёзным отталкивающим фактором для посетителей страницы. Базовый фон сайта - белый. Центральная область либо белая, либо серая. Всё остальное пользователи сайта используют гораздо реже. Верхняя панель - чёрная. Если при переходе на вашу страницу, кто-то увидит жёлтый фон и синюю панель, то с большей вероятностью, это кто-то просто убежит подальше и никогда не вернётся. Не слишком сильное изменение цветов вполне допустимо и даже может оказаться приятно глазу, но не перестарайтесь с этим.

2. Фоновые картинки.
Не делайте центральную область прозрачной. Если очень хотите засветить свою фоновую картинку, то ставьте прозрачность как можно меньше. Центральная область и сделана для того чтобы фоновая картинка не мешала чтению. Если на вашей странице яркая картинка на фоне и центральная область прозрачная, то текст станет просто нечитабельным, даже если прозрачность минимальная. Более того, фоновая картинка может очень плохо сочетаться с постерами и изображениями из "избранного" в вашем профиле, поэтому лучше воздержитесь от использования прозрачности центральной области.
Красными линиями выделен текст, который невозможно разобрать из-за слишком высокой прозрачности фоновой картинки.
1301x533

3. Шрифты.
Не стоит использовать необычные шрифты для оформления своей страницы, их слишком тяжело воспринимать после основного шрифта сайта. Они созданы для оформления всяческих шапок/постеров/аватарок, но никак не для основного текста. Не стоит прибегать к курсивным/жирным/рукописным шрифтам. Привычные шрифты, по типу Arial, Times New Roman и всё, что на них похоже намного проще воспринимается пользователем.
Пример рукописного шрифта, который тяжело воспринимать, если этот шрифт используется как основной.
1334x284

4. Масштабируемость.
Это касается и объектов, и картинок. Не забывайте, что не все могут видеть ваш профиль так же, как и вы всё из-за разницы в разрешениях.
Будьте осторожны. Из-за подобного сдвига весь профиль может выглядеть совсем не так, как вы задумывали.
1299x386

5. Размер текста и объектов.
Увеличение всего, что есть на вашей странице, в том числе и шрифта, создаст ад для глаз пользователей с низким разрешением экрана, в том числе и пользователей большинства ноутбуков. Если знать меру в увеличении объектов, то ни к чему плохому это не приведёт, но вот разница в размерах текста слишком сильно ощущается при просмотре страницы.

6. Цвет текста.
В большинстве случаев, грамотное использование цветов приятно скажется на восприятии, но не перестарайтесь. Если использовать слишком много разных цветов, особенно ярких, то текст на вашей странице станет совершенно нечитабельным. К тому же эти цвета далеко не всегда будут сочетаться с вашим фоном.
1292x624

7. Курсор.
Если у вас прямо-таки жгучее желание поменять курсор со скучного и стандартного на более оригинальный, то пожалуйста, будьте сдержаннее.
Слишком большие и чрезмерно отличающиеся от стандартной "стрелочки" курсоры удивят лишь на секунду, а затем начнётся негодование из-за неудобства пользованием.
Красиво, но размер слишком велик. Более того, таким курсором немного тяжелее управлять с непривычки.
1260x400

8. Gif-анимации.
Будьте осторожны с их использованием, чрезмерно активная "гифка" может здорово помешать восприятию вашего профиля, а так же может подлагивать на слабых компьютерах и съедать трафик у тех, для кого он ограничен.
Комментарии
Ruslan
Ruslan#
@grin3671, Здравствуйте! В последнее время я зачастил со своими вопросами что прошу прощение за это. Давно уже заметил данный баг, но не придавал к этому особое значение. В поисковике при видаваемых результатов, если их много, то невозможно листать вниз. А конкретно листается задная сторона, откуда было нажато на поиск, а не результаты.
720x1234720x1224
Пожалуйста, не могли бы подсказать как это исправить? Да и был благодарен если подсказали код отвечающий также за эту часть:
720x1233
Хочу изменить цвет, и где белый фон.
@grin3671
grin3671
grin3671#
@サイ, 
.l-top_menu-v2 .global-search .search-results {
  /* Примерные вычисления для высоты окна результатов поиска и прокрутка */
  height: calc(100vh - 112px);
  overflow-x: auto;
  /* Фон окна результатов поиска */
  background-color: rgba(30, 30, 30, .9);
}

.l-top_menu-v2 .menu-icon.active,
.l-top_menu-v2.is-search-mobile .global-search {
  /* Фон поиска и активной кнопки в меню */
  background-color: green;
}
19.43
19.43#
Как сделать фон прозрачным то? :D
@Disuma, @Disuma
Disuma
Disuma#
@Anshle, transparent.
Disuma
Disuma#
@Anshle, если хочешь полу-прозрачный, то используй hex
whereareyou18
whereareyou18#
как сделать так что бы аватарки были не квадратными , а круглыми?
アーセン
アーセン#
Так можно зделать аватарку в профиле круглой
.profile-head .avatar img {
	border-radius: 50%;
}
Гипербореец
Гипербореец#
Как сделать центральную область прозрачной?
Alexander Volg
Alexander Volg#
.l-page {
    background-color: rgba(0, 0, 0, 0.6);
}

вместо нолей можете поставить любой цвет области, а последняя значение после трёх нолей это и есть прозрачность, просто меняйте цифру после точки.
Чучколд4444
Чучколд4444#
как поменять цвет комментариев под названием аниме и манги в собственном профиле?
это же не то? 1920x1080 потому что аналогов изменения цвета комментариев в коде я не нашел (если что, я про эти комменты) 1920x1080
@grin3671, @abuzer derma
Lipton_
Lipton_#
1080x1920
Как исправить эту хурму? Помогите плиз, я просто перфекционист, а тут вот такое вылезло...
Весь код перелопатила, но видемо тут надо что-то самому дописывать, но если б я знала что...
652x685 1021x528
与廾升丫升丁囗长
与廾升丫升丁囗长#
как сделать округлённые
-оценки
-список аниме и манги
-и аватарки у людей в друзьях

типо такого
698x779
@_Rikki_
_Rikki_
_Rikki_#
@与廾升丫升丁囗长, 
.bar.vertical .line .bar-container .bar {
  border-radius: 10px;
}
.b-stats_bar .bar .first {
  border-radius: 10px;
}
.b-stats_bar .bar .second {
  border-radius: 10px;
}
.b-stats_bar .bar .third {
  border-radius: 10px;
}
тут про аватарки: /clubs/811-css-club-nastroyka-vneshnego-vida-sayta/pages/81-f-a-q
annssiner
annssiner#
как изменить изображение на избранном?
@porttvann
porttvann
porttvann#
@annssiner,

код
/*Для персонажей:*/
[href*="characters/ id -"] {
  --show-default: 0;
  --custom-image: url(https://i.pinimg.com/564x/ec/03/53/ec0353b30d3a1180858799257f091760.jpg);
}

(для аниме, манги, ранобе и людей меняем "characters")
Вместо "id" пишем id, соответственно
abuzer derma
abuzer derma#
@Чучколд4444, привет, не подскажешь, как убрать подчеркивание и сделать анимацию при наведении на ссылки?) Например на список аниме.
@Чучколд4444
Чучколд4444
Чучколд4444#
@abuzer derma, не знаю, я просто взял профиль готовый
@abuzer derma
abuzer derma
abuzer derma#
@Чучколд4444, понял, спасибо.
назад
Твой комментарий
Вернуться к редактированию
Предпросмотр
Скрыть
примеры BBCode