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

Страницы: 
Всего материалов: 7
Показано: 1-7
 

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

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

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

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

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

/оставить комментарий ›››
Категория: CSS | Просмотров: 17842  | Добавил:  | Дата: 07.08.2011 | Комментарии (7)
 

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

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

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

/оставить комментарий ›››
Категория: CSS | Просмотров: 25535  | Добавил:  | Дата: 18.05.2011 | Комментарии (3)
 
Подстройка размера изображения под разрешение экрана средствами CSS

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

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

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

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

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

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

/оставить комментарий ›››
Категория: CSS | Просмотров: 99828  | Добавил:  | Дата: 15.03.2011
 

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

А именно:

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

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

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

/оставить комментарий ›››
Категория: CSS | Просмотров: 67651  | Добавил:  | Дата: 15.03.2011 | Комментарии (5)
 

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

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

Что такое haslayout

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

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

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

/оставить комментарий ›››
Категория: CSS | Просмотров: 5339  | Добавил:  | Дата: 08.08.2010
 

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

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

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

/оставить комментарий ›››
Категория: CSS | Просмотров: 8403  | Добавил:  | Дата: 08.08.2010 | Комментарии (2)
 
Smashing Magazine


Работа с CSS не всегда проста. Конечно, все зависит от опыта и навыков, но иногда CSS кодинг может превращаться в кошмар. Лучший способ упростить код это полезные, но не очень известные свойства и атрибуты которые можно использовать для создания семантически корректной разметки.

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

Это обзор 70 техник предложенных экспертами CSS, вы должны быть готовы пройти по списку ссылок и похожих публикаций в конце статьи.

Мы хотим сказать спасибо всем разработчикам, которые делятся своими идеями, техниками, методами, знаниями и опытом с их читателями.

/оставить комментарий ›››
Категория: CSS | Просмотров: 9773  | Добавил:  | Дата: 13.04.2009 | Комментарии (1)
Последние комменты
Учебник по системе uCoz. Создание сайта
Не получается скачать(
Автор: Denis
Audio Transcoder v1.9.8.1218 Portable Rus
Audio Transcoder 1.9.8.1219 ML Portable
Автор: Anton
Оформление результатов поиска картинками-превью...
Цитата Add
Будет ли скрипт работать screen_url со скриншотами??? Я пробовал сделать но не выходит

Смотря как представлены скриншоты в материале. Если они выводятся картинками - то да, будет, если иначе - то нет.
Автор: Anton
Оформление результатов поиска картинками-превью...
Цитата Add1
Мне нужно чтобы скрин выводил из каталога файлов

Со всеми “нужно” жду вот здесь: Платный радел
Автор: Anton
Как сделать свои BB-коды для сайта / форума
Цитата foksin
Подскажите пожалуйста как реализовать таблицу на форуме, нужен скрипт, не подскажите какой?

BBComplex - JavaScript модуль для сайтов системы uCoz
Автор: Anton
Как сделать свои BB-коды для сайта / форума
Подскажите пожалуйста как реализовать таблицу на форуме, нужен скрипт, не подскажите какой?
Автор: foksin
Оформление результатов поиска картинками-превью...
http://likbezz.ucoz.ru/search....oto&t=0
Автор: Anton

Меню сайта
Категории раздела
CSS [7]
CSS (англ. Cascading Style Sheets - каскадные таблицы стилей) - технология описания внешнего вида документа, написанного языком разметки.
HTML [7]
HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме.
Hack [0]
Под хаком подразумевается метод, позволяющий воспринимать CSS только определенному браузеру. Хаки могут использоваться не только для исправления багов в верстке, но и в случае использования определенных особенностей браузера для ускорения рендеринга web-страницы в нём (к примеру CSS3-свойства)
Прочие статьи [5]
Всё то, что не вошло в выше представленные категории.

Мобильная версия