Висловлюючи 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;" >;