Полоски на CSS


Содержание материала:

Про CSS

CSS-паттерны

Возможности управления фонами через CSS в cочетании с градиентами дают совершенно невероятные возможности. Градиентами можно нарисовать почти всё что угодно от простых клеточек, полосочек и кружочков до достаточно сложных узоров. Играться можно до бесконечности.

Общий принцип такой: создается градиент, который нужно повторить. По умолчанию он займет всю доступную площадь, но если задать размер фону — получится картинка желаемого размера, которая замостит собой весь фон элемента. Если значения градиента задавать в процентах или em , потом можно будет легко управлять размером узора редактируя размер шрифта и/или background-size .

Например, можно сделать простые полоски:

See the Pen lcbAa by yoksel (@yoksel) on CodePen.

Белые полоски чередуются с прозрачностью, и могут быть положены на любой фон. Управляя границей между цветом и прозрачностью можно регулировать ширину полос.

Если вместо белого цвета задать полупрозрачный белый или черный, можно получить универсальный паттерн, который будет хорошо выглядеть на любом фоне:

See the Pen IeDAp by yoksel (@yoksel) on CodePen.

Используя два градиента с цветными полупрозрачными линиями можно сделать клетчатую скатерть:

С помощью разноцветных полосок можно делать небольшие декоративные элементы:

See the Pen zfcjm by yoksel (@yoksel) on CodePen.

Если нужен полосатый фон посложнее, имеет смысл обратить внимание на принцип цикады:

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

Фоны накладываются друг на друга от самого крупного (сверху) до самого мелкого (в самой глубине). В итоге стыки самого мелкого и повторяющегося будут перекрыты вышележащими слоями.

Я сделала 4 полосатых фона разного цвета и задала им разный размер:

Это простые числа, то есть те, которые не делятся ни на что кроме себя.

See the Pen khprw by yoksel (@yoksel) on CodePen.

Похоже на волшебство : )

Также из полосатых градиентов легко получить, например, тетрадный лист в линейку:

See the Pen jBobD by yoksel (@yoksel) on CodePen.

See the Pen zkImJ by yoksel (@yoksel) on CodePen.

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

repeating-linear-gradient должен бы помочь, но на практике градиент ведет себя как попало (порастягивайте окно браузера).

Попробуем сделать простыми полосками, повернутыми на 45°.

See the Pen uBdhC by yoksel (@yoksel) on CodePen.

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

Чтобы закрыть пробелы, добавим ещё один градиент:

Я сделала уголок ярким, чтобы было видно куда он попал:

Красим уголок в нужный цвет и получаем аккуратные косые линии:

Правда, пришлось немного подрегулировать точки остановки цветов в первом градиенте ( 50% → 49.9% ), но зато теперь стыков вообще не видно.

Если вместо угла указать направление ключевыми словами, например to left top , это позволит изменять угол градиента через изменение его размера, потому что в этом случае градиент будет всегда направлен из одного угла в другой независимо от background-size .

В последней строчке задан градиент прямоугольной формы. Благодаря направлению и значениям остановок в процентах можно сколько угодно менять его размеры — изменится угол наклона линий, но сам паттерн от этого не пострадает:

В некоторых случаях края линий становятся зубчатыми, причем их отрисовка зависит от браузера: Chrome справляется лучше, в Firefox видны ступеньки. Чтобы сделать край плавным, можно сделать стык между цветами не четкий, а размытый, шириной 1-2%. Также следует помнить о проблеме с прозрачными цветами в Firefox — это решается использованием нужного оттенка с полной прозрачностью.

Экспериментируя с линиями можно получить другие интересные узоры:

See the Pen Diamonds by yoksel (@yoksel) on CodePen.

See the Pen Corners by yoksel (@yoksel) on CodePen.

See the Pen Corners by yoksel (@yoksel) on CodePen.

See the Pen Corners by yoksel (@yoksel) on CodePen.

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

See the Pen Corners by yoksel (@yoksel) on CodePen.

