Трехмерный эффект с загнутыми углами.
В данном уроке мы создадим эффект загнутых уголков без использования изображений и дополнительной разметки. Он отлично работает во всех современных браузерах и хорошо подходит для дизайна сайта с простыми цветовыми решениями.
Данный эффект использовался в демонстрации к уроку "Множественные фоны и обводка с использованием CSS2 " . Кроме того, применение загнутых уголков в дизайне реального сайта можно посмотреть на примере Yiibu . Но сайт Yiibu использует изображения, а мы задействуем псевдо-элементы и CSS.
Начало
Ничего сложного. Подойдет любой элемент и не потребуется никакой дополнительной разметки. Все начинается с простого окрашенного прямоугольника. Браузеры, которые не поддерживают псевдо-элементы (IE6 и IE7), тоже будут выводить его.
Добавление свойства position:relative делает возможным абсолютное позиционирование псевдо-элементов.
Note { position:relative; width:30%; padding:1em 1.5em; margin:2em auto; color:#fff; background:#97C02F; }
Загнутый уголок создается с помощью псевдо-элемента, который позиционируется в верхнем углу прямоугольника. Псевдо-элемент не имеет ширины и высоты, но у него задана толстая обводка. Изменяя толщину обводки, мы будем изменять размер загнутого уголка.
В данном примере верхняя и правая части обводки имеют цвета, которые соответствуют цвету фона родительского прямоугольника. Левая и нижняя части обводки имеют более темный цвет или более светлый по сравнению с цветом фона прямоугольника.
Note:before { content:""; position:absolute; top:0; right:0; border-width:0 16px 16px 0; border-style:solid; border-color:#658E15 #fff; }
Это все, что нужно для создания простого эффекта загнутого уголка, похожего на используемый на сайте Yiibu.
Firefox 3.0 не позволяет позиционировать псевдо-элементы. Вы можете использовать пару свойств для исправления положения в данном браузере.
Note:before { ... display:block; width:0; }
Добавляем легкую тень
Вид уголка может быть немного улучшен с помощью добавления свойства box-shadow (для тех браузеров, которые его поддерживают) к псевдо-элементу. Установка свойства overflow:hidden для класса элемента скрывает часть тени, которая нарушает эффект загнутого уголка.
Note:before { ... -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); }
Скругленные углы
Также относительно просто использовать данную технику вместе со скругленными углами. К сожалению, каждый современный браузер имеет какую-нибудь ошибку, связанную со свойством border-radius (включая те, кто использует свойство без префикса). Такое положение означает необходимость в проведении дополнительных работ.
Только браузеры Webkit могут делать скругленные углы для псевдо-элементов, если те имеют только 2 части обводки. Opera 11 и Firefox 3.6 создают неприятную для глаз кучу. Причем Opera 11 имеет максимальную ошибку в данном процессе.
Использование всех четырех сторон исключает проблемы в Opera 11 и Firefox 3.6. Но данный метод решения приводит к ошибке в Safari 5, что выражается в выводе диагональной линии с зубцами. Обойти данную проблему можно установив цвет для хотя бы одной части обводки как transparent .
Цвет фона будет виден сквозь прозрачную обводку. В идеальном случае такой подход будет формировать эффект и содержит минимум кода. Но Opera 11 показывает фоновый цвет сквозь прозрачную обводку только при условии, что установлено свойство border-radius .
Note-rounded:before { content:""; position:absolute; top:0; right:0; border-width:8px; border-color:#fff #fff transparent transparent; background:#658E15; -webkit-border-bottom-left-radius:5px; -moz-border-radius:0 0 0 5px; border-radius:0 0 0 5px; display:block; width:0; }
CSS файл для демонстрационной страницы содержит комментарии, полезные для работы. Каждый браузер имеет свои особенности при использовании свойства border-radius или обводки элементов без ширины и высоты.
Окончательный вид кода
Ниже приводится весь код CSS, нужный для создания эффекта загнутых уголков с легкими тенями и использованием только одного элемента HTML.
Position:relative; width:30%; padding:1em 1.5em; margin:2em auto; color:#fff; background:#97C02F; overflow:hidden; } .note:before { content:""; position:absolute; top:0; right:0; border-width:0 16px 16px 0; border-style:solid; border-color:#fff #fff #658E15 #658E15; background:#658E15; -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); display:block; width:0; /* Преодоление ограничений Firefox 3.0 */ } .note.rounded { -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .note.rounded:before { border-width:8px; border-color:#fff #fff transparent transparent; -webkit-border-bottom-left-radius:5px; -moz-border-radius:0 0 0 5px; border-radius:0 0 0 5px; }
Заключение
На демонстрационной странице содержатся примеры с использованием различных цветов, чтобы убедиться в достаточной легкости использования эффекта.
Надо учитывать, что данная техника хуже работает при использовании изображения в качестве фона для элемента, чем при использовании простого цвета. Но такие ограничения имеются и у других методов организации загнутых уголков.
Вопрос: Фигура+сглаженные углы
Доброго времени суток уважаемые форумчане.Помогите в таком вопросе:на чистом css нужно создать следующую фигуру-шестигранник,но со сглаженными углами.
Буду благодарен любой помощи,особенно оперативной.
Ответ:
Сообщение от InTheDark
Spirt Tesla, Спасибо за отклик,но в построении самой фигуры проблематики не возникает,уже разобрался,а вот сгладить углы-это уже проблема.Подскажите плз - в Вашем коде какие параметры отвечают за эту характеристику фигуры?
Вообще за сглаживание отвечает border-radius
Вопрос: Прямые углы
Помогите сделать прямые углы,Вот код
/rs - обнуления счета;
где /rs у меня этот текст в округленной рамке а как сделать прямые углы у рамки?
Ответ:
Помогите сделать прямые углы
Думаю что даже если искать в гугле три дня, ничего не найдется. Попробуй поискать от обратного, ищи как сделать круглые углы, если получится, то научишься делать квадратные.
Вопрос: Как сделать такие углы у div
Добрый день!
Как сделать такие углы у div.
Пример:
Спасибо!
Ответ:
Псевдоэлементом с заданными размерами, например, но проще с тенями поиграться, если хотите все 4 угла так сделать.
box-shadow: X Y 0 -S #fff; - первые два параметра являются смещениями по х и у соответственно, третий блюр, он тут должен быть на нуле, а четвертый параметр отвечает за сжатие тени, когда с минусом (тобишь чтобы она маленькой стала). Последний - цвет тени.
Хотя, если у вас сам див прямоугольный, а тень квадратная, то тогда, видимо, имеет смысл сделать прозрачный псевдоэлемент с размерами, как у тени, и смещениями по Х и У его 4 тени раскидать по углам дива. В этом случае четвертый параметр у св-ва box-shadow тоже будет 0, меняете только первые два.
Вопрос: (JS) Узнать реальный угол поворота дива
Приветствую, форумчане.
Про matrix(bla-bla) синусы и косинусы знаю.
Постулат: Браузер "знает" количество оборотов элемента если угол больше 360 градусов - очевидно из опыта.
Вопрос: Возможно-ли извлечь этот реальный угол поворота?
Ответ:
Я задал конкретный вопрос:
как в процессе работы страницы, скриптом извлечь полное значение угла поворота дива.
Те же 390 градусов, заданных в css.
Вопрос: наложить одну картинку на другую под определенным углом
задание вроде того, что у фидле. нужно наложить одну картинку на другую, при том, что нижняя картинку наклонена. никак не удается ровно наложить.пробовал через перспективу в CSS, матрицу и другую трансформацию, но углы картинок всегда не сбегают. при этом может не совпадать только один угол. есть ли какие простые способы, или можно мой вариант поправить?
| HTML5 | ||
|
||
| CSS | ||
|
||
Ответ: раньше делал так как вы показали, а еще вижу, что это работает в фидле, но сколько ни пытаюсь на сайте ничего не срабатывает. верхние углы остаются на одном уровне, что то можете посоветовать?
Добавлено через 15 минут
спасибо, разобрался
img
{
position:absolute;
}
из за этого была проблема
Вопрос: Плагин Multiscroll, кнопка для вызова меню в левом верхнем углу имеет анимацию только в firefox?
сайт wsfox.ru
плагин Multiscroll
Почему почему кнопка для вызова меню в левом верхнем углу имеет анимацию только в firefox?
Ответ:
Сообщение от Mashka_mulashka
может еще подскажите, почему почему кнопка для вызова меню в левом верхнем углу имеет анимацию только в firefox?
Может и подскажу, но у меня и в хроме анимируется хорошо
Добавлено через 7 минут
А вообще вроде имя кейфреймов пишется впереди, а у Вас в конце, возможно поэтому не работает в IE, но точно не уверен
| Код CSS | ||
|
||
Вопрос: Определить угол по линиям канваса
Смотрим скриншот, требуется найти угол "C". Где def.X/defY-нынешнее положение дула пушки(ну черный отросток вверх) и nowX/nowY нынешнее положение курсора мыши. Не надо писать, что у меня по геометрии 2, у меня по ней 5. Проблема в другом, как на JS это правильно написать?
Ответ:
У тебя есть координаты мыши (это катеты прямоугольного треугольника)
осталось узнать как найти угол зная длину двух катетов
и для чего нужен тангенс в тригонометрии
| Сообщение от Vopub |
| Не надо писать, что у меня по геометрии 2, |
Есть мнение что ты глуп и неправильно решаешь стоящею перед тобой задачу. про вектор тебе уже сказали
Вопрос: Скругленные углы у родительского блока и позиционирование дочерних элементов
Доброго времени суток
Есть две проблемы.
1. На зеленом блоке не работает закругление углов. Хотя на блоке меню работает абсолютно такой же код
| CSS | ||
|
||
Почему такое может быть?
2. Бежевый блок находится на зеленом блоке, а они должны быть рядом и между ними должна быть граница. Вот код:
| CSS | ||
|
||
Ответ: Спасибо. Разобрался в своих ошибках
Добавлено через 25 минут
Действительно, ошибка была в том, что я задал скругление углов родительскому элементу. Но в итоге я решил от них отказаться.
Блоки отделять не стал, добавил новый класс.right для всей правой части с контентом и выделил его белым цветом. Поэтому визуально кажется что блока 2 и что они раздельны
| CSS | ||
|
||
Вопрос: Слайдер изображений на чистом JavaScript
Ребят, очень прошу помощи. Объясните мне пожалуйста на пальцах, логику слайдера на чистом JS. В интернете полно слайдеров, но все они на JQuery, либо очень сложные. Мне нужен простой слайдер, стрелка влево - появляется предыдущее изображение, вправо - следующее, без наворотов. Я совсем недавно изучаю JS, поэтому не совсем понимаю, как это можно реализовать, а в коде сложных слайдеров не могу разобраться за недостатком опыта. Буду очень благодарен за помощь.
Ответ: Deimon26 , посмотри тут, всё на чистом js, с коментами
Изогнутая
Тень
или Тень
симулирующая изогнутые вверх углы,
выглядит очень эффектно на сайте.При этом, объекты или изображения выделяются из обычного текста.
И такого трехмерного эффекта,
можно добиться используя только CSS3
и HTML
.
Для начала некоторые общие, но важные основы для создания выгнутой или вогнутой тени.
Блок с тенью
С помощью CSS3
может быть создана тень любого объекта HTML,
с любым направлением, размером и размытием. Для этого используется, CSS3
параметр “box-shadow: 2px 2px 2px 2px #000 inset”
. Важно знать, что тень адаптируется к размеру и форме объекта. Круглый угол объекта отбрасывает круглую тень.
Для одного объекта может быть одновременно указано несколько различных теней, разделенных запятой.
Смысл информации”box-shadow: 2px 2px 2px 2px #000 inset “:
- Первое значение смещение в горизонтальном направлении.
Чем больше значение, тем больше тень перемещается вправо, а отрицательное значение перемещает тень влево. - Второе значение представляет собой смещение в вертикальном направлении.
При положительных значениях тень движется вниз и при отрицательных значениях – вверх. - Третье значение определяет степень размытия тени.
Чем больше значение, тем больше размытость. - Четвертый дополнительный параметр определяет радиус тени.
Чем больше значение, тем больше тень. - Затем следует цвет тени.
Эти данные также влияют на восприятие размытия. - “inset “: Это необязательная информация является внутренней тенью
Данное обозначение цвета “# 000”, можно заменить на “RGBA” (красный, зеленый, синий, альфа-канал), например, “box-shadow: 4px 4px 4px rgba(0, 0, 0, .6)”, что делает тень объекта полупрозрачной и, таким образом, она выглядит на текстурированном фоне более естественно.
Арочные и изогнутые тени
Основная разметка HTML неизменна во всех следующих примерах. Поэтому добавляться будет только то, что нужно в CSS3 . Вместо изображения также может быть интегрирован второй “Div -контейнер” для текста, но это, в конечном счете, то же самое.
Для определения положения тени, контейнер “DIV ” должен иметь параметр “position: relative” и с помощью “z-index:1” переместиться на передний план. Таким образом, этот контейнер служит в качестве точки отсчета для абсолютно расположенного тени.
#schatten { position: relative; height: 34.4em; width: 50em; margin: -2.5em auto 1.8em; left: -5px; z-index: 1; }
Теперь определяются свойства либо второго контейнера “DIV
” или свойства изображения.
Размер как в ширину так и в высоту 100% от родительского контейнера “#schatten”,
а также получает белую рамку “border”
в 5 пикселей.
Что бы белая рамка отличалась от фонового изображения, будет добавлена ещё одна тень. Это приводит к дополнительному отделению объекта от фона, тем самым усиливая 3D-эффект
.
#schatten img { position: relative; width: 100%; height: 100%; border: 5px solid #fff; box-shadow: 0 -3px 5px -2px rgba(0, 0, 0, .6), 0 1px 4px rgba(0, 0, 0, .3), 0 0 20px rgba(0, 0, 0, .1) inset; }
Благодаря псевдо-элементам “:before” и “:after” изогнутая тень определяется и добавляется к контейнеру “DIV “.class=”notranslate”> Элементы “:before” и “:after” , как правило, интерпретируется как встроенные объекты и размещаются на HTML элемент, другими словами, размещается до или после элемента.Благодаря “position: absolute “, тень является независимой от реального объекта и может позиционироваться индивидуально.
Сначала определяется размер тени, и полученные, таким образом, с помощью двух псевдо-элементов два прямоугольника с шириной 50% и высотой 30% родительского контейнера “#schatten
“. Два прямоугольников затем сдвигаем на 2 пикселя и получаем тень на расстоянии 15 пикселей и размытием 10 пикселей.
Псевдо-элемент “:before”
предназначен для представления тени в нижней левой части и, следовательно, получает вращение 3 ° против часовой стрелки. За правую часть отвечает элемент “:after”
.
#schatten:before, #schatten:after { position: absolute; content: ""; width: 50%; height: 30%; bottom: 2px; left: 10px; box-shadow: 0 15px 10px rgba(0, 0, 0, .7); transform: rotate(-3deg); z-index: -2; } #schatten:after { right: 0; left: auto; transform: rotate(3deg); }
Теперь рассмотрим другие примеры арочных и изогнутых теней.
И, как уже было описано выше, вставим дополнительный контейнер “DIV
” вместо изображения.
Основной код CSS3 для всех последующих примеров:
Box { position: relative; height: 12em; width: 31em; margin: 0 auto; z-index: 1; } .schatten { position: relative; color: #777; width: 80%; height: 80%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset; } .schatten:before { position: absolute; content: ""; z-index: -2; box-shadow: 0 0 15px rgba(0, 0, 0, .6); border-radius: 100px / 20px; }