Три полезных CSS свойства для работы с изображениями
Многие начинающие разработчики, которые верстают сайт или веб-приложение, по своей неопытности игнорируют важные CSS свойства и тем самым увеличивают объем работы и сроки создания сайта. В этой статье мы поговорим о базовых свойствах CSS о которых должен знать каждый разработчик
Web-hosting rating: 8 out of 10 with 325 ratings

Видеоурок к статье

 

Выравнивание изображения и текста

Очень часто при верстке требуется выровнять изображение и текст.

 

 

Это можно сделать помощью CSS свойства vertical-align.

 

Выравнивание текста по верхней части

 свойство vertical-align:top

 

Выравнивание текста по центру

свойство vertical-align:middle

 

Выравнивание текста по нижней части

свойство vertical-align:bottom

 

 

Установка фиксированного фонового изображения

Иногда возникает потребность установить фоновое изображение на сайт и зафиксировать его, чтобы при прокрутке оно не перемещалось.

Для того, чтобы установить фиксированное фоновое изображение на сайт, необходимо к свойствам изображения добавить свойство background-attachment.

 

Пример:

background-image: url(images/your-image.png);

background-attachment: fixed;

 

Пример:

 

 

Эффект размытия с помощью CSS

Иногда требуется размыть изображение с помощью CSS.

Для того, чтобы размыть изображение с помощью CSS необходимо в свойство изображения прописать -webkit-filter: blur(5px);

 

Пример:

Без размытия

С размытием

 

А для того, чтобы этот эффект работал во всех браузерах, напишите как в примере ниже:

-webkit-filter: blur(5px);

-moz-filter: blur(5px);

-o-filter: blur(5px);

-ms-filter: blur(5px);

filter: blur(5px);

 

Выводы

В этой статье мы поговори ли о том, как с помощью CSS можно выравнять текст к изображению, как сделать изображение размытым и как зафиксировать фоновое изображение.

В прошлой статье, мы говорили о том, как с помощью CSS3 можно вращать изображение. В следующих статьях мы поговорим о других CSS свойствах. 

Скачать примеры из видео урока вы можете по этой ссылке.

Подписывайтесь на наш канал YouTube и вступайте в нашу группу VK.





Читайте также


Как самостоятельно изучить веб-программирование

Взломали Cкайп, что делать?

Что такое реферальный спам в Google Analytics

Постраничная ленивая загрузка (lazy load) постов

Как стать профессиональным веб-разработчиком

Методы setTimeout и setInterval в Javascript

Реализация Lazy Load на Jquery

Массивы в Javascript

Что такое TypeScript

CSS3 - Эффект вращения

Sublime Text 3 - удобный редактор кода для веб-разработчиков

Установка и настройка веб-сервера для сайта в Ubuntu

Полезные приложения для веб-разработчиков в Google Chrome

Модальное окно на Jquery

GIT команды: Быстрый старт для новичков

Что такое конструктор в объектно-ориентированном программировании

Что такое объектно-ориентированное программирование

Как отправить форму без перезагрузки страницы (AJAX)

Как быстро создать сайт и привлечь поисковый трафик

Bitbucket: Крутой облачный GIT репозиторий

Javascript: Классы в Javascript

Что такое веб-хостинг и как выбрать хостинг для сайта

SQL запросы: Основы администрирования MySQL

Команды Linux: оболочка BASH

Joomla CMS: Преимущества и недостатки

Качественный сайт: семь ключевых свойств



Все материалы с сайта wh-db.com и ru.wh-db.com защищены авторским правом. Копирование, публикация, продажа и распространение материала строго запрещены.



Комментарии






Оставить комментарий









Поиск хостинга



HDD (mb)
8000
Максимальная цена за месяц, (RUB)
700

Дополнительно







Новые статьи

















ВСЕ СТАТЬИ


Обзоры хостинга















Категории


24x7 Support Web Hosting
Angular JS Web Hosting
Apache Web Hosting
ASP.NET Web Hosting
CPanel Web Hosting
Cron Web Hosting
DirectAdmin Web Hosting
Django Web Hosting
EMail Web Hosting
FireBird Web Hosting
Free Domain Web Hosting
GIT Web Hosting
Jabber Web Hosting
Java Web Hosting
JavaScript Web Hosting
JBoss Web Hosting
JSP Web Hosting
Linux Web Hosting
MERCURIAL Web Hosting
MongoDB Web Hosting
MySQL Web Hosting
NGinx Web Hosting
NodeJS Web Hosting
Perl Web Hosting
PHP Web Hosting
PostgreSQL Web Hosting
Python Web Hosting
Ruby Web Hosting
Russian Web Hosting
Servlets Web Hosting
Spring Web Hosting
SQLite Web Hosting
SSH Web Hosting
SSL Web Hosting
Stream Web Hosting
SVN Web Hosting
TomCat Web Hosting
Unlimited HDD Space Web Hosting
Unlimited Sites Web Hosting
Unlimited Traffic Web Hosting
USA Web Hosting
VmWare Web Hosting
Windows Web Hosting