Недавно я прочитал статью Винсента Дюранда о том, как рисовать изображения, используя один элемент. Статья была очень хорошо продумана, и я определенно рекомендую вам взглянуть. Я подумал, что я возьму эту концепцию рисования изображений, а не ссылки на файлы изображений и применим ее к нашему логотипу Near Infinity. В этом посте я расскажу о 4 различных способах рисования изображений с использованием CSS, HTML и Javascript.
Один элемент с несколькими фонами
Это в основном метод, описанный в статье Винсента. Чтобы нарисовать логотип Near Infinity, я взял один делитель и дал ему 4 фона (по одному для каждого из овалов). Каждый фон представляет собой радиальный градиент, который определяет его цвет и форму. Каждый фон затем позиционируется и измеряется. Результат легко масштабируется в зависимости от размера шрифта.
HTML:
<div id="logo"> </div>
CSS:
#logo {
position: relative;
font-size: 60px;
width: 4em;
height: 2em;
background: -moz-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%),
-moz-radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 40%,transparent 41%,transparent 100%),
-moz-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%),
-moz-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 40%,transparent 41%,transparent 100%);
background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%),
-webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 40%,transparent 41%,transparent 100%),
-webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%),
-webkit-radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 40%,transparent 41%,transparent 100%);
background: radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%),
radial-gradient(center, ellipse, rgba(0, 0, 0, 1) 40%,transparent 41%,transparent 100%),
radial-gradient(center, ellipse, rgba(255, 255, 255, 1) 40%,transparent 41%,transparent 100%),
radial-gradient(center, ellipse, rgba(237, 128, 39, 1) 40%,transparent 41%,transparent 100%);
background-position: 0.3em 0.75em,
-0.6em 0.35em,
1.4em 0.6em,
1.05em 0.15em;
background-size: 1.7em 1.0em,
3em 1.9em,
1.7em 1.0em,
3em 1.9em;
background-repeat: no-repeat;
}
В дополнение к использованию нескольких фонов вы также можете использовать несколько теней. У Джошуа Хибберта есть хороший пост в блоге на эту тему. Vincent Durand также создал one-div.com, который представляет собой коллекцию различных иконок, созданных с использованием одного элемента div.
Несколько элементов
В этом случае я создаю структуру логотипа в HTML и стилизую каждый элемент в соответствии с тем, как он выглядит. Это кажется мне наиболее естественным подходом (один элемент на геометрическую форму). Когда вы смотрите на HTML, а затем на CSS, он имеет гораздо больше смысла, чем первый пример с несколькими фонами. Этот метод также облегчает, если вы хотите анимировать определенные части вашего изображения. Вместо того, чтобы перерисовывать все фоны в первом методе, вы можете анимировать здесь отдельный элемент, оставляя остальные нетронутыми.
HTML:
<div id="logo">
<div id="black" class="leaf">
<div class="eye">
</div>
</div>
<div id="orange" class="leaf">
<div class="eye">
</div>
</div>
</div>
CSS:
#logo {
font-size: 60px;
width: 3.5em;
height: 2em;
}
#logo .leaf {
width: 1.7em;
height: 1em;
border-radius: 0.85em / 0.5em;
position: absolute;
}
#logo .leaf .eye {
width: 1em;
height: 0.6em;
border-radius: 0.5em / 0.3em;
background-color: white;
}
#logo #black {
background-color: black;
margin-top: 0.25em;
}
#logo #black .eye {
float: right;
margin-top: 0.15em;
margin-right: 0.1em;
}
#logo #orange {
background-color: rgba(237, 128, 39, 1);
margin-left: 1.62em;
}
#logo #orange .eye {
float: left;
margin-top: 0.25em;
margin-left: 0.1em;
}
Джефф Баттертон использовал этот метод, чтобы нарисовать iPhone .
холст
Другим методом будет использование HTML5 canvas. Ключевое отличие здесь в том, что здесь нет CSS. Следовательно, вы теряете возможность использовать CSS-анимацию и медиа-запросы, чтобы легко манипулировать изображениями. Вы всегда можете сделать то же самое, войдя в Javascript, но теперь вы поддерживаете стиль своей страницы на двух носителях.
HTML:
<canvas id="logo-canvas" width="250" height="100"> </canvas>
Javascript:
var canvas = document.getElementById('logo-canvas');
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
// Draw black oval
ctx.save();
ctx.fillStyle = "rgba(0, 0, 0, 1)";
ctx.scale(1.75, 1);
ctx.beginPath();
ctx.arc(35, 51, 30, 0, Math.PI*2, false);
ctx.fill();
ctx.closePath();
ctx.restore();
// Draw white oval inside black
ctx.save();
ctx.fillStyle = "rgba(255, 255, 255, 1)";
ctx.scale(1.75, 1);
ctx.beginPath();
ctx.arc(42, 47, 17, 0, Math.PI*2, false);
ctx.fill();
ctx.closePath();
ctx.restore();
// Draw orange oval
ctx.save();
ctx.fillStyle = "rgba(237, 128, 39, 1)";
ctx.scale(1.75, 1);
ctx.beginPath();
ctx.arc(92, 37, 30, 0, Math.PI*2, false);
ctx.fill();
ctx.closePath();
ctx.restore();
// Draw white oval inside orange
ctx.save();
ctx.fillStyle = "rgba(255, 255, 255, 1)";
ctx.scale(1.75, 1);
ctx.beginPath();
ctx.arc(82, 40, 17, 0, Math.PI*2, false);
ctx.fill();
ctx.closePath();
ctx.restore();
}
РЕДАКТИРОВАТЬ: SVG
SVG
Я изначально забыл, наверное, самый крутой из всех методов: SVG. SVG потрясающий, потому что он сочетает в себе лучшее из обоих миров. Вы можете рисовать очень специфическую графику, как в графической программе, но каждая фигура также является элементом HTML, поэтому вы можете манипулировать ею и анимировать ее с помощью CSS.
HTML:
<svg> <ellipse cx="50" cy="51" rx="50" ry="30" fill="rgb(0,0,0)"/> <ellipse cx="145" cy="37" rx="50" ry="30" fill="rgb(237, 128, 39)"/> <ellipse cx="60" cy="47" rx="30" ry="17" fill="rgb(255, 255, 255)"/> <ellipse cx="132" cy="40" rx="30" ry="17" fill="rgb(255, 255, 255)"/> </svg>
Посмотреть демо ( Фото : Джо Фернер )