Хаки и Скрипты Next Generation CMS

Интересный CSS пример оформления для изображений

irbees2008 irbees2008 Опубликовано - 2 - августа CSS
2660 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

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

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

Код:
<div class="corners-top">
<div class="corners-bottom">
<!-- Здесь ваше изображение -->
</div>
</div>
3.В файл стилей добавим стили наших блоков
Код:
.corners-top {
position: relative;
width: 500px;
min-height: 200px;
margin: 100px auto;
padding: 20px;
background-color: #fff; /* Fallback */
background:
-webkit-linear-gradient(45deg, transparent 10px, #fff 10px),
-webkit-linear-gradient(135deg, transparent 10px, #fff 10px),
-webkit-linear-gradient(225deg, transparent 10px, #fff 10px),
-webkit-linear-gradient(315deg, transparent 10px, #fff 10px);
background:
-moz-linear-gradient(45deg, transparent 10px, #fff 10px),
-moz-linear-gradient(135deg, transparent 10px, #fff 10px),
-moz-linear-gradient(225deg, transparent 10px, #fff 10px),
-moz-linear-gradient(315deg, transparent 10px, #fff 10px);
background:
-o-linear-gradient(45deg, transparent 10px, #fff 10px),
-o-linear-gradient(135deg, transparent 10px, #fff 10px),
-o-linear-gradient(225deg, transparent 10px, #fff 10px),
-o-linear-gradient(315deg, transparent 10px, #fff 10px);
background-position: bottom left, bottom right, top right, top left;
background-size: 50% 50%;
background-repeat: no-repeat;
-moz-box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5);
box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5);
}
[class*='corners-']::before,
[class*='corners-']::after {
content: '';
position: absolute;
height: 20px; width: 80px;
-webkit-box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5);
-moz-box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5);
box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5);
box-shadow: none\9; /* Не выводить в IE9 */
}
.corners-top::before,
.corners-top::after {
top: -10px;
}
.corners-bottom::before,
.corners-bottom::after {
bottom: -10px;
}
.corners-top::before,
.corners-bottom::before {
left: -42px;
}
.corners-top::after,
.corners-bottom::after {
right: -42px;
}
.corners-top::before {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.corners-top::after {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.corners-bottom::before {
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.corners-bottom::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
4. В принципе все,могут возникнуть и конфликт стилей,будет криво,это надо смотреть в каждом случае отдельно,какие стили конфликтуют.

Можешь почитать и вот эту статейку "Что такое ИКС и с чем его едят"

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

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

Последние комментарии

Обновленное

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3297 дней
  • Новостей: 539
  • Комменты: 252
  • Зарегистрированно : 569
  • Онлайн всего: [11]
  • Гости: [10]
  • Поисковики: [1] Яндекс
  • Были сегодня : [3] Яндекс, Google, Яндекс
  • SQL запросов: 32
  • Генерация страницы: 0.223сек
  • Потребление памяти: 4.937 Mb 
  •   яндекс.ћетрика