Выражая IT

Другой быстрый урок. Вот то, просто и красиво, используя силу CSS ... но было трудно concieve (и это, конечно, не мне), чтобы начать с. Добавление DropShadow, может быть peice пирога для многих из нас, используя некоторые инструменты для редактирования изображений, как Photoshop, Fireworks НФА и др.
Причина, почему я выбрала тени с помощью CSS является то, что, как правило, при создании дизайна страницы / HTML заявления, требования сохранить итерации. Я имею в виду, в существующий веб-сайт с большим количеством изображений, как те, отображающий Freinds списка или галереи изображений, трудно будет переработать весь груз изображений, которые уже были выгружены, чтобы добавить или удалить тени, для этого вопрос.
Так что если вы сделали немного вперед мышления при создании HTMLS добавить эти дополнительные подразделения или правило, ситуация такова, что у вас есть цикл логика создания этих икон / миниатюр в XSL, PHP. JAVA или любой другой программы / скриптовый язык, вы можете добавить его в любое время, то это просто вопрос о шоу и скрыть эти тени с помощью свойства CSS Display, в соответствии с клиентами постоянно меняющихся требований ... Я havn't сделать этот вид дальновидных до этого ... но ahev прямо сейчас!

В приведенном ниже примере, исходное изображение без теней и dropshadows применяются по мере необходимости! Кроме того, я пошел немного больше, используя приемы из моих предыдущих Тута (Well! это, вероятно, кратчайшие различные учебные материалы, так что оправдано только называя их "Тута" 'ы) об использовании CSS клип собственности на показать только

Исходное изображение

Результаты CSS DropShadow

Посмотреть демо | Скачать файлы исходного кода

Положите стилей в Top

Если вы хотите, чтобы страница загружается постепенно, то есть, мы хотим, чтобы браузер отобразить все содержимое он как можно скорее, поставить CSS в верхней части страницы внутри документа HEAD. Это делает страницы, как представляется, загрузка быстрее, так как это способствует прогрессивным оказание страницы. Это особенно важно для страниц с большим количеством контента и для пользователей медленных подключений к Интернету.

Это документированный факт, что для повышения общего пользовательского опыта, важно обеспечить прогресс показателей и визуальное обратной связи. Чтобы избежать перерисовки элементов на странице, в случае их изменения стилей, некоторые браузеры, включая Internet Explorer, блоков рендеринга страницы, пока CSS полностью загружен. Благодаря этому, пользователь получает видеть пустая белая страница.

W3 HTML характеристики "также заявляет, что CSS должна включать меня в головной части HTML-страницы. at the bottom of the page, so it's best not to use it. Также отметим, что в IE @import ведет себя так же, как использование <link> в нижней части страницы, поэтому лучше не использовать.

Избегайте использования браузера особенности

Фильтры: Использование фильтров увеличивает потребление памяти и применяется для каждого элемента, а не на изображение, так что проблема умножается. Кроме того, Фильтры IE собственности, следовательно, не будет работать, как предполагалось в других браузерах. Если вы хотите прозрачных или градиент фона, использовать 1Pixel с изображениями.
Выражения: CSS выражения хорошая возможность, чтобы в CSS, но до сих пор IE особенность. Кроме того, важно отметить, что эти выражения оценивается при отображении страницы и размер, и даже прокручивается, когда пользователь перемещает указатель мыши на странице. Нечего и говорить, это может повлиять на производительность вашей странице. Таким образом, в простых словах, Избегайте использования CSS выражения, если вы чувствуете свои плюсы "весит больше, чем минусов"

Externalise вы CSS

Использование внешних CSS приведет к более быстрой загрузки страницы, поскольку JavaScript и CSS файлы кэшируются в браузере. Встроенные CSS в документах HTML получить скачали каждый раз, когда документ HTML запрашивается. Это может действительно уменьшить количество запросов HTTP сделано, но впоследствии увеличивает размер HTML-документа. Внешний CSS кэшируются браузером, размер документа HTML уменьшается, не увеличивая число запросов HTTP.

Обратите внимание, что, если пользователи на вашем сайте есть несколько просмотров страниц за сеанс, и многие из ваших страниц повторно использовать те же скрипты и таблицы стилей, есть большая потенциальная выгода от кэшированные внешние файлы.

Пакет Ваш CSS файл

Упаковка или хруст ваш CSS практика удаления ненужных символов из кода чтобы уменьшить ее размер таким образом улучшая время загрузки.

CSS может меня хрустел, удаляя все комментарии и любые нежелательные символы, такие как пробелы, новые строки и т.д.

Reset CSS, / CSS являются установить количество элементов стиля для конкретного базового, который создает последовательность в различных браузерах.

Мы все были через кошмары написания кросс-браузерный CSS в. Поэтому, когда мы начинаем писать наш CSS, это практика, чтобы сбросить его первым удалить / сброс любого поперечного несоответствия браузера. Сброс CSS, просты несколько строк CSS, что вы начинаете с CSS, что дает вам четкую базу, чтобы начать строить свой на.

CSS сбрасывает, что я обычно предпочитаю использовать выглядит следующим образом

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

ол, ул {
Список стиле: нет;
}

h1, h2, h3, h4, h5, h6 {
Размер шрифта: 100%;
начертание шрифта: нормальный;
}

Сбросить размер шрифта в броузере
Также обратите внимание на сброс, который был применен в браузере размер шрифта в следующую строку ...

html {font-size: 76%;}

Выше CSS сбрасывает размер шрифта в броузере на 10 пикселей, и это дает возможность работать с относительными размерами шрифта (который каждый из важных соответствии WAI prespective)
Для, например, в следующем определении размера шрифта в диапазон установлен на 10 пикселей, что в paragarph установлен на 14 пикселей ...

span {font-size: 1em;}
p {font-size: 1.4em;}

Например.
Задание свойств CSS, как это,

поле: 5px 0;

фактически означает,

поле: 5px 0px 5px 0px;

Это первое свойство маржа означает:

верхний и нижний края = 5px | | левого и правого поля = 0px

так что "больше сокращение 'будет

поле: 5px 0px 5px 0px; (T, R, B, L)

Вы даже можете использовать 3 значения

поле: 5px 0 5px;

это означает,

топ = 5px | | правого и левого = 0px | | нижней = 5px

Internet Explorer автоматически добавляет кнопки для заполнения в HTML-формах.
Это пространство растягивается в зависимости от длины текста кнопки.

Решение добавить к переполнению его стиль .... т.е.

. Кнопка {
Переполнение: видимый;
заполнение левой: 10px важно;
обивка правом: 10px важно;
... Любой другой стиль для этой кнопки ...
}

ИЛИ

< input type="submit" value="Internet explorer respects my padding" style="overflow:visible; padding-left:10px !important; padding-right:10px !important;" >;