Не нравятся результаты поиска? Попробуйте другой поиск!

DLE FAQ » Сниппеты » CSS Сниппеты » Ретро-эффект для картинки на CSS3

Ретро-эффект для картинки на CSS3

ПафНутиЙ 28.03.2013 css3, сниппет CSS Сниппеты 4021

HTML:

<div class="retro">
    <img src="http://lorempixel.com/400/200" alt="Retro is cool!" />
</div>

CSS:

.retro {
    -webkit-box-shadow:  inset 0px 0px 100px rgba(0,0,20,1);
    box-shadow: inset 0px 0px 100px rgba(0,0,20,1);
    background: -webkit-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), -webkit-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);
    background: -moz-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), -moz-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);
    background: -o-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), -o-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);
    background: -ms-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), -ms-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);
    background: linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);
    display: table;
}

.retro img { 
    -webkit-filter: sepia(20%) brightness(10%) contrast(130%);
    position: relative; z-index: -1; 
}
.retro:hover {
    background: none;
}
.retro:hover img {
    -webkit-filter: none;
}

Демо

Эффектные тени для текста на CSS3

Пунктирная обводка внутри блока (эффект прострочки) на CSS3

Последние события

Shandi | Почему не отображается картинка в галере ... ²

Shandi
Почему не отображается картинка в галерее?
Сегодня, 08:53

Мне как ламеру ничего не понятно:( Кто-то это исправляет за денужку?
TeraMoune | Как сделать водяной знак с заменой? ¹

TeraMoune
Как сделать водяной знак с заменой?
Вчера, 23:29

Картинки загружаются в разные директории в зависимости от длительного периода загрузок этих папок может быть десятки. Более того оригинальные изображения не всегда имеют безопасные имена и при загрузке часто переименовываются. Так что не факт, что оригиналы соответствуют загруженным копиям.
TeraMoune | Почему не отображается картинка в галере ... ²

TeraMoune
Почему не отображается картинка в галерее?
Вчера, 23:19

Потому что какой-то стиль может скрывает изображение. Проинспектируйте элемент, отыщите в древо html изображение и указав на него указатель в инспекторе кода посмотрите не наследуются ли какие-то посторонние стили.
Beton1205 | Как реализовать шифрование трафика? ⁴

Beton1205
Как реализовать шифрование трафика?
Вчера, 17:55

Делается очень просто. Грузим файлы на cdn, либо друглй сервак.
На сайте пишем простой скрипт, который будет получать реальные адреса, например адрес файла site.ru/video.mp4, скрипт долюен проверять, что с вашего адреса идет звпрос. И тупо скриптом выводим ссылку аля vashsite.site/video.mp4 и прокидукм ее mod rewrite
mondolfo | Как вывесит в comments.tpl картинку с но ... ⁷

mondolfo
Как вывесит в comments.tpl картинку с новости?
23-11-2024, 23:42

кто-нибудь решил эту?
Darkzone | Выбор категории для доп. поля? ⁴

Darkzone
Выбор категории для доп. поля?
22-11-2024, 17:08

Разъясните как вытащить id?
lutskboy | Вытащить все данные из определенного доп ... ¹

lutskboy
Вытащить все данные из определенного доп поля?
22-11-2024, 16:17

в adminer можно.

lutskboy | Выбор категории для доп. поля? ⁴

Фото lutskboy

lutskboy
Выбор категории для доп. поля?
22-11-2024, 16:14

выбрать все кроме такого нет. можно с бд достать все ид через запятую и вставить в xfields.txt
js скрипт можно написать


<script>
    window.addEventListener('load', ()=> {
        $('#category').on('change', function() {
            var value = $(this).val();
            if ($.isArray(value)) {
            	ShowOrHideEx("xfield_holder_year", jQuery.inArray('1', value) != -1 || jQuery.inArray('2', value) != -1 );
            } else {
            	ShowOrHideEx("xfield_holder_year", value == 1 || value==2);
            }
        })
    });
</script>
year доп поле . 1 и 2 катег

Darkzone | Выбор категории для доп. поля? ⁴

Darkzone
Выбор категории для доп. поля?
22-11-2024, 14:39

Смотрите, Нужно чтоб обязательное к заполнению доп. поле при добавлении новости, выводилось во всех категориях, кроме двух. Так как количество категорий довольно большое, есть ли способ, не тыкать каждую категорию в которой будет отображаться доп.поле. Надеюсь я смог разъяснить.
lutskboy | Выбор категории для доп. поля? ⁴

lutskboy
Выбор категории для доп. поля?
22-11-2024, 13:52

где выводить? админка или сайт

наверх