Кто знает как сделать вогнутые углы как на картинке на чистом CSS? Эффект загнутых уголков с использованием только CSS. Арочные и изогнутые тени
Вопрос: Фигура+сглаженные углы
Доброго времени суток уважаемые форумчане.Помогите в таком вопросе:на чистом 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, с коментами
В данном уроке мы создадим эффект загнутых уголков без использования изображений и дополнительной разметки. Он отлично работает во всех современных браузерах и хорошо подходит для дизайна сайта с простыми цветовыми решениями.
Данный эффект использовался в демонстрации к уроку "Множественные фоны и обводка с использованием 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; }
Заключение
На демонстрационной странице содержатся примеры с использованием различных цветов, чтобы убедиться в достаточной легкости использования эффекта.
Надо учитывать, что данная техника хуже работает при использовании изображения в качестве фона для элемента, чем при использовании простого цвета. Но такие ограничения имеются и у других методов организации загнутых уголков.
В этой статье как и в прошлой, эффект строится с помощью псевдоэлемента :after . Чтобы понять суть можете прочитать ту статью, там я схематично объяснял как это работает, тут повторятся не буду. В общем, все делается очень просто и настроить можно разные виды эффектов. В примере ниже, можно увидеть как я организовал 3 разных изгиба, внося минимальные изменения в код.
Начнем по порядку с первого, он самый базовый, а все остальные делаются исходя от него. Чтобы начать работу, Вам нужно определится какому блоку будет присвоен эффект, необычная тень. В нашем случаи, это будет блок - block_shadow .
Block_shadow{ position:relative; width:400px; height:150px; background:#f7f7f7; } .block_shadow:after{ content:""; position:absolute; z-index:-1; top:0; bottom:0; left:50px; right:50px; -webkit-box-shadow:0 0 25px rgba(0,0,0,0.3); -moz-box-shadow:0 0 25px rgba(0,0,0,0.3); box-shadow:0 0 25px rgba(0,0,0,0.3); -moz-border-radius:200px / 50px; border-radius:200px / 50px; }
Я сейчас распишу, что именно создает такой вид. Сначала, блоку присвоили позиционирование relative , потом ширину, высоту, и обязательно фон, даже если он будет у Вас белый. Потом присваиваем псевдоэлемент :after . Для него же, установлены следующие параметры:
- position - присваиваем позиционирование - absolute .
- z-index - устанавливаем в минусе -1, чтобы спрятать за блоком.
- top:0;bottom:0; - отступ от верха и от низа - 0 пикселей, то есть тень видно. Если установить значение для - top -50%, то верхняя тень спрячется за блоком и получится вид, как в третьем блоке примера. Если для - bottom установить 50%, то исчезнет нижняя тень. 50% - это как пример, можете установить что-то свое и спрятать тень не полностью, если это нужно.
- left:50px;right:50px; - это отступ от краев. Мы отступили по 50 пикселей, чтобы тень по бокам скрыть. Забегу на перед, чтобы сделать второй вариант эффекта, когда тень по бокам, нужно просто поменять значения. Для сторон установить - 0, а для верха и низа 50 пикселей. Значение 50, можно конечно менять, так вы измените размер тени.
- box-shadow - это тень, тут все понятно. Устанавливаем цвет, прозрачность и размер размытия тени, сейчас - 25 пикселей.
- border-radius - это закругление тени, чтобы создать тот самый эффект изгиба. первое значение - 200 пикселей, радиус по горизонтали, это половина от нашей ширины основного блока - 400 пикселей. 50 - это радиус по вертикали. Для осуществления второго примера - тень по сторонам, нужно делать так, чтобы второе значение было больше первого. Все зависит от размеров блока. В нашем случаи у второго примера соотношение 10px / 50px.
Все параметры, настраиваете под себя, можете менять как угодно, главное не перестарайтесь, чтобы не потерять реалистичный вид.
Я в первом разъяснении, по сути все расписал, так что для второго блока в примере, я просто представлю готовые стили, чтобы Вы видели и было понятнее.
Block_shadow:after{ content:""; position:absolute; z-index:-1; top:25px; bottom:25px; left:0; right:0; -webkit-box-shadow:0 0 25px rgba(0,0,0,0.3); -moz-box-shadow:0 0 25px rgba(0,0,0,0.3); box-shadow:0 0 25px rgba(0,0,0,0.3); -moz-border-radius:10px / 50px; border-radius:10px / 50px; }
Для блока в третьем примере, я тоже описал, что нужно сделать и тоже просто приведу готовый код.
Block_shadow:after{ content:""; position:absolute; z-index:-1; top:50%; bottom:0; left:50px; right:50px; -webkit-box-shadow:0 0 25px rgba(0,0,0,0.3); -moz-box-shadow:0 0 25px rgba(0,0,0,0.3); box-shadow:0 0 25px rgba(0,0,0,0.3); -moz-border-radius:200px / 50px; border-radius:200px / 50px; }
Изменяя стили, подгоняя их под себя, можно добиться разных результатов и абсолютно новых эффектов, не только тех, что я отобразил в примере. Указав значения в процентах, можно осуществить автоматического растягивания тени на всю высоту или ширину блока, если блок имеет не постоянный размер. Пробуйте и улучшайте и Ваш сайт будет иметь необычный вид.
На этом все, спасибо за внимание. 🙂