Интересные статьи

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

Красивая кнопка для сайта с использованием CSS и псевдоклассов. Создание кнопки в один тег. Дизайн кнопки с минимумом HTML

В одной из первых своих статей я описывал вариант создания кнопки. Но проходит время и оно же ставит перед нами некоторые иные задачи. Конструкция кнопки получилась довольно громоздкая. Для описания её понадобилось 3 тега, что довольно много, да и постоянно держать в голове, что и зачем идёт и какой тег за каким следует – это довольно проблематично. Вот по этой банальной причине я решил задаться целью создать кнопку с использованием лишь одного тега вида:

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

Убираем рамку отступ в Firefox у кнопок input и button с помощью CSS. Убираем состояние фокус (:focus), рамку фокуса в Firefox

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

Одним из таких является стилизация input и button и обнуление их стилей по умолчанию.

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

Псевдокласcы в CSS и их использование. Совместное или вложенное использование псевдоклассов. Псевдоклассы :before , :after, :hover.

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

Самым простым и наиболее часто используемым псевдоклассом является :hover. Данный псевдокласс определяет состояние элемента в процессе наведения на него указателя мыши и наиболее часто применяется для описания динамического поведения ссылок (мигание, подчёркивание, изменение цвета и т.д.). Также его можно применить и для ячеек таблиц, да и вообще много...

Создаём сайт. Как не сделать ошибку и создать успешный ресурс

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

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

Внедряем дизайн в движок WordPress (Часть 3). Дизайн виджетов в sidebar и гибкое изменение дизайна меню

Итак, как я писал ранее в движке WordPress есть небольшая проблема с настройкой внешнего вида виджетов. К примеру, у нас в дизайне каждый виджет в сайдбаре обёрнут в блок с рамкой, тенью и т.п. Мы хотим перенести всю эту красоту и в WP. Обращаемся к описанию и читаем, что ежели вы хотите настроить виджет – вызывайте его функцией в sidebar.php. Печально. Не хочется искать, как вызвать каждый виджет, который нам заблагорассудится. Да и каждый раз лезть на FTP и вновь ковыряться в файле sidebar.php, оборачивая виджет для получения необходимого внешнего вида нашими стилями. Это не очень хорошее решение. Что же делать. На данный момент общий внешний вид виджета представлен схематично как:

Внедряем дизайн в движок WordPress (Часть 2). Настраиваемые меню

Итак мы слепили костяк структуры сайта. Продолжаем редактировать header.php и добавлять туда свой код. Картинки смело складываем в папку images в теле директории темы, либо создаём свою.

И тут я натыкаюсь на первую проблему. Мне необходимо создать страничку с несколькими меню. Верхнее меню должно содержать 3-4 основных раздела (Главная, Контакты...), второстепенное меню – пару статеек. Но вот беда – все созданные страницы автоматически попадают в верхнее меню.

Не беда – идём в веб-админку – Внешний Вид – Меню. Справа разрешаем использование настраиваемых меню и создаём необходимое их количество (не забываем давать им понятные имена, чтоб себя не запутать). Далее в самом н...

Внедряем дизайн в движок WordPress (Часть 1). Базовые изменения дизайна

Сегодня рассмотрим пути достижения цели по навешиванию дизайна на популярный движок WordPress. Редактирование страниц возможно в двух режимах – через админку и через FTP. Каждый выбирает удобный для себя способ сам. Лично мне редактирование через FTP привычнее, удобнее да и вообще быстрее. Главное – наличие нормального FTP-клиента (к примеру CuteFTP). На момент написания статьи актуальной версией WP являлась версия под номером 3. Её и рассмотрим. Базовый скин возьмём twentyeleven (по желанию можно найти и использовать сторонний скин, который, возможно, уже в каком-то отношении соответствует необходимой структуре вашего сайта).

Для начала залогинимся на FTP и найдём...

Учитываем скролбар при создании дизайна сайта. Ширина скроллбара в разных браузерах

Тема простая, но всё же иногда приходится натыкаться на макеты, где либо дизайнер не знал, либо не хотел, либо просто забыл, что есть такая магическая штуковина, как скролбар (scrollbar).

Но нередко такой возможности нет,а заказчик говорит Вам, что хотел бы видеть сайт именно таким, каков он на эскизе, и, что сайт должен отображаться нормально (т.е. без горизонтального скрола при разрешении 1024px), но вот беда – шаблончик то у нарисован на 1024 пикселя или около того, что никак не позволяет его уместить на один экран без скрола. Бывают случаи, когда выиграть пару пикселей возможно за счёт выделения background, если контент расположен на достаточном расстоянии от границ и внешний ...

Применение Action при создании дизайна с помощью Photoshop

