Рецепты CSS

Рецепты CSS

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

Проблема

Вероятно, вы замечали, что любой квадратный элемент, для которого определено достаточно большое значение  border-radius , можно превратить в круг с помощью примерно такого CSS-кода:
background: #fb3;
width: 200px;
height: 200px;
border-radius: 100px; /* >= половины длины стороны */
Возможно, вы также замечали, что в подобной ситуации можно было бы указать любое значение радиуса больше  100px и все равно получить в результате круг. Причина объясняется в спецификации: Если сумма любых двух радиусов соседних рамок превышает размер поля рамки, пользовательские агенты должны пропорционально уменьшать используемые значениях всех радиусов рамки, чтобы наложения не происходило.
Однако часто бывает так, что указать точные значения ширины и высоты элемента невозможно, так как мы хотим, чтобы он подстраивался под свое содержимое, что может быть неизвестно наперед. Даже если мы проектируем статичный веб-сайт и его точное то содержимое определено заранее, не исключено, что в какой-то момент мы захотим модифицировать его или он будет отображаться с использованием резервного шрифта с другими метриками. В этом случае мы хотим, чтобы на выходе получался эллипс в ситуации, когда ширина и высота не равны между собой, и круг, когда они совпадают. Однако наш предыдущий код не способен обработать такой сценарий. Результирующая фигура для случая, когда ширина больше высоты, показана на рисунке. Можно
ли в принципе создавать эллипсы с помощью  border-radius , не говоря уже о том, чтобы делать их гибкими?

Проблема

Сделать вокруг изображения паспарту, состоящее из рамки и цветной области.

Решение

Паспарту называется картонная рамка для фотографии или рисунка. Использование паспарту зрительно увеличивает изображение, привлекает к нему внимание и делает картину более эффектной. Конечно, на веб-странице нет нужды имитировать подобную рамку, поэтому паспарту в данном случае будем называть цветную прямоугольную область вокруг изображения. На рисунке ниже  продемонстрирована фотография с паспарту.

Пример паспарту

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

Проблема

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

Как создать нечто подобное с помощью CSS? Возможно, у вас в голове сейчас звучит громкий крик: «border-image,  border-image, мы можем использовать  border-image , это больше не проблема!!!» Не так быстро, юный падаван. Вспомните, как на самом деле работает  border-image : по сути, это масштабирование девяти фрагментов. Вы разрезаете изображение на девять блоков и применяете их к углам и сторонам соответственно. Как с помощью  border-image нарезать изображение, чтобы воспроизвести пример с рисунка выше? Даже если мы потратим кучу времени и правильно разделим его для элемента конкретного размера с конкретной шириной рамки, оно не будет масштабироваться при изменении размера элемента. Проблема в том, что мы не собираемся всегда использовать в углах лишь определенные части изображения; то, какой фрагмент изображения будет отображаться в углу, зависит от размера элемента и ширины рамки. Попробуйте поэкспериментировать, и, скорее всего, вы поймете, что с  border-image это невозможно. Но что же тогда делать? Самый простой способ — использовать два элемента HTML: один, для которого фоном будет служить наша картинка с камнем, и второй — с белым фоном для области содержимого элемента:
HTML
<div class="something-meaningful"><div>
I have a nice stone art border,
don't I look pretty?
</div></div>
.something-meaningful {
background: url(stone-art.jpg);
background-size: cover;
padding: 1em;
}
.something-meaningful > div {
background: white;
padding: 1em;
}


Это решение хорошо работает и создает «рамку», показанную на рисунке, но требует наличия дополнительного элемента HTML. Таким образом, оно не оптимально: оно не только смешивает представление и структуру, но в определенных случаях изменить HTML-код  вообще невозможно. Существует ли способ реализовать то же самое с помощью одного элемента?

Проблема

Повторяющиеся геометрические узоры смотрятся мило, но бывают немного скучными. Вряд ли гдето в природе можно встретить узор, состоящий из идентичных повторяющихся плиток. Даже когда рисунок повторяется, он все равно содержит массу вариаций и случайностей. Взгляните на цветочное поле: хотя оно достаточно однородно, чтобы казаться нам красивым, все равно там присутствует достаточно бессистемности, чтобы вызывать интерес. Невозможно найти два абсолютно одинаковых цветка. Вот почему, когда мы пытаемся создавать фоновые узоры, выглядящие как можно более естественными, мы одновременно стараемся, чтобы «швов» между повторяющимися плитками было как можно меньше и они были как можно менее заметными, а это прямо противоречит нашему желанию сохранять небольшой размер файла.

 

Когда характерная черта — например, завиток в текстуре древесины — повторяется через равные интервалы, это сразу разрушает иллюзию природной случайности. Воспроизвести случайность — задача непростая, так как в CSS не предусмотрено никаких встроенных возможностей генерации случайных значений. Рассмотрим пример с полосами. Предположим, что мы хотим создать вертикальные полосы разных цветов и ширины (для простоты ограничимся четырьмя цветами) без каких-либо видимых «швов» между повторяющимися плитками. Первой мыслью может быть создание одного градиента со всеми четырьмя полосами, например, так:

background: linear-gradient(90deg, #fb3 15%, #655 0, #655 40%, #ab4 0, #ab4 65%, hsl(20, 40%, 90%) 0);
background-size: 80px 100%;


Как видно  повторения очевидны, так как шаблон воспроизводится каждые  80px (это значение  background-size ). Можно ли добиться чего-то лучшего?

 

Проблема

В предыдущем разделе мы узнали, как с помощью градиентов CSS создавать всевозможные полосы. Однако полосами фоновые узоры, да и любые другие геометрические рисунки, не ограничиваются. Часто у нас возникает необходимость создавать другие типы узоров: сетки, узор в горошек, шахматный узор и многие другие.
К счастью, градиенты CSS могут помочь и со многими из этих задач. С помощью градиентов CSS можно создать почти любой геометрический узор, хотя это и не всегда практично: если мы не будем соблюдать осторожность, то на руках у нас окажется безумный объем не поддающегося сопровождению кода. Создание узоров средствами CSS — это также одна из ситуаций, когда использование препроцессора CSS, например Sass оправданно. Это позволяет сократить количество повторений, так как чем сложнее становятся узоры, тем менее соответствует принципам DRY описывающий их 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

Нетология

TemplateMonster

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

Связной трэвел

Google+