Онлайн всего: 1
Гостей: 1
Пользователей: 0


ДЕМО Скачать исходники



Отличный эффект округления изображений. Отлично подойдет для кино сайтов, чтобы округлять постеры фильмов.

Установка:

1. Этот код нужно вставить в Ваш CSS:
Code
/* Обычное изображение */

.normal-img {

  background: #ccc;

  border: solid 1px #000;

  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  border-radius: 10px;

  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

}

.normal-img-2 {

  display: inline-block;

  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  border-radius: 10px;

  -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, 1), 0 -1px 0 rgba(0, 0, 0, .6);

  -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);

  box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, 1), 0 -1px 0 rgba(0, 0, 0, .6);

}

/* Стиль для округленного изображения */

.rounded-img {

  display: inline-block;

  border: solid 1px #000;

  overflow: hidden;

  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  border-radius: 10px;

  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

}

.rounded-img2 {

  display: inline-block;

  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  border-radius: 10px;

  -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);

  -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);

  box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);

}

/* Стили для демонстрационной страницы */

body {

  width: 800px;

  margin: 30px auto;

  font: normal 14px/150% Arial, Helvetica, sans-serif;

}

p {

  margin: 0 0 10px;

}

h2, h3 {

  margin: 0 0 5px;

}

hr {

  margin: 30px 0;

  background: #999;

  height: 0;

  padding: 0 0 1px;

  border: none;

}

.demo {

  margin: 40px 0;

  padding: 20px;

  background: #d7d7d7;

  border: solid 1px #ccc;

}

.left {

  float: left;

  margin-right: 20px;

}

/* Очистка */

.clearfix:after {

  visibility: hidden;

  display: block;

  font-size: 0;

  content: " ";

  clear: both;

  height: 0;

}

* html .clearfix {

  zoom: 1;

} /* IE6 */

*:first-child+html .clearfix {

  zoom: 1;

} /* IE7 */


2. Чтобы округлить изображение Вам нужно дописать к изображению которую хотите округлить
Code
class="normal-img"

или
Code
class="normal-img-2"


В итоге у Вас должно получится наподобие этого:
Code
<img border="0" align="absmiddle" src="ССЫЛКА НА ВАШЕ ИЗОБРАЖЕНИЕ" class="normal-img">
или  
<img border="0" align="absmiddle" src="ССЫЛКА НА ВАШЕ ИЗОБРАЖЕНИЕ" class="normal-img-2">






| Комментарий № 2 | Дата: 25.09.2013Спам

It's good to get a fresh way of loknoig at it.


| Комментарий № 1 | Дата: 27.01.2012Спам

Был бы ты не школото, которое скачало дизайн и создало рип студию скачивая с других сайтов, ты бы знало что в опере оно не работает...

Создать бесплатный сайт с uCoz