Кстати задачка верстальщикам

Дано:
<div class="button">Hello kursk2</div>

С помощью магии CSS должно получиться вот это:

только CSS только хардкор

подсказка:

IE8:

IE7:

116 комментариев

  • аватар SeL
  • 0
А что за мода на эти кружочки с черточками, буквально на днях такой видел где-то?
да никакой моды просто обозначение всяких выпадающих выезжающих появляющихся меню. ну или за что можно потащить…
просто ассоциативный образ не больше. вон у хрома тоже чертачки. а кружочек ну типа пальцем шоб ткнуть щас это модно
  • аватар ololo
  • 0
Результат на картинке — это схематичное изображение решение или требуемый результат так и должен выглядеть?
так и должно быть
  • аватар ololo
  • 0
А, понял. Круг и фон — это border-radius и background в селекторе .button
Три прямоугольника — это же не фоновая картинка, верно?
ага не картинка.
  • аватар ololo
  • 0
Тогда это псевдоэлементы. Правда, у одного родителя их не может быть больше двух, а у тебя три, верно?
один
  • аватар ololo
  • 0
тогда это абсолютно спозиционированный псевдоэлемент с фоном белого цвета и двойной обводкой
  • аватар ololo
  • 0
ку-ку, мало входных данных
диаметр 320px
полосочки длинной по 160px
высотой 20px

все центрировано по горизонтали и вертикали
  • аватар ololo
  • 0 

.button{
    position:absolute;
    left:50%;
    top:50%;
    width:320px;
    margin:-160px 0 0 -160px;
    border-radius:50%;
    background:#7c7b91
}

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

           <div class="button">Hello kursk2</div>
           <div class="button">Hello kursk2</div>
           <div class="button">Hello kursk2</div>
           <div class="button">Hello kursk2</div>
           <div class="button">Hello kursk2</div>
           <div class="button">Hello kursk2</div>
           <div class="button">Hello kursk2</div>
           <div class="button">Hello kursk2</div>
           <div class="button">Hello kursk2</div>
           <div class="button">Hello kursk2</div>


даст
  • аватар ololo
  • 0
то есть, если круг один, он должен стоять точно в центре окна бразуера, а если таких элементов несколько, то как они должны себя вести относительно body? я правильно понимаю, что нельзя создавать селектор для body?
  • аватар ololo
  • 0
без этих входных условий у меня есть решение
  • аватар ololo
  • 0 

.button {
    position:relative;
    /* если нужно располагать элемент в центре документа, раскомментируем строку ниже */
    /*position:absolute;left:50%;top:50%;margin:-160px 0 0 -160px;*/
    text-align:center;display:inline-block;
    width:320px;height:320px;
    border-radius:50%;background:#7c7b91;
    overflow:hidden;text-indent:-1000px;
}
.button:before{
    display:block;content:' ';
    width:160px;height:20px;background:#fff;position:absolute;
    margin:-30px 0 0 -80px;left:50%;top:50%;
    border-top:20px solid #7c7b91;
    border-bottom:20px solid #7c7b91;
    box-shadow:0 20px #fff,0 -20px #fff;
}
  • аватар ololo
  • 0
там затесалась лишняя строка после закомментированной
Спящий мозг выдал такую хрень

<style>
.button{
    position:relative;
   
    width:160px;
    height:20px;
    background: #ffffff;
    border: 1px solid #7c7b91;
    border-radius: 50%;
    border-width: 110px 40px 110px 40px;
    
}
.button:before {
    margin-left:-9px;
	margin-top:-55px;
	content: "";
	position:absolute;
    width:160px;
    height:100px;
    background: #ffffff;
    border: 1px solid #7c7b91;
    border-radius: 0%;
    border-width: 10px 10px 10px 10px;
}
.button:after {
	content: "";
	position:absolute;
    margin-left:-90px;
	margin-top:-25px;
    width:160px;
    height:20px;
    background: #ffffff;
    border: 1px solid #7c7b91;
    border-radius: 0%;
    border-width: 20px 10px 20px 10px;
}
</style>

