ВК стайл как сделать прозрачный фон

При вёрстке страниц веб-сайта часто требуется задать фон определённому объекту для улучшения читаемости текста и внешнего вида портала в целом. Какими способами и методами можно задавать фон в CSS?

Работа с фоном в CSS

С помощью свойства background можно задать положение, цвет, изображение, повторяемость и привязку фона, как для отдельных элементов, так и полностью для всего сайта, что по своей сути, кстати, является заданием определённых настроек для тега . Рассмотрим все свойства, которые связаны с заданием фона.

background-color

Задаёт цвет фона. Его можно применять как к отдельным элементам ,

, так и ко всему веб-сайту с помощью тега .

/* белый фон заголовка и чёрный цвет шрифта h1

background-image

Данное свойство используется для вставки фоновой картинки, указывая при этом ссылку на неё.

body

Обратите внимание на то, как указан путь к картинке. Это значит, что изображение должно находиться в той же директории, что и файл стилей CSS. Иначе придётся указывать полный путь к файлу.

Как сделать прозрачный фон волшебной палочкой в Photoshop? Сохраняем изображение с вырезанным фоном

background-repeat

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

Оно может иметь несколько значений:

• background-repeat: repeat-x — повторение по горизонтали;
• background-repeat: repeat-y — повторение по вертикали;
• background-repeat: repeat — повторение и по горизонтали и по вертикали;
• background-repeat: no-repeat — изображение не повторяется.

Например, повторение по горизонтали выглядит так:

background-attachment

Это свойство определяет фиксирование фонового изображения при скроллинге:

• background-attachment: scroll — фон прокручивается вместе со страницей;
• background-attachment: fixed — фон остаётся неподвижным.

background-position

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

Свойство может задаваться в процентном формате, в пикселях, сантиметрах или словесно: top, bottom, center, right, left .

• background-position: 50% 20% — изображение располагается по центру по горизонтали и на 20% отступает сверху;
• background-position: 80px 60px — отступ изображения вниз на 80 пикселей от верхнего края и на 60 пикселей вправо от левого:

gradient

Плавный переход от одного цвета к другому, причем переходов допускается несколько.

Использование градиента можно наглядно продемонстрировать в примере кода:

Как сделать изображение на прозрачном фоне (без фона)

Градиент .gradient < background: #2639fa; /* Для устаревших браузеров */ background: linear-gradient(to top, #2639fa, #c9d1ff); padding: 40px; border: 1px solid #000; >

Все приведённые настройки можно сделать в одном свойстве background, записав их в перечисленном порядке.

background: #fff url(“example_image.png”) no-repeat fixed right bottom

Если пропустить какое-либо свойство, для него устанавливается значение по умолчанию.

Работа с размером фона в CSS

В CSS 2.1 фоновая картинка сохраняет фиксированный размер, однако в CSS 3 было введено подсвойство size, благодаря которому фоновое изображение может быть растянуто или сжато.

Существует несколько способов, позволяющих определить размер:

Абсолютное изменение размера

Ширина и высота по умолчанию устанавливаются автоматически, а новый размер можно задать с помощью различных единиц измерения.

Например, если исходное изображение имеет разрешение 300 на 300 пикселей, то такой код сделает его ширину в два раза меньше:

background-size: 150px 300px

Если указано только одно значение, оно по умолчанию считается как ширина, высота определяется автоматически, и пропорции сохраняются.

Код, который масштабирует картинку до размера 100 на 100 пикселей, выглядит так:

background-size: 100px

Относительное изменение размера

Если применять проценты, размер будет основываться не на изображении, а на элементе.

background-size: 50% auto;

То есть, ширина фонового изображения зависит от параметров контейнера. Если ширина контейнера составляет 600 пикселей, размер фонового изображения уменьшится до величины 300 на 300 пикселей.

Как показывает практика, использование процентов весьма полезно для адаптивного дизайна.

Масштабирование до максимального размера

В свойстве background-size значение contain масштабирует фоновое изображение так, чтобы оно полностью заполняло контейнер или всю страницу.

Уменьшение или увеличение происходит пропорционально до тех пор, пока высота или ширина не будет выходить за рамки контейнера.

Такой фон страницы будет автоматически подгоняться под любое разрешение:

background-size: contain;

Заполнение фоном

Используя в свойстве background-size значение cover, фон масштабируется таким образом, чтобы заполнить всё пространство контейнера.

В том случае, если соотношения сторон различаются, картинка обрежется:

background-size: cover;

Масштабирование сразу нескольких фонов

Они могут быть масштабированы при помощи списка значений, которые разделены запятыми в том же порядке:

background: url(“example_image.png”) 70% 90% no-repeat, url(“example_image.png”) 30% 50% no-repeat, url(“example_image.png”) 15% 25% no-repeat #fff, url(“example_image.png”) 70% 90% no-repeat, background-size: 250px 200px, auto, 100 px;

Создание полупрозрачного фона в CSS

Полупрозрачный элемент хорошо заметен на фоновом рисунке. В веб-дизайне полупрозрачность достигается за счёт свойства opacity или задаваемого для фона формата цвета RGBA.

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

Пример создания полупрозрачного блока:

opacity body < background: url(«http://cs614726.vk.me/v614726246/4a02/300wj_aFOK4.jpg»); background-size: 10% auto; >div < opacity: 0.7; background: #717ceb; /* Цвет фона */ padding: 20px; /* Поля вокруг текста */ > Так выглядит полупрозрачный блок.

Однако достаточно часто полупрозрачным должен быть только фон определённого элемента, а текст оставаться непрозрачным для читабельности.

В таком случае opacity не подходит и следует воспользоваться форматом RGBA, в котором помимо значений яркости синего, красного и зелёного цветов устанавливается ещё и значение прозрачности. 1 означает абсолютную непрозрачность, а 0 — полную прозрачность.

Пример задания прозрачного фона:

rgba body < background: url(«http://cs614726.vk.me/v614726246/4a02/300wj_aFOK4.jpg»); background-size: 20% auto; >div < background: rgba(60, 150, 250, 0.7); /* Цвет фона */ color: #fff; /* Цвет текста */ padding: 20px; /* Поля вокруг текста */ > Прозрачный фон блока и непрозрачный текст.

Надеемся, что данное руководство вам пригодилось, и желаем успехов в освоении веб-дизайна!

Источник: www.internet-technologies.ru

Как сделать фон «В Контакте» за несколько минут?

Популярная социальная сеть «ВКонтакте» объединяет миллионы пользователей в России и странах СНГ. Она отличается удобством в использовании и простотой интерфейса. Однако далеко не все знают обо всех секретах и возможностях, например о том, как сделать фон «В Контакте».

Необходимо сразу отметить, что разработчики популярнейшей российской социальной сети не предусмотрели таких возможностей, поэтому для осуществления замены необходимо использовать сторонние утилиты.

Для чего вообще это нужно?

• Придание своей страничке оригинальности и разнообразия.
• Возможность порадовать себя.
• Повышение удобства и читабельности и т.д.

Сейчас всем пользователям без ограничений доступны сотни разнообразных стильных тем. Среди них можно выбирать любую. При помощи некоторых утилит появляется возможность как сделать фон «В Контакте», так и добавить некоторые новые возможности.

Утилиты для работы со страничкой «ВКонтакте»

На сегодняшний момент есть множество утилит от различных авторов. И если интересует вопрос о том, как сделать фон «В Контакте» бесплатно и максимально легко, тогда стоит обратить внимание именно на них.

Среди всего многообразия стоит выделить следующие утилиты:

• VKPlugin.
• VKStyles.
• ImageResizer.
• Get-Stayles.

На сегодняшний момент они лидируют в различных рейтингах, поэтому многие пользователи отдают предпочтение именно им.

Принцип работы программ

Первые две утилиты (VKPlugins и VKStyles) созданы специально для социальной сети «ВКонтакте» и всех её пользователей, как нетрудно догадаться из названия. Достаточно скачать и установить эти программы, после чего они сами подскажут, как сделать фон «В Контакте». Там уже есть определённый набор тем, так что замена происходит в 1 клик. Это отличное решение для тех пользователей, которые не хотят заниматься ручной настройкой или разбираться во всех тонкостях этого процесса.

Другие две программы – Get-Styles и Image Resizer – можно отнести к разряду универсальных. Т.е. они позволяют свободно менять фоны практически у любых сайтов, а не только у «ВКонтакте». В этом случае появляется несколько плюсов:

• Универсальность.
• Отсутствие привязки к своей странице (для тех, кто беспокоится об анонимности).
• Возможность установки своих фонов.

Принцип работы данных программ прост – происходит замена файлов (картинок) для фона того или иного сайта. Именно поэтому изменения будут видны только на конкретном компьютере, где установлена программа.

Как сделать фон «В Контакте» «ручным» способом?

Для тех, кто обладает хотя бы минимальными познаниями в особенностях работы браузера и различных сайтов, не составит труда поменять фон своими руками без установки сторонних программ. Для этого необходимо отредактировать файл CSS, отвечающий за оформление, с помощью обычного «Блокнота».

Для этого потребуется:

• Найти или подготовить самостоятельно файл фона с расширением .css (можно выбрать любую картинку).
• В настройках браузера необходимо добавить новый элемент («настройки для сайта»).
• В категории «вид» выбрать нужный стиль.

Данные задачи решаются довольно легко и быстро. Гораздо сложнее ответить на вопрос о том, как сделать фон «В Контакте» на телефоне. Обычно пользователи используют специальные приложения, не предусматривающие такие возможности, а браузеры в мобильных операционных системах Android и iOS работают по другим принципам.

Источник: fb.ru

Способы создания прозрачных фонов

Вы хотите научиться создавать страницы с оригинальным и ярким современным дизайном? Применение полупрозрачных элементов способно помочь Вам в решении этой непростой задачи. Сегодня мы рассмотрим основные практические способы задания прозрачности структурных элементов.

Как задать прозрачность?

Если рассматривать данную тему сквозь призму исторического развития веб-технологий, то можно выделить следующие подходы:

• Свойство opacity.
• Использование PNG -картинки
• Формат системы RGBA
• Ну, и наконец, древность или клетчатые изображения.

CSS свойство Opacity

Применение стилевого CSS свойства оpacity позволяет задать прозрачность того элемента, к которому применяется. Значения, которые можно использовать в качестве аргумента изменяются в пределах от 0 до 1.
Рассмотрим пример.

DOCTYPE html> html> head> title>TODO supply a titletitle> meta charset=»UTF-8″> link rel=»stylesheet» media=»all» type=»text/css» href=»css/style2.css» /> head> body> div class=» prozrachen «> Тут будет много Вашего текста div> body> html>
body background: url(./vaden-pro-logo.png); /* Фон для тела страницы */ > . prozrachen padding: 10px; /*Отступы для текста*/ background: darkturquoise; /* Задаем цвет фона */ margin: 0 auto; /* Центрируем блок */ width: 50%; /* Задаем ширину блока */ opacity: 0.7; /* Задаем прозрачность */ font: 48px/64px Times New Roman; text-align: justify; >

В результате мы получили полупрозрачный блок:

1. Opacity принимает значения из диапазона: 0 (полная прозрачность) — 1 (непрозрачность).
2. Кросс-браузерность. В IE до седьмой версии включительно Opacity не поддерживается. Добиться одинакового отображения элемента поможет следующая строчка:

filter: alpha(Opacity=70);

• с абсолютным позиционированием (position: absolute)
• с фиксированным линейным размером (height или width).

Для лучшего понимания материала последнего пункта, в предыдущем примере зададим тексту белый цвет

color: white;

и рассмотрим его под микроскопом:

Как видим, контент нашего блока (текст) тоже стал полупрозрачным. Но что делать, если на практике прозрачность содержимого вас не интересует, а интересует лишь прозрачность фона? В таком случае, переходим к следующему пункту.

Использование PNG -картинки

Интересной особенностью формата PNG является то, что он имеет 256 уровней прозрачности. Думаю, Вы уловили ход мыслей, и наверняка уже построили алгоритм работы такого подхода. Мне остается только его озвучить.

1. Создаем в Photoshop, однотонную полупрозрачную картинку (назовем ее transparent) и сохраняем в формате png.
2. Используем ее в качестве бэкграунда:

body background: url(./vaden-pro-logo.png); > .prozrachen padding: 10px; background: url(./transparent.png); margin: 0 auto; width: 50%; font: 48px/64px Times New Roman; color: white;li> text-align: justify; >

В результате мы получили блок с прозрачным фоном и непрозрачным содержимым:

1. В отличии от свойства opacity прозрачность задается только для фона
2. Кросс-браузерность. Работает почти во всех браузерах, и это плюс. Но прозрачность PNG не поддерживается в IE6. Если вы оптимизируете свой сайт под такую древность — придется применять другие методы или скрипты.
3. При отключении отображения картинок, ваш фон пропадет (учтите этот момент при оптимизации отображения на мобильных устройствах, ведь безлимитный интернет не всегда есть под рукою).
4. Для изменения цвета и/или степени прозрачности вам нужно создать новую картинку и перезалить ее на серв.

Формат системы RGBA

Одним из самых современных методов изменения транспарантности фона является применение системы RGBA.

RGBA – система представления цвета при помощи трех стандартных каналов RGB (красный, зеленый, синий), и четвертого, так называемого Alpha-канала, характеризующего степень прозрачности.

background: rgba(r, g, b, a);

В уже известном нам примере, заменим содержимое в CSS файле на следующее:

body background: url(./vaden-pro-logo.png); /* Фоновый рисунок */ > .prozrachen padding: 10px; background: rgba(0, 206, 209, 0.7); margin: 0 auto; width: 50%; font: 48px/64px Times New Roman; color: white; text-align: justify; >

1. В отличии от свойства opacity прозрачность задается только фону
2. В отличии от метода PNG картинки, для изменения цвета или степени транспарентности нам нужно просто поменять значения rgba.
3. Кросс-браузерность. Работает во всех современных браузерах (начиная с IE9, Op10, Fx3,Sf3.2).Для более старых браузеров придется либо пожертвовать прозрачностью, либо применять opacity, png методы.

Клетчатые изображения, или с уважением к истории

Этот метод стоял у истоков веб-дизайна, и видел старые-старые браузеры, которые ничего толком не умели. Он заключается в создании клетчатого фона, в котором цветные квадратики чередовались с прозрачными.

В результате применения такой картинки в качестве background получали псевдо-прозрачный фон.

1. При просмотре текста на таком фоне могут быстро уставать глаза (особенно давит рябь при прокрутке).
2. В остальном особенности применения аналогичны с методом «PNG -картинки».

Подытожим?

Напоследок, несколько общих рекомендаций по использованию прозрачности в своих проектах:

• Под прозрачным блоком должна находиться яркая не однообразная картинка. На однотонном фоне изюминка прозрачности теряется.
• При выборе конкретного практического подхода, ориентируйтесь на то, какими браузерами пользуется ваша целевая аудитория. Кросс-браузерность — вещь важная.

Источник: vaden-pro.ru