prowebber.ru - Тут есть все для настоящих вебмастеров

Чтение RSS Мы в твиттере
«    Декабрь 2016    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 

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

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


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


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


В 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); }


-11
Просмотры: 5107 VIP ProWebber | Комментарии (14)
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

#1T1m

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

0

#2serforall

  • 23 мая 2012 21:41
  • Регистрация: 6.12.2011
  • ICQ: --
  • Комментариев: 205
  • Выкл.
то что нужно было, пасибо тс

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

0

#3serega11cc33

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

0

#4Kerosin

  • 24 мая 2012 02:18
  • Регистрация: 12.09.2010
  • ICQ: --
  • Комментариев: 116
  • Выкл.
ну лол же biggrin

0

#5selfire

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

0

#6kpik2008

  • 24 мая 2012 09:07
  • Регистрация: 6.02.2010
  • ICQ: --
  • Комментариев: 23
  • Выкл.
selfire,

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

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

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

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

-1

#7Elegant Division

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

???

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

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

-1

#8ПафНутиЙ

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



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

+1

#9kpik2008

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

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

-1

#10ПафНутиЙ

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

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

0

#11kpik2008

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


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

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

-1

#12ПафНутиЙ

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

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

+1

#13Answer

  • 24 июня 2012 20:06
  • Регистрация: 24.02.2011
  • ICQ: 706113
  • Комментариев: 48
raplist.ru вот мое демо, не реклама.

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

0

#14Huth

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

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

Max-energy.top - Заработок на электросчетчиках;)

Skripters.info - все для вебмастера. Только эксклюзивный контент.

Создание шаблонов DLE, быстро и недорого! 3wave.com.ua

Бро лей на лучшую партнёрку

Почти бесплатный VDS хостинг!

Поддержи сайт
Скрипты, cms, шаблоны, статьи по раскрутке

Опросы

Как часто вы бываете на сайте?

Захожу 1-2 раза в день
1-2 часа в сутки
Более 2 часов
Почти целый день тут smile

Архив новостей
Ноябрь 2016 (7)
Октябрь 2016 (10)
Сентябрь 2016 (8)
Август 2016 (11)
Июль 2016 (14)
Июнь 2016 (17)

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

Искать людей

Ваши переписки