Leaderboard

Рекомендую купить ещё учебник русского языка.

C новым Годом! С новым Счастьем! всего удачного по пути вам форумчане....с Наилучшими пожеланиями к Вам....Пусть на пути Вашего развития будут только достойные Вашего уважения люди! .... — Хорошим умам нет нужды упиваться алкоголем, их и так отлично таращит от такой жизни!

дык праздновал же ))) я начал 30 уже и вот, 2 - ого уже закончил..., а впереди еще ведь и рождество, и старый-новый год..., ой-ё!

Очнулся 2-го января гыгы )))

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

Как раз заинтересовался темой в заглавии и нашёл ссылочку: http://www.internet-technologies.ru/articles/article_2075.html Почитал, видно что в CSS можно сделать действительно много. Особенно заинтересовала реализация звезды. Решил её сделать, вот получилась такая хрень: https://jsfiddle.net/Launder/vdspdkf3/ Начал думать что сделал не так, вроде сделал всё по уму, а грани не совпадают. Стал разбираться подробно по исходной ссылке, там многое сделано с конкретными размерами, но откуда все эти цифры? Можно, конечно, мой пример допилить: https://jsfiddle.net/Launder/vdspdkf3/2/ Звезда кажется ровненькой, но такая ли она на самом деле? И потом, интересно понять принцип... Вроде, интуитивно ясно, что дело в средней точке. Все лепестки звезды должны находится в одинаковом положении по отношению к центру, и если провести из центральной точки отрезок до торца лепесков (вершин треугольника), то есть, до самой дальней точки каждого лепестка, то эти отрезки между вершиной и центром должны быть равны. Верно и обратное - отрезки проведённые из вершины каждого лепестка должны пересекаться в одной точке. Так что же это за точка? Вроде она должна совпадать с центром треугольника, но что считать центром?... Постепенно до меня дошло, чем и спешу с Вами поделиться! Вот возьмём такой простой, исходный треугольник: https://jsfiddle.net/Launder/vdspdkf3/5/ По умолчанию, поворот фигуры в CSS осуществляется через его центральную точку. Достаточно очевидно что она по горизонтальной координате совпадёт с верхним углом треугольника, а по вертикали будет равна половине его высоты. Если этой вертикалью разделить исходный треугольник, то мы получим два одинаковых треугольника, левый и правый. Поскольку вертикаль перпендикулярна нижней грани нашего большого треугольника, то рассечение вертикалью на двое делает получившиеся треугольники прямоугольными, поскольку их угол между нижней гранью и общей вертикалью - прямой. Отметим это, поскольку с прямоугольными треугольниками можно взаимодействовать с помощью тригонометрии. Если из левой вершины левого треугольника, и из правой вершины правого направить луч, попадающий в нашу центральную точку, которая задана правилами CSS, то эти лучи делят вертикальный отрезок на две равные части, что означает, что такой луч - медиана этих углов. А теперь давайте вспомним какая же должна быть та центральная точка, которую мы ищем. Из неё всё исходит, а значит "корень" каждого лепестка должен из неё как бы исходить, и луч соединяющий центральную точку с торцом лепестка(вершиной угла) должен идти ровно посередине этого лепестка. Верно и обратное, луч исходящий из вершины и идущий к центральной точке должен идти ровно посередине каждого лепестка (то есть быть его биссектрисой), а значит в каждой его точке он должен быть равноудалён от обоих боковых граней своего лепестка. Очевидно, что этот перпендикуляр будет немного наклонён, иначе наш луч, делящий боковой угол попалам, должен идти горизонтально, а боковые грани должны расходится вверх и вниз. https://jsfiddle.net/Launder/vdspdkf3/6/ (представим себе идущий горизонтально из левой вершины луч, он будет делить угол попалам, при этом попалам будет делиться и треугольник, до тех пор, пока грани сохраняют первоначальное направление) Но поскольку, в исходном треугольнике, одна грань (нижняя) у нас лежит на горизонтальной плоскости, луч уже направлен под углом, верхняя грань под ещё большим (вдвое) углом. Перпендикуляр же к лучу окажется наклонён! А теперь давайте посмотрим на нашу медиану. Её отрезки равны, но поскольку она не наклонена, то соединяет она более дальнюю точку верхней грани и более ближнюю нижней. Если взять точку на верхней грани и провести отрезок перпендикулярный нашему лучу, то точка на нижней грани будет дальше центра. Если взять центральную точку на нижней грани и провести перпендикуляр к лучу, то точка на верхней грани будет ближе центра. Если же взять пересечение вертикали треугольника и луча исходящего из боковой вершины (и делящего боковой угол попалам), то центральная вертикаль находится как бы под углом к перпендикуляру луча, соответственно, одна часть вертикали (верхняя) будет как бы тянутся к более удалённой точке на боковой грани, а другая её часть(нижняя) к более ближней точке на боковой грани. Поэтому эти отрезки будут не равны! А значит срединная точка, в любом случае не будет совпадать с серединой вертикали (иначе отрезки были бы равны). Как же нам выяснить её местоположение? Вспомним, что вертикаль делит большой треугольник на два маленьких. Наш биссектриса отсекает ещё половину бокового угла и делает треугольник более низким. Итак у нас есть маленький прямоугольный треугольник. Нам нужно найти противолежащую биссектрисе сторону, зная размер его прилежащей стороны - 100px. Для этого нам нужно найти угол получившегося треугольника, между нижней гранью и биссектрисой, а далее воспользоваться тригонометрией. Понятно, что этот угол будет вдвое меньше исходного. Размер исходного нам не известен. У нас есть только размеры его прилежащего и противолежащих сторон. Прилежащая - 100px, противолежащая 70px. Если б наша биссектриса и медиана совпадали (как, например, у большого треугольника вертикаль), то мы могли бы сразу сказать что противолежащая сторона нашего маленького треугольника равно половине от большого - 50px, но поскольку биссектриса и медиана боковой стороны у наших маленьких треугольников не совпадают, то это не так. Поэтому нам придётся сначала найти угол большого треугольника, потом его разделить попалам, а потом уже искать размер стороны, исходя из полученного значения. Итак - прилежащая - 100px, противолежащая - 70px. Делим противолежащую на прилежащую - получаем 0.7. Итак тангенс равен 0.7. Арктангенс получается равен 0.61 радиан. Поскольку 180 градусов соответствует пи (3.1415) радиан, а нам нужно выяснить сколько градусов составляет 0.61 радиан - делаем пропорцию. Получаем 35 градусов. Интересно что 36 градусов - десятая часть полного круга, а поскольку наша пентограмма делит круг на 5 частей, то 36 градусов это половина от этой части. Получается, если бы наши лучи звезды не вершинами бы замыкали лепестки, а, наоборот, вершинами исходили бы из центральной точки, то грани бы заняли бы в сумме как раз половину круга. В нашем неидеальном случае соотношение получается такое, что угол лепестка - 35 градусов. Едем дальше - делим его попалам, получае 17,5 градусов, округляем до 18 градусов (кстати как раз половина от 36, о которой мы говорили). Теперь, зная угол и прилежащую сторону в сто пикселей, нам нужно найти противолежащую сторону. Вычисляем тангенс 18 градусов, это чуть меньше 0.325, округляем до 0.32, и умножаем прилежащую сторону на тангенс: 0.32 x 100px получаем 32 пикселя высоты. И вот она искомая точка! Осталось за малым, ВСЕМ нашим треугольникам, образующим звезду поставить это значение центральной точки (ну а дальше уже их двигать на нужный угол). Поскольку плоскость идёт у нас от верхнего левого угла и ось Y направлена вниз, то координаты вычисляются так: X - 50%, Y вычислим - исходная высота равна 70px, от 70 - 32 = 38 пикселей от верхней точки. Итого, для КАЖДОГО треугольника ставим: transform-origin: 50% 38px (можно 100px 38 px); а дальше вращаем их как хотим. А хотим мы разнести их на 72 градуса (360/5) друг от друга. Это, в общем-то не сложно и реализация видна из кода. Чтобы центр круга совпал с центральной точкой нашего треугольника, нужно сделать следующее. Во-первых нужно учесть, что те относительные размеры, которые мы давали при трансформации (100% - размер фигуры), не совпадают с размерами абсолютного позиционирования. Фигура начинается с точки left: 0 top: 0 (помним что <li> находит в контейнере <ul>, поэтому эта точка не совпадает с левой верхней частью экрана, а совпадает с верхней левой частью контейнера <ul>), после того как я компенсирую размеры самой фигуры transform: translate(-50%, -50%) точка left: 0 top: 0 совпадает с центром фигуры. Поскольку мы знаем, что центр треугольника считается CSS как центр его вертикальной медианы, а нам нужен центр биссектрисы, то мы считаем центр медианы - 70 / 2 = 35px, центр биссектрисы мы уже посчитали - 38px вниз, поэтому нам круг нужно сдвинуть на три пикселя вниз, тогда его центр совпадёт с центром треугольников. https://jsfiddle.net/Launder/vdspdkf3/4/ Вот и всё. Алкогоритм, вроде, более-менее ясен =)

Друзья, поздравляю с Новым годом! Всем желаю хорошо отдохнуть в первые праздничные дни, и удачи в целом!

Присоединяюсь!!! С новым годом!

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

Всем добрякам счастья и здоровья !) Все остальное попутное!)

С новым годом! Чтобы всегда попадались заказчики адекватные и щедрые