С чего бы это я затронул эту тему? Всё дело в том, что как-то мне захотелось сделать несколько более оригинальное портфолио работ, чем обычно, для чего я использовал искажение изображения в перспективе. Изображение в дальнейшем позиционировалось на рисованный монитор, что добавляло естественности сцене и объёма всему дизайну в целом. Сама задумка мне показалась замечательной. Красивенько, что тут сказать. С точки зрения вёрстки особых проблем не предвиделось, благо PNG довольно сильно вошли в нашу жизнь (ИЕ6 ушёл в прошлое) и спозиционировать с помощью position:absolute слой-маску поверх картинки довольно просто.

Ажиотаж прошёл уже после согласования дизайна. Как же в дальнейшем...

Почему я не люблю векторы при создании дизайна сайта

Решил написать этот опус – ибо накипело. Я вообще приверженец растровой графики, но и против векторной ничего дурного не имею. Последняя имеет ряд плюсов и достоинств, ускоряет процесс создания и преобразования, но иногда и портит жизнь. Иногда – это касается именно дизайна сайтов.

Итак – простой пример. Попал ко мне макет дизайна сайта. Всё вроде ничего, но замечаю, что сайт не влезет без скрола в область до 1000px о чём и сообщаю заказчику. Тот в свою очередь просит дизайнера изменить, последний же делает ресайз некоторых областей. Получаю новый макет и вижу, что все границы заблурены просто до жути. Блоки были выполнены векторами и при ресайзе получились дробные составляющие,...

Дизайн значка для Money Back или 100% Guarantee

Часто при создании магазина всплывает необходимость использования в дизайне тех или иных элементов. Одним из таких элементов является многолучевая звезда, которую используют в различных качествах (акционная цена, скидка, сертификат, money back guarantee…). На последнем мы, пожалуй, и остановимся более подробно, но это не значит, что Вы не сможете сделать из данной звезды, то, что нужно Вам.

С чего начнём – CTRL+N и создаём новый документ 400х400px. В панели инструментов находим прямоугольник. Делаем на нём клик и выбираем в верхнем меню многоугольник. Замечаем справа стрелку и клацаем по ней. Ставим магическую галочку Star (Звезда). Indent size по усмотрению – я поставил 10%...

Надоело верстать одно и тоже по 100 раз или используем Slice

В прошлый раз мы обсуждали почтовые рассылки и создание удобного и практичного дизайна, который не вытрясет из Вас душу при его вёрстке. Всё бы ничего, но если дизайн создавали не Вы, да и к тому же в нём постоянно происходят незначительные изменения. Что-то наподобие еженедельной рассылки с новинками продукции. Шаблон вроде одинаковый, но картинки приходится нарезать заново. Я вообще привык к правильной вёрстке и к автоматической нарезке отношусь скептически, но бывает иногда так, что, ну, просто достало, да и времени жаль.

Решил я для себя прояснить вопрос со Slices в Photoshop. Оказалось, что эта штука очень простая и просто создана для рассылок и их вёрстки.

С...

Дизайн и вёрстка почтовых (email) рассылок. Часть 2

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

Но отчего же так получается, что приходится так изгаляться. Ответ прост – почта не создавалась для завитушек и картиночек, мигающих кнопок и кучи мультимедиа. Здесь правила просты: пишешь письмо – значит пиши текст. Исходя из этого каждый почтовый сервер использует свои правила и свой интерпретатор. У кого-то правила жёстче, у кого-то проще. К примеру Outlook чем старше, тем жёстче и требовательнее к коду – становится эдаким аскетичным консерватором. Некоторые...

Дизайн и вёрстка почтовых (email) рассылок. Часть 1

В один прекрасный день предстала передо мной задача – сверстать email рассылку по готовому дизайн-шаблону. Скользнув взглядом по макету и сказав про себя, что проще и не бывает, я взялся за дело. Сверстал всё по правилам и было уже расслабился, но что-то закралось сомнение (проверял то я всё это счастье только в браузерах, а как оно будет выглядеть в почтовиках). Задумался я над методой тестирования и обратился к гугл. Прошерстив малость просторы великого и могучего и наткнувшись на пару платных тулзовин, которые были тут же отброшены (это не наш метод), пришёл к выводу, что самый простой метод протестировать – это Outlook. Да-да, он самый. Для теста необходимо было подготовить макет определ...

Оптимизация изображений для WEB

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

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

Создаём дизайн красивой кнопки

Каждому владельцу сайта хочется иметь красивый и уникальный дизайн сайта. Но вот беда – у Вас проблемы с фотошопом и со знаниями правил вёрстки, денег нет, а хочется как-то разбавить унылый шаблон и привлечь внимание пользователей. Что может быть приятнее, чем красивая кастомная кнопка, она и внимание привлечёт и дизайн в целом освежит.

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