@1nsayt

Как сделать такое лого используя чистый css?

Возможно ли сделать такое решение посредством градиента?Подскажите пожалуйста какие решение есть для верстки такого логотипа.Можно наверно еще сделать посредством after и before.5d15d1dbdc1e5057372662.png
  • Вопрос задан
  • 544 просмотра
Решения вопроса 3
@DanKud
На псевдоэлементах можно так - https://codepen.io/anon/pen/KjZVWg?editors=1100#0
Ответ написан
Hyubert
@Hyubert
JS
Градиентом можно, но псевдоэлементами будет больше контроля, хотя выбор всегда за вами.
Вот накидал небольшой пример
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
rockfeeler
@rockfeeler
Фронтендер, дизайнер, верстальщик-перфекционист
alex-1917
@alex-1917
Если ответ помог, отметь решением
Фанатам градиентов:
Градиенты относятся не к свойствам, а к значениям и могут применяться везде, где используются изображения, включая свойства background-images, list-style- images и border-images.
Градиент является CSS-изображением, созданным браузером на основе определенных разработчиком цветов путем постепенной смены одного цвета на другой.
При создании радиального градиента он весь помещается в память. Если радиальный градиент небольшой, одноцветный, без прозрачности или ступенчатых переходов, объем затрачиваемой памяти будет небольшим. Но такие градиенты используются довольно редко. Линейные градиенты представляют собой небольшие изображения, которые выкладываются в памяти браузера, как плитки, а радиальные градиенты являются одним более крупным изображением, которое может занять много памяти и даже вызвать сбой мобильных браузеров на устройствах с ограниченным объемом оперативной памяти.

Или так https://habr.com/ru/post/243909/
Или тут CSS background linear-gradient fixed сильно грузит CPU при прокрутке, как пофиксить?
Ясно, да?
Ответ написан
Комментировать
@Roma741
<style>
	.wraper{
		width: 200px;
	}
	.blue{
		width: 100%;
		height: 50px;
		background:blue; 
	}
	.grey{
		width: 50%;
		height: 50px;
		background: grey;
		float:left;
	}
	.pink{
		width: 50%;
		height: 50px;
		background: pink;
		float:left;
	}
</style>
<div class="wraper">
	<div class="blue"></div>
	<div class="grey"></div>
	<div class="pink"></div>
	<div style="clear:both"></div>
</div>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы