1. Все ссылки сайта уже выполнены в цвете морской волны.
2. В качестве лого сайта используется рисунок краба или медузы.
3. Сам сайт называется, хи-хи, ШикиМОРИ.
Это - не искусство построения CSS, цель была более утилитарна - подобрать более стильный вариант внешнего вида сайта. Вы можете зайти в мой профайл, сейчас там используется эта тема в чистом виде.
На скриншотах слева - оригинальная тема, справа - "морская".

/* Top menu */
.l-top_menu-v2,
.l-top_menu-v2 .glyph, .l-top_menu-v2 .logo-container .logo,
.l-top_menu-v2 .active .submenu,
.l-top_menu-v2 .submenu, .l-top_menu-v2 .menu-dropdown>span:focus
{ background-color: #176093; }
.l-top_menu-v2 .menu-dropdown>span, .l-top_menu-v2 .menu-dropdown>span:hover, .l-top_menu-v2 .menu-dropdown.active>span
{ background-color: initial; }
.l-top_menu-v2 .logo-container:hover, .l-top_menu-v2 .menu-icon:hover, .l-top_menu-v2 .menu-dropdown>span a:hover
{ background-color: white; color: #176093; }
/* Header */
header.head h1, .p-topics header h1 a.reload
{ color: #176093; }
/* Headline, Hot topic */
.subheadline a:hover, .subheadline a:hover:before, .midheadline a:hover, .p-dashboards-show .linkheadline a:hover, .p-dashboards-show .linkheadline a:hover:before
{ background-color: #176093; }
.subheadline, .subheadline a, .subheadline a:before, .headline, .midheadline, .midheadline a:before,
.b-hot_topics-v2, .b-link_button.dark
{ color: #176093; }
.subheadline, .subheadline a, .subheadline a:before, .headline, .midheadline,
.b-hot_topics-v2, .b-link_button.dark,
.headline .misc-links>a:hover, .midheadline .misc-links>a:hover, .subheadline .misc-links>a:hover
{ background-color: initial; }
.subheadline a:hover, .subheadline a:hover:before, .subheadline a:hover:before, .midheadline a:hover, .p-dashboards-show .linkheadline a:hover, .p-dashboards-show .linkheadline a:hover:before
{ color: white; }
/* Other */
.b-stats_bar.anime .bar .first, .b-stats_bar.manga .bar .first, .b-stats_bar.lifetime .bar .first
{ background-color: #1B71AA; }
.b-stats_bar.anime .bar .third, .b-stats_bar.manga .bar .third
{ background-color: #E0E0E0; }
.b-stats_bar.anime .bar .third, .b-stats_bar.manga .bar .third
{ color: #176093; }
/*----------------------------*/
.l-top_menu-v2 { height: 36px; }
.l-top_menu-v2 .logo-container:hover, .l-top_menu-v2 .menu-icon:hover, .l-top_menu-v2 .menu-dropdown>span a:hover
{ height: 30px; border-radius: 3px; }
.l-top_menu-v2 .glyph, .l-top_menu-v2 .logo-container .logo
{ height: 21px; background-position: center; }
.l-top_menu-v2 .global-search input
{ border: none; border-radius: 3px; }
.b-link_button.dark
{ border: 1px solid; }
.subheadline, .headline, .midheadline, .b-hot_topics-v2
{ border-bottom: 1px solid; }
.subheadline, .headline, .midheadline
{ border-left: initial; padding-left: 0; padding-right: 1px; }
.subheadline a:hover, .subheadline a:hover:before, .subheadline a:hover:before, .midheadline a:hover, .p-dashboards-show .linkheadline a:hover, .p-dashboards-show .linkheadline a:hover:before
{ text-decoration: none; }
.p-dashboards-show .linkheadline>a
{ text-decoration: none; }
.l-top_menu-v2 .active .submenu
{ margin-top: -4px; }








@S John, ты мне то не базарь слышь@S John@Раз-Два, ты лучше скажи, что ты думаешь о новом оформлении. Лучше, хуже или ты не увидела разницы.@Раз-Два@S John@Whitie, не только. Там много изменений в внешнем виде, в реакции на мышку. Посмотри внимательно. Но и цвет тоже важен.@Whitie@S John, тоже цвет меняется.Да я ниче не говорю, просто думал, что какая-то там тематика, что ли, будет, а тут просто цвет другой.
@S John@Whitie, тематика - тривиальная вещь. Любой может засандалить пару картинок. Цель была в том, чтобы внешний вид не выглядел как случайный набор элементов, а приобрел цельный вид. Обрати внимание, что произошло радикальное упрощение внешнего вида. При этом он не превратился в тривиальный, он имеет свой особый вид, сразу различимый пользователем. То есть именно то, что называется стилем. Я постарался сделать сайт "стильным". Это была совсем не легкая задача, я перебрал десятки вариантов, прежде чем достиг того, что хотел.@Whitie@S John, добре, на вкус и цветЯ лишь про то, что ожидал чего-то большего от заголовка "морская тема", не более
@S John@S John@Whitie, тут более принципиальный вопрос, как он выглядит по сравнению со старым. Было бы интересно услышать, что вот раньше были цветные полоски, а сейчас их не стало. Раньше при наведении мышки текст заголовка подчеркивался, а сейчас он полностью меняется. "Это красиво и стильно" или "это аляповато и раздражает". Я выбирал новое представление на основании собственного вкуса, но может так получиться, что пользователи Шики будут иметь другое мнение.@Matsukaze,Какой-то другой броузер, который ведет себя по-другому. На самом деле даже в моем стандартом Хроме в 10-х Виндах я уже натолкнулся на пару багов и в поведении и в самом коде и пришлось делать workaround-ы.
Но сейчас мне более интересно, как другой вид будет восприниматься пользователем. Техническая реализация - другой вопрос, я совсем не уверен, что способен с ней справиться. Я совершенно нулевой технарь.
Я предложил только идеи нового внешнего вида (или одного из вариантов внешнего вида).
@S John, я не захожу на главную вообще@S John,@Полезный Мусор@Раз-Два, изменения будут на каждой странице.@Раз-Два@S John, пусть будутмне и на стандартной норм
@Раз-Два, Будет повод заходить)@S John@S John, внешние CSS можно подключать через import. сайт это поддерживает уже довольно давно. кажется, с весны (в клубе css стилей должны быть примеры).@S John@morr, спасибо, нашел.А нельзя ли реализовать возможность помещать CSS файл прямо на сайте Шикимори? Ее отсутствие приводит к определенным неудобствам. Доступ к внешнему сайту может быть медленным или он просто может быть недоступен. Кроме того размещение файлов на внешнем сайте позволяет использовать трассировку доступа к файлу с целью деаномизации пользователей. Многие совершенно обоснованно с недоверием относятся к подкачке файлов с внешних сайтов.
Также есть смысл сделать отдельную библиотеку стилей, расположенную в фиксированном месте сайта, где каждый из стилей оформлялся бы стандартным образом (например так, как моя заметка). CSS творчество стало очень популярным на Шики и может быть есть смысл поддержать его на уровне сайта.
@morr,@WhitieОднако здесь немного другой случай. Изменения затрагивают не только субъективную оценку, но и совершенно объективные показатели, для которых мы можем воспользоваться логикой и убеждением.
Прежде всего я хочу отметить, что это не был получасовой проект. Он занял у меня несколько месяцев, когда проверялись разные варианты, сравнивался с внешний видом сайтов похожего назначения. В самом начале я сделал несколько эскизов оформления. Затем из них был выбран лучший, который я начал реализовывать в CSS.
Я прекрасно понимаю, что никто не заказывал мне этой работы и от нее просто можно отмахнуться даже без представления, что реально было сделано. Я попробую кратко объяснить результаты, даже если их все проигнорируют.
1. Ширина верхней контрольной полосы. Изначально она была 46 пикселей, сейчас 38. При современных разрешениях экрана это может считаться несущественным изменением. Однако имеется универсальный закон построения внешнего вида компьютерного интерфейса, который утверждает, что максимальное количество полезной информации должно быть предоставлено пользователю без необходимости предпринимать специальные усилия для того, чтобы перейти к другой части. Даже просто необходимости перевести взгляд, уже не говоря про прокрутку экрана. 8 выигранных пикселей - это примерно половина строки существенной информации из примерно 10 строк, которые окидывает своим взглядом пользователь, переходя на новую страницу.
Кажется, что 5%, - незначительная часть. Но она уже такого размера, что заметна пользователю. Роль верхней полосы - чисто техническая, она не имеет эстетического наполнения, как в некоторых других сайтах. Ее необоснованное расширение заставляет пользователя испытывать дискомфорт.
2. Оригинальный черный цвет верхней контрольной полосы. Она приковывает внимание при переходе на новую страницу. Однако пользователю не нужна эта полоса в большинстве случаев. Она должна удовлетворять следующим критериям:
а. Ее визуальные элементы должны быть достаточно констрастными, чтобы при необходимости ими воспользоваться.
б. При переходе на новую страницу она не должна бросаться в глаза, чтобы ваше внимание было обращено на содержательную часть, а не на то, что вам совершенно ненужно. Иначе вы будете испытывать дискомфорт.
3. При выборе меню в оригинальном варианте оно воспринимается как расширение верхней контрольной полосы. В результате вам приходится тратить усилие, чтобы отделить содержание верхней полосы от пунктов меню. Я добавил небольшую полоску, разделяющую меню от верхней контрольной полосы, в результате при первом взгляде вы отделяете одно от другого.
4. Я пока остановлюсь. Поверьте, имеется еще множество подобных пунктов, где я внес изменения. Они не "мне захотелось", они объективно лучше по сравнению с тем дизайном, изменения которого я предлагаю. Вы можете зайти в мой профайл и поиграть с новым видом.
@Whitie@S John, да никто не спорит, кому как нравится. Мне и оригинальная-то тема шики не то чтобы доставляет в эстетическом плане, так что чего уж там