Каталог статей » CSS - Страница 1

Зачастую, пользователи и гости сайта добавляют изображения на сайт, или прикрепляют к постам на форуме, и если такое изображение больше определённых размеров оно может испортить внешний вид сайта. Вот в таких случаях и возникает необходимость ограничить максимальные размеры картинок.

Сделать это достаточно просто. И принципиально-различных решений всего два: при помощи стилей - CSS (и expression для ранних версий Internet Explorer´а), и при помощи JavaScript

В данном материале расскажу про ограничение размеров при помощи стилей, так как считаю наиболее грамотным и простым решением, если не считать «ботвы» с expression, вместо которого лучше использовать полноценный JavaScript...

Ограничение максимальных размеров картинок в контент модулях

И так, для материалов контент модулей (все модули, кроме форума, гостевой,мини чата) в CSS добавляем следующие стили:

Столкнулся с непроходимостью стилизовать инпут типа файл.
Оказалось это не совсем просто.
Поискал в Инете, нашёл несколько способов видоизменения данного поля, но большинство из них вовсю используют JavaScript и слишком громоздки и избыточны.

Мне нужен был простой и лёгкий способ, без всяких наворотов.

Вот мой вариант.
Смысл примерно такой: запаковываем файл-инпут в блок, с фоновой картинкой кнопки,создаём дополнительный инпут для вывода значения (название выбранного файла) из inputtype="file", и скрываем стилями файл-инпут.

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

Все сайты, по макету вёрстки, можно разделить на три принципиальные группы: жестко фиксированные (Rigid fixed), адаптивные резиновые (Adaptable fluid) и расширяемые эластичные (Expandable elastic) макеты.

В данной заметке, рассмотрим варианты подстройки элементов дизайна шапки, а именно - картинок, под резиновые макеты сайтов.

Делается это, обычно, тремя основными способами:

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

Вёрсткой шапки, с использованием не фиксированных областей с фоном ....

Хотел бы ещё затронуть такую тему, как фоновое изображение страницы, и динамическое изменение его параметров, в зависимости от разрешения экрана пользователя.

А именно:

• изображение должно полностью заполнять фон страницы, независимо от разрешения экрана;
• должно, по возможности, сохранять пропорции (соотношение сторон);
• изображение НЕ должно вызывать скроллинга (полос прокрутки);

С приходом CSS3 появилось такое свойство, как «background-size», непосредственно отвечающее за масштабирование фона. Многие современные браузеры стремятся соответствовать стандарту W3C и уже поддерживают это свойство.

К ним относится: Opera 9.5 и выше, Firefox 4 и выше,Safari 3 и выше, Chrome 4 и выше, Konqueror 3.5.4, и, как ни странно, лидер неподдержки стандартов - Internet Explorer 9.

Вы наверно слышали про hasLayout в ие. Давайте разберемся, что это такое.

Полная и хорошая статья про haslayout находится здесь: Изучаем наличие layout. Читать её нужно обязательно всем верстальщикам.
В этой статье написано много букв, и поэтому для лентяев и у кого мало времени быстренько на пальцах объясню, что это такое.

Что такое haslayout

Haslayout - «свойство» элементов исключительно в ie под Windows. Некоторые элементы этим «свойством» обладают сразу, т.е. haslayout=true. Другим элементам, если нужно, его можно задавать.

Для чего нужен haslayout

Haslayout нужен для исправления множества несоответствий веб-стандартов у ie. Т.е. с помощью haslayout-а можно «манипулировать», как тот или иной эелемент будет отображаться в ie.

Прозрачность в CSS довольно модная техника в последнее время, которая вызывает трудности в кроссбраузерной реализации. До сих пор не существует универсального метода, который бы позволял реализовать прозрачность для всех браузеров. Однако в последнее время ситуация заметно улучшилась.

В этой статье подробно рассмотрены существующие подходы, а также приведены примеры кода и пояснения, которые помогут вам добиться одинакового результата во всех браузерах с минимальными трудозатратами.

Стоит упомянуть следующий момент: несмотря на то что прозрачность используется вот уже в течение нескольких лет, она никогда не была частью стандарта CSS. Это нестандартное свойство, которое должно стать частью спецификации CSS3.