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

CSS с нуля

Как вставить картинку и текст в блок HTML+CSS

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

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

Как сделать шапку сайта

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

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

Шрифты для сайта в CSS

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

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

Меню многоуровневое горизонтальное и вертикальное CSS

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

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

Раскрывающиеся блоки для подсказок или дополнительной информации

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

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

Как адаптировать тему оформления

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

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

Кнопки CSS эффекты при наведении и нажатии

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

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

Анимация CSS примеры и готовый код

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

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

CSS перемещение, вращение, 3D

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

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

Плавающий блок CSS

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

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

Кнопка наверх для быстрой прокрутки страницы в начало

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

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

Слайдер CSS

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

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

Туман на картинке

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

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

border-radius: блок с закруглёнными углами, эллипс, круг

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

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

Логотип для сайта рисуем в CSS

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

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