Иконки гамбургер меню — примеры сайтов, дизайнов и CSS скриптов

иконка гамбургер меню Веб-дизайн Верстка Дизайны сайтов Иконки 

Недавно мы публиковали заметку про использование кнопки гамбургер-меню для сайта и возможные ее альтернативы. Сегодня хотелось немного развить тему и поделиться несколькими сопутствующими наработками. В статье будет много ссылок на полезные проекты и скрипты, поэтому загрузка может занять некоторое время. Тем, кто столкнулся с данной задачей и ищет как сделать гамбургер меню на сайте пост однозначно пригодится. Данный элемент был разработан почти 30 лет назад…

Горизонтальное выпадающее меню на CSS + HTML

Горизонтальное выпадающее меню Верстка 

Большинство классических сайтов в интернете использует горизонтальное меню в качестве основного элемента навигации. Иногда в нем могут встречаться разные дополнительные фишки — многоуровневые конструкции, иконки для подпунктов, блок поиска, сложные списки и т.п. Недавно в блоге уже была небольшая подборка стильных меню в PSD, а сегодня рассмотрим 4 практических примера как сделать выпадающее меню на CSS + HTML. Информация пригодится начинающим разработчикам и тем, кто…

Создаем красивый градиент фона + трансформация skew в CSS3

Создаем красивый градиент фона Верстка 

Ранее в блоге мы уже рассказывали про линейные градиенты и заодно приводили примеры разных сервисов-генераторов. Сегодня попробуем применить эти знания на практике для создания красивого градиента фона на CSS. Плюс в процессе работы познакомимся с интересной функцией skew для реализации трансормаций в CSS3. Можно сказать, что основная идея фонового изображения позаимствована с сайта компании BrightMedia, который является прекрасным примером профессионального использования всех возможностей CSS3. Правда, мы не будем повторять…

Как сделать закругленные углы CSS: описание + CSS генераторы

Решил на своем сайте стандартным блокам в сайдбаре сделать закругленные углы с помощью CSS3. Раньше, помнится, чтобы реализовать данную задачу рисовали отдельные картинки для каждого угла и совмещали их с помощью нескольких DIV блоков в HTML. К счастью, сейчас все это легко задается в CSS стилях. Для определенных макетов и тематик (например, женской) подобное CSS закругление выглядят намного интереснее прямых строгих линий. В общем, пришлось…

Кликабельный фон / подложка для сайта

Для одного проекта попросили реализовать кликабельный фон (подложку) сайта, которую вы могли встречать на крупных порталах. Такой рекламный брендинг позволяет максимально привлечь внимание посетителя и намного эффективнее баннера. В блоге уже публиковались статьи про большую фоновую картинку для сайта и создание изображения на весь экран но все эти варианты были не кликабельные. Поэтому пришлось искать новое решение в сети. Я определил 3 возможных метода решения задачи. Кликабельный фон…

CSS стили для заголовков сайта

Оформление текстовой информации в Web имеет свои определенные особенности. Если вы размещаете на сайте какой-то контент, то, как правило, он должен быть хорошо структурированным — для этого используются заголовки. С их помощью тексты получаются максимально легкими для чтения и восприятия. Собственно, о них мы сегодня и поговорим — пост использует наработки из этой англоязычной статьи. Там имеется 6 разных вариантов оформления заголовок на любой вкус,…

Слайдер «аккордеон» для сайдбара с помощью CSS3

В сайдбаре блогов или сайтов часто не хватает места для всех информационных блоков с текстами, которые вы, возможно, бы хотели там разместить. Часто для этого используются табы — это что-то вроде закладок, которые переключают несколько страницы контента. Метод работает отлично и экономит место в сайдбаре. Сегодня предлагаю рассмотреть еще одну похожу по назначению разработку — слайдер «аккордеон» (Accordion). Визуально он выглядит приблизительно так: То есть…

Фоновое слайдшоу изображений на весь экран с помощью CSS3

Технология CSS3 становится все более популярной, а вещи которые с ее помощью реализуются, все более впечатляющими и захватывающими. Сегодня пост об одном из таких приемов. Если вы помните, некоторое время назад я рассказывал про сервис красивых HD картинок для вдохновения Bepic.ru  — меня там очень сильно впечатлил вывод изображений на весь экран браузера. При выборке «эпических» и масштабных HD картинок высокого качества эффект создавался очень…

Фон для сайта с картинкой на весь экран (background-size)

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

Кнопки в стиле Google+, скачать 200 иконок Google+

Социальная сеть Google+, даже находясь в стадии бета-тестирования, ураганом ворвалась в жизнь продвинутых пользователей, поэтому не стоит удивляться тому интересу который данная социальная сеть вызывает, в том числе и у веб-дизайнеров, разработчиков и seo оптимизаторов. Этот интерес достаточно велик и постоянно «подогревается» разработчиками Google, которые постоянно усовершенствуют проект и добавляют интеграцию с другим своими сервисами. Так, например, среди сеошников популярностью пользуются кнопки и иконки Google+…

Оформление текста с помощью CSS3 на практике

Оформление текста Верстка Типографика 

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

Галерея узоров CSS3 для фона

Новые возможности CSS3 уже сегодня позволяют реализовывать то, что раньше было возможно сделать только при помощью графического редактора (например, Photoshop). Поэтому современному веб-дизайнеру мало познакомиться с новыми фичами, нужно еще пересмотреть подходы и научиться эти фичи творчески использовать. Развивать подобные навыки всегда помогал разбор практических примеров. Хотите разобраться как создаются сложные бесшовные узоры? Нет проблем! В этом вам окажет неоценимую помощь проект CSS3 Patterns Gallery….

Школа W3 Schools для веб разработчиков

Существует много способов научиться вебмастерсткому делу, освоить, так сказать, основы веб-разработки. Если нет рядом в распоряжении опытного специалиста (и что немаловажно грамотного) который мог бы помочь в обучении, можно поискать обучающие сайты и справочные материалы в интернете. Другое дело — далеко не каждая статья, заметка или книга способна научить делать сайты правильно, по самым современным стандартам. Всем известно — чем лучше и авторитетнее «школа», тем…

Страница 1 из 11