Быстрый поиск
Введите фрагмент названия статьи для поиска
Исследование защиты программы 1st JavaScript Editor
09.01.2019 | Категория: Темная сторона Силы | Автор: ManHunter
Скриншот программы 1st JavaScript Editor
1st JavaScript Editor - редактор для начинающих и профессиональных web-разработчиков, поддерживающий синтаксис JavaScript, HTML, CSS, VBScript, PHP и ASP. Перечислять все его возможности я не буду, вы можете посмотреть их на офсайте, скажу только, что они весьма обширны. Без регистрации редактор работает три недели, после чего придется обратиться в ближайшую кассу. Или придется прочитать эту статью.
Читать статью целиком »
Просмотров: 2343 | Комментариев: 10
Как увеличить размер 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>
Читать статью целиком »
Просмотров: 12156 | Комментариев: 2
Таблица с колонками одинаковой ширины
29.04.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
Периодически возникающая задача на верстку: нужна таблица с колонками одинаковой ширины, при этом ни количество колонок, ни их содержимое заранее неизвестно. Решается эта задача всего двумя правилами CSS:Code: Убрать нумерацию
- .equal_table {
- table-layout: fixed;
- }
- .equal_table td {
- width:100%;
- }
Code (HTML) : Убрать нумерацию
- <table class="equal_table" style="width:600px;">
- <tr>
- <td>первая</td>
- <td>вторая</td>
- <td>третья</td>
- <td>а в этой колонке будет очень длинный текст</td>
- </tr>
- </table>
Просмотров: 2111 | Комментариев: 1
CSS: перечеркнутый по диагонали текст
10.04.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
Ранее я уже выкладывал статью о том, как можно сделать текст, перечеркнутый линией другого цвета. Там линия была строго горизонтально. Сегодня будет похожая задача, но только зачеркивающая линия будет проходить по диагонали.Этот способ основан на применении абсолютно спозиционированного псевдоэлемента ::before, с помощью которого на текст накладывается цветная линия. Текстовое содержимое псевдоэлемента пустое, но при этом он растянут по всей ширине родительского элемента и смещен относительно его базовой линии.
Code: Убрать нумерацию
- .striked {
- position: relative;
- }
- .striked:before {
- position: absolute;
- width: 100%;
- height: 50%;
- content: '';
- border-bottom: 4px solid #FF0000;
- pointer-events: none;
- }
Code: Убрать нумерацию
- .up::before {
- transform: rotate(-5deg);
- }
- .down::before {
- transform: rotate(5deg);
- }
Code (HTML) : Убрать нумерацию
- <div><span class="striked up">Исправленному</span> верить.</div>
- <div><span class="striked down">Исправленному</span> верить.</div>
Просмотров: 4805 | Комментариев: 2
3D текст с помощью CSS
13.03.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
3D текст с помощью CSS
Небольшой трюк, как можно оформить любой элемент сайта в виде "трехмерного" текста совсем без графики, с помощью одного только CSS. Такое оформление будет хорошо смотреться на крупных надписях, например, на заголовках.
Читать статью целиком »
Просмотров: 2545 | Комментариев: 0