Velidan
-
Posts
28 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by Velidan
-
-
Доброго дня уважаемые коллеги, подскажите пожалуйста, как можно сделать такую вот скругленную белую тень вверху блока вот здесь ( http://prntscr.com/8tow41 )
Пробую сделать вот так: https://jsfiddle.net/z53k01w9/1/
Вот только не получается как на рисунке - округлить её хорошо внизу. Помогите пожалуйста. Заранее спасибо.
-
Интересный трюк, возьму на заметку. Спасибо большое.
П.С. интересовал именно такой вариант, так как хотелось знать, что можно сделать конкретно в таком случае.
-
Доброго дня уважаемые коллеги, подскажите пожалуйста, можно ли как-то отменить смещение текста при переносе строки под маркер списка при позиции inside?
(Можно только при позиции inside). буду благодарен за любую помощь.
-
Доброго дня уважаемые коллеги. Подскажите пожалуйста, корректно ли я пользуюсь свойством flex-grow для того, чтоб элемент занял все доступное пространство?
Пример: https://jsfiddle.net/uvbc8wtc/
П.С. Только, пожалуйста, не надо цитировать справочник. Прекрасно знаю, что это свойство "Определяет жадность отдельного элемента относительно других" и т.д.
Интересует или может можно как-то по другому автоматически заполнить все доступное пространство и вообще правильно ли я делаю все таким образом.
Заранее спасибо за любую помощь.
-
П.С. забыл упомянуть, что хочется без использования псевдо-элементов и отдельных градиентов для них.
wwt Это очень здорово, спасибо огромное за помощь.А можно как-то обойтись градиентами только для одного элемента? Пробовал наложить 4 градиента, один основной, белый над ним и 2 по сторонам с углом 45% (чтобы перекрывали белый верхний градиент и делал скругленные уголки). Но как-то очень топорно получается.
Во общем, чтобы не утруждать никого, спасибо за ответ.
Ответ дан, он замечателен, работает и все отлично. А с градиентами я уже сам поиграюсь.
Но я уверен, что можно обойтись без псевдо.
-
Доброго дня уважаемые коллеги. Подскажите пожалуйста, можно ли сделать с помощью градиентов вот такой эффект тиснения?
http://savepic.net/7196577.htm
Обычный градиент я знаю как делать, использовать несколько градиентов также умею. Но здесь как-то оно на искоса идет у уголков, даже не знаю что делать. Вырезать картинку и так пихать также не очень хочется.
Буду благодарен за любую помощь.
-
Понял, спасибо огромное.
(Про консоль разработчика, что-то не подумал, извините).
-
Доброго дня уважаемые коллеги. Помогите, пожалуйста, разобраться в таком вопросе:
Если у нас есть img и в нем src к картинке. Браузер шлет запрос к картинке, а если у меня эта картинка выводится через background: url('/img.png') в стилях. Будет ли к ней также запрос или все откомпилится при единственном запросе браузера к стилям?
Т.е. дает ли преимущество в запросах к серверу отображения картинок в стилях через фон, а не через img?
Заранее спасибо.
-
Очень грамотно объяснили. Не знал нюансов с тенью. Очень благодарен.
-
Прошу прощения, изначально посмотрел на
ЗЫ ещё забавная вещь https://jsfiddle.net/e1o5kgk8/3/Там увидел, что тень смещена стабильно на 100px вверх.
А вообще это именно то что нужно. Только очень странно что тень скрывается под скроллбаром, а граница нет. Не знал, спасибо огромное.
-
Спасибо за ответ. Да, это нормальный вариант, если точно знать ширину скроллбара) а он в разных ОС по разному.
Единственный вариант, в таком случае, это скрывать системный скроллбар и делать свой. Тогда точно будем знать вычитаемую высоту.
Только жаль, что на чистом css такие проблемы возникают с элементарными вопросами.
-
Спасибо за помощь, но здесь минусы из-за которых вариант также не подходит: есть hr (которая играет роль границы). Она вообще внизу стоит, вне пределов контейнера + явно указана высота. (Высота таблицы динамически меняется, по этому такой вариант не подходит).
Подобное решение худо-бедно подходит к вертикальному скролу (да и то, если точно знать нужные размеры), а вот для горизонтального - к сожалению, нет.
-
Спасибо за ответ. Но, при прокрутке граница также прокручивается. (Это также как создать обертку для внутреннего контента и назначить ей рамку. Она - то будет по высоте как надо, но будет прокручиваться при прокрутке).
Можно ли так сделать, чтобы она была прижата справа и не двигалась (К сожалению fixed не работает с relative, а было бы намного удобнее работать).
Update https://jsfiddle.net/e1o5kgk8/2/ (вернул к изначальному состоянию)
-
Доброго дня уважаемые коллеги. Подскажите, пожалуйста, как можно сделать так, чтобы у блока, который имеет горизонтальную прокрутку, боковая граница не тянулась на высоту скролбара.
П.С. вариант с тем, чтобы внутри поставить обертку, назначить ей границу (таки образом, наша граница не будет выходить за грани видимого блока к концу скроллбара) не очень хорош, потому что при прокрутке граница будет двигаться также с прокручиваемым контентом.
В общем вкратце. Как можно сделать так, чтобы border-right: 1px solid black; блока с горизонт прокруткой не вылезала на скроллбар, а ограничивалась высотой самого блока?
https://jsfiddle.net/e1o5kgk8/
Буду благодарен за любую помощь. -
Да, именно это я и хотел сделать.
Очень жаль, хотелось средствами css это провернуть. Ведь если все по y - тогда по полной ширине текст прекрасно заполняется и тянется в высоту сколько ему нужно.
Очень жаль, что по оси x так не получается. Как-то странно выходит. Почему бы не сделать и для горизонтали такую возможность.
Алёна Стрелкова Спасибо за помощь, но это не совсем то что мне нужно, указанные вами свойства влияют на позиционирование дочерних элементов/контента внутри flex-контейнера. Но не влияют на заполненность текста при горизонтальном скроле без явно заданной ширины.
-
Хорошо, я это понимаю. Спасибо. Только я спрашивал, а как можно сделать так, чтобы контент заполнял всю допустимую высоту и при этом тянулся в ширину без её явного указания в явных величинах?
-
Доброго дня уважаемое сообщество. Столкнулся с неприятным нюансом и очень нужна помощь.
https://jsfiddle.net/96o200ds/2/
Для горизонтальной прокрутки у меня блок .overview имеет white-space: nowrap; (Потому что если не поставить так, тогда горизонтальная прокрутка не появится, а контент будет идти себе по высоте вниз).
Выставить четкую ширину (например: 2000px ) я не могу, так как ширина контента динамическая.
Проблема в том, что контент не хочет выстраиваться на всю высоту и идти себе по ширине дальше, за границы видимого блока, а выстраивается в одну строчку.
Можно ли сделать так, чтобы контент заполнял всю высоту и дальше выстраивался себе в ширину?
П.С. Можно, конечно, на js при загрузке страницы вычислить ширину контента и назначить такую, но хотелось бы на css все сделать.
Буду благодарен за любую помощь.
-
Вопрос решил с помощью js.
Жаль, что на обычном CSS невозможно такое. Еще есть куда расти
-
Дорбого дня уважаемые коллеги. Столкнулся с очень интересным вопросом.
Есть врапер - с pos: relative, внутри него список (pos: absolute) и в LI находится еще один выпадающий список (pos: absolute). Он находится ровно справа левого блока. За врапером.
Внутри него также есть LI с контентом. У него задана min-width и height.
Демонстрация:
https://jsfiddle.net/ox7cvj32/1/
Хочу, чтобы при достижении такого количества контента, которое превышает высоту данного списка, его ширина увеличивалась и контент просто шел другой колонкой. Есть вариант сделать: column-count и его производными, но нужно сразу указать количество столбцов. Мне же нужно, чтобы было динамически.
Нет контента - ширина такая-то и одна колонка, контента много и он больше высоты блока - ширина увеличилась и контент разместился в другой колонке.
Буду очень благодарен за любую помощь.
Заранее спасибо.
-
Здорово. Снимаю шляпу. Спасибо вам большое.
Также думал о том, что придется совместить несколько градиентов, только не знал как именно.
П.С. А почему вы использовали background-image, а не background ?
-
Доброго дня уважаемые коллеги. Столкнулся с одним очень неприятным нюансом, а именно , не могу придумать, как можно сделать радиальный градиент "уходящим в прозрачность". Чтобы не быть голословным вот демонстрация, как хочется сделать:
http://savepic.net/6942734m.png
А вот, что у меня на данный момент, получилось
http://savepic.net/6943758m.png
Код простенький:Код CSS1 background: #0A85CC radial-gradient(51% 255% at 100% 0%, #2f97d4 97%, transparent) no-repeat;Единственный нюанс, это то, что не могу никак сделать его плавно уходящим в прозрачность. Пробовал сделать линейным (там все здорово, но беда в том, что не получается линейный градиент округлить
Помогите, пожалуйста, буду очень признателен. Заранее спасибо. -
Спасибо за ответы.
amalia - Не совсем то, что нужно так как мне нужны только прозрачные края, а таким методом только со всем рисунком придется работать ( . Было бы здорово, если бы можно было указывать координаты прозрачности=) -
Подойдет абсолютно любой вариант лишь бы работало. На старые браузеры вниманию не обращаю. У вас есть какие-то идеи?
П.С. вариант с наложением градиента данному тегу с изображением уже пробовал, не работает.
-
Доброго дня уважаемое сообщество. Подскажите пожалуйста, как можно сделать так, чтобы у картинки в теге img (именно в img) была боковая прозрачность с обеих сторон? (вариант с блоком поверху и его прозрачностью не подходит ибо нужно, чтобы фон просвечивался). Можно ли вообще такое сделать? Заранее спасибо за любую помощь.
ссылка на изображение, размер: 466 кбайт, 1011 x 360 точек
Эффект тиснения
in HTML Coding
Posted
Подскажите пожалуйста.