Blog. Just Blog

Быстрый поиск

Введите фрагмент названия статьи для поиска

Открывающийся текст (спойлер) на CSS и JavaScript

03.03.2024 | Категория: Web-мастеру и не только | Автор: ManHunter

Открывающийся текст (спойлер) на CSS и JavaScript

Слово "спойлер" в современном интернете чаще всего используется в значении некой информации, которая заранее раскрывает важный сюжетный поворот или какую-то ключевую суть повествования. В публикациях спойлеры обычно делают в виде раскрывающегося текста, "аккордеона", с использованием тегов <details> / <summary> и другими способами. Сейчас в мессенджерах и на многих информационных сайтах спойлеры оформляют в виде размытого текста, который открывается при клике на него. Давайте тоже сделаем что-нибудь подобное.

Читать статью целиком »
Просмотров: 294 | Комментариев: 1

Стилизация заданного количества HTML-элементов

25.04.2021 | Категория: Web-мастеру и не только | Автор: ManHunter

Стилизация заданного количества HTML-элементов

Средства CSS3 предоставляют широкие возможности для стилизации HTML-элементов. Например, при помощи псевдо-класса :nth-child() можно стилизовать определенный по счету элемент, четные и нечетные элементы, а также элементы, подходящие под формулу записи этого псевдо-класса (смотрите документацию). А вот не совсем стандартная задача: есть таблица, надо стилизовать только первые N ее строчек.

Читать статью целиком »
Просмотров: 806 | Комментариев: 0

Как сделать у ссылок иконки, соответствующие типу файлов

16.01.2021 | Категория: Web-мастеру и не только | Автор: ManHunter

Как сделать у ссылок иконки, соответствующие типу файлов

Понадобилось сделать красивую страничку со списком файлов. Помимо прочего оформления, решил к ссылкам на файлы добавить иконки, соответствующие их типам, примерно как это делается в Проводнике Windows или файловых менеджерах. Сперва хотел реализовать это на серверной стороне, потом подумал, еще подумал, и решил обойтись чистым CSS. Делается это все очень просто. Для каждой ссылки списка в стилях добавляется селектор, соответствующий расширению файлов:
  1. <style type="text/css">
  2. a[href$=".pdf"] {
  3.     padding-left20px;
  4.     backgroundurl('/img/file_pdf.png'no-repeat left 3px;
  5. }
  6.  
  7. a[href$=".doc"], a[href$=".docx"] {
  8.     padding-left20px;
  9.     backgroundurl('/img/file_word.png'no-repeat left 3px;
  10. }
  11.  
  12. a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"] {
  13.     padding-left20px;
  14.     backgroundurl('/img/file_img.png'no-repeat left 3px;
  15. }
  16. </style>
Размеры изображений с типами файлов подбирайте под размеры текста, смещение фона относительно текста ссылки и отступ также определяются экспериментальным путем в зависимости от особенностей верстки.

Просмотров: 1046 | Комментариев: 0

Эффект покачивания изображения при наведении мыши

24.08.2020 | Категория: Web-мастеру и не только | Автор: ManHunter

Эффект покачивания изображения при наведении мыши

Красивый эффект для оформления сайтов на случай какой-нибудь акции или распродажи. При наведении курсора мышки на бейджик, он начинает покачиваться. Никаких скриптов, вся анимация реализована исключительно средствами CSS.

Читать статью целиком »
Просмотров: 2536 | Комментариев: 0

Центрирование элементов на странице средствами CSS

06.05.2020 | Категория: Web-мастеру и не только | Автор: ManHunter
За всю историю развития верстки и Web-дизайна, было придумано немало способов размещения блока точно по центру внутри другого блока. Какие-то лучше, какие-то хуже, какие-то даже получались более-менее кроссбраузерными. Технологии на месте не стоят, поэтому правильный, красивый и современный вариант такого позиционирования достигается комбинацией свойств CSS top, left, right и transform.

Поддержка браузерами свойства transform достаточно хорошая, по крайней мере эту технологию поддерживают все современные декстопные и мобильные браузеры на всех платформах. Для совместимости с некоторыми устаревшими версиями браузеров при описании свойства надо будет дополнительно использовать специфические браузерные префиксы.

Контейнер, относительно которого должны быть спозиционированы вложенные блоки.
  1. .container {
  2.     positionrelative;
  3. }
Значение relative определяет, что абсолютное позиционирование всех вложенных блоков должно считаться не от краев экрана, а от границ родительского элемента. Ну а теперь переходим к описанию правил для вложенных блоков.

Читать статью целиком »
Просмотров: 1064 | Комментариев: 1

prev 01 02 03 04 05 06 07 08
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.06 сек. / MySQL: 3 (0.0041 сек.) / Память: 4.5 Mb
Наверх