<div class="button">Hello kursk2</div>
да оно у меня не ровно, но эт я просто сплю xD
  • аватар ololo
  • 0
Андрей говорил, что псевдоэлемент только один
  • аватар ololo
  • 0
второй там избыточен
про это не слова не вижу
вижу много — комментарий удален
  • аватар ololo
  • 0
я там зачем-то решил пояснять ход своих мыслей, он может сбить с толку других, кто возьмётся за задачу позже. я пока скрываю комментарии, имеющие отношения к решениям, после всё откроем
банан, решение канает или нихуя?
  • аватар ololo
  • 0
думаю, что не канает, посмотри на скрин ie8, это хорошая подсказка
А нахуя комменты то тереть?
А понял, все вопрос отпал.
Всем спокойной ночи/работы.
  • аватар ololo
  • 0
Автор топика получит комментарии на почте и увидит там их содержимое, а народ пусть подумает.
Вообще хорошая идея с задачками, как считаешь?
Да, отличная! Скилл качает же ж!
И вообще компании вместо воды на собеседовании, лучше бы подобным образом кандидатов проверяли xD
  • аватар ololo
  • 0
обычно на собеседованиях или перед ними так и делается
Если я все правильно понял, как-то так должно получиться?

.button {
    position:relative;
    text-align:center;
    width:320px;
    height:320px;
    border-radius:160px;
    background:#7c7b90;
    text-indent:-999em;
    
    /* если элементов несколько float:left; margin:0 0 2em 2em;*/
}
.button:before{
    content:' ';
    position:absolute;
    left:50%;
    top:50%;
    width:160px;
    height:20px;
    background:#fff;
    margin:-30px 0 0 -80px;
    border-top:20px solid #7c7b90;
    border-bottom:20px solid #7c7b90;
    box-shadow:0 20px #fff, 0 -20px #fff;
}
  • аватар ololo
  • 0
Думаю, что это верное решение, пока скрою, чтобы другие тоже могли что-то предложить. Ты забыл overflow:hidden у родителя, а text-align тут не нужен. Но это ерунда.
Ну да текст-то задвинул)
а оверфлоу зачем?
  • аватар ololo
  • 0
чтобы задвинутый текст не болтался рядом на расстоянии -999em
В браузере полосы прокрутки не появляются, если ты об этом)
  • аватар ololo
  • 0
При определённых обстоятельствах этот текст может появиться в видимой области. Да и в целом это плохая практика, когда текст скрывается с помощью этого свойства без использования o:h
Оке, буду знать, так-то мне не трудно)
.ir {
font: 0/0 a;

 text-shadow: none;
color: transparent;

}
Я юзаю если че для этого
Первый раз такое вижу если честно)
Тень-то зачем убрал?
Да и цвет при таком раскладе лишнее, разве нет?
text-shadow:none — гарантированно снимает любую унаследованную тень текста. Это предотвращает появление любых остатков тени от текста поверх фона.
color:transparent — декларация для браузеров, которые не уменьшают текст полностью (до состояния невидимости). Safari 4 — пример (чрезвычайно редкий) такого браузера. Также эта декларация может быть нужна мобильным браузерам. IE6-8 не распознаёт такое значение свойства color, но, к счастью, IE7-8 и без него не показывают никаких следов от текста. IE6 отображает бледный след.

Цитата
Боже мой)
IE6 — это юзали, когда нетскейп навигатор еще существовал?)
Ну про тень понятно…
И как у тебя в вышеприведенном примере float:left; — работает?
Бля что я несу, марджины работают?
  • аватар ololo
  • 0
Так на отступы эти свойства и не влияют
  • аватар ololo
  • 0
Это решение уступает обсуждаемому выше, поскольку при необходимости переопределить отображение текста, например, для мобильных браузеров, придётся иметь дело не с одним свойством, а с тремя. Избыточность налицо.
Если учесть оверфлоу, то 3 против 2-х)
  • аватар ololo
  • 0
