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

Стилизация недоступных ссылок на картинки
21.11.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Когда-то давно я уже поднимал тему обработки недоступных ссылок на картинки, в том случае "битое" изображение подменялось на другое. Но есть и другие варианты стилизации недоступных изображений, как бы странно это ни звучало. Стилизация основана на интересном свойстве элемента <img>, а именно на том, что контент из псевдо-элементов :before и :after для изображения отображается только в том случае, если источник изображения оказывается недоступен. При нормальном положении дел эти псевдо-элементы игнорируются. Таким образом, в случае ошибки на страницу будет добавлена определенная информация. Делается это при помощи CSS:Code (HTML) : Убрать нумерацию
- <style type="text/css">
- img:before {
- content: "Извините, изображение " attr(alt) " недоступно";
- color: #FF0000;
- display: block;
- margin-bottom: 5px;
- }
- img:after {
- content: "Источник: " attr(src);
- color: #0000FF;
- display: block;
- margin-top: 5px;
- }
- </style>
Читать статью целиком »
Просмотров: 636 | Комментариев: 2

Раскрытие текста при нажатии на ссылку
13.08.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Раскрывающиеся блоки текста бывают очень удобны, когда требуется разместить на странице достаточно объемные текстовые и/или графические материалы второстепенной важности. Это могут быть какие-то пояснительные тексты к основному материалу, объемные цитаты и другая информация, которая может быть полезной для пользователя, но при этом не должна отвлекать от чтения. Сегодня я расскажу, как это можно сделать максимально просто с минимальным использованием скриптов и стилей.Начнем с верстки. У нас есть блок текста, который будет раскрываться, и ссылка, при нажатии на которую это должно происходить. Все самое обычное, никаких нестандартных приемов верстки.
Code (HTML) : Убрать нумерацию
- <div class="textbox" id="mytext">
- Тут находится большой текст, который мы должны показать при нажатии на ссылку
- </div>
- <div>
- <a href="#" onclick="document.getElementById('mytext').classList.add('opened');
- return false;">Посмотреть весь текст</a>
- </div>
Code: Убрать нумерацию
- <style type="text/css">
- .textbox {
- overflow: hidden;
- height: 100px;
- border: 1px dashed #A0A0A0;
- }
- .opened {
- overflow: auto;
- height: auto;
- }
- .opened+div {
- display: none;
- }
- </style>
Читать статью целиком »
Просмотров: 1782 | Комментариев: 7

Разделенные ссылки
02.07.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Разделенные ссылки - очень интересный визуальный эффект для оформления вашего сайта. Суть разделенных ссылок заключается в том, что одна ссылка имеет одновременно несколько активных областей, которые могут находиться вообще в разных местах страницы. Например:
Разделенные ссылки
При наведении курсора на название альбома также подсвечивается его обложка в левом блоке, а при наведении на любую из обложек будет подсвечено название соответствующего альбома. Никаких скриптов для этого не требуется, все реализуется средствами CSS.
Читать статью целиком »
Просмотров: 580 | Комментариев: 1

Текст с наложением тени с помощью CSS
14.03.2019 | Категория: Web-мастеру и не только | Автор: ManHunter

Текст с наложением тени с помощью CSS
Симпатичный эффект на чистом CSS для создания красивых заголовков. Буквы с тенью накладываются друг на друга с небольшим смещением. В зависимости от шрифта смещение letter-spacing придется подрегулировать.
Code (HTML) : Убрать нумерацию
- <style type="text/css">
- .header div {
- display: inline-block;
- font-family: Georgia;
- font-size: 72px;
- font-weight: bold;
- color: #FFFFFF;
- letter-spacing: -12px;
- text-shadow: -3px 0px 5px #000000;
- }
- </style>
Code (HTML) : Убрать нумерацию
- <div class="header">
- <div>C</div>
- <div>S</div>
- <div>S</div>
- <div> </div>
- <div>i</div>
- <div>s</div>
- <div> </div>
- <div>A</div>
- <div>w</div>
- <div>e</div>
- <div>s</div>
- <div>o</div>
- <div>m</div>
- <div>e</div>
- </div>
Просмотров: 587 | Комментариев: 2

Как увеличить размер checkbox и radio на CSS
22.12.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
На своей практике я неоднократно сталкивался с тем, что дизайнеры web-сайтов бывают очень далеки от реалий жизни. В результате чего при верстке приходится прилагать немалые усилия, чтобы готовый сайт получился максимально похожим на нарисованный макет. Постоянные читатели блога наверняка читали, как можно разукрасить элементы выбора файлов. Сегодня речь пойдет о чекбоксах и радиокнопках, точнее об их нестандартной стилизации. Много лет назад я уже выкладывал нечто подобное, но там размер чекбокса оставался неизменным, да и решение получилось не самое удачное. Сейчас задача заключается в том, чтобы увеличить кликабельную часть checkbox или radio, и решать я ее буду с помощью современных инструментов, а именно на чистом CSS. Заодно проведу работу над ошибками и сделаю стилизацию элементов так, как должно быть.Начнем с изменения размера. Вариант с изменением атрибутов width или height отпадает сразу, элементы checkbox или radio это игнорируют или же размер поменяется лишь в некоторых версиях каких-то браузеров. Чуть более продвинутый вариант - это увеличение элемента за счет масштабирования. Например:
Code (HTML) : Убрать нумерацию
- <label>
- <input type="checkbox" style="transform:scale(3.0);" /> Option
- </label>
Читать статью целиком »
Просмотров: 5081 | Комментариев: 2
