Давайте продовжимо розглядати використання псевдо-елемента before і в даній статті він дозволить нам створити зміщення фонового зображення за межі вікна, блоку.
Завантажити вихідні для статті можна нижче
Давайте розглянемо ось такий приклад.
This background image can be positioned from the right and
bottom because it is using a pseudo-element to act as an additional
background canvas.
The CSS3 background module allows this but is not yet
implemented in many browsers. The pseudo-element technique also has the
added benefit of being able to crop a background image and even position
it partially, or completely, outside its container.
Зверніть увагу на квадратик - це і є картинка з фоновим зображенням і вона розташована за межами блоку!
Реалізувати цей ефект досить просто.
А тепер просто вставляємо блок div, до нього ми пізніше пріпішем потрібний стиль, який і створить вищевказаний ефект.
Поки нічого незвичайного, просто блок div і текст.
Далі нам потрібно відкрити файл стилів (style.css) нашого сайту і прописати для даного блоку (div id = "position-box") наступний стиль:
Давайте розберемо код стилю для даного блоку, які можна змінювати під свій смак.
Ідентифікатор position-box - відповідає за стиль відображення самого блоку.
Ідентифікатор position-box: before - додає стиль перед блоком "position-box".
Детальніше ідентифікатор position-box:
Два перших параметра (position, z-index) не чіпаємо.
padding - відступи тексту в блоці зверху, праворуч, знизу, зліва.
border - межа в блоці.
color - колір тексту в блоці (fff - білий).
background - міжлітерний (4B92C0 - синій).
width - ширина блоку.
Експериментуйте з кодом і отримуйте цікаві візуальні ефекти.
PS: Спробуйте завантажити картинку з квадратиком в вищевказаному прикладі (за допомогою, наприклад, правої клавіші миші) - ви не зможете цього зробити :) - це одна з властивостей псевдо-елементів.