не вижу реальных причин, ради которых придётся переопределять overflow
С учетом вышесказанного:
.button {
    position:relative;
    text-align:center;
    width:320px;
    height:320px;
    border-radius:160px;
    background:#7c7b90;
    text-indent:-999em;
    float:left; 
    margin:0 0 2em 2em;
    overflow:hidden;
}
.button:before{
    content:' ';
    position:absolute;
    left:80px;
    top:130px;
    width:160px;
    height:20px;
    background:#fff;
    border-top:20px solid #7c7b90;
    border-bottom:20px solid #7c7b90;
    box-shadow:0 20px #fff,0 -20px #fff;
}
Элегантней
  • аватар ololo
  • 0
ie8 корректно показывает этот псевдоэлемент, если него не объявлено свойство display:block?
  • аватар ololo
  • 0
чтобы не вычислять радиус, проще написать 50%
Дадада, переписывать не буду уж)
  • аватар ololo
  • 0
Посмотрим, может утром или днём кто-нибудь предложит ещё что-то получше.
  • аватар ololo
  • 0
там ещё надо было разместить круг в центре окна, но это уже мелочи
тогда флоат с отступами убираем, и добавим
top:50%;
left:50%;
margin:-160px 0 0 -160px;
  • аватар ololo
  • 0
Кстати, мы с тобой допустили одну общую ошибку. Если посмотреть свежим взглядом — легко убедиться, что псевдоэлементу не нужен border
  • аватар ololo
  • 0
box-shadow:0 40px #fff,0 -40px #fff
Верная строчка бордеры не нужны
  • аватар ololo
  • 0
Хорошее начинание, а не устроить ли нам как-нибудь тусовку, куда каждый сможет принести какую-нибудь каверзную задачку или несколько? Заодно и побеседовать на околорабочие темы. Web Standards Day на местный лад.
За любой здоровый кипиш, кроме голодовки)
  • аватар ololo
  • 0
ну вот нас уже двое, кто ещё поддержит?
  • аватар tau
  • 0
я за. надо написать отдельный пост про это и спросить народ, о чем бы они хотели послушать, что обсудить.
осталось найти того, кто готов приютить в офисе небольшую группу людей.
Офис считаю предпочтительнее кабака.
  • аватар ololo
  • 0
а как насчёт решения задачки? предложишь?
Думаю, что с официозом нужно попрощаться на время. Главное собраться.
Офис — да, чай там сушечки, а уж о чем поговорить мы наверняка найдем)
Не забудьте коллег позвать — можт еще и проспонсируют движняк.
Вот и зачем ты мне это показал? Опять сегодня бухать придется, иначе моя нежная психика не выдержит такого напора.
Когда ко мне обращается новый клиент с похожим сайтом (продвинуть там или дописать чего:D). Я обычно начинаю коммерческое со слов: Если коротко — то это пиздец, все нужно переписывать заново.
Бляя, точно. Так ваще отлично.
Итого
.button {
    position:relative;
    width:320px;
    height:320px;
    border-radius:50%;
    background:#7c7b90;
    text-indent:-999em;
    overflow:hidden
}
.button:before{
    content:' ';
    position:absolute;
    left:80px;
    top:150px;
    width:160px;
    height:20px;
    background:#fff;
    box-shadow:0 40px #fff,0 -40px #fff;
}
  • аватар ololo
  • 0
Да, точняк. Есть ещё решение без использование теней, но оно для самых поехавших. Надеюсь, такие завтра найдутся. Если нет, то обнародую сам.
Чет не догоняю как?
верные варианты были
минимизировал абсолютные размерности и у меня получилось следующее

jsfiddle.net/T6mdh/16/
  • аватар ololo
  • 0
предлагаю подождать. может, кто-то подкинет ещё идей
  • аватар ololo
  • 0
