Мы в твиттере Мы в телеграме!

Провеббер » Web » Полезные статьи » Красивое оформление картинок

Набор в команду! Ведется набор в команду, для наполнения сайта новым, интересным контентом. Если у тебя есть предложения, свободное время, ты обладаешь интересным контентом, и хочешь поделиться с другими?
Обращайся к нам в ЛС группы Вконтакте.

Красивое оформление картинок

Данный материал предоставлен сайтом ProWebber.cc исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Скачать бесплатно Красивое оформление картинок.

Красивое оформление картинок


В html код добавить:

<ul class="box"><li><img src="image.jpg" /></li></ul>



В файл стилей добавить:

ul.box {  
  position: relative;  
  z-index: 1;
  overflow: hidden;  
  list-style: none;  
  margin: 0;  
  padding: 0; }  
  ul.box li {  
  position: relative;  
  float: left;  
  width: 160px;  /* ширина рамки  при размере картинки  150 */  
  height: 160px;  /* высота рамки   при размере картинки  150*/  
  padding: 2px;  
  border: 1px solid #efefef;  
  margin: 0 10px 10px 0;  
  background:#fff;  
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;  
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;  
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }  
  ul.box li:before,  
  ul.box li:after {  
  content: '';  
  z-index: -1;  
  position: absolute;  
  left: 10px;  
  bottom: 10px;  
  width: 70%;  
  max-width: 300px;
  height: 55%;  
  -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);  
  -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);  
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);  
  -webkit-transform: skew(-15deg) rotate(-6deg);  
  -moz-transform: skew(-15deg) rotate(-6deg);  
  -ms-transform: skew(-15deg) rotate(-6deg);  
  -o-transform: skew(-15deg) rotate(-6deg);  
  transform: skew(-15deg) rotate(-6deg); }  
  ul.box li:after {  
  left: auto;  
  right: 10px;  
  -webkit-transform: skew(15deg) rotate(6deg);  
  -moz-transform: skew(15deg) rotate(6deg);  
  -ms-transform: skew(15deg) rotate(6deg);  
  -o-transform: skew(15deg) rotate(6deg);  
  transform: skew(15deg) rotate(6deg); }


Дополнительные ссылки на скачивание ТОЛЬКО для зарегистрированных


-15
Просмотры: 7 556 :: Комментарии (14) :: :: Нужна помощь? Задайте вопрос на форуме ::
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

#1T1m

  • 23 мая 2012 16:20
  • Регистрация: 27.10.2011
  • Был(а) онлайн: 7.01.2015
  • Комментариев: 22
  • -2
Давно искал подобный еффект на CSS3, спасибо!

#2serforall

  • 23 мая 2012 21:41
  • Регистрация: 6.12.2011
  • Был(а) онлайн: 14.02.2016
  • Комментариев: 204
  • -2
то что нужно было, пасибо тс

--------------------

#3serega11cc33

  • 24 мая 2012 00:43
  • Регистрация: 21.10.2010
  • Был(а) онлайн: 2.02.2019
  • Комментариев: 42
  • -2
автор большущие спасибо на всех сайтов лазил нигде не мог найти

#4Kerosin

  • 24 мая 2012 02:18
  • Регистрация: 12.09.2010
  • Был(а) онлайн: 20.11.2012
  • Комментариев: 116
  • -2
ну лол же biggrin

#5selfire

  • 24 мая 2012 07:45
  • Регистрация: 5.03.2011
  • Был(а) онлайн: 19.08.2019
  • Комментариев: 30
  • -2
а как к DLE прикрутить куда его вставлять
<ul class="box"><li><img src="image.jpg" /></li></ul>

#6kpik2008

  • 24 мая 2012 09:07
  • Регистрация: 6.02.2010
  • Был(а) онлайн: 18.03.2024
  • Комментариев: 23
  • -3
selfire,

Легко как ты вставляешь картинку?

<img src="image.jpg" /> примерно же так?

ну вот, теперь добавь спереди <ul class="box"><li> и сзади </li></ul>

--------------------

#7Elegant Division

  • 24 мая 2012 16:07
  • Регистрация: 29.11.2010
  • Был(а) онлайн: 17.09.2019
  • Комментариев: 87
  • -3
Что за бред, для чего:
список (ul)
before/after

???

<div class="cover"><img src.../></div>

ну и css код,
.cover img {
padding/border/border-radius/box-shadow/background-color
}

#8ПафНутиЙ

  • 24 мая 2012 20:05
  • Регистрация: 8.03.2010
  • Был(а) онлайн: 27.01.2021
  • Комментариев: 400
  • -1
Блин!
Я валяюсь с вашего "метода" реализации.
А если картинка будет размером больше чем 300px в ширину?
Бред в общем полный....
Специально для Автора (и всех остальных, кто поспешил возпользоваться этим говнокодом):



--------------------

#9kpik2008

  • 24 мая 2012 20:25
  • Регистрация: 6.02.2010
  • Был(а) онлайн: 18.03.2024
  • Комментариев: 23
  • -3
ПафНутиЙ, Elegant Division, Ну извините, что умеем то и выкладываем, вдруг кто...что подпилит :)

--------------------

#10ПафНутиЙ

  • 24 мая 2012 20:29
  • Регистрация: 8.03.2010
  • Был(а) онлайн: 27.01.2021
  • Комментариев: 400
  • -2
kpik2008,
Подобные вещи лучше держать при себе ).
Да и вообще отдельные куски кода выкладывать как отдельную новость - не совсем правильно.
Соберите 10-15 хороших кусков (они называются сниппеты) и публикуйте, это будет гораздо интереснее и полезнее для посетителей.

--------------------

#11kpik2008

  • 24 мая 2012 20:39
  • Регистрация: 6.02.2010
  • Был(а) онлайн: 18.03.2024
  • Комментариев: 23
  • -3
ПафНутиЙ, мне например нужно что-то в этом роде но я плохо разбираюсь, почему на общее обозрение не выложить ... ? Меня всегда интересовала правильная критика!


подскажите, а лучше предложите свою версию данного оформления! Буду весьма благодарен!

--------------------

#12ПафНутиЙ

  • 25 мая 2012 18:20
  • Регистрация: 8.03.2010
  • Был(а) онлайн: 27.01.2021
  • Комментариев: 400
  • -1
kpik2008,
Я же в первом своём комментарии в этой новости написал ссылку:
_http://jsfiddle.net/paffffff/GrA6L/1/embedded/result/

--------------------

#13Answer

  • 24 июня 2012 20:06
  • Регистрация: 24.02.2011
  • Был(а) онлайн: 24.09.2019
  • Комментариев: 48
  • -2
raplist.ru вот мое демо, не реклама.

--------------------

#14Huth

  • 24 июня 2012 21:33
  • Регистрация: 12.01.2011
  • Был(а) онлайн: 17.08.2014
  • Комментариев: 110
  • -2
Теперь стало похоже на белый айпад :)

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Архив новостей
Ноябрь 2024 (9)
Октябрь 2024 (169)
Сентябрь 2024 (13)
Август 2024 (60)
Июль 2024 (12)
Июнь 2024 (30)