Рамка для фотографий и картинок в виде веера - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Вторник, 06.12.2016
Скрипты для uCoz » Эффекты для сайта uCoz » Рамка для фотографий и картинок в виде веера

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Рамка для фотографий и картинок в виде веера

Веерный эффект рамки для фото и картинок




Рамка вокруг Ваших фотографий и картинок будет иметь эффект раскладывающегося веера, работой которого являются свойства CSS3.В качестве основных элементов управления эффектом являются свойства псевдоэлементов и трансформации.Вы можете выбрать любой из 7 эффектов и применить для оформления добавляемых изображений.Параметры размеров ширины и высоты можно установить до требуемой величины, в примерах выделены места для изменения, если указать только значение ширины тогда значение высоты будет вывставляться пропорционально.Изображение помещённое в рабочую зону эффекта будет масштабироваться, т.е иметь резиновые свойства сужения или расширения до указанных значений.Всё полностью настроено для работы, при возникновении рекомендаций или существующих трудностей в установке воспользуйтесь формой комментариев.







Установка эффета рамки по центру

Для установки рамки по середине поместите весь код эффекта в пример ниже, значение ширины width:400px; замените на установленное Вами



<div style="margin:0 auto;width:400px;">
Здесь код примера рамки
</div>



Установка эффета рамки по центру + отступ сверху и снизу

Для положения рамки по центру поместите весь код эффекта в пример ниже, значение ширины width:400px; замените на Ваше.В качестве отступа (пустого промежутка) сверху и снизу рамки указано значение margin:30px auto; равное 30 пикселям.



<div style="margin:30px auto;width:400px;">
Здесь код примера рамки
</div>



Простой эффект рамки без дополнений


<style>
.stack {
float: left;
/* - Ширина картинки - */
width: 400px;
margin: 0 4% 4% 0;
position: relative;
z-index: 10;
}
.stack img {
max-width: 100%;
/* - Высота картинки - */
height: auto;
vertical-align: bottom;
border: 10px solid #fff;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.stack:last-of-type {margin-right: 0;}
.stack:before, .stack:after {
content: "";
border-radius: 3px;
width: 100%;
height: 100%;
position: absolute;
border: 10px solid #fff;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-transition: 0.3s all ease-out;
-moz-transition: 0.3s all ease-out;
-o-transition: 0.3s all ease-out;
-ms-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
}
.stack:before {top: 4px; z-index: -10;}
.stack:after {top: 8px; z-index: -20;}
</style>
<div class="stack">   
<img src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_1.jpg" alt=""/>
</div>



При наведении рамка разложится веером в право


<style>
.stack {
float: left;
/* - Ширина картинки - */
width: 400px;
margin: 0 4% 4% 0;
position: relative;
z-index: 10;
}
.stack img {
max-width: 100%;
/* - Высота картинки - */
height: auto;
vertical-align: bottom;
border: 10px solid #fff;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.stack:last-of-type { margin-right: 0; }
.stack:before, .stack:after {
content: "";
border-radius: 3px;
width: 100%;
height: 100%;
position: absolute;
border: 10px solid #fff;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-transition: 0.3s all ease-out;
-moz-transition: 0.3s all ease-out;
-o-transition: 0.3s all ease-out;
-ms-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
}
.stack:before { top: 4px; z-index: -10; }
.stack:after { top: 8px; z-index: -20; }
.stack.rotated:hover:before {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}
.stack.rotated:hover:after {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-o-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(4deg);
}
</style>
<div class="stack rotated">
    <img src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_2.jpg" />
</div>



При наведении рамка разложенная в право соберётся


<style>
.stack {
float: left;
/* - Ширина картинки - */
width: 400px;
margin: 0 4% 4% 0;
position: relative;
z-index: 10;
}
.stack img {
max-width: 100%;
/* - Высота картинки - */
height: auto;
vertical-align: bottom;
border: 10px solid #fff;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.stack:last-of-type { margin-right: 0; }
.stack:before, .stack:after {
content: "";
border-radius: 3px;
width: 100%;
height: 100%;
position: absolute;
border: 10px solid #fff;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-transition: 0.3s all ease-out;
-moz-transition: 0.3s all ease-out;
-o-transition: 0.3s all ease-out;
-ms-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
}
.stack:before { top: 4px; z-index: -10; }
.stack:after { top: 8px; z-index: -20; }
.stack.rotated:before {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}
.stack.rotated:after {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-o-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(4deg);
}
.stack:hover:before, .stack:hover:after {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
</style>
<div class="stack rotated">
    <img src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_3.jpg" />
</div>



При наведении рамка разложется во все стороны


<style>
.stack {
float: left;
/* - Ширина картинки - */
width: 400px;
margin: 0 4% 4% 0;
position: relative;
z-index: 10;
}
.stack img {
max-width: 100%;
/* - Высота картинки - */
height: auto;
vertical-align: bottom;
border: 10px solid #fff;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.stack:last-of-type { margin-right: 0; }
.stack:before, .stack:after {
content: "";
border-radius: 3px;
width: 100%;
height: 100%;
position: absolute;
border: 10px solid #fff;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-transition: 0.3s all ease-out;
-moz-transition: 0.3s all ease-out;
-o-transition: 0.3s all ease-out;
-ms-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
}
.stack:before { top: 4px; z-index: -10; }
.stack:after { top: 8px; z-index: -20; }
.stack.twisted:hover:before {
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-o-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(4deg);
}
    .stack.twisted:hover:after {
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-o-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(-4deg);
}
</style>
<div class="stack twisted">
<img src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_4.jpg" />
</div>



При наведении рамка разложенная в разные стороны соберётся


<style>
.stack {
float: left;
/* - Ширина картинки - */
width: 400px;
margin: 0 4% 4% 0;
position: relative;
z-index: 10;
}
.stack img {
max-width: 100%;
/* - Высота картинки - */
height: auto;
vertical-align: bottom;
border: 10px solid #fff;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.stack:last-of-type { margin-right: 0; }
.stack:before, .stack:after {
content: "";
border-radius: 3px;
width: 100%;
height: 100%;
position: absolute;
border: 10px solid #fff;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-transition: 0.3s all ease-out;
-moz-transition: 0.3s all ease-out;
-o-transition: 0.3s all ease-out;
-ms-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
}
.stack:before { top: 4px; z-index: -10; }
.stack:after { top: 8px; z-index: -20; }
.stack.twisted:before {
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-o-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(4deg);
}
    .stack.twisted:after {
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-o-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(-4deg);
}
.stack:hover:before, .stack:hover:after {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
</style>
<div class="stack twisted">
<img src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_5.jpg" />
</div>



При наведении рамка разложется в лево


<style>
.stack {
float: left;
/* - Ширина картинки - */
width: 400px;
margin: 0 4% 4% 0;
position: relative;
z-index: 10;
}
.stack img {
max-width: 100%;
/* - Высота картинки - */
height: auto;
vertical-align: bottom;
border: 10px solid #fff;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.stack:last-of-type { margin-right: 0; }
.stack:before, .stack:after {
content: "";
border-radius: 3px;
width: 100%;
height: 100%;
position: absolute;
border: 15px solid #fff;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-transition: 0.3s all ease-out;
-moz-transition: 0.3s all ease-out;
-o-transition: 0.3s all ease-out;
-ms-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
}
.stack:before { top: 4px; z-index: -10; }
.stack:after { top: 8px; z-index: -20; }
.stack.rotated-left:hover:before {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.stack.rotated-left:hover:after {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
-ms-transform: rotate(-6deg);
transform: rotate(-6deg);
}
</style>
<div class="stack rotated-left">
    <img src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_6.jpg" />
</div>



При наведении рамка разложенная в лево соберётся


<style>
.stack {
float: left;
/* - Ширина картинки - */
width: 400px;
margin: 0 4% 4% 0;
position: relative;
z-index: 10;
}
.stack img {
max-width: 100%;
/* - Высота картинки - */
height: auto;
vertical-align: bottom;
border: 10px solid #fff;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.stack:last-of-type { margin-right: 0; }
.stack:before, .stack:after {
content: "";
border-radius: 3px;
width: 100%;
height: 100%;
position: absolute;
border: 15px solid #fff;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-transition: 0.3s all ease-out;
-moz-transition: 0.3s all ease-out;
-o-transition: 0.3s all ease-out;
-ms-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
}
.stack:before { top: 4px; z-index: -10; }
.stack:after { top: 8px; z-index: -20; }
.stack.rotated-left:before {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.stack.rotated-left:after {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
-ms-transform: rotate(-6deg);
transform: rotate(-6deg);
}
.stack:hover:before, .stack:hover:after {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
</style>
<div class="stack rotated-left">
    <img src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_7.jpg" />
</div>



Проверьте примеры для установки в редакторе









Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 1870 | Добавил: IZOTOP | Рейтинг: 5.0/2
    | Теги: для картинки, с эффектом, рамка, для фото

    Всего комментариев: 7
    0   Спам
    2 alurbur   (13.03.2013 14:31)
    Аватар alurbur Благодарю за подробный ответ ! Применил на своем сайте, все получилось. Есть еще вопрос по теме фотоальбома! Можно-ли заменить стандартное слайд-шоу для фотоальбома Ucoz?

    0   Спам
    3 IZOTOP   (13.03.2013 15:19)
    Аватар IZOTOP К сожалению пока такая возможность не рассматривалась в виду адекватной работы и достаточной функциональной способности стандартного элемента слайд-шоу. Уверен что в настоящее время нет возможности создать достойную альтернативу, так же не существует возможности внесения корректировок в работу условного оператора $SLIDESHOW$, все регулировки находятся на стороне системы и не доступны потребителю.

    0   Спам
    4 Admin8108   (05.10.2013 21:12)
    Аватар Admin8108 на счет слайд-шоу вы не правы, если не верите можете посмотреть у меня на сайте, http://news-portal.pw/ , главное иметь прямые руки..

    0   Спам
    5 IZOTOP   (05.10.2013 23:52)
    Аватар IZOTOP Не совсем понятно о чём Вы речь ведёте, по указанному адресу не обнаружено вида слайд шоу.
    Если честно, сайт исходник с которого был сделан Ваш шаблон - изучен пол года назад.
    Материалы, полезные в использовании слиты сюда, дополнены и доступны простым людям.
    Вам нужно корректнее отнестись к возможностям изменения функциональности стандартного вида Слайд шоу для юкоз.
    Если Вы подтвердите наличие изменений Ваше сообщение будет оставлено, в противном случае - удалено и придётся понижать репутацию.
    У Вас не был подключен модуль в котором по Вашим словам был создан иной показ слайд шоу.
    Про всякие непонимания по поводу подобного "пафоса" с моей стороны имею во чё:



    Просто мне приходится заботится о моих посетителях, надеюсь я не прав, просто о чём то забыл "как всегда" и нужно будет искать слова навевающие снисхождение моей некомпетентной личности.

    0   Спам
    6 Admin8108   (06.10.2013 00:00)
    Аватар Admin8108 я о том, что можно сделать слайд-шоу для любого модуля, используя $OTHER1$-$OTHER5$, пример у меня в новостях сайта нажмите на картинку, и увидите там возможность слайд-шоу..

    0   Спам
    7 IZOTOP   (07.10.2013 21:42)
    Аватар IZOTOP Молодец Дружище, нормальный "Вид материалов" замутил.
    Но речь ведётся о "Слайд шоу" условного оператора $SLIDESHOW$, его изменение через селекторы.
    Возьми сделай материал со своим слайдшоу и выложи для народа.

    0   Спам
    1 alurbur   (13.03.2013 07:27)
    Аватар alurbur Вопрос автору материала. Можно этот эффект применить в фотогалерее сайта Ucoz?


    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]