Тут впечатление портит абсолютное значение отступа для тени псевдоэлемента, которое не меняется при изменении линейных размеров. Лучше указать отступ в относительных величинах, тогда решение будет полностью масштабируемым.
к сожалению это невозможно
ааа ну оно все равно не относительно велечины круга

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

в моем варианте хотя бы сохраняются все пропорции. кроме как отступов от центральной полоски


ну и задействовать родителя придется
  • аватар ololo
  • 0
Ты в полной мере понимаешь суть относительных величин em. Для масштабирования этого элемента не нужно изменять его собственные размеры, нужно всего лишь у его родителя изменить свойство, отвечающее за кегль шрифта, и оно будет унаследовано твоим элементом и его псевдоэлементом такмим. Таким образом он пропорционально изменит свой размер.

Именно для этого я и ввёл третий селектор body, чтобы проиллюстрировать этот факт. Попробуй изменить 68 на что-либо другое.
  • аватар ololo
  • 0
если очень нужно строго следовать условиям отсутствия третьего селектора, можно перенести это свойство в .button
  • аватар ololo
  • 0
Но третий селектор на мой взгляд гораздо правильнее, поскольку в этом случае элемент является полностью независимым блоком, а третий селектор — его глобальным модификатором, который может удобно управлять и его соседями.
да мне так нравиться правда для получения кружков диаметров 80px мне пришлось вычислить значение font-size:26.5px
  • аватар ololo
  • 0
Это всё решаемо, для удобства можно подобрать значения em/px так, чтобы соотношения были один к одному.
Настоящих буйных мало — вот и нету вожаков.
jsfiddle.net/T6mdh/
если центрировать нужно то абсолют, 50%, -margin
можно еще с letter-spacing огромными поиграться =) но там дубово выходит
  • аватар ololo
  • 0
на фиддле пусто
ых, завтра тогда повторю
  • аватар ololo
  • 0
это решение не будет себя вести так, как показано на скриншотах ie7/8
  • аватар FORTIS
  • 0
возможно, не смотрел. завтра погоняю в ие.
вообще мне понравилось, хорошая разминка перед началом рабочего дня =)
Ну не совсем так выглядит
  • аватар ololo
  • +1
пацаны, смотрите — у него айпад! да он же гей!

это тема такая на
ахаха, стилус-то зачем?
Заметки на полях оставлять.
  • аватар ololo
  • 0
поясни, пожалуйста, в чём связь между задачей в этом посте и текстом по твоей ссылке?
  • аватар ololo
  • 0
Я не только читал это четыре года назад, но и лично знаком с автором. Поясни всё же, в чём связь, для меня это неочевидно.
  • аватар mihon
  • 0
В том, что там решена уже часть этой задачи.
  • аватар ololo
  • 0
Подробнее, пожалуйста.
  • аватар mihon
  • 0
Я имел ввиду, что вижу одним из решений задание исходному блоку ширины, высоты и скругления углов, как и у Пепелсбея.
  • аватар ololo
  • 0
Там же всего лишь использовались те же свойства width, height и border-radius, которые не только предназначены для этого, но и не имеют альтернатив. Как по мне, так с тем же успехом можно установить связь не только между любыми задачами, но и между любыми текстами, поскольку они записаны при помощи единого алфавита.

Суть этой задачи заключалась в том, чтобы с помощью одного элемента и одного псевдоэлемента изобразить нечто, чтобы будет соответствовать скриншотам из трёх браузеров. Кроме решения с box-shadow точно такого же результата можно достичь с помощью свойства border-image.
  • аватар mihon
  • +3
Я изначально не осознал, что суть задачи в задаче, за что прошу меня простить. И вы правы на счет свойств разумеется.
  • аватар ololo
  • +1
В любом случае спасибо, что уделил время. Можно и на ты, как мне подсказал Илья, мы с тобой знакомы.
  • аватар mihon
  • +2
Не за что, сам поковырялся в свое удовольствие. И да, встречались как-то раз.

Чтобы оставлять комментарии, нужно или зарегистрироваться.