Все о свойстве border

[@wcoder]

Указан же ниже, не?

[@TheShock]

Раньше — это в каком году?

[@krovatti]

Извините, но до весеннего обновления было также.

[@tangro]

Дорогие люди, в каждом без исключения топике-переводе появляется этот комментарий — «а где ссылка». Разберитесь уже в конце концов в интерфейсе Хабра и перестаньте безосновательно обвинять переводчиков в плагиате.

[@king2]

Я вот, например, довольно давно на хабре, и знаю, где находится эта самая ссылка, но так до сих пор так и не привык ее быстро находить. Вижу, что я не один такой.

И раз в каждом топике находится как минимум один такой, кто не находит, то может это не они все идиоты, а просто ссылка сделана незаметно, а?

Можно просто сделать еще одну строчку, перед тэгами, например, и там написать «Источник:» или «Оригинал:».

А?

[@spmbt]

  Да-да, я тоже давно об этом говорил. Говорит о том, что интерфейс пометок о переводах несовершенен, просто признак незаметен читателю. И несколько месяцев назад в своих юзерскриптах сделал более явное выделение того, что статья обозначена как перевод.
  Сейчас это на Хабре — не очень понятная иконка «Z-Я». «Ну Z-Я», подумает читатель и пропустит как непонятное. Потому что содержание гораздо интереснее, и всё внимание переключено туда. Чтобы не всматриваться пристально в вид иконок, я просто пометил переводы синеватым фоном в заголовке.

Разницы совсем немного, но при чтении обращаешь внимание, что фон — синеватый. (То же — для топиков-ссылок, фон зеленоватый.) Вполне нормально помогает. Скрипт здесь: userscripts.org/scripts/show/121690, настройка скрипта, отвечающая за эту фичу — "подкраска переводов, топиков-ссылок, компаний", по умолчанию включена. (с ней ещё имена компаний подкрашиваются в заголовках, ныне — в «хабах»).

[@spmbt]

И забыл сказать о следующей «суперфиче» по этому поводу. Клик по значку «Z-Я» в списке статей приводит к переходу на оригинал в новом окне (правда, это не очевидно и сам об этом не помню), а на странице статьи справа вверху появляется дубль информации — дата, автор и автор оригинала. Клик по автору оригинала — тоже переход на оригинал. Таким образом, и вверху, и внизу статьи есть ссылка на оригинального автора, а чтобы она по цвету несколько отличалась от автора статьи (переводчика) — сделано так:

Цвет едва заметно, но отличается от цвета автора. Этого достаточно.

[@olegsuv]

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

[@krovatti]

Я тоже тут не первый месяц, но тем не менее вижу перевод сразу. ЧЯДНТ?

[@besisland]

Перевод очень просто определить по стилистике текста: с самого начала начинают встречаться топорные обороты, дословно или полудословно взятые из оригинала. А пометка о переводе внизу текста служит для меня лишь окончательным подтверждением.

[@king2]

"… во время поиска квартиры, видел один безумно дорогой дом, который я естественно не снял, но в нём, в частности, была устроена специальная огромная солнечная батарея, питающая электрическую сушку для белья. Не могу не поразиться техническим гением, решившим столь сложную задачу получения такого большого количества электрической энергии от солнца, а так же тем, что даже я знаю способ использования солнца для сушки белья ПРОЩЕ." (с) Китя Карлсон.

[@besisland]

Вот я и говорю: перевод чаще всего гораздо проще определить по самому тексту, нежели лазить вокруг в поисках крупиц метаинформации.

[@krovatti]

Перевод очень легко определить по иконке, изображённой слева от заголовка. Ваш К.О.

[@king2]

Если Вы можете сразе же слету определить, две маленькие красненькие надписи среди большого количества других мелких элементов, или одна — могу только позавидовать Вашему зрению.

[@krovatti]

Спасибо. У меня действительно стопроцентное зрение.

[@TheShock]

Я вот, например, довольно давно на хабре, и знаю, где находится эта самая ссылка, но так до сих пор так и не привык ее быстро находить. Вижу, что я не один такой.

А её и не надо быстро находить. Просто перед тем, как обвинять автора в плагиате — необходимо проверить, не перевод ли это

[@king2]

Я автора ни в чем не обвинял. Однако думаю, что желающих перейти на оригинал текста гораздо больше, чем поглядеть на карму автора или, скажем, сделать что-то-там с фейсбуком или вконтактом.

[@TheShock]

А я и не про вас)

[@Sargass]

Спор о переводе и проблемах его отображения, чуть ли не больше, чем обсуждение статьи...)
Статья то, между прочим классная, про скругление например вообще не знал.
Как-то напыщено звучат вопли про перевод.

[@wcoder]

ИМХО: Хорошая памятка.

[@bumbay]