Чтобы граница градиента была ровной, без зубчиков, границу прозрачности нужно делать чуть дальше, чем точка остановки цвета. Вебкиты, как обычно, лучше справляются со сглаживанием.

Принцип создания узоров тот же, что и для линейных градиентов. Причем сочетая линейные и радиальные градиенты можно получить из простых геометрических форм более сложные:

See the Pen Hearts by yoksel (@yoksel) on CodePen.

See the Pen Drops by yoksel (@yoksel) on CodePen.

Можно делать довольно сложные узоры, для этого лучше всего использовать возможности препроцессоров:

See the Pen Waves by yoksel (@yoksel) on CodePen.

See the Pen Circles by yoksel (@yoksel) on CodePen.

Минусы таких паттернов обычно в длине и сложности кода, а также в недостаточной поддержке старыми браузерами. Для них может потребоваться картинка. Плюсы — градиенты ничего не весят, их не надо запрашивать с сервера, и можно легко менять цвета и размер узора.

Больше паттернов можно увидеть во вдохновляющей галерее от Lea Verou: lea.verou.me/css3patterns/.

Урок по паттернам от Lea Verou: CSS3 Patterns, Explained

Полоски на CSS

Из этого урока вы узнаете, как «рисовать» (создавать) горизонтальные линии в html-странице; как задавать цвет, длину, ширину и ориентацию в «HTML пространстве». Саму линию обозначают тегом .

Для того, что бы понять как делать всё выше описанное напишем такой код:

А в этом коде длина линии будет задана в процентах – то есть, если вы сжимаете или увеличиваете окно браузера, то линия будет изменять длину в зависимости от заданного параметра (процентов).

