CSS | WebDuty

CSS

Как убрать бордер iframe в IE7?

Статья от 28.08.09 в категории CSS
Теги: , ,

Минут 15 придумывал как его убрать. В Мозилле и даже IE6 всё работает, а вот IE7 сопротивлялся.
Оказалось, вот так:
frameborder=”0″

Полубезопасные шрифты

Статья от 23.08.09 в категории CSS
Теги:

Все мы знаем об обычных безопасных шрифтах, таких как Arial, Verdana, Georgia, Times New Roman и т.д. Они уже давно стали стандартом для веб-типографики, но есть ещё много шрифтов, которые являются “почти стандартными”, или полубезопасными.
Это те шрифты, которые не являются стандартными на некоторых ОС, но зачастую установлены на них посредством других программ, например Microsoft Office или Adobe Creative Suite. У многих людей стоит это ПО, так что использование этих шрифтов вполне обосновано.
Кроме того, если у пользователя не установлен нужный шрифт, используя CSS можно указать другой вариант. Например так:

h1 { font-family: Myriad Pro, Arial, Sans-Serif; }

где Myriad Pro – нужный нам шрифт, а Arial – запасной.
Вот некоторые полубезопасные шрифты:

Myriad Pro

Myriad
Веб-дизайн

.myriad {
	font-family: Myriad Pro, Trebuchet MS, Arial, Sans-Serif;
}

10 полезных CSS приёмов

Статья от 25.07.09 в категории CSS
Теги: ,

cover

5 способов оптимизации CSS

Статья от 23.07.09 в категории CSS
Теги: ,

Некоторые из нас, возможно, помнят времена, когда 30KB были рекомендованным максимумом размера веб-страницы, включая HTML, CSS, Javascript и изображения. На данный момент у многих достаточно больших сайтов только CSS-стили имеют размер более 30KB.
Но существуют некоторые принципы, которые помогут оптимизировать ваш CSS код. Оптимизация не просто уменьшает размер файла, она делает ваши CSS-стили более организованными и эффективными. Использование оптимальных методов CSS неизбежно приведет к уменьшению размера CSS-файлов.

1. Используйте сокращенные формы

Используйте сокращенные формы таких свойств как margin, border, padding, background, font, list-style. Это самый простой способ оптимизации CSS-стилей. Если вы ещё не применяете этот метод – начните сегодня.
Сокращенная форма означает, что вместо использования различных деклараций для соответствующих свойств…

   p { margin-top: 10px;  
        margin-right: 20px;  
        margin-bottom:  30px;  
        margin-left: 40px; }

… вы используете их комбинацию:

   p { margin: 10px 20px 30px 40px; }

Правила, по которым браузеры интерпретируют сокращенную запись показаны на следующих иллюстрациях.
css 1
Аналогичные правила выполняются для padding и border-weight.
По следующим правилам можно сократить свойство font
css 2
Это лишь два примера использования сокращенной формы CSS-свойств. Их использование сделает ваш код гораздо более кратким.
Более подробную информацию о сокращенной форме я нашел в этой статье. Возможно, я коснусь этого вопроса более подробно в своих следующих статьях.

5 способов улучшить ссылки

Статья от 21.07.09 в категории CSS, jQuery
Теги:

image
При наведении курсора на ссылку она, как правило, меняет свой цвет, либо становится подчёркнутой. Это довольно скучно. Вот несколько способов улучшения ваших ссылок.

Обзор CSS библиотек.

Статья от 13.07.09 в категории CSS
Теги: ,

В данный момент CSS является основой современной вёрстки, и время, которое верстальщик тратит на разработку CSS стилей увеличивается с каждым днем. И сложность CSS стилей будет расти с прогрессом веб-технологий браузеров. Для того, чтобы облегчить труд веб-разработчика были придуманы CSS библиотеки.
CSS

Правильные размеры шрифта

Статья от 23.06.09 в категории CSS
Теги: ,

thumbnail2
В большинстве случаев базовый размер шрифта – 16px. Будем отталкиваться от него.

Создаем красивые формы с помощью NiceForms

Статья от 10.06.09 в категории CSS, Javascript
Теги: , , ,

Niceforms позволяет создавать красивые формы путем замены элементов формы графическими элементами. Это полностью автономный скрипт, для его работы не требуется дополнительные библиотеки, такие как jQuery либо Prototype. Niceforms разбирает DOM-дерево страницы, находит элементы формы, скрывает их, а на их место ставит их графические аналоги. Скрипт ищет формы с классом niceform.

cover

Изменённые формы работают так же как и обычные. Поля и кнопки созданные Niceforms полностью масштабируемые. Вы можете задать их ширину и высоту с помощью HTML-свойства. Поддерживается использование клавиатуры для навигации между элементами формы.

Более подробнаую информацию вы можете найти на сайте NiceForms.

Посмотреть пример Cкачать NiceForms

CSS-меню в стиле Mac OS

Статья от 06.06.09 в категории CSS
Теги: , , ,

Вы прошлых статьях было рассказано как сделать меню в стиле Mac OS используя Javascript, теперь сделаем примерно тоже самое используя исключительно HTML-разметку и CSS.
Основой для меню будет неупорядоченный список. Создадим две версии: расширяющееся кверху и книзу.
cover2
Для создания меню будем использовать псевдо-класс :hover на тег <li> и селектор “+” для изменения стилей пунка меню, находящихся справа.

Проблемы со шрифтами в формах и таблицах

Статья от 03.06.09 в категории CSS, Браузеры
Теги: ,

Формы

Проблема состоит в том что некоторые браузеры отображают форму неправильно. Это объясняется тем, что по умолчанию форма не наследует CSS-стили семейства и размера шрифта.
Следующий CSS исправляет эту ошибку:

input, textarea, select{
font-family:inherit;
font-size:inherit;
font-weight:inherit;
}

Таблицы

В некоторых браузерах таблицы также имеют свои стили. Вы наверно сталкивались с тем, что текст в ваших таблицах больше чем остальной на странице. Проблема таже – таблицы не наследуют свойства шрифта как и формы.
Проблема решается следующим CSS:

table{
font-family:inherit;
font-size:inherit;
font-weight:inherit;
}
Предыдущие статьи