Ежедневные архивы: 01.03.2019

Джон Мюллер поделился рецептом доступа к локальным версиям выдачи

От автора: общаясь с вебмастерами, представитель Google пояснил, как просмотреть поисковую выдачу по определенному региону. Для этого используются специальные параметры, которые добавляются к URL сайта. Джон Мюллер рассказал, как просмотреть позиции сайта в региональной версии выдачи. Для этого к URL веб-страницы нужно прибавить параметр gl с кодом страны, заключенным в фигурные скобки. Например: https://webformyself.com/google-ne-podxodit-dlya-strukturirovannyx-dannyx/&gl{UKR} Также Джон добавил, что для получения ...

Читать далее »

Эффект для меню на CSS

От автора: приветствую вас, друзья. Меню является одним из ключевых элементов сайта, поэтому не удивительно, что многие хотят как-то выделить его, добавить ему эффектности. В этом уроке мы реализуем очень простой, но вместе с тем очень симпатичный эффект, который вы можете использовать для меню на ваших сайтах. Эффект реализуется буквально несколькими правилами на CSS и не требует дополнительного кода JS ...

Читать далее »

Введение в CSS Grid Layout

От автора: CSS grid layout — это новая модель макета, оптимизированная для двумерных макетов. Она идеально подходит для веб-сайтов, форм, галерей изображений и всего, что требует точного и гибкого позиционирования. CSS включает в себя множество свойств, которые могут помочь с макетом сайта. Но до начала 2017 года в CSS не было механизма создания двухмерных макетов веб-сайтов. Но все изменилось с ...

Читать далее »

Создание сетки CSS Grid

От автора: Рассмотрим создание сетки CSS Grid 3х3 с небольшим зазором между треками сетки. Мы создадим базовую сетку, которая выглядит следующим образом: Базовая сетка 3х3 (3 ряда и 3 колонки). Вот код: <!doctype html> <title>Example</title> <style> #grid { display: grid; grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; grid-gap: 2vw; } #grid > div { font-size: 5vw; padding: .5em; background: ...

Читать далее »

Создание макета сайта с помощью CSS Grid

От автора: здесь мы используем синтаксис CSS grid layout «ASCII art» для создания макета сайта с тремя столбцами. Сетка включает в себя интуитивно понятный синтаксис «ASCII art», с помощью которого вы можете практически «увидеть» макет в коде. Даже серьезные изменения могут быть выполнены за несколько секунд. Этот интуитивно понятный синтаксис также помогает с адаптивным веб-дизайном. С помощью CSS Grid макет ...

Читать далее »