Оформление ссылок скачивание файла для uCoz
 | |
| Давайте красиво оформим ссылки на скачивание и показание изображение на каталоге файлов uCoz, где переделаем со стандартного на свой стиль. Как знаете там идут значение, если вы загрузили файл, то покажется надпись, под скачивание. Также второе значение идет, если архив находится на другом сервис, и если к материалу перекреплено изображение, то также автоматически показывается, что при клике можно посмотреть. Но как знаем все это обозначение идут в простом стили, что иногда их некоторые даже не замечают. Здесь выведем на совершенно другой уровень, где будут представлены несколько вариантов, которые вы можете выбрать для своего портала. Где заранее говорю, что все они идут с оригинальным эффектом, это при наведение, что может плавно изменится полностью стилистика или появится тень, что сама кнопка где то будет в движение. Но думаю вы поняли саму суть изменение, со стандартного на уникальное. За основу безусловно возьмем каталог файлов, а точнее вид материалов и комментариев к нему, где будет прописан по умолчанию такой код. Код <?if($FILE_URL$ || $RFILE_URL$ || $SCREEN_URL$)?>[ <?if($FILE_URL$)?><a href="$FILE_URL$"><!--<s5223>-->Скачать с сервера<!--</s>--></a> ($FILE_SIZE$)<?endif?> <?if($RFILE_URL$)?> · <a href="$RFILE_URL$" target="_blank"><!--<s5224>-->Скачать удаленно<!--</s>--></a> ($RFILE_SIZE$)<?endif?> <?if($SCREEN_URL$)?> · <a href="$SCREEN_URL$" target="_blank"><!--<s5187>-->Скриншот<!--</s>--></a><?endif?> ]<?endif?> Здесь его менять не будем, а просто уберем лишнее, это точки, что идут после каждого оператора и все скобки также нужно уьрать и получится такой код, он и как основа будет. Код <?if($FILE_URL$ || $RFILE_URL$ || $SCREEN_URL$)?><?if($FILE_URL$)?><a href="$FILE_URL$">Скачать с сервера</a> ($FILE_SIZE$)<?endif?> <?if($RFILE_URL$)?><a href="$RFILE_URL$" target="_blank">Скачать удаленно</a> ($RFILE_SIZE$)<?endif?> <?if($SCREEN_URL$)?><a href="$SCREEN_URL$" target="_blank">Скриншот</a><?endif?><?endif?> Подключим шрифтовые иконки, так как они будут выводить кнопки, а точнее значение. И давайте рассмотрим один вариант, а их будет десять, что остальные представлены в текстовой документе в архиве, что нужно скачать.  Здесь для понимание установки, также будет прилагаться демонстрация на просмотр работы. 1. Ставим код, который изменили, а точнее что выше предоставлен, это уже без знаков, которые все убраны. 2. Идем в админ панель в CSS и там прописываем стили. Код a.hvr { display: inline-block; padding: 1em; margin: 10px 0px; color: #ffffff; background: #2d7192; text-decoration: none; } /* Float Shadow */ .hvr-float-shadow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-float-shadow:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 80%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 80%); /* W3C */ -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity; } .hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active { -webkit-transform: translateY(-5px); transform: translateY(-5px); } .hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before { opacity: 1; -webkit-transform: translateY(5px); transform: translateY(5px); } Как скачаете, просто открываем документ и там будут варианты и ссылка на демонстрацию, что копируем и ставим в браузер и переходим по ней и смотрим как эффект выглядит, вообщем выбираем. Источник: ps-studio.info | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |