Cypher76

Ого! Вот это капнули Спасибо большое. С before и after хорошо получается. Попробую в таком виде прикрутить.

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

Если мы задаем border-radius: n%; то круглые углы мы получаем только тогда, когда ширина равна высоте. Тогда процент дает одно и то же значение. Если кнопка тянется (увеличивается ширина), то горизонтальный радиус увеличивается. Если сплющивается (уменьшается ширина), то горизонтальный радиус уменьшается. Вертикальный же всегда фиксированный. Люботным и кому не лень, попробуйте код. <style> div { margin: 200px auto; text-align: center; background: black; color: white; /*work with*/ width: 50%; height: 200px; border-radius: 20%; } </style> <div>Hello</div> Хороший вариант, это задать значения через слэш, например: border-radius: 10% / 20%;Но это подходит только для случая, когда ширина изменяется пропорционально высоте (в примере 2 к 1). У меня высота не изменяется. Александр, я думаю, что в конечном итоге врядли получится указать border-radius`у, от чего считать проценты. И, если задуматься, дефолтовый способ высчитывать в процентах значения от высоты и ширины, вполне естественный. Мне он кажется просто непривычным, так как обычно нужно использовать px или em, а они ведут себя по другому. Я попробую решить задачу использованием media queries. На различных интервалах разрешения буду задавать разный радиус скругления в пикселя. Или, если надо будет увеличивать шрифт на тех же интервалах, то в em`ах, чтобы прописать один раз.

Доброго времени суток, уважаемые форумчане. Имеется обычная прямоугольная кнопка, допустим div. Кнопка может менять ширину, но не высоту. Требуется скруглить ей углы, но задать значения в процентах. Пишу следующий код: div { ... width: 50%; height 80px; border-radius: 5%; ... }Радиус скругления по горизонтали получаю 5% от нефиксированной ширины кнопки, а по вертикали 5% от фиксированной высоты. Скругление получается овальное, а надо круглое, зависящее только от ширины. В описании свойства border-radius в справочнике по CSS сказанно: Как раз то, что мне нужно! Но, судя по всему, это не так. Получается, что: В случае применения процентов, отсчет горизонтального радиуса скругления ведется от ширины, а вертикального от высоты. Скажите, пожалуйста, в чем я мог ошибиться в понимании, и что мне стоит попробовать сделать, чтобы добиться желаемого результата? Возможно ли решить задачу средствами CSS?

Доброго времени суток, уважаемые форумчане. Имеется обычная прямоугольная кнопка, допустим div. Кнопка может менять ширину, но не высоту. Требуется скруглить ей углы, но задать значения в процентах. Пишу следующий код:

Да никак этого не сделать. Не может быть у вас через ксс/жабоскрипт доступа к такой информации. Как бы это вообще не ваше дело, что там в системе есть) Понятно, спс . Будет всем @font-face набор шрифтов

Упустил этот момент. Хм. Тогда нет ничего страшного в том, чтобы "устанавливать" шрифт для всех, раз уж он все-равно подгружен. Либо думать, как выцепить информацию о том, есть ли шрифт в системе или нет. Думаю, без разницы, как получить сгенерированный font face. Конфликт, который во второй части моего первого ссобщения все равно остается.

