Онлайн заработок, создание и монетизация сайтов, веб-разработка, SEO и SMO продвижение, фриланс, партнерки, полезные сервисы вебмастерам, блоггинг.

Wordpress шаблоны
Wordpress шаблоны

Архив тега: HTML + CSS

На странице вы увидите все публикации для метки HTML + CSS.

Создаем фиксированное меню на CSS, jQuery + решение проблемы с якорями

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

Читать далее

Как выглядит сайт на разных устройствах с iOS – проверка верстки на iPhone, iPad, Mac

сайт на разных устройствах с iOSЕсли вы активно занимаетесь созданием адаптивных веб-проектов, то наверняка знакомы с популярными сервисами просмотра сайта на разных разрешениях экранов. Сейчас похожие функции также присутствуют в инструментах разработчика любого современного браузера. Однако в этом вопросе не все так однозначно – недавно я обнаружил, что все известные мне решения не работают со 100% точностью. Некоторые коллеги по цеху также сетовали на подобную проблему. Сегодня расскажу, что можно с этим сделать.

Читать далее

Всплывающие Tooltip подсказки при наведении с помощью CSS и jQuery

Tooltip подсказки при наведенииВам уже наверняка встречались всплывающие текстовые подсказки при наведении на разные элементы веб-страницы. Даже в самом HTML есть подобный механизм – если при оформлении ссылки добавить в тег А атрибут title, то при наведении на нее в браузере отобразится этот текст. Сегодня хочу поделиться одним решением, над которым закончил работать буквально только что. В нем есть интересные нюансы, которые вам могут пригодиться + плюс дополнительно упомяну стандартные методики.

Читать далее

Подборка полезных статей по веб-разработке №1 (про CSS и не только)

статьи по веб-разработке №1Как и обещал в планах на 2020 год продолжаю смещать рабочий акцент в сторону фриланса. В марте активно приступил к выполнению этой задачи на практике — начал с сайта Weblancer и постепенно перекочевал на мега крутую биржу фриланса Freelancehunt, где и решил закрепиться. В связи с этим у меня сейчас достаточно много срочной работы – приходится наращивать рейтинг и зарабатывать позитивные отзывы. Поэтому сегодня будет подборка полезных материалов для веб-разработчиков.

Читать далее

Пустой :empty CSS селектор — определение, примеры использования

Пустой empty CSS селекторВ данном уроке по верстке я рассмотрю простой, но иногда полезный «пустой» :empty селектор. Он является псевдо-классом, как и свойство CSS hover, о котором рассказывал в другом блоге. По определению селектор :empty соответствует любому элементу, у которого нет никаких дочерних объектов – будь то другие элементы или текст (в том числе и пробелы). При этом разные комментарии и CSS-содержимое игнорируются, т.е. не влияют на определение «пустоты» элементов.

Читать далее

Как вставить видео с Facebook на сайт (2 способа)

Вставка видео с FacebookПосле недавнего обсуждения задачи размещения на веб-проектах адаптивного видео c Youtube рассмотрим также вариант с Facebook. В последнее время данная социальная сеть вложила много усилий в развитие и популяризацию собственного видео-контента (совместный просмотр, live-трансляции и т.п.), хотя еще каких-то года 2-3 назад все просто постили Youtube-ролики. Также, как и в прошлый раз, буду рассматривать решение на примере движка Вордпресс, однако этот алгоритм актуален и в любых других случаях.

Читать далее

Стильное облако тегов для Blogger с помощью CSS3

Про облако тегов для системы Blogspot было сказано немало, но тем, кто лишь недавно присоединился к данному блогохостингу, я кое-что повторю. Если «глубоко копнуть», то следует заменить, что изначально виджета для тегов как такового в системе не было, приходилось довольствоваться специальным хаком. Процесс внедрения облака тегов был не таким уж и простым, хотя результат получался вполне достойный.
Читать далее

Изучаем CSS Grid Layout и Flexbox на практике (20+ сервисов и полезных материалов)

Сервисы для изучения CSS Grid Layout и Flexbox

В последнее время при работе с WordPress шаблонами мне все чаще попадается HTML разметка, где вместо олдскульных DIV блоков используется Grid и Flexbox. Я, признаться, все еще откладываю детальное изучения этих подходов из-за отсутствие свободного времени (скорее лени), но постепенно приходится вникать. Ранее в блоге была статья про основы CSS Grid с реальными примерами, а сегодня хочу запостить перевод подборки полезных сервисов для изучения этих двух веб-технологий.

Читать далее

Создание вертикальных разделителей в меню на CSS

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

Читать далее

Красивые HTML шаблоны на русском бесплатные, простые, премиальные + конструктор

Красивые HTML шаблоны на русском

В современном мире онлайн-бизнеса на первом месте находится контент сайтов или востребованность товаров/усулуг определенных компаний. Содержание веб-проектов стало важнее их оформления. Именно поэтому многие заказчики/разработчики отдают предпочтение готовым макетам — это проще, быстрее и в некоторых случаях даже не нужно нанимать программистов. Сегодня опубликую подборку, позволяющую скачать интересные русские HTML шаблоны бесплатные и премиальные + расскажу об одном полезном HTML-конструкторе.

Читать далее

Слайдер «Избранные материалы» (Featured Content) для Blogger

Слайдеры Featured Content — настоящий тренд 2011 года для шаблонов таких платформ, как WordPress. Это подборка лучших (избранных) материалов блога, которые располагаются, как правило, на главной странице. Все это сопровождается различными графическими эффектами  переходами.

Читать далее