HTML/CSS
19 подписчики

Подписка на категорию статей

Активируй уведомление на email при появлении новой статьи в этом разделе.

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

 

 

В данной статье мы реализуем ссылку вида "Наверх" или "ToTop" при помощи HTML. Для этого нам нужно два элемента - элемент с определенным идентификатором id и ссылка с атрибутом href вида #id.

 

Среда, 16 Января 2013 15:28

Интересные эффекты с text-shadow

Впечатлилась статьей, найденной в сети и решила поэкспериментировать самостоятельно. Я покажу как можно при помощи простого свойства text-shadow делать интересные эффекты в отображении текста.

 

Заголовки в HTML делаются при помощи тегов h1-h6. Причем, h1 - самый главный заголовок, у него по умолчанию самый большой размер и он должен быть единственным на странице. Далее заголовки уменьшают свою важность - h2, h3 и т.д. Наименее важный заголовок - h6. Подробнее о заголовках в статье Верстка сайта. Урок 3. Заголовки h1-h6

 

Вторник, 15 Января 2013 08:43

Делаем оглавление на HTML/CSS

Недавно была поставлена задача сделать оглавление. По сути, в строке должно быть три блока - левый и правый с шириной внутреннего контента, а средний с фоновыми точками должен занимать всю остальную ширину.  На ум сразу пришло решение через свойства box и box-flex.

 

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

 

Четверг, 10 Января 2013 16:34

Стилизация элементов на focus

Состояние focus свойственно элементам управления и ссылкам. Для элемента управления <input type="text/password/email"> состояние focus наступает, когда в поле ставится курсор. У ссылки focus можно получить при помощи клавиши Tab при наличии атрибута tabindex.

 

Среда, 09 Января 2013 16:25

Пропорции картинки CSS

В данной статье мы рассмотрим пропорции картинки, как изменять размеры картинки, сохраняя ее пропорции, и как изменить пропорции картинки по размерам родительского блока.

 

Вторник, 08 Января 2013 08:57

Использование !important

Приставка !important используется в CSS для придания важности стилям. Если при разный стилевых правилах для одного элемента, используется !important, то именно этот стиль и будет применен.

Во время написания предыдущей статьи Рисуем сердце на HTML, CSS я упоминала, что трансформация элемента влияет только на отображение элемента, а не на его расположение относительно окружающих. А теперь хочу более подробно раскрыть эту тему. Стилизируя элемент, мы меняем его внешний вид. Задавая элементу размеры, мы его увеличиваем. Окружающие элементы подстраиваются под его размеры. Но некоторые свойства вырывают элемент из потока (position: absolute) или не влияют на его расположение в потоке (transform: rotate/scale/skew). Рассмотрим эти интересные свойства.

< 1 2 3 4 5 6 7 8 9 10 >

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов