Архив рубрики: CSS основы

CSS с нуля

Маркер списка CSS

Использовать картинку в качестве маркера списка — непозволительная роскошь по отношению к скорости загрузки страницы, особенно для молодого сайта. Поэтому я покажу Вам несколько примеров, как можно создать маркер только средствами html и css. В качестве контейнера для маркера применим … Читать далее

Рубрика: CSS основы | 7 комментариев

Значки меню рисуем в CSS

Как сделать значки меню не картинками, а написать в html + css. Этот вопрос возник у меня после того, как я сделал дизайн сайта адаптивным, и разместил сверху симпатичную менюшку из значков для меню, которые нарезал в Яндекс Картинках. Радость … Читать далее

Рубрика: CSS основы | 2 комментария

Адаптивный сайт

Здравствуйте уважаемые начинающие веб-мастера. После того, как мы научились создавать резиновый шаблон сайта, самое время узнать, как делается адаптивный дизайн. Сначала разберём его особенности. Адаптивность классно дополняет резиновый дизайн. Ведь посмотрите, что происходит, если шаблон чисто резиновый. Допустим на странице, … Читать далее

Рубрика: CSS основы | 10 комментариев

Курсор CSS. Все варианты курсоров

Все шпаргалки HTML5 все теги Спецсимволы HTML Цвета HTML Градиент примеры код Горячие клавиши Единицы измерения в web Регулярные выражения для Notepad++ CSS все свойства CSS псевдоэлементы микроразметка microformats.org (микроформат) микроразметка schema.org (микродата) Вид курсора задаётся свойством cursor, кторое может … Читать далее

Рубрика: CSS основы | Оставить комментарий

Свойство display:

Здравствуйте всем. Сегодня узнаем об очень интересном свойстве css display:. Свойство display: отвечает в css за то, как будет показан элемент на странице. То есть будет ли элемент показан как блочный и всегда расположится с новой строки, или встроенный и … Читать далее

Рубрика: CSS основы | Оставить комментарий

Часы CSS

12 3 6 9 В предыдущей статье Анимация CSS для начинающих я обещал примеры анимаций. Начнём с простейшего и сделаем вот такие часы. Чтобы заставить стрелки двигаться применим свойство animation и правило @keyframes Для лучшей наглядности примера я запустил минутную … Читать далее

Рубрика: CSS основы | Оставить комментарий

Что такое псевдокласс pseudo-class в CSS

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

Рубрика: CSS основы | Оставить комментарий

Как сделать изображение кнопки в Paint

Здравствуйте уважаемые начинающие веб-мастера. Давайте сделаем простенькую кнопку с помощью всем доступного Paint.

Рубрика: CSS основы | Оставить комментарий

Как сделать картинку для шапки в Paint

Здравствуйте уважаемые начинающие веб- мастера. Самый простой способ найти картинку для шапки сайта — это сделать её в, имеющимся у всех по умолчанию, редакторе — Paint.

Рубрика: CSS основы | 10 комментариев

Селекторы CSS.

Селектор тегов Итак мы подключили таблицу стилей. Давайте теперь посмотрим, что же это такое – стиль. Стиль состоит из двух частей – "селектор" и "свойство: значение;".   В каждом селекторе может быть множество свойств и значений. Вам это ничего не напоминает? … Читать далее

Рубрика: CSS основы | 2 комментария

position: fixed; фиксированное позиционирование

Для рассмотрения темы фиксированного позиционирования, нам потребуется изображение кнопки. Можносделать простейшее изображение кнопки, в доступном всем Painte. При фиксированном позиционировании, размещение картинки производится относительно границ экрана, и обычно она является ссылкой.

Рубрика: CSS основы | 4 комментария

Вёрстка. Каркас сайта

В этом уроке мы напишем полный код каркаса сайта, на html и СSS, и проделаем это в нескольких вариантах, постепенно добавляя блоки и колонки.

Рубрика: CSS основы | Комментарии к записи Вёрстка. Каркас сайта отключены

position: fixed; фиксированное изображение

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

Рубрика: CSS основы | Оставить комментарий

background-positipn позиционируем фоновое изображение

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

Рубрика: CSS основы | 4 комментария

repeat: размноженное изображение

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

Рубрика: CSS основы | 3 комментария