Скрипт на случайные материалы для uCoz
 | |
| Создаем информер на случайные файлы в 2 колонки и размещаем в блок. При перезагрузки страницы материал будет меняться постоянно. Также на них есть небольшой эффект, это когда вы наводить будете, то появится в один пиксель рамка яркая. Что на темном сайте очень красиво выглядеть и безусловно смотрится. Этот информер доработан был пользователем Angerfist, а точнее были доработаны стили под мобильную адаптацию. И теперь вы сами можете выставить ширину под ваш контейнер сайта, так как они все разные. Он идет на темный фон и можно поставить на светлый, изменений не каких не будет, но разве эффект по гамме изменить. Что если говорить о тематическом наклонение его, на какой теме можно его использовать, то здесь можно с уверенностью сказать, что она широкая. Но больше всего подойдет на кино сайт или игровые интернет ресурсы. Вообщем на тех порталах, где главное изображение идет по размерам соответственно похоже. И только в этом случай будет выводить картинки корректно и главное можно будет понять, на какой вы материал заходите. Здесь идет парно, и только можно выставить с на 4 или шесть и восемь, думаю это будет уже нормально по функциональности главной странице и место не так много займет. Приступаем к установке: Идем в админ панель в раздел информер и создаем его. [ Каталог файлов · Материалы · В случайном порядке · Материалы: 4 · Колонки: 1 ] Код <div class="ScreenGame"> <div class="ScreenGame-img" onclick="location.href='$ENTRY_URL$'" style="background-image: url('$IMG_URL1$')" title="Перейти к просмотру $TITLE$"> </div> </div> CSS: Код .ScreenGame { display: block; float: left; width: 48%; margin: 1%; } .ScreenGame-img { display: block; position: relative; padding-bottom: 125%; background-size: 100% 100%; -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; border: 1px solid #515151; border-radius: 3px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .ScreenGame-img:hover { cursor: pointer; border: 1px solid #6899C3; } @media all and (min-width:480px) and (max-width:768px) { .ScreenGame { width: 32%; margin: 0.65%; } PS - как можно заметить, в стилях прописан media, для адаптаций под мобильную ширину. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 5 | |
|
| |
