|
|
|
|
 | Красивое оформление css-рамками/ CSS-клубничка | В данной статье мы разберем несколько примеров, как с помощью css-border`ов можно красиво оформить изображения или ваши фотографии.
Данная реализация на изображениях сэкономит не только "вес" самой страницы, но и придаст стильность оформлению сайта.
Важно обратить внимание при оформлении изображений, на сочетания цветов в фоне или рамках самого css эффекта и на самом изображении.
Данная статья ориентирована на тех, кто уже имеет навыки в чудесном CSS.
Оформление "Арт-галерея"
Данный css-стиль мы просто подцепляем в код самого изображения: <img class="artgirl" src="image/artcat.jpg" width="300" height="209" />
CSS-код:
Еще один пример оформления "Арт-галерея", но уже с серыми двойными рамками и .... цветом:
css-код:
Оформление "Фотография"
CSS-код:
Оформление "Поларойд"
CSS-код:
Оформление "Шарики"
CSS-код:
Оформление "Рамка с фоном"
CSS-код:
Оформление "Рамка с подписью"
Изображение до:
Изображение после:
В данном примере мы создаем стиль для DIV`a, в который поместим изображение, размеры DIV`а должны быть такие же как у изображения. В этот же DIV поместим <cite> с описанием к изображению и сделаем подстиль цитаты DIV`a. Фон цитаты будет задан с прозрачностью filter:alpha(opacity=55); opacity:.55; и ее позицией.
CSS-код:
Html-код:
Оформление "Рамка с фоном. Реализация номер 2"
В данном способе мы будем использовать дополнительно тег Span, который будет накрывать наше изображение фоном. В результате чего пользователю не удастся сохранить картинку напрямую, т.к. будет сохранятся только фон. Конечно адрес самого изображения можно просмотреть в хтмл коде или найти в временных файлах Интернета. Так что считать это защитой нельзя. Фон картинки будет прозрачным за исключением боков. Так же мы создадим стиль img для самого изображения, чтобы регулировать внешние отступы. Изображение должно быть не больше самого фона. Не ошибитесь, прописывая размеры фона в стилях div-img и в SPAN`e для div-img.
Наша картинка:
Наша рамка:
Готовое изображение:
CSS-код:
Html-код:
Оформление "Рамка с переходом"
Наш примерный фон (его также можно сделать с эффектом тени), разделенный на три отдельных изображения. Центральное маленькое изображение заполняет весь боковой фон с помощью команды в css-коде "background-repeat: repeat-y;" . (Повторение по оси y):
Готовое изображение:
Описание CSS-кода:
Далее нужно будет сверстать все эти классы с помощью DIV`ов в Html-коде:
Оформление "Рамка в отдельной графической оправе"
Наша картинка:
Рисуем рамку. Далее разбиваем нашу рамку на три части и сохраняем каждое изображение отдельно. Их размеры потом прописываем в CSS-коде:
Описание CSS-кода:
Далее нужно будет сверстать все эти классы с помощью DIV`ов в Html-коде:
Готовое изображение сверстанное с помощью CSS и DIV:
Хочется еще примеров? Нужно просто включить свою фантазию, приправить ее логикой и изобритать новые техники.
За основу в статье были использованы идеи с сайта: http://www.thewebsqueeze.com/
автора: Linda Chadbourne.
Так же советую посмотреть красивые примеры оформления сайтов с помощью CSS на сайте http://www.csszengarden.com/
| | Дата публикации: 2009-05-03 Просмотров: 6337 Автор: Сергей печатная версия |
Комментарии к статье:
Добавить комментарий:
|
Хотите подписаться на специальные статьи и уроки по Интернет-бизнесу и сайтостроению, которые выходят раз в месяц, а так же получить секретные бонусы?
Удобный сервис рассылок - Smartresponder.ru.
Ваши данные будут конфидициально сохранены.
| |
|
|
|
Автор комментария: Salam
Дата: 2010-03-15 16:24:26 ip-адрес:(91.185.229.33)
Мне больше всего первая понравилась