Стеклянное меню на css

Прозрачная горизонтальная панель меню CSS3

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

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

Вот как раз при проверке немного палитру поменял.

HTML для панели меню стекла

body <
background: linear-gradient(330deg, #751c1c 0%, #42b757 25%, #377ea7 50%, #7939c3 75%, #a93535 100%);
>

nav <
max-width: 1254px;
mask-image: linear-gradient(90deg, rgba(241, 233, 233, 0.01) 0%, #f5eded 25%, #fbf4f4 75%, rgba(241, 235, 235, 0) 100%);
margin: 0 auto;
padding: 75px 0;
>

nav ul <
text-align: center;
background: linear-gradient(90deg, rgba(245, 235, 235, 0) 0%, rgba(243, 235, 235, 0.2) 25%, rgba(239, 239, 239, 0.2) 75%, rgba(243, 242, 242, 0) 100%);
width: 100%;
box-shadow: 0 0 25px rgba(23, 22, 22, 0.15), inset 0 0 1px rgba(249, 245, 245, 0.63);
>

nav ul li <
display: inline-block;
>

nav ul li a <
padding: 19.8px;
font-family: «Roboto»;
color: rgba(8, 8, 8, 0.66);
text-shadow: 1px 1px 1px rgba(247, 241, 241, 0.53);
font-size: 25px;
text-decoration: none;
display: block;
>

nav ul li a:hover <
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.1);
color: rgba(0, 0, 0, 0.64);
>

h1#author <
position: fixed;
bottom: 49px;
text-align: center;
color: #363642;
width: 100%;
background: linear-gradient(90deg, rgba(247, 242, 242, 0) 0%, rgba(241, 234, 234, 0.2) 25%, rgba(247, 238, 238, 0.2) 75%, rgba(243, 238, 238, 0) 100%);
padding: 10px 0;
font-family: «Nixie One»;
text-stroke: 1px;
font-size: 29px;
text-shadow: 0 0 9px #8e8c8c;
font-family: «Roboto»
>
h1#author a <
color: #1b6ba0;
text-decoration: none;
>

Фон CSS — где выводит разные оттенке, что идет в самом начале.

body <
background: linear-gradient(330deg, #751c1c 0%, #42b757 25%, #377ea7 50%, #7939c3 75%, #a93535 100%);
>

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

Источник

Quick Glassmorphism UI CSS – Panels and Button

In this article, we will try to create Glassmorphism UI in quick and simple way. You will find CSS and HTML for panels and buttons as well as live demo of the UI with frosted glass effects aka Glassmorphism.

What is Glassmorphism?

Glassmorphism is a design style where UI are created with transparency and background blur to get a frosted-glass like effect. With Glassmorphism we try to create virtual glass like effect that allows UI elements to have a see-through effect while giving an appearance of depth or layers.

Here are the characteristics you need to keep in mind when creating a Glassmorphism UI element:

• Transparency to make the see through happen.
• Blur to create an effect of frosted glass.
• A background image for the parent to see through the element.
• Border (with transparency) to create an edge for the glass element. (Optional)

Glassmorphism Panel CSS

For creating panel with Glassmorphism effect, we will be using the following code:

Here transparency is achieved by using a background-color with alpha of 0.06. Blur has been achieved using backdrop-filter and border has also been added with alpha (transparency).

Glassmorphism Button CSS

For creating buttons with Glassmorphism effect, we will be using the following code:

.glass-button < display: inline-block; padding: 24px 32px; border: 0; text-decoration: none; border-radius: 15px; background-color: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(30px); color: rgba(255,255,255,0.8); font-size: 14px; letter-spacing: 2px; cursor: pointer; text-transform: uppercase; >.glass-button:hover

Here transparency is achieved by using a background-color with alpha of 0.1. Blur has been achieved using backdrop-filter and border has also been added with alpha (transparency). Additionally, a hover effect has been added which decreases the transparency and makes the button look active/selected.

Glassmorphism UI Demo

Find below the demo of the CSS code working in action:

If you are using RSS feed reader, or by any chance the embed above doesn’t appear then please visit this Pen on CodePen

Browser Support

Notice that we used backdrop-filter in our CSS code. At the time of writing this article here is the browser support of property backdrop-filter as per caniuse.

You will find that all major versions of Chrome, Safari, Edge and Opera support backdrop-filter property. However, on Firefox, you will need to enabled it by setting the layout.css.backdrop-filter.enabled and gfx.webrender.all preference to true in about:config . No IE support though.

Here is a guide on how you can enable backdrop-filter in Firefox.

Glassmorphism UI Resources

Find below resources and articles that will allow you to explore the trend of creating Glassmorphism UI.

Do you have more Glassmorphism related resources to add? Let us know in the comments below.

More Coding Demos

Here are few more coding demos we have available on our site.

Источник

Прозрачная панель навигации в CSS

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

Демо-пример приведен ниже

HTML-код прозрачной панели навигации

В тег nav мы поместим блок div с логотипом компании и список ul с ссылками, которые являются пунктами меню. Ниже идут две секции: первая — с фоновым изображением, а вторая с произвольным текстом — для демонстрации работы фиксированной панели навигации.

Обычно в своих проектах я использую Google Fonts, во первых они красивее и гарантированно отобразятся на компьютере пользователя. Для логотипа отлично подойдёт декоративный шрифт — Lobster, а для меню я выбрал менее броский — Roboto.

Вставляем код в самый вверх CSS файла.

По порядку начинаем писать стили, начав с общих — *, которые будут оказывать влияние на все элементы. Ставим нули у полей и отступов, прописываем цвет для ссылок, размер шрифта в процентах и задаем для box-sizing значение border-box. Это значит к заданной ширине и высоте любого блока не будут прибавляться размеры рамок и полей.

* color: #412c2c;
font-size: 100%;
box-sizing: border-box;
>

Высота и ширина для полноэкранной секции — section.sec1, равны высоте и ширине области просмотра. Изображение, без искажения пропорций, адпаптируется под разные размеры экранов, благодаря свойству cover.

width: 100%;
height: 100vh;
background-size: cover;

Мы сделаем панель навигации не только прозрачной, но и фиксированной position: fixed — при прокрутке странице, она всегда будет оставаться сверху экрана, благодаря нулевым top и left.

nav position: fixed;
top: 0;
left: 0;
width: 100%;
>

Высота панели задана 70px, а содержимое панели выравнено по центру с помощью line-height. В скобочках rgba задан белый цвет и параметр альфа-канала 0.3, что обозначает степень прозрачности.

height: 70px;
line-height: 70px;
background: rgba(255,255,255,0.3);
padding: 0 80px;

На скриншоте ниже мы видим, что список ul не находится внутри панели навигации и не расположен горизонтально.

Но сначала займёмся логотипом. Зададим обтекание слева.

Зададим покрупнее шрифт font-size: 160% и пропишем название шрифта — Lobster.

div.logo h2 font-size: 160%;
font-family: ‘Lobster’, cursive;
>

Как только мы напишем волшебное свойство display: flex и пункты меню li сразу примут горизонтальный вид. За выравнивание их по центру по вертикали отвечает свойство align-items: center. Но по вертикали нам не нужно выравнивать по центру, мы хотим разместить в конце главной оси — justify-content: flex-end.

nav ul display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
list-style: none;
>

Сейчас ссылки списков прижаты друг к другу, в нижнем регистре с дефолтным шрифтом.

Поскольку нам уже не надо выравнивать списки nav ul li a по нижней и верхней границами, то первым значением padding будет ноль. Второй значение 18px — это поля слева и справа от каждой ссылки в теге li. В итоге получается, что между ссылками в сумме будет расстояние 36px. Нас это устраивает.

Здесь идет чисто оформительский код. text-decoration — убирает подчеркивание ссылки, text-transforn — переводит буквы в верхний регистр, font-family — задаёт название шрифта.

text-decoration: none;
text-transform: uppercase;
font-family: ‘Roboto’, sans-serif;

Создано 29.06.2018 10:01:23

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Источник

Стеклянное меню на CSS3

Для него мне нужен был фон с некоторыми вариациями. Я взял цветной градиент, но вы можете применить какое-нибудь красивое изображение. В таком «стеклянном» меню однородный цвет фона не будет хорошо смотреться. Я воспользовался сбросом настроек CSS и prefix-free

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

HTML «стеклянного» меню

HTML нашей «стеклянной» панели будет очень похож на любое другое меню. Мы поместим тэг nav, содержащий список u с ссылками.

CSS «стеклянного» меню

CSS «стеклянного» меню реально прост, но при этом пользуется некоторыми классными свойствами CSS3!

mask — image : linear — gradient ( 90deg , rgba ( 255 , 255 , 255 , 0 ) 0 % , #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);

background : linear — gradient ( 90deg , rgba ( 255 , 255 , 255 , 0 ) 0 % , rgba ( 255 , 255 , 255 , 0.2 ) 25 % , rgba ( 255 , 255 , 255 , 0.2 ) 75 % , rgba ( 255 , 255 , 255 , 0 ) 100 % ) ;

Давайте немного подробнее рассмотрим код.

background : linear — gradient ( 90deg , rgba ( 255 , 255 , 255 , 0 ) 0 % , rgba ( 255 , 255 , 255 , 0.2 ) 25 % , rgba ( 255 , 255 , 255 , 0.2 ) 75 % , rgba ( 255 , 255 , 255 , 0 ) 100 % ) ;

Я назначил стили тэгу ul с помощью белого прозрачного фонового градиента. Также добавил два значения тени блока – одно для внешней, более темной тени, и второе – для внутреннего светлого края. К сожалению, тени блока не растворяются в фоне, как это делает градиент. К счастью, эту проблему можно решить, воспользовавшись свойством mask-image. Мы применяем его к родительскому элементу (в данном случае nav). Делаем так, чтобы к верху и низу можно было применить отступ. Если этого не сделать, наши тени будут обрезаны маской.

Источник