Доброго времени суток, уважаемые форумчане. Я столкнулся с проблемой типа "не могу решить на уровне логики". Подскажите, пожалуйста. Задача: На сайте имеются блоки, шрифт текста в которых курсивный Calibri. Подход к решению (часть 1): Во многих операционках нет такого шрифта. Выход очевиден - @font-face. Используя кроссбраузерный font-face генератор я получил необходимый для сайта шрифт. Имею: @font-face { font-family: 'SiteCalibriRegular'; src: url('../font/calibri-webfont.eot'); src: ... } Соответствено в нужном блоке: .my-calibri-block { font-family: 'SiteCalibriRegular'; }и с этим все хорошо. Дальше пробую делать курсив: .my-calibri-italic-block { font-family: 'SiteCalibriRegular'; font-style: italic; }Результат не очень. Шрифт как будто не знает, как наклонятся. По этому прорабатываю возможные варианты, подгружая генератору изначально правильный курсив. Получаю: @font-face { font-family: 'SiteCalibriRegular'; src: url('../font/calibri-webfont.eot'); src: ... } @font-face { font-family: 'SiteCalibriItalic'; src: url('../font/calibrii-webfont.eot'); src: ... } ...Тем самым добиваюсь "правильного" кроссбраузерного курсивного calibri. Подход к решению (часть 1): Далее хотелось бы сделать так, чтобы шрифт подгружался только тем пользователям, у которых его нет. Хочется написать что-то вроде: .my-calibri-italic-block { font-family: 'Calibri', 'SiteCalibriItalic'; font-style: italic; }или: .my-calibri-italic-block { font-family: 'Calibri', 'SiteCalibriItalic'; } Но не один из вариантов не подходит. В первом случае все хорошо у пользователей имеющих калибри, а у остальных "двойной наклон", во втором случае нет наклона у меющих шрифт. Подскажите, пожалуйста, как из этого можно вывернуться, чтобы всем было хорошо? Может можно как-нибудь создать стили используя @font-face для курсивного, жирного и т.д. используя calibri содержащийся в операционке?

Путем мыслительного эксперемента обнаружил уже серьезный косяк: из-за read-only пользователь не может изменить свое решение о загружаемости файла. Если файл выбран, то все, не стереть содержимое поля. А если убрать read-only, то мы открываем мнимое поля ввода, в который пользователь может попытаться прописать путь. Сформулирую в виде вопроса: Вопрос: как можно синхронизировать введенные значения в двух полях: <input type="file"> и <input type="text">, чтобы при изменениях в одном они отображались в другом + в обратную сторону? Подскажите, пожалуйста, где копать?