Важно заметить, что длина линии может быть ориентирована относительно какого-то элемента, внутри которого она находится и этими элементами может быть – таблица ( ) и блок (

Топ-пост этого месяца:  PhpStorm или NetBeans какая IDE лучше, обзор преимуществ и недостатков

Как сделать линию подчеркивания под заголовком и задать ей длину?

Добрый день всем.
Во время верстки столкнулся с такой задачкой, есть текст а под ним линия подчеркивания. (картинка внизу)
Как задать ей длину?
На сколько я понял через border-bottom это невозможно, то есть нет тега где я в px могу задать конкретную длину. По логике, как я понимаю, я должен для линии задать отдельный div и этому div задать width, который мне нужен. А уже в этот div вставить border-bottom, так как он всегда автоматически растягивает по длине блока, в который он был вложена.
Верно ли я мыслю или есть проще вариант?
Спасибо.

Сложный заголовок с линиями по бокам текста на css

Иногда нужно сверстать заголовок, у которого слева и справа располагаются линии, которые занимают все оставшиеся пространство. Для такого случая у меня есть рецепт как сверстать сложный заголовок с линиями по бокам текста.

Мы будем использовать обычный тег div с классом .title и его псевдоэлементы :before и :after . В div напишем нужный текст заголовка, а псевдоэлементы будут линиями: :before линия слева, :after соответственно будет линией справа.

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

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

Проблема

Полоски всех размеров, цветов и углов так же, если не больше, распространены в веб-дизайне, как и в любых других видах визуального дизайна, от журналов до обоев. Однако процесс реализации такого дизайна далек от идеала.

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

Решение

Предположим, что у нас есть простейший вертикальный линейный градиент, от #fb3 до #58a:

background: linear-gradient(#fb3, #58a);

Теперь попробуем немного приблизить друг к другу границы перехода цвета

background: linear-gradient(#fb3 20%, #58a 80%);

Теперь верхние 20% нашего контейнера заполнены сплошным цветом #fb3 , а нижние 20% — сплошным цветом #58a . Настоящий градиент занимает только 60% высоты контейнера. Если мы еще сильнее сдвинем границы перехода цвета (40% и 60% соответственно, то высота градиента станет еще меньше. Возникает вопрос: а что произойдет, если границы перехода цвета встретятся на одном уровне?

background: linear-gradient(#fb3 50%, #58a 50%);

Если в одной и той же позиции определено несколько границ перехода цвета, то они образуют бесконечно малый переход от цвета, указанного в правиле первым, к цвету, указанному последним. Фактически в этой позиции вместо гладкого перетекания происходит просто резкая смена цвета.

Как вы видите никакого градиента больше нет, только два участка сплошного цвета, каждый из которых занимает по половине нашего back ground-image . По сути, мы создали две большие горизонтальные полосы. Так как градиенты — это всего лишь сгенерированные фоновые изображения, то с ними можно обходиться так же, как с любыми другими фоновыми изображениями, например, корректировать их размер с помощью background-size.

background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;

Мы уменьшили высоту наших двух полосок до 15px каждая. Так как наш фон повторяется, теперь весь контейнер заполнен горизонтальными полосами.

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

background: linear-gradient(#fb3 30%, #58a 30%);
background-size: 100% 30px;

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

Это означает, что если для второго цвета мы зададим позицию на уровне 0 , то браузер скорректирует ее, увеличив до позиции предыдущей границы перехода цвета, — как раз то, что нам требуется. Следовательно, следующий фрагмент кода создает точно такой же градиент, который мы уже видели, и при этом лучше соответствует принципам DRY:

background: linear-gradient(#fb3 30%, #58a 0);
background-size: 100% 30px;

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

background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);
background-size: 100% 45px;

Вертикальные полосы

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

Код, создающий вертикальные полосы, очень похож на предыдущий. Главное отличие — дополнительный первый аргумент, указывающий направление градиента. Мы могли бы указать его и при определении горизонтальных полос, но тогда нам было бы достаточно значения по умолчанию ( to bottom ). Помимо этого, в данном случае нам, очевидно, необходимо указать другие значения background-size :

background: linear-gradient(to right, /* или 90deg */ #fb3 50%, #58a 0);
background-size: 30px 100%;

Наши вертикальные полосы. Вверху: заполнение вертикальными полосами без повторения. Внизу: повторяющиеся полосы

Диагональные полосы

После горизонтальных и вертикальных полос кажется логичным попытаться создать диагональные полосы (с углом наклона 45°), еще раз изменив значение background-size и направление градиента, например, так:

background: linear-gradient(45deg, #fb3 50%, #58a 0);
background-size: 30px 30px;

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

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

background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;

Наши полосы под углом 45°; пунктирными линиями обозначена повторяющаяся плитка рисунка

Как вы видите, нам удалось создать диагональные полосы, но они кажутся тоньше, чем горизонтальные и вертикальные из предыдущих примеров. Для того чтобы понять, почему так произошло, нам необходимо снова вспомнить теорему Пифагора из школьного курса, которая позволяет вычислять длины сторон прямоугольных треугольников. Согласно теореме, длина гипотенузы (самой длинной, диагональной стороны треугольника) равна

где a и b — длины катетов. Для равностороннего прямоугольного треугольника с углами 45° формула принимает вид
В случае с нашими диагональными полосами размер фона определяет длину гипотенузы, но ширина полосы в действительности равна длине катета. Схема, объясняющая эти расчеты, показана на рисунке.

Топ-пост этого месяца:  Vue JS Watch создание текстовых полей и использование свойства для их обновления

Это означает, что для того, чтобы получить полосы шириной 15px , как в предыдущих примерах, в качестве размера фона необходимо указать значение
пиксела:

background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
background-size: 42.426406871px 42.426406871px;

Но если только на вас не наставили дуло пистолета и не заставляют под страхом смерти создавать диагональные полосы шириной ровно 15 пикселов (кстати,гибель все равно неизбежна, потому что 2 — нерациональное число, так что даже указанное нами значение приблизительное, хотя и с высокой степенью точности), я настоятельно рекомендую округлять это тяжеловесное число до чего-нибудь вроде 42.4px или даже 42px .

Готовые полосы под наклоном 45°; обратите внимание, что ширина полос такая же, как в предыдущих примерах

Еще лучшие диагональные полосы

Метод, продемонстрированный в предыдущем разделе, не обеспечивает особой гибкости. А что, если мы захотим создать полосы под углом 60°, а не 45°? Или 30°? Или 3,1415926535°? Если мы попытаемся изменить угол градиента, результат будет просто ужасным.

К счастью, существует гораздо лучший способ рисования диагональных полос. Этот факт не слишком известен, но linear-gradient() и radial-gradient() также предлагают версии с повторением: repeating-linear-gradient() и repeating-radial-gradient(). Они работают совершенно так же, с одним только отличием: границы перехода цвета повторяются бесконечно, пока не заполнят все изображение. Так, например, следующий повторяющийся градиент:

background: repeating-linear-gradient(45deg, #fb3, #58a 30px);
эквивалентен этому простому линейному градиенту:
background: linear-gradient(45deg, #fb3, #58a 30px, #fb3 30px, #58a 60px, #fb3 60px, #58a 90px, #fb3 90px, #58a 120px, #fb3 120px, #58a 150px, …);
Повторяющиеся линейные градиенты идеальны для — вы уже догадались — полос! Благодаря их повторяющейся природе мы можем создавать цельные фоны из сгенерированных градиентных изображений. Это означает, что нам больше не нужно беспокоиться о рисовании бесшовно стыкующихся плиток, которые затем нужно уложить для формирования фона элемента. Для сравнения: фоновое изображение на рис. 2.33 можно было бы создать с помощью такого повторяющегося градиента:

background: repeating-linear-gradient(45deg, #fb3, #fb3 15px, #58a 0, #58a 30px);

Первое очевидное преимущество — уменьшение количества повторений: для того чтобы изменить любой из цветов, нам нужно внести только две правки вместо трех. Также обратите внимание, что теперь размеры определяются в терминах границ перехода цвета градиента, а не background-size . Размер фона используется первоначальный; для градиента это размер элемента. Это означает, что длины также становятся более понятными, так как измеряются они по градиентной линии, которая перпендикулярна нашим полосам.
Однако самое больше преимущество состоит в том, что теперь мы можем задать абсолютно любой угол, и градиент будет работать — не нужно больше размышлять над проработкой плиток с бесшовным соединением. Например, вот как определяются полосы под углом 60°:
background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);

Настоящие полосы под углом 60°.

Потребовалось всего лишь изменить угол! Обратите внимание, что с этим методом нам требуются четыре границы перехода цвета для двух цветных полос, независимо от угла наклона полос. Это означает, что для создания горизонтальных и вертикальных полос лучше все же использовать первый метод, а к этому прибегать для определения диагональных полос. Если же мы имеем дело с полосами под углом 45°, то эти два метода можно даже объединить, по сути, воспользовавшись повторяющимися линейными градиентами для упрощения кода, который создает нашу повторяющуюся плитку:

background: repeating-linear-gradient(45deg, #fb3 0, #fb3 25%, #58a 0, #58a 50%);
background-size: 42.426406871px 42.426406871px;

Гибкие нежные полосы

Чаще всего нам требуется, чтобы полосы были не совершенно разных цветов, а представляли собой мягкие вариации яркости одного и того же цвета. Например, взгляните на такие полосы:

background: repeating-linear-gradient(30deg, #79b, #79b 15px, #58a 0, #58a 30px);

Как видно, мы создали чередующиеся полосы цвета #58a и одного из более светлых его вариантов. Однако взаимоотношение между этими цветами не очевидно, если просто прочитать код. Более того, если бы нам потребовалось
изменить базовый цвет, то это повлекло бы за собой четыре (!) правки.

БУДУЩЕЕ. ГРАНИЦЫ ПЕРЕХОДА ЦВЕТА С ДВУМЯ ПОЗИЦИЯМИ
Скоро у нас появится возможность указывать две позиции для одной и той же границы перехода цвета и это одно из базовых запланированных дополнений в CSS Image Values Level 4 Это задумано как сокращение, позволяющее задать две последовательные границы перехода цвета с одним и тем же цветом, но разными позициями и очень востребованная функциональность при создании градиентных узоров. Например, код для диагональных полос выглядел бы так:

background: repeating-linear-gradient(60deg, #fb3 0 15px, #58a 0 30px);

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

background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1) 15px,
transparent 0, transparent 30px);

Результат выглядит точно такой же, но теперь для изменения цвета нам требуется внести правку только в одном месте. Также мы получаем дополнительное преимущество в том смысле, что наш базовый цвет будет служить резервным цветом в браузерах, не поддерживающих градиенты CSS. Помимо этого, как мы узнаем из следующего секрета, накладывая друг на друга градиентные узоры с полупрозрачными областями, можно создавать очень сложные рисунки.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Делаем индикатор прогресса с использованием только CSS

В данном уроке мы сделаем индикатор прогресса с использованием только CSS3, никаких изображений. Несмотря на это, дизайн индикатора будет вполне приличный.

Впечатление немного портит Opera 11, которая поддерживает CSS3, но не полностью.

Браузеры, которые совсем не поддерживают CSS3, будут выводить индикатор прогресса, но вид его будет совсем уж простым.

Полоска будет представлена элементом

Начало CSS

А внутренний элемент будет являться полоской заполнения индикатора прогресса. Мы будем выводить его как блочный элемент со значением высоты 100%, так что он будет растягиваться на все доступное пространство. Также используется набор правил CSS3 для задания градиента и скругления углов.

Другие цвета

Сделаем так, чтобы менять цвета было просто. Добавим класс «orange» или «red» к контейнеру и изменим его цвет.

Диагональные полоски

Мы можем получить прелестный эффект с помощью добавления элемента поверх нашего элемента . В добавленном элементе будет использоваться повторяющийся градиент CSS3. Семантически для достижения результата лучше всего использовать псевдо элемент. Мы будем использовать абсолютное позиционирование над областью элемента (который позиционируется относительно) и зададим для него скругленные углы.

Топ-пост этого месяца:  Как установить в CSS множественный фон для элементов используем несколько изображений

Анимируем диагональные полоски

Только Firefox 4 может анимировать псевдо элементы, а только браузеры WebKit могут выполнять анимации с ключевым кадром. Поэтому, к сожалению, придется добавить дополнительный элемент , который будет анимироваться в браузерах WebKit.

Элемент будет такой же, как и псевдо элемент. Поэтому мы можем использовать те же значения.

. только исключим дублирование:

Мы будем перемещать фон и изменять его размер:

И вызываем анимацию:

Анимируем заполнение индикатора

К сожалению, мы не сможем анимировать естественным образом процесс изменения ширину от 0 до установленного во встроенном стиле значения.

Такой формат еще не поддерживается нигде. Поэтому придется использовать jQuery. Измеряем оригинальную ширину, изменяем ее на 0, а затем анимируем процесс восстановления до оригинального значения:

А как же HTML5?

HTML5 имеет специальную опцию для таких задач:

и ! Да, но есть некоторые шероховатости. Данные элементы имеют весьма специфический вид. По умолчанию они выглядят как индикатор прогресса на Mac:

Вы может отключить стиль по умолчанию:

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

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

Так что на текущий момент решение с парой div/span является очень хорошим вариантом.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: css-tricks.com/css3-progress-bars/
Перевел: Сергей Фастунов
Урок создан: 10 Марта 2011
Просмотров: 26275
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Полоски на CSS

Из этого урока вы узнаете, как «рисовать» (создавать) горизонтальные линии в html-странице; как задавать цвет, длину, ширину и ориентацию в «HTML пространстве». Саму линию обозначают тегом .

Для того, что бы понять как делать всё выше описанное напишем такой код:

А в этом коде длина линии будет задана в процентах – то есть, если вы сжимаете или увеличиваете окно браузера, то линия будет изменять длину в зависимости от заданного параметра (процентов).

Важно заметить, что длина линии может быть ориентирована относительно какого-то элемента, внутри которого она находится и этими элементами может быть – таблица ( ) и блок (

CSS → Линии с помощью linear-gradient

Благодаря тому, что градиент это фоновое изображение, ему (градиенту) можно задавать такие параметры как — размер, повторяемость и позицию. Таким образом для вывода линии достаточно создать одноцветный градиент нужного размера.

Пример подчёркнуто текста:

Пример двойного подчёркивания:

Пример dotted подчёркивания:

Пример диагональной линии:

Комментарии

смысл в том, чтобы не использоваться лишних элементов 🙂
ну и у box-shadow заметно меньше возможностей

Для полосочек его за глаза хватает 🙂
Про лишние элементы не понял.

Пост о линиях а не о полосочках. Попробуй сделать зачёркнутый текст на box-shadow с любой неоднородной картинкой в фоне.

Если есть доступ к html коду и возможность плодить теги, то никакого смысла в box-shadow как и в linear-gradient нет, любые линии выводятся дивом с бэкграундом.

Линии с прозрачностью тенью не сделать, факт. Но и редко надо.

Оставить комментарий

Разделы

  • Drupal (758)
    • Drupal 8
    • Новости
    • Модули
    • Темизация
    • Видео уроки
    • Полезняшки
    • Подводные камни
    • Views
    • Commerce
  • Javascript (31)
    • Drupal 8
    • Новости
    • Модули
    • Темизация
    • Видео уроки
    • Полезняшки
    • Подводные камни
    • Views
    • Commerce
  • PHP (25)
    • Drupal 8
    • Новости
    • Модули
    • Темизация
    • Видео уроки
    • Полезняшки
    • Подводные камни
    • Views
    • Commerce
  • CSS (25)
    • Drupal 8
    • Новости
    • Модули
    • Темизация
    • Видео уроки
    • Полезняшки
    • Подводные камни
    • Views
    • Commerce
  • MySQL (6)
    • Drupal 8
    • Новости
    • Модули
    • Темизация
    • Видео уроки
    • Полезняшки
    • Подводные камни
    • Views
    • Commerce
  • Разное (56)
    • Drupal 8
    • Новости
    • Модули
    • Темизация
    • Видео уроки
    • Полезняшки
    • Подводные камни
    • Views
    • Commerce

Навигация

Последние записи

Последние комментарии

Гость, сегодня в 14:37

Здравствуйте. Я использую парсер для создания товаров в Drupal Commer →

Павел, 04.11.2020

Доброго времени суток! Подскажите как сделать так чтобы всплывающие ( →

Сергей, 21.10.2020

Сам спросил, сам отвечаю. Может кому пригодится. Помог модуль image_u →

Сергей, 21.10.2020

Всем привет! Добавлю от себя как один из пунктов инструкции — в нас →

Гость, 17.10.2020

Импортировал ноды. Через поле термина у меня создались новые термины, →

27 оригинальных разделительных линий на сайт

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

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

Издавна в верстке сайтов использовался для этих целей специальный тэг hr. Правда, по-умолчанию он выглядит не самым лучшим образом, какой-то серенькой невзрачной линией да еще и с невнятным эффектом объема (см. примеры на первой картинке).

Мало того, каждый браузер по-своему отображает такую линию, что не есть гуд.

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

Сегодня мы рассмотрим оба варианта добавления разделительной линии на сайт. Сначала рассмотрим варианты с картинками.

Как вы понимаете, картинок может существовать бесчисленное множество. Я выбрал наиболее интересные и эффектные.
Поехали!

Полоски на CSS

С помощью CSS можно создать интересные текстуры без использования графики с помощью свойства linear-gradient. Если лет 10 назад нужно было рисовать картинку и делать ее фоном, то теперь намного проще.

Полосатый фон с помощью CSS:

Фон в полоску с помощью CSS

  • 14 февраля 2020, Alexey
  • HTML, CSS, JS
  • Комментарии: (0)

Комментариев нет »

No comments yet.

Leave a comment

Последние записи

Популярное за месяц

Новое на сайте

Популярное за 24 часа

Растянуть на полный экран фоновое изображение с помощью CSS

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

Добавить комментарий