Отлично, спасибо. Вначале конечно всё банально, но дальше — прекрасно. Еще раз спасибо.

[@bumbay]

Tooltip готов! =)

[@Fedcomp]

самый последний пример сильно удивил, спасибо.

[@profseo2012]

интересно, есть над чем поработать)
спасибо)

[@russum]

И где Вы были раньше, здорово описано, но обычно юзаю не более 3-4 пикселей в радиусе, сильные закругления как-то не очень радуют, выглядят как-то по-детски, мультяшно что-ли

[@alexbeep]

Да провалиться мне сквозь землю, если я tooltip так буду верстать. Микроскопом тоже можно сваи заколачивать, но никто же так не делает

[@f0rmat1k]

Cool story

[@egorinsk]

А как с кроссбраузерностью? сглаживание углов работает ли или пиксельными ступеньками наклнная линия рисуется?

[@ilyachase]

.lemon {
…
}

:-)

[@Crystall]

Что-то не так?

[@sas1024]

oh shi...!

Никогда бы не подумал что у border может быть столько применений и что с его помощью можно такие вещи творить.

Однозначно запись в закладки.

[@ilyaProphet]

не хватает, как минимум свойства border-image
есть даже сервис, для его генерации border-image.com

[@shmaltorhbooks]

!IE

[@Evengard]

css3pie.com/documentation/supported-css3-features/

[@spmbt]

Но это же не всё. Есть бордюры-рисунки:
www.xiper.net/manuals/css/properties/border-image.html
css-tricks.com/understanding-border-image/
www.w3schools.com/cssref/css3_pr_border-image.asp
ejohn.org/blog/border-image-in-firefox/
Примеры:

www.dynamicdrive.com/style/csslibrary/item/image_frames_using_css3_border_image/
Демо и генератор:
www.norabrowndesign.com/css-experiments/border-image-anim.html
Генератор

[@Flanagun]

Огромное спасибо за статью. Начинающим дизайнерам — отличная памятка.
Да и не только начинающим. Хоть и не всегда необходимо так извращаться с «border» =)

[@Alexufo]

Скоро будут профессии css кодеры. Перевод JPG в вектор кросбраузерно.

[@besisland]

Только вот biohazard тут ни при чём.

[@k0t]

Разве что в названии последнего класса

[@besisland]

Последняя (она же первая) картинка.

[@RUgaleFF]

Я полагаю, автор имел ввиду вот этот знак:
www.psdgraphics.com/file/3d-radiation-sign.jpg

[@besisland]

Притом это довольно волная интерпретация.

en.wikipedia.org/wiki/Hazard_symbol

[@sanzstez]

Нужные вещи. В избранное…

[@dom1n1k]

К сожалению, использование border+outline для двойной границы — ненадежный метод.
Браузеры по разному интерпретируют само понятие outline, если свойство overflow у блока отлично от умолчального.

[@pepelsbey]

Вообще-то, border и outline это не параметры, а свойства. И жаль, что автор забыл про не самый очевидный способ гибкого закругления блоков: border-radius:50%

[@pepelsbey]

Значит не в самом очевидном месте. Там, где круги — об этом не говорится. Тексткейсы?

[@ymik]

«Суровые питерские верстальщики используют не border, а поребрик»

[@SowingSadness]

не хочу вас огорчать, но все с точностью — наоборот :)

[@egormerkushev]

Нет, это вы ошибаетесь. :)

[@SowingSadness]

Везде где я бывал по России, везде бортовой камень называют поребриком.
И только в Питере его при мне называли бордюром — где ошибка с моей стороны?

[@midday]

Не знаю где вы были, но у меня в точности наоборот.

[@SowingSadness]

А вы откуда?

[@midday]

Сургут

[@aruseni]

Очень понравился лимон. Сделал версию лимона, созревающего при наведении мыши. :)

.lemon {
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height: 200px;
    background: #00d519;
    border: 1px solid #00a714;
    -webkit-border-radius: 10px 150px 30px 150px;
    -moz-border-radius: 10px 150px 30px 150px;
    border-radius: 10px 150px 30px 150px;
    -webkit-transition: background-color 1s ease-in-out, border-color 1s ease-in-out;
    -moz-transition: background-color 1s ease-in-out, border-color 1s ease-in-out;
    -o-transition: background-color 1s ease-in-out, border-color 1s ease-in-out;
    transition: background-color 1s ease-in-out, border-color 1s ease-in-out;
    -webkit-box-shadow: #ccc 0 0 15px;
    -moz-box-shadow: #ccc 0 0 15px;
    box-shadow: #ccc 0 0 15px;
}

.lemon:hover {
    background-color: #F5F240;
    border-color: #F0D900
}

[@philpirj]

Пример с псевдоэлементами не заработал с pre почему-то. упорно по высоте в один символ и минимален по ширине, вместо того, чтобы обёртывать контейнер.