Рецепты CSS

Рецепты CSS

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

Проблема

Полоски всех размеров, цветов и углов так же, если не больше, распространены в веб-дизайне, как и в любых других видах визуального дизайна, от журналов до обоев. Однако процесс реализации такого дизайна далек от идеала. Обычно мы создаем отдельное растровое изображение и каждый раз, когда возникает необходимость внести изменения, прибегаем к помощи графического редактора. Некоторые вместо этого используют файлы SVG, но это особый формат, синтаксис которого далек от дружественного. Правда, было бы здорово, если бы мы могли создавать полоски прямо в CSS? Вас это может удивить, но это возможно!

Как сделать  фон в полоску

 

Проблема

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

 

<div class="something-meaningful"><div>
I have a nice subtle inner rounding, don't I look pretty? </div> </div>
.something-meaningful { background: #655; padding: .8em; } .something-meaningful > div { background: tan; border-radius: .8em; padding: 1em; }

Это прекрасно работает, но нам приходится использовать два элемента, тогда как в действительности требуется только один. Можно ли достичь того же эффекта с одним элементом?

Проблема

Довольно часто у нас возникает необходимость позиционировать фоновое изображение со сдвигом относительно не верхнего левого угла, а какого-либо другого, например правого нижнего. В CSS 2.1 можно было либо задать сдвиг относительно верхнего левого угла, либо использовать ключевое слово для одного из остальных трех. Однако чаще всего мы все же хотим, чтобы между фоновым изображением и ближайшим углом оставалось немного пустого места (что-то вроде забивки), чтобы избежать эффекта, показанного на рисунке ниже.

Как позиционировать фрн на CSSbackground-position: bottom right;  обычно не обеспечивает приятного глазу результата, так как изображение вgлотную gрижимается к сторонам контеqнера

Для контейнеров фиксированного размера это возможно и средствами CSS 2.1, хотя решение получается не из простых: нужно подсчитать, каким должен быть сдвиг фонового изображения относительно верхнего левого угла, отталкиваясь от фиксированной длины и ширины контейнера и желаемого сдвига относительно правого нижнего угла. Однако для элементов переменного размера (вследствие того, что их содержимое может меняться) это невозможно. В итоге разработчикам приходилось задавать приблизительные значения,
например указывать местоположение фона процентным значением немного меньше 100%, скажем 95%. Определенно, в современном CSS долженнайтись способ получше!

Проблема

В стародавние времена, когда спецификация Backgrounds & Borders Level 3 была еще на стадии черновика, в рабочей группе CSS велось активное обсуждение вопроса, нужно ли разрешать использование сразу нескольких рамок — нескольких фоновых изображений. К сожалению, тогда все сошлись на том, что вариантов использования нескольких рамок слишком мало и разработчики всегда могут прибегнуть к помощи  border-image для достижения того же эффекта. Однако рабочая группа упустила из виду важность наличия возможности гибко настраивать рамки в CSS-коде, из-за чего разработчикам для имитации нескольких рамок пришлось прибегать к корявым трюкам вроде наложения друг на друга множества элементов. И все же существуют более удачные способы решения этой задачи, не приводящие к загрязнению кода бесполезными лишними элементами.

Здравствуйте! В этой серии уроков я бы хотел рассказать о тех моментах в CSS, которые то и дело возникают при создании сайтов. Каждый урок будет состоять из проблемы и решения и также ссылки где можно посмотерть готовый пример. И так начнем пожалуй с того как сделать полупрозрачную рамку у элемента на веб-странице.

 

Проблема

Вам, вероятно, достаточно часто приходилось возиться с инструментами создания полупрозрачных цветов в CSS, такими как  rgba() и  hsla() (о цветах в CSS можно почитать здесь). В 2009 году, когда мы, наконец, получили возможность использовать их в своем дизайне, они произвели настоящий фурор — и это несмотря на необходимость продумывать пути отхода, разнообразные «костыли» и даже уродливые поделки с фильтрами в IE для самых отважных. Однако их применение в промышленных условиях
ограничивалось в основном фонами.

Страница 5 из 5

Поиск по сайту

Google+