4 дописи з тегом

поПрикладу

/core.php, line 1
Error 2: Use of undefined constant k - assumed 'k' (this will throw an Error in a future version of PHP)

/core.php, line 1
Error 2: Use of undefined constant k - assumed 'k' (this will throw an Error in a future version of PHP)

/core.php, line 1
Error 2: Use of undefined constant k - assumed 'k' (this will throw an Error in a future version of PHP)

/core.php, line 1
Error 2: Use of undefined constant k - assumed 'k' (this will throw an Error in a future version of PHP)

Flat

Flat повсюди. Flat — це просто. Flat — це модно.

Приклади робіт:

Інші статті про flat можна знайти і почитати самостійно.

Рекомендую почитати і подивитись: MAD RABBIT та Flatingo.

 
Перший розділ In Flat:

2019   Adobe Illustrator   дизайн   поПрикладу

Ізометрія

Що таке ізометрія можна глянути тут.

Я ж в свою чергу хочу лише показати прості приклади того, які роботи можна отримувати за допомогою ізометрії:

На YouTube є багато відеоуроків про те, як створювати ізометрію в Adobe Illustrator. Також раджу почитати, подивитися і послухати ілюстратора Mad Rabbit.

P.S. Навчився створювати ізометрію тут:

Створювати ізометрію за допомогою вбудованого інструменту 3D не варто, тому що будуть проміжки:

2019   Adobe Illustrator   авторське   дизайн   поПрикладу

Розмиття для блока

Це просто прекрасно. Отримуємо блок, у якого розмитий фон.


index.html

<html>
	<head> 
		<title> Blur </title>
		<link rel="stylesheet" href="style.css">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body>
		<main>
			<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt architecto possimus nihil quo facilis harum, assumenda illo corporis repudiandae rem provident error qui fuga et porro laboriosam atque est debitis?
			<footer><cite>Unnamed</cite></footer>
			</blockquote>
		</main>
	</body>
</html>


style.css

body {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  font: 150%/1.6 Baskerville, Palatino, serif;
  height: 200vh;
}

main::before {
  background: url("https://avatanplus.com/files/resources/original/57526cb3cfeab15519f89e8c.jpg") 0 / cover fixed;
  background: url("http://hwork.net/files/bg.jpg") 0 / cover fixed;
}

body{
  background: url("http://hwork.net/files/bg.jpg") 0 / cover fixed; 
}

main {
  position: relative;
  margin: 0 auto;
  padding: 1em;
  max-width: 23em;
  background: hsla(0, 0%, 100%, .25) border-box;
  overflow: hidden;
  border-radius: .3em;

}

main::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: -30px;
  z-index: -1;
  -webkit-filter: blur(20px);
  filter: blur(20px);
}

Сирцеві файли:
index.html
style.css

2019   css   html   верстання   поПрикладу

Повторюємо дизайн JetBrains

Дана компанія створює не лише прекрасні IDE, а й представлення та дизайн своїх продуктів, елементів фірмового стилю.

Приклади дизайну:

Прекрасно. Все засновано на градієнтах та переходах. Можна спробувати повторити.
Для того, щоб вибрати самі смачні кольори, я скористуюсь кольоровою системою Material Design.

Повторити першу роботу не важко:

Спочатку створюємо еліпси різних кольорів і розмірів. Далі виділяємо їх всіх, вибираємо інструмент Перехід (w) і по черзі з'єднуємо. На наступному кроці додаємо чорний квадрат і центруємо все відносно монтажної області.

Тепер спробуємо зробити і так, як у другій роботі:

Суть така ж сама, як і у попередньому прикладі, але еліпси потрібно витягнути за межі монтажної області. Треба ще додати еліпс і радіальним градієнтом, який іде від жовтого кольору до прозорого.

Далі по списку різноманітні переходи з незвичайними формами:

Нічого складного. Потрібно просто визначити форму за допомогою контура, потім створити перехід. Далі в меню Об'єкт > Перехід > Замінити траєкторію.

Останній приклад розглядатися не буде, тому що там ідуть ті ж самі переходи, але ще для кожного з них визначається прозорість. Дуже яскраве, уміле поєднання кольорів в останньому прикладі.

Мої кольори можуть відрізнятися від оригінальних, тому що я створював все в іншій кольоровій палітрі.Не все могло зійтись на 100%, але у мене і не було мети скопіювати все.

2019   Adobe Illustrator   авторське   градієнт   дизайн   поПрикладу