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

Wordpress шаблоны

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

На странице вы сможете посмотреть архив постов метки HTML + CSS.

Как выглядит сайт на разных устройствах с 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-ролики. Также, как и в прошлый раз, буду рассматривать решение на примере движка Вордпресс, однако этот алгоритм актуален и в любых других случаях.

Читать далее

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

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

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

Читать далее

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

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

Читать далее

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

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

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

Читать далее

Обнуление CSS стилей — зачем это делать, типы CSS Reset файлов

CSS ResetУ каждого браузера есть свои предустановленные правила оформления веб-страниц и элементов на них (user agent stylesheet), подключаемые автоматически по умолчанию. Тем не менее, большинство верстальщиков при создании нового проекта добавляет в него специальный файл Reset CSS, который осуществляет полное обнуление CSS стилей и позволяет разработчикам творить с «чистого листа». Почему и как это все делается — разберу в текущей статье.

Читать далее