Подборка полезных CSS рецептов, или чем мы занимаемся на голых пятницах

[Wadik]

За «вывод строки текста в многоточие» большое спасибо!

[ArtKom]

Опередили. Простой и элегантный способ!
Автору спасибо за статью!

[Paul_King]

Спасибо на добром слове)

[tbicr]

Жаль что это только для однострочников.

[ixside]

Вроде бы такая возможность уже как несколько лет есть в последних версиях популярных браузеров.

[Fesor]

Не знаю как в фаербаге, но хромовская dev-панелька прекрасно зумится.

[Paul_King]

Фаербаг тоже зумится через «Ctrl +», но с голым текстом как-то нагляднее. На мой вкус)

[BashXP]

«В случае, если позиционируется блок, а не изображение, придется также задать ему высоту.»
И ширину…

[Paul_King]

Да, иначе он растянется на всю ширину.вы правы. Спасибо за уточнение, добавил в статью.

[Azurre]

Я сначала очень обрадовался, но когда понял про ширину и высоту стало обидно(

[BashXP]

Можно выравнять не задавая ширины/высоты.

.element {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

[BashXP]

Правда, иногда из-за «translate» в Mac OS шрифты и картинки рендериться криво начинают. Но в большинстве случаев все ок.

[subzey]

Псевдоэлементы :before и :after по умолчанию имеют большее значение z-index, чем элемент, к которому они добавлены.

Псевдоэлементы :before и :after по умолчанию имеют значение z-index: auto, и ничем по поведению не отличаются от обычных дочерних элементов. Вы что-то неверно сформулировали?

[Paul_King]

Да, я хотел сказать, что они будут распологаться над родителем. Спасибо, что поправили!

[medved13]

:before будет под родителем, :after — над. Как если бы они были обычными элементами размещёнными в DOMe в порядке :before, element, :after

[everyonesdesign]

:before и :after находятся не перед и после элемента, а перед контентом и после контента внутри элемента соответственно.

[medved13]

Согласен. Вы правы.

[AlexPershin]

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

[Paul_King]

Отличный способ! Но использовать transform в таких важных вещах пока не все могут себе позволить) К сожалению.

[zelenin]

самый лучший вариант, но если в таком блоке находится форма, то подстановка ранее вводимых в инпуты данных (выпадающее такое меню) выскакивает там, где должно было бы быть без трансформа.http://codepen.io/anon/pen/AkFxn

[TiGR]

Ну, для этих целей правильнее использовать flexbox, раз уж мы говорим о css3.

[rvsob]

Также, псевдоэлементы не будут работать с тегами, в которых не может быть текстового контента. К ним относятся <img>, <br> и, как ни странно, <input>.

А еще select и textarea, но если надо прикрепить псевдоэлемент на кнопку, то лучше использовать не input, а button.

[front_end]

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

Заработают, но не во всех браузерах:

-webkit-appearance: none;
-moz-appearance: none;

А вообще какие-то детские примеры. Я понимаю зафигачать скрытие/показ alert через css по клику. Например — codepen.io/LFeh/pen/oEula

[Paul_King]

Да, мы решили начать с попсовых приемов, дальше постараемся взять что-нибудь позавернутее.

[Bright]

Простите, а зачем?
1) На хабре и так полно уже всяких дайджестов и сборников.
2) Подобные вещи гуглятся/нарабатываются с опытом.

Расскажите лучше о своём рабочем процессе, инструментах или о тех же «фишках», но с примерами задач, которые эти «фишки» решают.

[Paul_King]

Ну, как видите, даже древнее свойство text-overflow: ellipsis знают далеко не все) О рабочем процессе и инструментах постараемся рассказать. Просто решили начинать с малого.

[Valery4]

Рассказывайте дальше. Кому не интересно, никто не заставляет читать, ведь?

Можете голосовалку вконце добавить «понравилось/не понравилось» для душевного спокойствия.

Мне 90% было известно, но только ради text-overflow: ellipsis — стоило читать.

[Serator]

А псевдо-класс :target — вершина мастерства? 0_o

[front_end]

Если вы додумались его так использовать — да.

[isxaker]

очень хорошая традиция

[The_Electronic_Cat]

А объясните кто-нибудь неучу, почему разработчики стандартов и браузеров не могут организовать все так, чтобы очевидный способ

<body style="text-align:center;vertical-align:middle;">

работал применительно ко всему содержимому? Кто или что от этого пострадает, кроме энтропии?

[state13]

нужно еще вот это добавить

html{
  height: 100%;
}
body {
  min-height: 100%;
}

[mpavlov]

Спасибо, покажу верстальщикам, чтоб больше не говорили, что красиво оверфлоувить текст с подстановкой многоточия на клиенте никак не сделать :)

