Обзор основных CSS3 свойств Меню аккордеон на CSS3 вертикальное
Меню аккордеон на CSS3 вертикальное и обзор основных CSS3 свойствПредставляю вашему вниманию CSS3 аккордеон меню вертикальное. Это скорее не меню а маленькая демонстрация новых возможностей CSS3 которые я вложил (скорее - напихал :)) в это вертикальное меню аккордеон. Хочу сразу предупредить - не все CSS3 свойства поддерживаются всеми браузерами. Демонстрационную страницу лучше смотреть браузером Google Chrome последней версии, так же эти свойства поддерживают Safari и Opera последних версий, а также Mozilla Firefox начиная с версии 3.7.
В это CSS3 аккордеон меню вошли свойства:
box-shadow - тень
text-shadow - тень текста
transform - трансформация (перемещение, вращение и изменение размеров)
transition - это простейшая CSS3 анимация/переход, которую можно применить к любому свойству CSS
rgba в CSS3 - цвет + прозрачность одним свойством
border-radius - скругление углов
opacity - прозрачность
gradient - плавные переходы из одного цвета в другой
Теперь чуть конкретнее:
Свойство border-radius - устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.
Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел. Также допустимо писать два значения через слэш (/). В случае задания двух параметров через слэш, то первый задает радиус по горизонтали, а второй по вертикали (эллиптические уголки). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.
Зависимость от числа значений:
1 Радиус указывается для всех четырех уголков.
2 Первое значение задает радиус верхнего левого и нижнего правого уголка, второе значение — верхнего правого и нижнего левого уголка.
3 Первое значение задает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка.
4 По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка.
Пример написания кода:
border:2px solid #999; /* Размер вид и цвет рамки */
border-radius:15px 0 15px 0; /* Валидное свойство CSS 3 скругление углов, значение(цифра) задаёт радиус скругления*/
-moz-border-radius:15px 0 15px 0; /* Firefox */
-webkit-border-radius:15px 0 15px 0; /* Safari, Chrome */
-khtml-border-radius:15px 0 15px 0; /* Konqueror */
border-radius:15px 0 15px 0; /* Валидное свойство CSS 3 скругление углов, значение(цифра) задаёт радиус скругления*/
-moz-border-radius:15px 0 15px 0; /* Firefox */
-webkit-border-radius:15px 0 15px 0; /* Safari, Chrome */
-khtml-border-radius:15px 0 15px 0; /* Konqueror */
Свойство box-shadow - добавляет тень к элементу. Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство border-radius, то тень также получится с закругленными уголками. Добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере.
*Первое значение(цифра) задает смещение тени по оси X (горизонтали). Может задаваться в любых допустимых единицах измерения CSS Положительное значение задает смещение вправо, отрицательное – смещение влево;
* Второе значение(цифра) задает смещение по оси Y (вертикали). Положительное значение соответствует смещению вниз, отрицательное – вверх;
* Третье значение(цифра) определяет радиус размытия. Отрицательные значения недопустимы;
* Четвертое значение(цифра) – радиус растяжения тени. Положительные значения растягивают тень во всех направлениях, отрицательные сужают;
* color – базовый цвет тени;
* rgba - rgb цвет тени + прозрачность
* Если указано ключевое слово inset, тень будет направлена внутрь элемента
Пример написания кода:
box-shadow: 0 0 10px 2px rgba(0,0,0,0.8); /* Валидное свойство CSS 3 тень*/
-webkit-box-shadow: 0 0 10px 2px rgba(0,0,0,0.8); /* Safari, Chrome */
-moz-box-shadow: 0 0 10px 2px rgba(0,0,0,0.8); /* Firefox */
-webkit-box-shadow: 0 0 10px 2px rgba(0,0,0,0.8); /* Safari, Chrome */
-moz-box-shadow: 0 0 10px 2px rgba(0,0,0,0.8); /* Firefox */
Свойство text-shadow - добавляет тень к тексту. Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже.
*Первое значение(цифра) задает смещение тени по оси X (горизонтали). Может задаваться в любых допустимых единицах измерения CSS Положительное значение задает смещение вправо, отрицательное – смещение влево;
* Второе значение(цифра) задает смещение по оси Y (вертикали). Положительное значение соответствует смещению вниз, отрицательное – вверх;
* Третье значение(цифра) определяет радиус размытия. Отрицательные значения недопустимы;
Пример написания кода:
text-shadow:0px 1px 0px #fff;
Свойство transform - данное свойство может перемещать, вращать и изменять размеры блоков. Если применять совместно со свойством transition то получится эффектная плавная CSS3 анимация.
Основные(далеко не все) возможности свойства:
translate - перемещение (обычно px) Положительные значения сдвигают обьект вправо вниз, отрицательные влево вверх
rotate - вращение (deg градусы)
scale - масштаб (цифра)
Примеры написания кода:
Сдвиг вправо на 50рх
transform:translate(50px,0);
-webkit-transform:translate(50px,0);
-moz-transform:translate(50px,0);
-o-transform:translate(50px,0);
-webkit-transform:translate(50px,0);
-moz-transform:translate(50px,0);
-o-transform:translate(50px,0);
Сдвиг на 50рх влево и 25рх вверх
transform:translate(-50px,-25px);
-webkit-transform:translate(-50px,-25px);
-moz-transform:translate(-50px,-25px);
-o-transform:translate(-50px,-25px);
-webkit-transform:translate(-50px,-25px);
-moz-transform:translate(-50px,-25px);
-o-transform:translate(-50px,-25px);
Поворот по часовой на 45°
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
Увеличение масштаба в два раза
transform:scale(2);
-webkit-transform:scale(2);
-moz-transform:scale(2);
-o-transform:scale(2);
-webkit-transform:scale(2);
-moz-transform:scale(2);
-o-transform:scale(2);
Свойство - transition, это своего рода CSS3 анимация/переход за единицу времени, которую можно применить к любому свойству CSS.
transition-property – указываем CSS свойство, которое будем анимировать (можно указать несколько через запятую или all - все);
transition-duration – указываем время анимации (в секундах или миллисекундах);
transition-timing-function – функция продолжительности перехода - указываем тип изменения, может принимать значения:
ease - эквивалент cubic-bezier(0.25, 0.1, 0.25, 1.0).
linear - эквивалент cubic-bezier(0.0, 0.0, 1.0, 1.0).
ease-in - эквивалент cubic-bezier(0.42, 0, 1.0, 1.0).
ease-out - эквивалент cubic-bezier(0, 0, 0.58, 1.0).
ease-in-out - эквивалент cubic-bezier(0.42, 0, 0.58, 1.0).
cubic-bezier - четыре значения указать точки Р1 и Р2 кривой (x1, y1, x2, y2). Все значения должны быть в диапазоне [0, 1] иначе определения недействительны;
transition-delay - задержка перехода определяет, когда начнется переход. Допускаются положительные и отрицательные значения;
или же можно все правила указать в одном свойстве:
transition – вписываем через пробел все правила.
Пример написания кода:
При наведении курсора на блок с классом blok будут плавно изменены ширина, высота, цвет фона, прозрачность и размер шрифта за 1 секунду времени с задержкой в 1 секунду.
.blok
{
background:#bbbbbb;
margin:10px;
padding:10px;
border:1px solid #666666;
text-align:justify;
width:550px;
height:40px;
opacity:0.5/* Safari 2.0+ , Chrome, Firefox Opera, */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5-7*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8*/
-moz-opacity:0.5;/* Mozilla 1.6 */
-khtml-opacity:0.5;/* Konqueror 3.1, Safari 1.1 */
font-size:10px;
transition:width, height, background, opacity, font-size 1s, 1s 1s ease-in-out; /* в прямом виде не поддерживает ни один браузер */
-webkit-transition:width, height, background, opacity, font-size 1s, 1s 1s ease-in-out; /* работает в Safari 3.1+, Chrome 1+ */
-moz-transition:width, height, background, opacity, font-size 1s, 1s 1s ease-in-out; /* планируется для Firefox 4.0+ */
-o-transition:width, height, background, opacity, font-size 1s, 1s 1s ease-in-out; /* работает в Opera 10.5+ */
}
.blok:hover
{
width:450px;
height:60px;
background:#eeeeee;
opacity:0.5/* Safari 2.0+ , Chrome, Firefox Opera, */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5-7*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8*/
-moz-opacity:0.5;/* Mozilla 1.6 */
-khtml-opacity:0.5;/* Konqueror 3.1, Safari 1.1 */
font-size:14px;
}
{
background:#bbbbbb;
margin:10px;
padding:10px;
border:1px solid #666666;
text-align:justify;
width:550px;
height:40px;
opacity:0.5/* Safari 2.0+ , Chrome, Firefox Opera, */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5-7*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8*/
-moz-opacity:0.5;/* Mozilla 1.6 */
-khtml-opacity:0.5;/* Konqueror 3.1, Safari 1.1 */
font-size:10px;
transition:width, height, background, opacity, font-size 1s, 1s 1s ease-in-out; /* в прямом виде не поддерживает ни один браузер */
-webkit-transition:width, height, background, opacity, font-size 1s, 1s 1s ease-in-out; /* работает в Safari 3.1+, Chrome 1+ */
-moz-transition:width, height, background, opacity, font-size 1s, 1s 1s ease-in-out; /* планируется для Firefox 4.0+ */
-o-transition:width, height, background, opacity, font-size 1s, 1s 1s ease-in-out; /* работает в Opera 10.5+ */
}
.blok:hover
{
width:450px;
height:60px;
background:#eeeeee;
opacity:0.5/* Safari 2.0+ , Chrome, Firefox Opera, */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5-7*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8*/
-moz-opacity:0.5;/* Mozilla 1.6 */
-khtml-opacity:0.5;/* Konqueror 3.1, Safari 1.1 */
font-size:14px;
}
Свойство rgba - цвет фона + прозрачность. Для задания цвета фона, нам нужно выставить значения для трех основных цветов: красного (r – red), зеленого (g – green) и синего (b – blue) и, помимо трех RGB-цветов, мы еще выставим прозрачность (a - alpha). Значение для всех цветов выставляем в числах от 0 до 255, а значение прозрачности выставляем в пределах от 0.0 (0%) до 1.0 (100%).
Пример написания кода:
background:rgba(124, 24, 199, 0.1);
Свойство opacity - определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта. В качестве значения выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля, с точкой впереди.
Пример написания кода:
opacity:0.5/* Safari 2.0+ , Chrome, Firefox Opera, */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5-7*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8*/
-moz-opacity:0.5;/* Mozilla 1.6 */
-khtml-opacity:0.5;/* Konqueror 3.1, Safari 1.1 */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5-7*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8*/
-moz-opacity:0.5;/* Mozilla 1.6 */
-khtml-opacity:0.5;/* Konqueror 3.1, Safari 1.1 */
Свойство gradient - плавные переходы из одного цвета в другой, задав координаты и цвет начальной и конечной точек.
Пример использования простых двухцветных градиентов:
Линейный градиент, сверху вниз
background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff)); /* Для WebKit (Safari, Google Chrome и т.д.) */
background: -moz-linear-gradient(top, #00f, #fff); /* Для Mozilla/Gecko (Firefox и т.д.) */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF); /* Для Internet Explorer 5.5 - 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)"; /* Для Internet Explorer 8 */
background: -moz-linear-gradient(top, #00f, #fff); /* Для Mozilla/Gecko (Firefox и т.д.) */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF); /* Для Internet Explorer 5.5 - 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)"; /* Для Internet Explorer 8 */
Линейный градиент, слева направо
background: -webkit-gradient(linear, left top, right top, from(#00f), to(#fff), color-stop(0.7, #fff)); /* Для WebKit (Safari, Google Chrome и т.д.) */
background: -moz-linear-gradient(left top, #00f, #fff 70%); /* Для Mozilla/Gecko (Firefox и т.д.) */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF0000FF, endColorStr=#FFFFFFFF, GradientType=1); /* Для Internet Explorer 5.5 - 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF, GradientType=1)"; /* Для Internet Explorer 8 */
background: -moz-linear-gradient(left top, #00f, #fff 70%); /* Для Mozilla/Gecko (Firefox и т.д.) */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF0000FF, endColorStr=#FFFFFFFF, GradientType=1); /* Для Internet Explorer 5.5 - 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF, GradientType=1)"; /* Для Internet Explorer 8 */
Радиальный градиент
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 60, from(#ffffa2), to(#00f)); /* Для WebKit (Safari, Google Chrome и т.д.) */
background: -moz-radial-gradient(40% 40%, farthest-side, #ffffa2, #00f); /* Для Mozilla/Gecko (Firefox и т.д.) */
background: -moz-radial-gradient(40% 40%, farthest-side, #ffffa2, #00f); /* Для Mozilla/Gecko (Firefox и т.д.) */
Смотреть пример обзор основных CSS3 свойств Меню аккордеон на CSS3 вертикальное
Скачать готовый пример обзор основных CSS3 свойств Меню аккордеон на CSS3 вертикальное
Пользуемся на здоровье не забываем комментировать.
Понравилась новость Обзор основных CSS3 свойств Меню аккордеон на CSS3 вертикальное на MegaWeb.su? Сохрани в закладках или распечатай!
Информация
Если копируете мой материал - будьте добры оставлять ссылку на источник MegaWeb.su пожалуйста, или поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!
Другие новости по теме
Обратите внимание, возможно Вас заинтересуют другие публикации, похожие на Обзор основных CSS3 свойств Меню аккордеон на CSS3 вертикальное из категории Основы / CSS
- Меню навигации ⋙ Горизонтальное меню CSS3 мутный текст
- Основы / CSS ⋙ Текст с тенью css3 text-shadow примеры
- Меню навигации ⋙ CSS3 горизонтальное выпадающее меню в стиле web 2.0
- Меню навигации ⋙ CSS3 увеличение картинки при наведении
- Меню навигации ⋙ Простое горизонтальное CSS3 слайдер меню
- Меню навигации ⋙ Горизонтальная раздвижная CSS3 навигация
- Меню навигации ⋙ Универсальное CSS3 меню одна кнопка замечательный пример CSS3 анимации
- Основы / CSS ⋙ Что такое CSS хаки или Вендорные префиксы
- Основы / Шаблоны ⋙ Блок DIV с закруглёнными углами и тенью с помощью CSS3
- Магия ЯваСкрипт / Разные скрипты ⋙ Плавное изменение прозрачности элемента на javascript
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