Известная проблема: подогнать под дизайн сайта поле загрузки файов: добавить бордюр, сделать внутренние отступы, сменить кнопку и т.д. Вот и я поимел первый опыт борьбы с ней. Хочу попросить покритиковать мое решение. Сразу скажу, что основано оно на идее перекрытия настоящего файл-инпута кнопкой и текстовым полем. Мне почти подошло решение предложенное здесь, за что автору большое спасибо, но пришлось немного допилить под себя. Моя задача: кнопка BROWSE выводится справа от текстового поля. Занимаюет ширину "по ширине текста в ней". Все оставшееся место уходит на текстовое поле имени файла. Подход к решению: делаем два div`а: в первый помещаем input type=text. Во второй input type=button и "под нее" загоняем input type=file. Загоняем при помощи абсолютного позиционирования и прозрачности. На div`ы вешаем разметку. Далее надо как-то связать настоящий, скрытый file-input и новое текстовое поле, ведь когда пользователь выбирает файл, то путь к этому файлу остается в скрытом поле. Автор изначальной статьи предлагает скрипт: onchange="javascript: document.getElementById('fileName').value = this.value" Вешаем его на настоящий, скрытый, файл инпут. Он находит наше текстовое поле и отдает ему имя файла из настоящего файл-инпута. К сожалению, только имя, а не полный путь, но этого, думаю, достаточно. Далее автор изначальной статьи предлагает к новому текстовому полю привязать аргумент: readonly="readonly" и оставить так. Можно, но по мойму это как-то сбивает с толку. При клике по текстовой области нетемезированного файл-инпута должно открывать окно обзора файлов, как при клике по кнопке. Предлагаю на этот случай скрипт: onclick="javascript: document.getElementById('realInput').click() привязываем его к ненастоящему, текстовому полю. Вроде все работает, но я не уверен. По этому и прошу покритиковать и может быть натолкнуть на путь "лечения" минусов: Результат: тут. Минусы: 1) После выбора файла видно только его название, а не весь путь. 2) Есть проблема с заданием ширины настоящего, скрытого файл-инпута. Хотелось бы задать ему ширину в 100%, чтобы он растянулся на весь родительский блок-кнопку. Но тогда получаем такую картину под кнопкой: Соответственно над текстовой областью настоящего инпута у нас тектовый курсор. И никакими cursor-свойствами CSS это не лечится. По этому убираем ширину в 100% и ставим какой-нить громадный шрифт. Получаем следующую картину: Мы видим только верхнюю часть кнопки над которой годный курсор arrow, но из-за такого выпендрежа ширина кнопки, как видно fire-bug`ом занимает черти сколько места. Боюсь, как бы это нигде не всплыло потом. 3) Я практически не знаком с JS, и не знаю, как обобщить используемые JS-вставки на случай с несколькими инпут-файлами на странице. Хотелосьбы отказаться от айдищников и поиска элементов по айдишнику в пользу this и селекторов типа: .c-file-input-button input[type=text] и .c-file-input-button input[type=file]. Если есть идеи, подскажите, пожалуйста! Скачь код странички Код: <style> .container { width: 500px; margin: 0 auto; padding: 20px; background: #eeeeee; } .c-file-input-button { float: right; margin: 0 0 0 1em; position: relative; overflow: hidden; } .c-file-input-button input[type="button"] { background-color: #33BB00; color: #FFFFFF; border-style: solid; } .c-file-input-button input[type="file"] { height: 100%; /* width: 100%; */ font-size: 200px; cursor: pointer; position: absolute; right: 0; top: 0; opacity: 0; filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -khtml-opacity: 0; -moz-opacity: 0; } .c-file-input-text { overflow: hidden; } .c-file-input-text input[type="text"] { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; border: 1px solid #e2e2e2; padding: 2px; } </style> <div class="container"> <div class="c-file-input"> <div class="c-file-input-button"> <input type="button" value="Any width uppload button"> <input type="file" id="realInput" class="file_input_hidden" onchange="javascript: document.getElementById('fileName').value = this.value" /> </div> <div class="c-file-input-text"> <input type="text" id="fileName" readonly="readonly" onclick="javascript: document.getElementById('realInput').click()"> </div> </div> </div>

Это совсем не то. Автору топика надо кликать на объект произвольной формы, а не рисовать его. Канвас тут ничем не поможет. Рекомендую изучить JS-библиотеку Raphael.js Вы правы. Спасибо. Очень сильно помогли. Думаю хоть это и самый сложный вариант, но тем не менее самый мощный

MaferoK, похоже на то, что нужно. *сосредоточился на чтении* Спасибо sigma77, вариант с мэпами тоже рассмотрю.

Да, точно! Мэпы. Тут все просто. Но для скругленных областей хотелось бы что-нибудь помощьнее .

Доброго времени суток, уважаемые форумчане. Впервые постю в форум на htmlbook. Заранее прошу прощенья, если что-то не так. Поправьте, исправлюсь. Ставлю себе задачу, научиться делать ссылки произвольной формы . Действительно произвольной. При этом хотелось бы уметь отслеживать наведение курсора на ссылку, делать ее активной и т.д. Начну, пожалуй, с треугольников, трапеций и т.д., но в итоге хочу вот такую: (кусок бублика : ) Проблема: не знаю, с чего начинать. Гуглится задача очень тяжело, ибо результаты это геометрия для школьников со словами "ссылка на учебник" . Решение на уровне логики: мне в голову приходят два решения. 1) JavaScript с запрограммированным алгоритмом выяснения принадлежности точки данной области, где в качестве точки выступает курсор, область - желаемая. Пора учить JavaScript? 2) В качестве ссылки использовать четкую картинку. Искать инструмент, который может распознать картинку и выделить область. Т.е. имея картинку нам как бы достаточно информации для понимая того, какую область надо сделать ссылкой. Прошу: направить в нужную область, поделиться ссылками на самоучители и т.д. Конечно, не откажусь от куска нужного кода