[medved13]

Этот способ работает только если текст одной строкой, так что не радуйтесь раньше времени.

[mpavlov]

Да, кстати, я немного поторопился, вы правы)
Для одной строки это как раз не очень полезно.

[Paul_King]

Пользователь DonSinDRom любезно поделился ссылками на эту тему:

www.mobify.com/blog/multiline-ellipsis-in-pure-css/
codepen.io/martinwolf/pen/qlFdp

[ua9msn]

Вот как оказвается можно! В перечне тэгов, к которым contenteditable применяется, style нет. Вот список:

<a>, <abbr>, <address>, <area>, <b>, <basefont>, <bdo>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <i>, <iframe>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <menu>, <ol>, <option>, <p>, <pre>, <q>, <samp>, <select>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <ul>, <var>

Попробовал добваить этот атрибут к script — не работает. Добавляет div и br на каждый перевод строки. А жаль.

[Serator]

А в чем, собственно, проблема на элемент script повесить сей атриабут? Он будет работать точно также, как и в, к примеру, элементе «p». Вопрос зачем остается открытым, но это вполне работает.

[everyonesdesign]

Мало кто знает про 4й аргумент свойства box-shadow — размер тени:

box-shadow: 0 0 5px 5px rgba(0,0,0,.5);

Ссылка на JSFiddle

[Doktor_Gradus]

На самом деле, есть ещё параметр inset, который указывает, что тень должна располагаться внутри элемента. А ещё можно перечислять список теней через запятую. А вообще, на htmlbook.ru все свойства очень подробно описаны.

[drakmail]

Классная подборка!

// Удивило, сколько людей не знает про text-overflow O_o

[hermit931]

Рецепт «Блоки с зависимой шириной», не лучшее решение. Елементы внутри этого контента, которые по задумке могут располагаться вне этого контента (например всплывающие подсказки при наведении/клике на какой то елемент) будут обрезаться. На мой взгляд лучше вместо overflow использовать левый или правый margin такой же величины как и ширина панели.

[Paul_King]

Но ведь фишка данного метода как раз в гибкости. Ширина будет подстраиваться автоматически, в зависимости от ширины панели, без задания конкретной ширины.

[zelenin]

и то и другое.

[Paul_King]

С таблицами лучше не шутить. Смысл переходить на блочную верстку, еслт блокам задавать display: table?)

[Paul_King]

И все-таки, преврашение блоков в таблицу — это неправильно. Из идеологических соображений)

[Paul_King]

Личных)
Таблицы нужно верстать таблицами. В исключительных случаях, когда иначе нельзя, можно использовать display: table и table-cell.
А маскировать блоки под таблицы — это грязный метод, полухак какой-то. Лучше уж использовать флексбокс, и эмулировать его js-ом в старых браузерах.

[Paul_King]

Говорят, в W3C подумывали отменить table-cell, поэтому не знаю, зачем его придумали)
Согласен, он иногда полезен, порой использую его для вертикального вырванивания. Но верстать на его основе основную структуру сайта — это перебор.

[SerDIDG]

В новом проекте так и сделал, но ради совместимости для старых ие прописываю табличные стили.
serdidg.github.io/FioraUI/docs/content/Columns.html#examples

ПС. Ещё очень очень в бете.

[Dmitry_f]

Прием с тегом style просто взорвал мозг. Это невероятно, что так можно, спасибо.

[andro_xl]

В таблицах трюк с точками не сработает даже если обернуть текст в блок с классом .text-overflow, пока не задашь размер в пикселях. Что досадно…

[SerDIDG]

Можно ставить table-layout: fixed на таблицу, но враппер над текстом всё равно нужен.

[mannaro]

Это очень круто! Спасибо. Особенно понравилось про центрировние и про сайдбар.
Пишите еще ;)

[ilal]

интересненько… а сделать два, скажем, соседних блока с автоматической одинаковой высотой не пробовали? как ячейки у таблицы…

[Paul_King]

Об этом уже была статья habrahabr.ru/post/64173/
На практике я использовал метод с фоном, в крайнем случае через table-cell.

А в идеале, если не нужно поддерживать старые браузеры, используйте flexbox.

[ilal]

не вариант… нужны свободные блоки, произвольное количество в ширину- 3-5-8 блоков, чтоб в одной линии одинаковая высота была… вобщем, без таблиц не решаемо… предлагать забыть про старые броузеры- не вариант, использовать скрипты тоже не вижу смысла-- вы видели итог работы ваших скриптов на машинке 5-10и летней давности, на которой ещё 3-4 приложения запущено? по моему, в крайность ударились-- как угодно, лишь-бы без таблиц…

[ilal]

получается, стандарты ради стандартов? в этом есть смысл?