Добро пожаловать на форум!
Новые сообщения Участники Правила форума Поиск RSS
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные пользователи Новые участники
Болт (3758)
Skyline (2679)
XemorDio (2574)
Strelok41 (2146)
Dan [23.03.2017]
nsekhin [23.03.2017]
petro_056 [22.03.2017]
DIMAS550 [22.03.2017]
Кит [21.03.2017]
Страница 1 из 11
Форум » Web-раздел » uCoz » Подборка полезных CSS рецептов
Подборка полезных CSS рецептов
Бармен Дата: Воскресенье, 30.10.2016, 16:02 | Сообщение # 1
Группа: Модераторы
Сообщений: 236
Награды: 6 Репутация: 65
Статус: Offline

Итак, представляем вашему вниманию сборку интересных и (надеемся) малоизвестных HTML и CSS-рецептов. Будем рады, если каждый из вас узнает что-то новое!

Центрирование блока по вертикали и горизонтали

Чаще всего такие блоки с помощью свойств top и left смещают на 50%, а затем сдвигают в центр отрицательными отступами. Но есть более элегантный способ, о котором знают не все:

Код
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}


В случае, если позиционируется блок, а не изображение, придется также задать ему высоту и ширину.
Этот прием не сработает в IE7. Надеюсь, вы на него давно не ориентируетесь)

Вывод строки текста в многоточие

Довольно-таки старое свойство (работает в IE 6!), однако официально было добавлено только к стандарту CSS3. Так как его применение нечасто встречается в сети, можно сделать вывод, что о нем знают не все.

Код
.text-overflow {
    white-space: nowrap;       /* Перво-наперво, запретим перенос строк */
    overflow: hidden;          /* Скрываем текст, который не помещается в блок */
    text-overflow: ellipsis;   /* Уводим текст в многоточие */
    display: block;            /* Элемент обязательно должен быть блочным */
}


Блоку можно задать ширину, но по умолчанию он растягивается на всю ширину родителя. Соответственно, многоточие начнет появляться, когда ширина дочернего блока превысит ширину блока родительского. Работает данный прием только для одной строки.

Блоки с зависимой шириной

Допустим, мы хотим добавить на сайт боковую панель.

Код
<aside class="panel">
    ...
</aside>
<div class="content">
    ...
</div>

Причем, ширина контента зависит только от ширины панели. Как это сделать без явного указания ширины? Способ есть:

Код
.content {
    overflow: hidden;
}
.panel {
    float: right;
    width: 20%;
}



Как видите, «overflow: hidden» решил все проблемы.

Эллиптические углы

Немногие знают (или просто не используют на практике), что в параметре border-radius можно задавать не 4, а целых 8 параметров, по 2 параметра на угол. В этом случае первый параметр задает радиус по горизонтали, а второй — по вертикали. Пример:

Код
.circle {
    border-radius: 150px/100px 100px/200px 0 0;
}


Немного о псевдоэлементах

Псевдоэлементы :before и :after по умолчанию будут перекрывать элемент, к которому они добавлены. В случае, когда псевдоэлемент нужно поместить по оси Z ниже родителя, указывается отрицательный z-index.

Также, псевдоэлементы не будут работать с тегами, в которых не может быть текстового контента.

Код
К ним относятся <img>, <br> и, как ни странно, <input>.


А вот

Код
<hr>
по какой-то причине подхватывает псевдоэлементы нормально.

Бонус: мини-firebug на чистом HTML

Просто вставьте на страницу этот код:

Код
<style contenteditable style="display: block; border: 1px solid black; width: 90%; height: 300px; position: fixed; bottom: 50px; left: 5%;"></style>


Вуаля, все работает. Спасибо, HTML5!
Штука практически бесполезная, однако, если ей задать больший размер шрифта, может сослужить хорошую службу во время презентаций. Ведь мало кто сможет разглядеть крохотные буковки настоящего firebug-а.
Форум » Web-раздел » uCoz » Подборка полезных CSS рецептов
Страница 1 из 11
Поиск:
08:07
Обновить

Хостинг от uCoz | Design by XemorDio | MODSTALKER © 2009-2017