Как в css unlimited

CSS Unlimited levels in dropdown menu

The following tutorial shows you how to use CSS to do «CSS Unlimited levels in dropdown menu».

CSS Style

The CSS style to do «CSS Unlimited levels in dropdown menu» is

.nav ul < >.nav li ul < display:none; > .nav ul li a < display:block; > .nav li:hover>ul < display:block; >

HTML Body

body> ul >"nav"> li> a href="#">link1  li> a href="#">link2 ul> li> a href="#">link2.1 ul> li> a href="#">link2.1        

The following iframe shows the result. You can view the full source code and open it in another tab.

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js" > style id="compiled-css" type="text/css"> .nav ul !-- w w w . d e m o 2 s . c o m --> > .nav li ul < display: none; > .nav ul li a < display: block; > .nav li:hover>ul < display: block; >  body> ul >"nav"> li> a href="#">link1  li> a href="#">link2 ul> li> a href="#">link2.1 ul> li> a href="#">link2.1         

Related

• CSS creat an sub item on my dropdown menu
• CSS Uncentering a css dropdown menu
• CSS Underlined menu in CSS with dropdown
• CSS Unlimited levels in dropdown menu
• CSS Use div as a dropdown menu overlapping other contents
• CSS Use div as a dropdown menu overlapping other contents (Demo 2)
• CSS Use div as a dropdown menu overlapping other contents (Demo 3)

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник

7 единиц измерения CSS, о которых вы могли не знать

Jonathan Cutrell Last updated Oct 25, 2019

Легко ограничиться техниками CSS, которые нам хорошо знакомы. Но это ставит нас в невыгодное положение при появлении проблем, с которыми мы не сталкивались.

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

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

Сегодня я познакомлю вас с некоторыми CSS инструментами, о которых вы могли не слышать. Каждый из них является единицей измерения, такой как, например, пиксели или em, но о тех, что я хочу рассказать, вы могли даже и не слышать! Давайте начнем.

rem

Начнем с чего-то, что вам может показаться отдаленно знакомым. em всегда равен font-size . Так что если вы зададите размер шрифта элементу body, значение em каждого вложенного в body элемента будет пропорционально меняться.

font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px 

Вот, мы задали font-size контейнера div 1,2em . Это в 1.2 раза больше, чем любой заданный размер шрифтп, в этом случае 14px. Результат – 16.8px .

Но что случится, если вы вложите друг в друга контейнеры с размером шрифта, заданным в em? В следующем примере мы использовали тот же CSS код, что и в предыдущем. Каждый div контейнер наследует размер шрифта от своего родителя, тем самым каждый раз увеличая шрифт все сильнее и сильнее.

Когда в некоторых случаях это может быть необходимо, довольно часто хочется, чтобы значение, от которого отталкивается единица измерения, было одним. В такой ситуации подойдет rem . Буква «r» в rem означает root (корень); то есть размер шрифта задается относительно корневого элемента; в большинстве случаев это будет html элемент.

В каждом из трех вложенных элементов в прошлом примере, шрифт будет равен 16.8px .

Удобно в случае с сетками.

Rem удобно использовать не только для установки размера шрифта. Например, вы можете задать размер шрифта целой сетке используя rem , обращаясь к em в некоторых местах. Это даст вам более предсказуемое масштабирование.

width: 70rem; // 70 * 14px = 980px 

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

Могу ли я это использовать?

vh и vw

Адаптивный веб-дизайн полностью полагается на процентные соотношения. Но использование процентов CSS не всегда является лучшим решением. CSS ширина всегда относительна ближайшего родительского элемента. Но что если вы хотите использовать ширину или высоту viewport вместо таковых родительского элемента? Это как раз тот случай, когда стоит использовать vh и vw .

1vh равен 1/100 высоты viewport. Например, если высота браузера 900px , 1vh будет равен 9px. Таким же образом, если ширина равна 750px , то 1vw будет равен 7.5px .

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

