Быстрый поиск
Введите фрагмент названия статьи для поиска
Как сделать у ссылок иконки, соответствующие типу файлов
16.01.2021 | Категория: Web-мастеру и не только | Автор: ManHunter
Как сделать у ссылок иконки, соответствующие типу файлов
Понадобилось сделать красивую страничку со списком файлов. Помимо прочего оформления, решил к ссылкам на файлы добавить иконки, соответствующие их типам, примерно как это делается в Проводнике Windows или файловых менеджерах. Сперва хотел реализовать это на серверной стороне, потом подумал, еще подумал, и решил обойтись чистым CSS. Делается это все очень просто. Для каждой ссылки списка в стилях добавляется селектор, соответствующий расширению файлов:
Code (HTML) : Убрать нумерацию
- <style type="text/css">
- a[href$=".pdf"] {
- padding-left: 20px;
- background: url('/img/file_pdf.png') no-repeat left 3px;
- }
- a[href$=".doc"], a[href$=".docx"] {
- padding-left: 20px;
- background: url('/img/file_word.png') no-repeat left 3px;
- }
- a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"] {
- padding-left: 20px;
- background: url('/img/file_img.png') no-repeat left 3px;
- }
- </style>
Просмотров: 189 | Комментариев: 0
Эффект покачивания изображения при наведении мыши
24.08.2020 | Категория: Web-мастеру и не только | Автор: ManHunter
Эффект покачивания изображения при наведении мыши
Красивый эффект для оформления сайтов на случай какой-нибудь акции или распродажи. При наведении курсора мышки на бейджик, он начинает покачиваться. Никаких скриптов, вся анимация реализована исключительно средствами CSS.
Читать статью целиком »
Просмотров: 573 | Комментариев: 0
Центрирование элементов на странице средствами CSS
06.05.2020 | Категория: Web-мастеру и не только | Автор: ManHunter
За всю историю развития верстки и Web-дизайна, было придумано немало способов размещения блока точно по центру внутри другого блока. Какие-то лучше, какие-то хуже, какие-то даже получались более-менее кроссбраузерными. Технологии на месте не стоят, поэтому правильный, красивый и современный вариант такого позиционирования достигается комбинацией свойств CSS top, left, right и transform.Поддержка браузерами свойства transform достаточно хорошая, по крайней мере эту технологию поддерживают все современные декстопные и мобильные браузеры на всех платформах. Для совместимости с некоторыми устаревшими версиями браузеров при описании свойства надо будет дополнительно использовать специфические браузерные префиксы.
Контейнер, относительно которого должны быть спозиционированы вложенные блоки.
Code (HTML) : Убрать нумерацию
- .container {
- position: relative;
- }
Читать статью целиком »
Просмотров: 326 | Комментариев: 1
Исследование защиты программы HTML Password Wizard
27.12.2019 | Категория: Темная сторона Силы | Автор: ManHunter
Скриншот программы HTML Password Wizard
Программа HTML Password Wizard предназначена для создания защищенных HTML-страниц, содержимое которых отображается только после ввода правильного пароля. Практическую ценность этого я оставлю за рамками этой статьи, тут же будет исследование ее защиты. Проект благополучно скончался, так что даже если у кого-то вдруг возникло бы желание купить эту программу, у него все равно ничего бы не получилось.
Читать статью целиком »
Просмотров: 894 | Комментариев: 14
Плавное появление надписи при наведении на картинку
21.12.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Красивый эффект на чистом CSS, который будет хорошо смотреться в какой-нибудь web-галерее. При наведении курсора на картинку, поверх нее плавно выезжает название и описание, причем отдельными независимыми блоками. Начнем с таблицы стилей.Code (HTML) : Убрать нумерацию
- <style type="text/css">
- .cool_img {
- display: inline-block;
- position: relative;
- text-align: center;
- overflow: hidden;
- border-radius: 5px;
- }
- .cool_img .info {
- position: absolute;
- bottom: 0;
- }
- .cool_img .info span {
- display: block;
- position: relative;
- top: 130px;
- color: #FFFFFF;
- background: #000000;
- transition-delay: 0;
- transition-duration: 0.3s;
- }
- .cool_img .info .info_title {
- font-size: 18px;
- font-weight: bold;
- padding: 5px;
- border-radius: 5px 5px 0 0;
- opacity: 0.8;
- }
- .cool_img .info .info_text {
- font-size: 12px;
- padding: 10px;
- opacity: 0.6;
- }
- .cool_img:hover .info span, .cool_img:focus .info span {
- top: 0;
- }
- .cool_img:hover .info .info_title {
- transition-delay: 0.15s;
- }
- .cool_img:hover .info .info_text {
- transition-delay: 0.25s;
- }
- </style>
Читать статью целиком »
Просмотров: 1426 | Комментариев: 0
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 27,962 раза
Поблагодарили 27,962 раза
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 410 |
 |
 |