Как растянуть фон на все окно браузера? Четыре простых решения на CSS и JavaScript. Свойство background-size

Часто ли вы сталкивались с сайтами, у которых фоновый рисунок растянут на всю страницу? И не важно в каком разрешении вы просматриваете сайт - фон...
Часто ли вы сталкивались с сайтами, у которых фоновый рисунок растянут на всю страницу? И не важно в каком разрешении вы просматриваете сайт - фон всегда занимает весь экран браузера и не смотриться растянутым. Я тоже задавался этим вопросом и нашел ответ в хорошей статье Криса Койера. Сегодня приведу вольный перевод, максимально близко к тексту. Будут рассмотрены четыре разных способа сделать фоновый рисунок на всю страницу. В конце статьи - ссылка на архив с демо страницами. (далее…)

Готовые приемы по работе со свойством border в CSS

Часто возникают вопросы связанные с созданием различного рода границ, с использованием свойства border. Чаще всего используются обычные границы, например, solid или dotted. Сегодня же мы...
Часто возникают вопросы связанные с созданием различного рода границ, с использованием свойства border. Чаще всего используются обычные границы, например, solid или dotted. Сегодня же мы разберем примеры, в которых создадим границы, которые будут выглядеть совсем иначе. Это будут границы с различными эффектами, такими как тени, вдавленность, границы со скосом. Давайте приступим. (далее…)

Геометрические фигуры с помощью CSS и CSS3. Продолжение

Сегодня хочу продолжить тему построения геометрических фигур с помощью CSS и CSS3. Фигуры сегодня будут еще более сложные, нежели в предыдущей статье Геометрические фигуры с...
Сегодня хочу продолжить тему построения геометрических фигур с помощью CSS и CSS3. Фигуры сегодня будут еще более сложные, нежели в предыдущей статье Геометрические фигуры с помощью CSS и CSS3. Вот перечень фигур: ромб, яйцо, pac man, рамка цитаты, 12-ти конечная звезда, 8-ми конечная звезда. Итак, приступим. (далее…)

Геометрические фигуры с помощью CSS и CSS3

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

Google Fonts — новая версия сервиса

Вчерашний день был богат на новости о гиганте Google: была запущена социальная сеть Google+, был представлен новый дизайн поиска, сервис - Google Takeout, позволяющий выгрузить...
Вчерашний день был богат на новости о гиганте Google: была запущена социальная сеть Google+, был представлен новый дизайн поиска, сервис - Google Takeout, позволяющий выгрузить все данные о себе из всех сервисов Google, а так же представлен конвертер Swiffy, который может конвертировать SWF файлы в HTML5, Используя возможности SVG. Еще одна новость порадовала меня еще больше - обновился каталог шрифтов Google Fonts. Вот на этом отановимся подробнее. (далее…)

4 полезных плагина для Google Chrome для работы со стилями CSS

Google Chrome становится популярнее день за днем, так как он превосходно подходит веб дизайнерам и веб разработчикам. Я уже рассказывал о полезных плагинах для Google...
Google Chrome становится популярнее день за днем, так как он превосходно подходит веб дизайнерам и веб разработчикам. Я уже рассказывал о полезных плагинах для Google Chrome. Сегодня я бы хотел заострить внимание на плагинах, которые ориентированы на работу со стилями CSS и позволяют редактировать их на ходу. (далее…)

10 лучших мануалов по созданию форм с помощью CSS3

Вот и началась сессия. В связи с этим наблюдается катастрофическая нехватка времени. Поэтому весь этот месяц буду радовать вас различными подборками. Хотя думаю и несколько...
Вот и началась сессия. В связи с этим наблюдается катастрофическая нехватка времени. Поэтому весь этот месяц буду радовать вас различными подборками. Хотя думаю и несколько интересных статей тоже стоит ожидать. Мануалы все на английском языке. Особенно интересные я буду стараться переводить для вас. Сегодня у нас обзор лучших мануалов по созданию различных форм на CSS3. Это и формы обратной связи, и поисковые формы, и формы логина с различными эффектами. (далее…)

10 приемов CSS3, которые можно и нужно использовать

Этот список не будет содержать информацию обо всех замечательных нововведениях CSS3. В нем представлены только 10 самых часто используемых. Большинство из ниже приведенных свойств CSS3...
Этот список не будет содержать информацию обо всех замечательных нововведениях CSS3. В нем представлены только 10 самых часто используемых. Большинство из ниже приведенных свойств CSS3 хорошо поддерживаются браузерами на данный момент. В статье так же рассмотрены известные баги браузеров и способы борьбы с ними. (далее…)

Псевдо-элементы :before/:after. Поддержка браузерами

В предыдущей статье Создаем границу у сайта мы активно использовали псевдо-элементы. А поддерживаются ли псевдо-элементы браузерами? Этот вопрос тревожит многих веб-разработчиков. На данный момент псевдо-элементы...
В предыдущей статье Создаем границу у сайта мы активно использовали псевдо-элементы. А поддерживаются ли псевдо-элементы браузерами? Этот вопрос тревожит многих веб-разработчиков. На данный момент псевдо-элементы :before и :after поддерживаются достаточно неплохо, в отличие от многих интересных фишек CSS3. (далее…)

Создаем границу у сайта

На сайте http://hicksdesign.co.uk/ впервые был применен эффект, который мы сегодня будем создавать. Суть эффекта такова: по краям окна браузера создается граница вокруг всего сайта, которая...
На сайте http://hicksdesign.co.uk/ впервые был применен эффект, который мы сегодня будем создавать. Суть эффекта такова: по краям окна браузера создается граница вокруг всего сайта, которая при прокрутке страницы не исчезает, а контент находиться внутри границы. В этой статье мы рассмотрим несколько разных техник создания такого эффекта. (далее…)