Вы перешли по метке:

css

Адаптивное меню

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

Читать полностью demo 2012-12-08

Вещи, которые вы можете делать с checkbox hack

Все мы знаем, что "Тег <label> устанавливает связь между определенной меткой, в качестве которой обычно выступает текст, и элементом формы (<input>, <select>, <textarea>). Такая связь необходима, чтобы изменять значения элементов формы при нажатии курсором мыши на текст".

Читать полностью demo 2012-12-06

Коротко о бэм

Совсем коротко о бэм

Читать полностью 2012-11-05

Резиновые сетки для верстки (адаптивный веб-дизайн)

Примеры резиновых (эластичных) сеток, так называются сетки, которые изменяют свою ширину при изменении размеров окна браузера.

Читать полностью 2012-10-26

Закругляем углы таблицы

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

Читать полностью demo 2012-10-18

Простая модульная сетка

Подавляющее большинство сайтов в той или иной мере используют сетку.

Читать полностью demo 2012-10-09

Центрируем несколько блочных элементов (DIV) при помощи CSS

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

Читать полностью demo 2012-09-17

CSS, возможно, вы этого не знали

Неявные моменты css

Читать полностью 2012-08-29

Резиновые макеты: примеры, статьи и фреймворки

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

Читать полностью 2012-07-28

Меняем слова с помощью CSS анимации

В сегодняшнем руководстве мы создадим новый эффект стилевого оформления сайта. Его суть будет заключаться в замене частей имеющихся предложений. «Замену» слов будем производить с помощью CSS анимации.

Читать полностью demo 2012-07-22

Резиновые макеты (разметка) для вашего сайта

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

Читать полностью demo 2012-06-10

Пространство между inline-block элементами

Дело вот в чем: inline-block элементы располагаются последовательно таким образом, что между ними возникает пустое пространство.

Читать полностью 2012-05-19

Разметка для резинового по ширине макета

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

Читать полностью demo 2012-04-29

Свойство overflow и плавающие (float) блоки

При кодировании на плавающих блоках широко распространена следующая проблема - обертывающий блок расширяется не на всю высоту плавающего элемента.

Читать полностью demo 2012-04-08

CSS тень у блока

Чтобы создать тень у блока, я создал изображение и воспользовался CSS.

Читать полностью demo 2012-04-02

CSS3 lavalamp меню

Сегодня я покажу, как создать CSS3 lavalamp меню.

Читать полностью demo 2012-03-26

Вертикальный заголовок

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

Читать полностью demo 2012-03-15

Центрируем по вертикали в заголовке горизонтальную линию

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

Читать полностью demo 2012-03-14

Знакомство со свойством CSS vertical-align

Широко распространенно ошибочное мнение о свойстве vertical-align, которое заключается в том, что, будучи примененным к элементу, свойство vertical-align меняет вертикальное положение заключенных в этот элемент элементов.

Читать полностью demo 2012-03-05

Как убрать полосу прокрутки у тега textarea

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

Читать полностью 2012-02-26

CSS 100% высота

Я всегда сталкиваюсь с затруднениями, когда необходимо растянуть блок на 100% высоты страницы. Итак, почему бы не найти кроссбраузерное решение по растягиванию блока на всю высоту страницы?

Читать полностью demo 2012-02-25

Как писать правила CSS, работающие только с одним из браузеров: Chrome, Safari или Opera?

А как написать CSS правила и заставить браузер распознать, что написаны они специально под Chrome, Safari или Opera?

Читать полностью 2012-02-11

Выводим дату при помощи спрайтов

На сайте LearningjQuery.com реализован очень интересный вывод даты для каждого поста.

Читать полностью 2012-02-11

Насыщенность шрифта font-weight и Google Web Fonts

Допустим, вы зашли на Google Web Fonts в поисках бесплатного шрифта для вашего сайта. Вы находите нужный вам шрифт...

Читать полностью 2012-01-21

Простые подсказки на CSS3 и jQuery

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

Читать полностью demo 2012-01-15

Конфликты полей (margin) в CSS

Математика в CSS не работает.

Читать полностью 2012-01-02

Visibility или Display в CSS

Допустим, у вас есть элемент, который вы хотите временно спрятать. Что делать: поменять значение свойства visibility на hidden или лучше назначить свойству display значение none.

Читать полностью 2011-12-30

Невероятно полезные фрагменты кода для CSS

Ниже приведены небольшие фрагменты кода (snippets), который минимизируют ваши страдания и сэкономят время при написании CSS кода и, я надеюсь, вы найдете их полезными.

Читать полностью 2011-12-25

Стили для нумерации CSS

Резонно ожидать, что может возникнуть желание поработать над дизайном этих чисел. В СSS, однако, реализовать это желание довольно проблематично, но, к счастью, не невозможно.

Читать полностью demo 2011-12-19

Как сверстать макет при помощи CSS (таблицы стилей)

Давайте трансформируем визуальный концепт в работающий HTML/CSS макет.

Читать полностью 2011-12-06

CSS Центрирование в неизвестности

Когда речь заходит о центрировании в веб-дизайне, то чем больше информации известно о центрируемом элементе и его элементе-родителе, тем проще это центрирование выполнить.

Читать полностью demo 2011-11-26

jQuery упорядоченный список. Оформляем и реализуем счетчик

Кодировать последовательные элементы весьма утомительно, не правда ли? Однако существует простой решение.

Читать полностью demo 2011-10-24

Оформляем форму поиска при помощи CSS3

В сегодняшней статье я покажу, как оформить при помощи CSS3 форму поиска (идея взята с сайта apple.com).

Читать полностью demo 2011-10-16

Красивое горизонтальное меню на css3

Однажды вам понадобится сделать для своего сайта красивое горизонтальное меню.

Читать полностью demo 2011-10-07

Оформляем красиво тег SELECT при помощи CSS

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

Читать полностью 2011-10-06

Лучшие генераторы кода css 3

Я с ностальгией вспоминаю CSS2.1. Чтобы округлить углы требовалось время и знание фотошопа, однако все было просто. К тому же большинство разработчиков легко могли вспомнить дюжину свойств, не обращаясь каждые две минуты к справочнику. Спецификация CSS3 изменила все. Добавилось 116 новых свойств с различными вендорными префиксами и различным синтаксисом. Никто не вправе думать, что вы запомните все.

Читать полностью 2011-10-02

Красивая CSS форма

Как только вы начнете создавать сайт, вам придется поломать голову над тем, как спроектировать форму обратной связи.

Читать полностью demo 2011-09-29

CSS цвета в веб-дизайне

Это доступное руководство рассмотрит CSS цвета.

Читать полностью 2011-09-20

Свойство CSS Float. Плавающие элементы. Преодолеваем проблемы.

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

Читать полностью demo 2011-09-03

Форматируем таблицы при помощи CSS

В этой статье вы увидите, как при помощи стилей CSS отформатировать таблицы.

Читать полностью 2011-08-27

Отрицательное поле (margin) и верстка в три колонки

Правый столбец сайта расположим при помощи отрицательного поля.

Читать полностью demo 2011-08-25

CSS3 кнопки

В этой статье описан процесс создания CSS3 кнопок без использования изображений.

Читать полностью 2011-08-12

CSS лента с треугольниками по краям

Вы, скорее всего, уже неоднократно видели ленты и знаете, как они выглядят.

Читать полностью demo 2011-08-07

Центрируем элемент по вертикали, используя CSS

У дизайнера иногда возникает вопрос: как центрировать элементы по вертикали?

Читать полностью 2011-07-21

Как расположить элементы по горизонтали, используя css

В статье показано, как можно расположить элементы по горизонтали, используя CSS

Читать полностью 2011-07-18

Сокращения css | оптимизируем css код

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

Читать полностью 2011-07-17

Закладки css3

В этой статье я продемонстрирую, как можно при помощи CSS3 и HTML5 сделать закладки для сайта.

Читать полностью 2011-07-15

Разговорные облака на CSS3

Перед вами два примера, где разговорные облака созданы при помощи свойств CSS3.

Читать полностью demo 2011-07-12

CSS селекторы

В данной статье приведены основные селекторы CSS.

Читать полностью 2011-07-06

HTML5 и CSS3 форма обратной связи в виде конверта

Из этой статьи вы узнаете, как создать форму обратной связи полностью на HTML5 и CSS3.

Читать полностью demo 2011-06-25

CSS3 @font-face или как использовать любой шрифт на сайте

В этой статье показано, как использовать свойство @font-face.

Читать полностью demo 2011-06-22

Создаем красивые тени с помощью свойства CSS3 box-shadow

Теперь красивые тени можно создавать с помощью CSS3 без фотошопа.

Читать полностью demo 2011-06-21

Создание border (границ) у тега body

Концепт Body Border (границы у тега body) впервые был увиден мною на сайте Джона Хика hicksdesign.co.uk.

Читать полностью demo 2011-06-03

Четыре отличных CSS техники для ссылок

Каждая из этих техник основана на чистом CSS, без уродливых хаков, и JavaScript.

