Спросите SM [CSS / JS]: Pixel Решения Ширина, Модальные

Автор: Крис Coyier

Это наш второй партии Ask SM, показывая на вопросы читателей о веб-дизайне, ориентируясь на HTML, CSS и JavaScript.Если у вас есть вопрос по одной из этих тем, не стесняйтесь связаться со мной (Chris Coyier) с помощью одного из этих способов:

Отправить письмо задать [в] SmashingMagazine [точка] com с question.
Задайте свой вопрос в нашем forum.Вам нужно будет зарегистрироваться (да-да, форум официально не запущен, но она работает!)
Или, если у вас есть быстрый вопрос, просто твит нас @ smashingmag или @ chriscoyier с тегом “. [Задать SM]”

Пожалуйста, обратите внимание: я буду делать то, что я могу ответить на вопросы, но я, конечно, won’ т быть в состоянии ответить на все.Тем не менее, отправке вопросов на форуме дает вам лучшие возможности получить помощь от community.

1.Различные цвета для элемента списка Bullets

@ christopherscot пишет:

Я хотел было простой способ указать цвет в списке bullets… list-style-color?, Может быть,

Эй, Кристофер.Увы, list-style-color не существует.Есть несколько различных способов вы можете идти о нем же.Одним из способов было бы обернуть содержание каждого элемента списка в пролете, как это:

<ul>
   <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span></li>
   <li><span>Aliquam tincidunt mauris eu risus.</span></li>
   <li><span>Vestibulum auctor dapibus neque.</span></li>
</ul>

Тогда, в вашем CSS:

ul {
   list-style: disc;
   color: red;
}

ul li span {
   color: black;
}

colored bullets

Посмотреть Demo

Другим способом было бы удалить пули полностью, установив list-style-type: none.Затем примените фоновое изображение для элементов списка, убедившись, чтобы подтолкнуть текст поверх сделать room.

ul {
   list-style: none;
}

ul li {
   background: url(images/bullet.png);
   padding-left: 20px;
}

2.Roll-Over Button

@ jonfreeze пишет:

Как я могу создать опрокидывание кнопки, но по-прежнему иметь возможность копировать и вставлять текст на кнопке

Эй, Джон.Для того, чтобы сделать текст копирования и pastable, текст должен быть реальный текст Web.Но мы все еще можем создать красивый опрокидывание эффект смещения фонового изображения кнопки на опрокидывание.Мне нравится создании специального toolbox CSS класс для кнопки.Таким образом, в любое время мне нужно сделать ссылку выглядеть более кнопки-как, я просто применить class="button" на любую ссылку или вход button.

button sample

Вот CSS:

.button             { padding: 5px 15px; background: url(images/button-bg.png) repeat-x; color: #222;
                      border: 1px solid #ccc; font: bold 18px Helvetica; text-decoration: none; }
.button:hover       { background-position: bottom left; }

Обратите внимание, что все we’ делаем меняется фон позиции по опрокидыванию, а не замены его на новый образ.Это имеет двойную пользу одного меньше запроса сервером и гладкой, быстрой transition.

Посмотреть Demo

3.Пиксельная ширинаDecision

Джон Schwenn пишет:

Я знаю, все больше и больше сайтов, особенно те, с высоким качеством дизайна, толкают шире.Когда я начинаю новый проект, я думаю о моем client’ демографические и с целью сайте.Я просто проверил аналитики отчет за одним из больших сайтов электронной коммерции, что я бегу.Существовали около 1300 посещений от людей, чьи разрешение было под 1024 пикселей в ширину.Затем я посмотрел на доход от этой группы, и это было почти 5% от заказа в течение последних 30 дней.Это все еще лучшая практика придерживаться хорошего ol’ 800 ширины?Или я должен понимать, it’ с 2009 года?А как насчет 5% от продаж Исходя из 800× 600 пикселей множество компьютеров?That’ все еще приличный кусок продаж просто бросить в сторону и достойный кусок, чтобы раздражать людей (и, возможно, потерять) с боковой прокрутки website.

Эй, Джон, я думаю, что у вас уже есть прекрасный настрой на принятие решений о сайте ширины.Вы смотрите на реальных данных аналитики сайта в вопросе.То есть именно то, что вам нужно прочитать, чтобы сделать правильный вызов.Я don’ т думаю, что любой бизнес в мире были бы готовы потенциально потерять 5% от ее продажи без чертовски хорошая причина.Таким образом, реальный вопрос: “ Есть ли ощутимые выгоды для проектирования шире, чем 800 пикселей ” Если вы приготовили действительно сладкий дизайн, что выгоды от дополнительных горизонтальных комнате, что новая конструкция может просто компенсировать?, что на 5% и даже больше.Но если вы просто расширение ради расширения или из-за текущих тенденций, то don’ T.Пусть сам дизайн направлять вас.Если вы можете снять все, что вам нужно, и вписать его красиво на 800 пикселей, широкий монитор, сделать это.Если вы действительно идете шире, принимать более взвешенные решения о видимой области на 800 пикселей толпы.Например, don’ T поставить “ Добавить в cart” кнопки на правый дальний угол, где он несет ответственность, чтобы сократить off.

Для весело, хотя, let’ посмотрим на более общую статистику, предполагая, мы строили новый веб-сайт без существующие анализа данных.w3schools выдает экран разрешением data на своем веб-сайте в январе каждого года.Это doesn’ T включает 2009 года, но предполагая, что тенденция сохранится, она видит 5% или меньше посетителей с 800× 600 мониторов.Вот некоторые другие с разрешением экрана данные из моего собственного аналитика:

CSS-Tricks.com (аудитория веб-дизайнеров и компьютерных подкованных людей):

Январь 2009, 800× 600 – 0,33%
Июня 2008 года, 800× 600 – 1,08%
Самое популярное разрешение: 1280× 1024

BeaconAthletics.com (сайт электронной коммерции ориентации школ и государственных сл� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → 05.02.2009 by Newsbot