Представьте, что вам необходимо сделать заголовок, который займет всю ширину экрана. Чтобы сделать это, следует задать размер шрифта в vw . Этот размер будет увеличиваться вместе с размером экрана.

Могу ли я это использовать?

vmin и vmax

В то время как vh и vm всегда относятся к высоте и ширине viewport, vmin и vmax относятся к минимальной и максимальной ширине или высоте viewport, в зависимотсти от того, какая из величин больше, а какая меньше. Например, если ширина окна браузера задана в 1100px, а высота в 700px, 1vmin будет равен 7px, а 1vmax 11px. Но, если ширина будет установлена в 800px, а высота в 1080px, то vmin будет равен 8px, а vmax – 10.8px .

Итак, как можно воспользоваться этими значениями?

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

Если вам нужен квадратный блок, который будет покрывать весь viewport (касаться четырех сторон экрана одновремнно), используйте те же правила, но с vmax .

Совмещая эти правила можно получить очень адаптивный и зачастую необычный способ для изменения размеров вашего viewport.

Могу ли я это использовать?

ex и ch

Единицы ex и ch , по аналогии с em и rem , соотносятся с текущим шрифтом и размером шрифта. Но, в отличие от em и rem , они также соотносятся c font-family .

ch или character является продвинутой единицей измерения ширины от нуля, 0 . Наиболее интересные обсуждения того, что это может значить, можно найти в блоге Эрика Мейерса. Вкратце, если мы возьмем моноширинный шрифт, контейнер с шириной из N букв, тогда, например, width: 40ch; всегда будет содержать выражение из 40 единиц этого конкретного шрифта. Когда стандартным использованием этого правила является пример шрифта Брайля, возможности творческого подхода существенно расширяют его функционал.

ex обозначается как «x-высота текущего шрифта ИЛИ половина 1em «. x-height выбранного шрифта называется высота буквы x нижнего регистра этого шрифта. Часто эта высота оказывается срединной точки всей высоты шрифта.

Для этой единицы измерения существует множество вариантов использования, большинство из них являются небольшими дополнениями к основной типографике. Например, элемент sup , который обозначает надстрочные символы, может быть приподнят относительно своей позиции, если ему задать position: relative и значение свойства bottom 1ex. Таким же образом вы можете опустить подстрочные буквы еще ниже. Стандартные настройки браузера использует свои правила vertical-align надстрочных и подстрочных символов. Но если вам нужна более тонкая настройка, вы можете сделать ее следующим образом:

Источник

Режимы смешивания в CSS: Цветовая теория и практическое применение.

Jonathan Cutrell Last updated Dec 7, 2015

Вы можете быть знакомы с «режимами смешивания», если вы пользуетесь Photoshop; они позволяют совмещать слои разными способами и с ними интересно экспериментировать. Режимы смешивания в CSS полностью не поддерживаются на данный момент, но они на пути к этому.

В этом туториале мы разберем, как работают режимы смешивания и рассмотрим разные способы применения этих режимов посредством CSS.

Основы смешивания

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

Что же «режим смешивания» значит на самом деле?

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

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

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

Займёмся вычислениями

Если у вас действительно амбициозны, посмотрите официальную документацию W3C FX Task Force, в которой объясняются математические операции для каждого режима смешивания (наложения). Там приводятся формулы, которые использутся при вычислении результатов наложения.

• Здесь, Cm — результирующий цвет после наложения.
• B обозначает функцию наложения.
• Cb обозначает цвет фона.
• И переменная Cs для источника цвета.

Все цвета описываются в пределах шкалы 0-1, которая преобразуется в шкалу rgb с диапазоном 0-255.

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

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

Типы Режимов Наложения Доступные в CSS

В СSS режимы наложения, поддерживаются, и существуют разные варианты. Первый тип режима наложения называется background-blend-mode . Это свойство позволяет вам смешать все фоны внутри одного элемента друг с другом.

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

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

Источник