Читать полностью demo 2011-05-17

Word-Wrap: заставит текст свернуться

Сегодня я расскажу о редко используемом, но чрезвычайно полезном свойстве CSS word-wrap.

Читать полностью 2011-05-05

Кнопки-ссылки CSS

Большинство веб-мастеров используют кнопки CSS (созданные с помощью CSS) вместо изображений кнопок.

Читать полностью 2011-04-28

CSS3 градиенты

Safari 4+, Chrome 1+, Firefox 3.6+, и Opera 11.10+ - все поддерживают CSS3 градиенты.

Читать полностью demo 2011-04-11

Псевдокласс hover. «Все Кроме».

Но что если мы хотим изменить стиль у всех элементов кроме элемента, на который в данный момент наведена мышка?

Читать полностью demo 2011-04-06

CSS фоны: часто задаваемые вопросы

Важной частью веб-дизайна служат фоны (backgrounds и далее фоны) CSS. В свойствах(ве) фона располагают цвета и изображения, служащие фоном контента и отвечающие за эстетику сайта....

Читать полностью 2011-03-24

Сброс стилей от Эрика Мейера

Многие используют модифицированную версию популярного сброса (RESET) от Эрика Мейера:

Читать полностью 2011-03-18

Создание центрированной горизонтальной навигации

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

Читать полностью demo 2011-02-22

Большой размер фона, пожалуйста! CSS

Все более популярно проектирование веб-сайтов, у которых внешний фон заполняет все окно браузера.

Читать полностью 2011-01-25

Логотип меняет свой вид при скроллинге страницы

Существуют сайты, на которых с помощью css реализован любопытный эффект, а именно: при скроллинге страницы изображение (логоти) меняет свой внешний вид.

Читать полностью demo 2011-01-20

Основные свойства CSS для текста

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

Читать полностью 2011-01-13

Margin (поле), padding (подложка) и блочная модель CSS

В первой части ‘основы CSS’ мы будем говорить о полях (margins), подложках (padding) и блочной модели.

Читать полностью 2011-01-08

Горизонтальное выдвижное меню CSS

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

Читать полностью demo 2010-12-13

Термины CSS

Чтобы писать детально о css, необходимо полностью понимать терминологию css.

Читать полностью 2010-12-04

Как выровнять блочный элемент по центру страницы

Далее я опишу несколько способов, как можно выровнять блок по центру страницы.

Читать полностью 2010-11-27

Как прижать футер к низу страницы

В этой статье пошагово описано, как прижать футер к низу страницы.

Читать полностью demo 2010-11-26

Анимированное CSS3 горизонтальное навигационное меню

В этой статье показано, как создать анимированное горизонтальное меню с помощью CSS3. Основные особенности этого навигацционного меню в том, что...

Читать полностью demo 2010-11-17

Как сделать трехмерный элемент без изображений, используя только CSS3

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

Читать полностью demo 2010-11-14

Выпадающее меню на CSS

Я редко встречаюсь с выпадающими меню, которые ведут себе как выпадающие списки, хотя они мне очень нравятся.

Читать полностью demo 2010-11-13

Создаем рельефный текст

Рельефный эффект - очень популярная тенденция в веб-дизайне. В то же время его легко создать.

Читать полностью 2010-11-12

Распространенные ошибки CSS при разработке сайта

Если говорить начистоту, то из всех веб-языков CSS самый простой. Я говорю буквально, что может быть проще списка свойств, влияющих на элемент?

Читать полностью 2010-11-10

Кроссбраузерные прозрачные колонки

Прозрачность – эффект, который, к сожалению, не получил широкого развития в сети.

Читать полностью demo 2010-11-08

Изящная поисковая CSS3 форма

Недавно, когда я копался в CSS3, я узнал о парочке новых СSS трюков.

Читать полностью demo 2010-11-05

Большой фон CSS

Делаем фон во всю ширину окна браузера

Читать полностью 2010-11-02

Семантика и корректность в CSS

Так сложилось, что в последние время стали путать семантику с установившимися правилами назначать корректные имена.

Читать полностью 2010-10-31

CSS3 галерея изображений.

Галерея изображений,созданная с помощью CSS.

Читать полностью 2010-10-28

Создаем Minimum Margin. Минимальное поле.

К сожалению, в мире CSS нет min-margin. Меня это устраивало до того момента, пока не возникла необходимость в этом свойстве. Поразмыслив и воспользовавшись Google, я нашел решение, которое и предлагаю ниже.

Читать полностью demo 2010-10-23