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

В этой статье рассмотрим, как в отдельный блок вставить текст и картинки, и разместить их, при помощи CSS Для примера используем созданную в предыдущих статьях заготовку каркаса с шапкой сайта. Возьмём html код блока content. <div id=»content»></div> Вставим в блок … Читать далее →

Инструкция как сделать блок для шапки сайта, и расположить в нём фоновое изображение, логотип, заголовок, и описание сайта используя HTML и CSS Блок для шапки сайта, обычно это "header" записывается так: HTML <div id=»header»></div> CSS #header{   width: 900px;     … Читать далее →

Вас интересуют web шрифты? Вы в нужном месте! Вы узнаете, какие шрифты применяются в интернете, и как они оформляются свойствами CSS, а так же, что такое кроссбраузерность и сервисы шрифтов. Семейства шрифтов Шрифты в CSS Размер и цвет шрифта Жирный … Читать далее →

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

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

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

Для создания анимации применяются свойства CSS transition и animation Рассмотрим их подробно с примерами. Элементы анимации не только делают дизайн удобнее и элегантнее, но и вызывают у пользователей положительные эмоции, которые буквально притягивают к сайту. Это что касается пользовательских показателей. … Читать далее →

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

Наведи курсор Здравствуйте уважаемые начинающие веб-мастера. Всем встречались оживающие пункты меню и другие элементы при наведении курсора. Создаётся такой эффект свойством CSS transition, а 3D эффект свойством box-shadow. Величина и направление перемещения задаются свойством transform, причём изменяя значения в этом … Читать далее →

Здравствуйте уважаемые начинающие веб-мастера. Для реализации кнопки "Наверх" существует много вариантов. Я предложу два наиболее лёгких из них. Вариант 1 Кнопка с картинкой. Кнопка с картинкой — самый простой вариант. Давайте посмотрим, как её сделать и реализовать на сайте. Первым … Читать далее →

Здравствуйте уважаемые начинающие веб-мастера. Вот самый простой в мире слайдер на чистом CSS. К преимуществам такого слайдера можно отнести лёгкость и безопасность, а так же то, что его сможет сделать и установить на свой сайт даже самый начинающий веб-мастер. А … Читать далее →

Изображения тумана в природе сами по себе завораживающе прекрасны. А если оживить туман с помощью CSS, то это будет вишенкой на торте. Хотите узнать как это сделать? Нет ничего проще. Смотрите. Для реализации этого эффекта нам потребуются два изображения 1. … Читать далее →

Здравствуйте уважаемые начинающие веб мастера. Снова Оригинальные эффекты CSS. Создавать и размещать блоки на странице, мы уже научились. Теперь давайте с помощью CSS придадим этим блокам оригинальную форму. Закруглить углы изображений, или же сделать эллипс, и даже круг, и поместить … Читать далее →

Как сделать живой логотип для сайта, с объёмными буквами и без картинки, используя только HTML и CSS. Эта мысль не давала мне покоя с тех пор, как я увидел, что малюсенькая картинка на 500 байт, грузится гораздо дольше чем портянка … Читать далее →