Проблемы с созданием логотипа в CSS?
Я пытаюсь воссоздать свой логотип с помощью HTML и CSS в качестве упражнения, чтобы узнать больше о поворотах, переходах и анимации; Я нахожу это довольно утомительным в том, что касается позиционирования, и чувствую, что, возможно, поступаю неправильно. Вот базовое представление моего логотипа:
HTML и CSS пока довольно просты, но, как я уже сказал, это кажется действительно утомительным, поскольку любая регулировка высоты или положения элементов div заставляет меня перемещать вещи повсюду. Я бы предпочел иметь родительский элемент div, в который вписывается логотип и изменяет размер / положение в зависимости от родительского.
Я думал, что position: relative выполнит репозиционирование, но я не уверен, насколько хорошо использование процентов будет работать для атрибутов width и height, когда дело доходит до этого процесса.
Вот мой текущий код; он неполный, но я хотел попросить более опытного совета, прежде чем зайти слишком далеко и в конечном итоге придется переписывать все.
.box {
width: 100px;
height: 100px;
background-color: #3CF;
transform: rotatez(45deg);
margin: auto;
position: fixed;
top: 50px;
left: 500px;
}
.astick {
width: 3px;
height: 250px;
background-color: #FC0;
transform: rotatez(45deg);
position: fixed;
top: -8px;
left: 460px;
}
.bstick {
width: 3px;
height: 250px;
background-color: #8C3;
transform: rotatez(-45deg);
position: fixed;
top: -45px;
left: 460px;
}<div class = "logo">
<div class = "box"></div>
<div class = "astick"></div>
<div class = "bstick"></div>
<div class = "cstick"></div>
</div>Мне интересно, есть ли более умный или более эффективный способ сделать это. Когда я говорю «более эффективно», я имею в виду, что обслуживание и повторное использование просты и занимают минимум времени.
Кроме того, какие проблемы возникнут с анимацией размеров моих элементов для получения приятного эффекта перехода? Я считаю, что простое изменение размеров вызовет проблемы с позиционированием во время переходов, но я думаю, что могу не понимать всех потенциальных проблем.
Обновлено: использование SVG
На основе уже предоставленных комментариев и ответов я решил, что SVG будет отличным решением для продвижения вперед; Я назначу награду в размере 50 тому, кто напишет невероятно подробный ответ относительно SVG, который отвечает на все мои проблемы, упомянутые выше.
- Позиционирование
- Масштабирование
- Анимация
- Стилизация с помощью CSS
- и Т. Д.
Я думаю, вы неправильно поняли. SO - это не место, где один приказ кусок кода и платит награда. Мы помогаем с существующим кодом, поэтому я предлагаю вам приложить собственные усилия и вернуться с просьбой о помощи, если вы не можете заставить его работать.
@LGSon Я предлагаю вам не быть таким грубым с участниками; Я не прошу раздаточный код. Я уже создал свою рабочую версию с SVG благодаря первому ответу, предлагающему его использование. Я просто предлагаю вознаграждение за подробный ответ ради будущих читателей, поскольку все приведенные ниже примеры не решают всех моих проблем и не прилагают всесторонних усилий, чтобы гарантировать будущим читателям все связанные с ними ответы. необходимость. Я думаю, вам следует постараться прочитать весь пост перед тем, как комментировать, чтобы понять всю ситуацию.
Во-первых, не грубо просить кого-то следовать правилам SO, во-вторых, вы не видите никаких собственных усилий по созданию SVG-версии изображения вашего логотипа. И как кому-то, не написав фрагмента кода, показать инструкции. Если вы хотите, чтобы это было прочитано, это уже предусмотрено в документации, например: developer.mozilla.org/kab/docs/Web/SVG, поэтому нет причин для кого-то писать все это снова.
@LGSon Написание подробного ответа также является частью правил SO, это не требование, но мы все должны придерживаться этого стандарта. Я стараюсь сделать все возможное, чтобы предоставить подробный ответ будущим читателям, а также подробный пост для постановки моего вопроса; в этот момент я думаю, что мы уходим от темы и должны просто оставить публикацию в покое. Часть, которая показалась грубой, - это ваш комментарий после того, как я, возможно, неправильно понял; это следовало перефразировать.
Ответы 2
Фактически, на функцию поворота влияют три фактора: начальная точка, размер страницы, ширина объекта, длина, а также направление. Для SVG хорошо прочитать об этом здесь: https://svgontheweb.com/ и https://css-tricks.com/transforms-on-svg-elements/https://www.jotform.com/blog/better-position-and-transforming-with-nested-svgs/
Вот как это использовать:
<svg width = "450" height = "250" style = "background: gray">
<g transform = "rotate(45)">
<rect x = "150" y = "-80" width = "80" height = "80" fill = "#3cf" />
<line stroke = "#fc0" x1 = "170" x2 = "70" />
<line stroke = "#fc0" x1 = "150" y1 = "-80" x2 = "150" y2 = "150" />
<line stroke = "#fc0" x1 = "70" y1 = "0" x2 = "70" y2 = "70" />
</g>
</svg>.box {
width: 100px;
height: 100px;
background-color: #3CF;
transform: rotatez(45deg);
margin: auto;
position: fixed;
top: 50px;
left: 500px;
}
.astick {
width: 3px;
height: 250px;
background-color: #FC0;
transform: rotatez(45deg);
position: fixed;
top: -8px;
left: 460px;
}
.bstick {
width: 3px;
height: 90px;
background-color: #FC0;
transform: rotatez(-45deg);
position: fixed;
top: 23px;
left: 447px;
}
.astick1 {
width: 3px;
height: 300px;
background-color: #FC0;
transform: rotatez(45deg);
position: fixed;
top: -10px;
left: 310px;
}<div class = "logo" style = " position: center;">
<div class = "box"></div>
<div class = "astick"></div>
<div class = "bstick"></div>
<div class = "cstick"></div>
<div class = "astick1"></div
</div>Я ценю рецензию; однако я ищу подробный ответ о повторном использовании и масштабировании. Я мог бы закончить писать то, что мне нужно, чтобы достичь того, что вы здесь предоставили. Похоже, SVG здесь будет лучшим выбором.
Вот как бы я это сделал:
Я использую div для зеленой линии, ::before для золотой линии и ::after для синего квадрата.
.logo {
position:relative;
margin-top:50px;
width: 250px;
height: 250px;
border-top: 4px solid #8c3;
transform:rotate(45deg) scale(.9,.9);
box-sizing:border-box;
}
.logo::after,.logo::before{
content:"";
display:block;
position:absolute;
top:-100px;
width:100px;
box-sizing:border-box;
}
.logo::before{
right:0;
height:100%;
border-left:4px solid #fc0;
}
.logo::after{
height:100px;
background-color:#3cf;
right:0;
top:-100px;
border-bottom:4px solid #8c3;
border-left:4px solid #fc0;
}<div class = "logo"></div>Я надеюсь, что это помогает.
Обновить
Однако, если вы думаете о SVG, я бы сделал это так:
В этом случае SVG имеет ширину, объявленную в CSS.
line{stroke-width:4px}
svg{border:1px solid; width:90vh}<svg viewBox = "0 0 250 215">
<g transform = "rotate(45)">
<rect x = "150" y = "-100" width = "100" height = "100" fill = "#3cf" />
<line stroke = "#8c3" x2 = "250" />
<line stroke = "#fc0" x1 = "150" y1 = "-100" x2 = "150" y2 = "150" />
</g>
</svg>Масштабирование: При использовании SVG, если ваш SVG не имеет объявленных width или height, он займет всю доступную ширину. Таким образом, вы можете положить его внутрь контейнера желаемой ширины. Если контейнер будет масштабироваться, SVG сразу же примет тот же размер.
Позиционирование: Элемент SVG можно расположить как любой другой элемент HTML в линию
Укладка В CSS я установил stroke-width строк. Если вам нужно изменить цвета, это также можно сделать в CSS. В этом случае я использовал преобразования SVG, но я мог бы сделать это и в CSS: g{transform: rotate(45deg);}
Анимации вы можете анимировать элементы SVG с помощью SMIL анимации, с анимацией CSS и с анимацией Javascript. Если вы хотите анимировать свой журнал, задайте вопрос, указав, как вы хотите анимировать свой SVG.
Это отличная альтернатива, которая определенно сокращает некоторые утомительные маршруты! +1
Я обновил свой ответ примером, в котором я использую SVG для того же результата. Взгляни, пожалуйста.
Для масштабируемого, многоразового логотипа на основе кода использование SVG должно быть вашим первым выбором. С его помощью вы также можете управлять и анимировать определенные элементы внутри. Логотип, созданный исключительно в формате HTML / CSS, может дать преимущества, когда речь идет о производительности и совместимости с браузером, но при этом возникают проблемы с интервалом / масштабированием в зависимости от того, как вы его создали.