Сделать сайт интереснее: учимся создавать анимацию в css3

Анимация часов с использованием HTML CSS

1388

30

4

00:07:05

03.09.2020

#html#css#js#2020

Анимация часов с использованием CSS
Анимация часов с использованием HTML CSS
Учебное пособие по анимации часов на чистом CSS
Руководство по CSS анимации часов
CSS
часы
HTML CSS часы
CSS-часы Анимация
Анимированные часы
Анимированные часы только с использованием HTML CSS
Анимированные часы в HTML CSS
CSS-часы Анимация
CSS анимация
Учебник по CSS-анимации
Учебник по HTML CSS Animation
CSS анимации
Анимация с использованием CSS
анимация в CSS

Clock Animation using CSS
Clock Animation using HTML CSS
Clock Animation Pure CSS Tutorial
Clock Animation CSS tutorial
CSS clock
HTML CSS clock
CSS clock Animation
Animated clock
Animated clock using HTML CSS only
Animated clock in HTML CSS
CSS clock Animation
CSS Animation
CSS Animation tutorial
HTML CSS Animation tutorial
Animation CSS
Animation using CSS
animation in CSS

Что такое теневой DOM?

Теневой DOM подобен обычному DOM за исключением того, что узлы (nodes) в теневом DOM принадлежат не основному дереву документа, а конкретному его фрагменту. Это дает программистам возможность инкапсуляции, задания скриптов и стилей при создании модульных компонентов. Если вы когда-то использовали HTML5 элемент и задумывались, где спрятан код его элементов управления — значит вы уже сталкивались с теневым DOM.

В примере с , контент связанного элемента дублируется во фрагмент документа, который располагается в . В данном случае называется теневым хостом (Shadow Host).

Итак, содержимое (клон или копия любого ссылающегося элемента) присутствует в теневом фрагменте документа.

Другими словами, содержимое там есть, но его не видно. Оно такое же как и содержимое обычного DOM, но вместо того, чтобы быть доступно на высоком уровне («high-level» DOM), оно копируется в определенный фрагмент документа в . 

Возможно сейчас вы задумались, можно ли увидеть эти скрытые части документа? Да, это возможно с помощью инструментов разработчика Chrome. (В Firefox пока нельзя). Итак, для того чтобы включить просмотр теневого DOM, нужно в основных настройках (вкладка General) активировать соответствующий флаг (Show user agent shadow DOM). Настройки открываются при клике по значку шестеренки. Подробнее об этом можно почитать здесь.

После того, как мы включили показ теневого DOM, на панели Elements можно увидеть дублированные элементы в виде обычных DOM элементов. На следующем изображении показан пример элемента, ссылающегося на содержимое

Обратите внимание на #shadow-root и его содержимое

С помошью инструментов разработчика Chrome, вы можете проинспектировать содержимое элемента <use> внутри теневого DOM.

Глядя на этот код, вы можете убедиться, что теневой DOM очень похож на обычный DOM, за исключением разного поведения при обработке CSS и JavaScript из главного документа. Есть еще и другие отличия, но здесь о них говорить не будем, т.к. тема слишком обширная. Если хотите узнать больше об этом, рекомендую следующие статьи:

  • Введение в теневой DOM
  • Что за чертовщина этот теневой DOM?
  • Теневой DOM 101
  • Введение в теневой DOM (видео)

Лично я, учитывая насколько ограничены мои взаимодействия с теневым DOM, думаю о нем как об обычном DOM кроме случаев обработки стилей через CSS (и JavaScript). Вся суть элемента заключается в возможности создания различных «копий» элемента, но во многих случаях нам нужно стилизовать каждую копию по-разному. Например представьте логотип в двух стилях (инвертированные цветовые темы), или разноцветные иконки, каждая из которых имеет свою цветовую тему. И конечно мы ожидаем, что сможем сделать это с помощью CSS.

Но как мы уже говорили ранее, содержимое теневого DOM нельзя стилизовать так же, как для обычного. Но тогда как нам быть? Мы не можем написать что-то вроде:

потому что не имеем доступа обычных CSS селекторов к теневому DOM.

Есть , которые позволяют «проникнуть» в теневой DOM, чтобы применить стили к узлам внутри него, но эти селекторы не только имеют , но и очень ограничены по сравнению с обычными CSS селекторами. Кроме того, нам хочется более простого способа для стилизации содержимого без необходимости «пачкать руки» в специфических особенностях теневого DOM. Мы просто хотим использовать CSS и SVG. 

Чтобы этого добиться и получить немного больше контроля над процессом стилизации, мы должны думать под другим углом. И начнем с возможностей наследования в CSS.

Drawing

First step’s first—drawing. The drawings above were done in Illustrator so for this guide, I’ll be referencing it. Illustrator is also great for saving as SVG.

Size the artboard. Because we’ll be making the SVG responsive, actual size doesn’t really matter, but proportion does. Position the images on the artboard as it would look in the first frame of the animation.

Separate the parts of your drawing into layers and groups (like you would in Photoshop), especially if any of them are going to be animated. (I’ll further explain why later, but basically this will help you identify the components of your drawing in the markup of the SVG)

If you’ve added text with the Text Tool, convert them into outlines (if the user does not have the font installed, it’ll render in an unpredictable manner. By converting them into outlines, they’re converted into shapes and the font dependency is eliminated). Select the text, then from the menu, .

Make Awesome SVG Animations with CSS // 7 Useful Techniques

428568

24877

359

00:12:20

26.03.2021

Learn 7 useful SVG animation techniques to make beautiful graphics for your website. In this tutorial, we’ll build two different SVGs from scratch and animate them CSS. Source code: 🤍

00:00 What we’re building
00:42 What is an SVG?
02:22 1. Chrome Animation Inspector
03:11 2. Drawing Groups
05:10 3. Duotone CSS Variables
06:30 4. Transition Animations
07:41 5. JS events
08:36 6. Keyframe Animations
10:11 7. Animation Staggering

#css #animation #tutorial

Also see…

SVG in 100 Seconds 🤍
CSS Keyframe Animation 🤍
SVG Docs 🤍

Install the quiz app

iOS 🤍
Android 🤍

Upgrade to Fireship PRO at 🤍
Use code lORhwXd2 for 25% off your first payment.

My VS Code Theme

— Atom One Dark
— vscode-icons
— Fira Code Font

Примеры [ править ]

Этот раздел, возможно, содержит оригинальные исследования . Пожалуйста, улучшите его , проверив сделанные утверждения и добавив встроенные цитаты . Заявления, содержащие только оригинальные исследования, следует удалить. ( Май 2019 г. ) ( Узнайте, как и когда удалить этот шаблон сообщения )

Следующие ниже фрагменты кода демонстрируют три метода создания анимированных изображений SVG в совместимых браузерах. Соответствующие части выделены желтым. Щелкните миниатюры изображений, чтобы просмотреть их анимированные версии.

SVG-анимация с использованием SMIL править

<! DOCTYPE svg PUBLIC "- // W3C // DTD SVG 1.1 // EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg  version = "1.1"  xmlns = "http://www.w3.org/2000/svg"  xmlns: xlink = "http://www.w3.org/1999/xlink" width = "100%"  height = "100%"  viewBox = " -4-4 8 8" > <title> SVG-анимация с использованием SMIL </title> <circle  cx = "0"  cy = "1"  r = "2"  stroke = "red"  fill = "none" > <animateTransform attributeName = "преобразовать" attributeType = "XML" type = "вращать" from = "0" to = "360" begin = "0 с" dur = "1 с" repeatCount = "неопределенный" /> </circle></svg>

SVG-анимация с использованием CSS править

<! DOCTYPE svg PUBLIC "- // W3C // DTD SVG 1.1 // EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg  version = "1.1"  xmlns = "http://www.w3.org/2000/svg"  xmlns: xlink = "http://www.w3.org/1999/xlink" width = "100%"  height = "100%"  viewBox = " -4-4 8 8" > <title> SVG-анимация с использованием CSS </title> <style  type = "text / css" > @keyframes rot_kf { от {преобразование: поворот (0deg); } чтобы {преобразовать: повернуть (360 градусов); } } .rot {анимация: rot_kf 1s линейная бесконечность; } </style> <circle  class = "rot"  cx = "0"  cy = "1"  r = "2"  stroke = "blue"  fill = "none" /></svg>

SVG-анимация с использованием ECMAScript править

<! DOCTYPE svg PUBLIC "- // W3C // DTD SVG 1.1 // EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg  version = "1.1"  xmlns = "http://www.w3.org/2000/svg"  xmlns: xlink = "http://www.w3.org/1999/xlink"  width = "100%"  высота = "100%"  viewBox = " -4-4 8 8"  onload = "повернуть (evt)" > <title> SVG-анимация с использованием ECMAScript </title> <script  type = "text / ecmascript" > function rotate (evt) { var object = evt.target.ownerDocument.getElementById ('гниль'); setInterval (function () { var now = новая дата (); var миллисекунды = now.getTime ()% 1000; вар градусов = миллисекунды * 0,36; // 360 градусов за 1000 мс object.setAttribute ('преобразование', 'поворот (' + градусы + ')'); }, 20); } </script> <  идентификатор круга = "гниль"  cx = "0"  cy = "1"  r = "2"  stroke = "green"  fill = "none" /></svg>

Хотя приведенный выше пример работает, это не оптимальная реализация, анимация ограничена 50 кадрами в секунду (FPS). Использование обеспечивает лучшую производительность и может достигать 60 FPS:

<! DOCTYPE svg PUBLIC "- // W3C // DTD SVG 1.1 // EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg  version = "1.1"  xmlns = "http://www.w3.org/2000/svg"  xmlns: xlink = "http://www.w3.org/1999/xlink"  width = "100%"  высота = "100%"  viewBox = " -4-4 8 8"  onload = "init ()" > <title> SVG-анимация с использованием requestAnimationFrame () </title> <сценарий> var объект; function init () { объект = документ.getElementById ('гниль');  window.requestAnimationFrame (поворот); } функция rotate (timestamp) { var миллисекунды = отметка времени% 1000; вар градусов = миллисекунды * 0,36; // 360 градусов за 1000 мс object.setAttribute ('преобразование', 'поворот (' + градусы + ')'); window.requestAnimationFrame (поворот); } </script> <circle  id = "rot"  cx = "0"  cy = "1"  r = "2"  stroke = "green"  fill = "none" /></svg>

Атрибуты SMIL для идентификации целевого атрибута

Ниже приведены атрибуты анимации, которые определяют целевой атрибут для данного целевого элемента, значение которого изменяется со временем. указывает имя целевого атрибута. Префикс XMLNS может использоваться для обозначения XML пространство имен для атрибута. Префикс будет интерпретирован в рамках текущего элемента анимации.

определяет пространство имен, в котором определены целевой атрибут и связанные с ним значения. указывает, что значение «attributeName» — это имя свойства CSS, которое в данной спецификации определено как анимируемое. указывает, что значение «attributeName» — это имя атрибута XML, определенного в пространстве имен XML по умолчанию для целевого элемента. В этой спецификации атрибут должен быть определен как анимируемый. Значение по умолчанию — «авто». Реализация должна соответствовать «имени атрибута» атрибуту целевого элемента. Реализация должна сначала выполнить поиск в списке свойств CSS для соответствующего имени свойства, а если ничего не найдено, выполнить поиск элемента в пространстве имен XML по умолчанию.

В MediaWiki Программное обеспечение wiki автоматически генерирует статические неанимированные эскизы изображений SVG. Просмотр фактического изображения .svg с каждой соответствующей страницы описания покажет его анимацию в совместимом браузере.

Создание интерактивной анимации HTML5

Перед рассмотрением приложений для HTML5 необходимо уделить внимание тому, как вообще создаются веб-страницы на этом языке. Существует два разных способа формирования динамического кода

Вы можете использовать JavaScript и JQuery или код CSS3 (Cascading Style Sheet v3) для получения одинаковых результатов. CSS3 и JavaScript, являясь приложениями для редактирования скриптов, выполняют задачи каждый по-своему. CSS3 позволяет задать параметры страницы, такие как фон, цвет текста, настройки динамического взаимодействия с пользователем, прямо в HTML файле. JavaScript выполняет практически те же функции, но предлагает более широкий спектр команд, чем CSS3, на довольно простом синтаксисе.

Веб-дизайнерам, работающим с CSS2, будет легко освоиться с синтаксисом и свойствами CSS3. Рабочие файлы СSS3 обычно меньше по размеру, чем JavaScripts, и ими легче управлять. Использование JavaScript предполагает, что будут существовать как минимум два отдельных файла JQuery, которые необходимо корректировать вместе.

Ещё одним большим преимуществом использования кода CSS3 является то, что контент сайта не будет спрятан глубоко в коде JavaScript, который не индексируется поисковыми службами. Обладая необходимой интерактивностью, страницы, написанные на JavaScript, могут содержать открытый код, но при этом нужно помнить, что некоторые инструменты HTML5, если не уделить этому внимания, будут автоматически помещать определенную часть информации в файлы JavaScript. При использовании CSS3 весь контент можно просмотреть прямо на HTML странице.

Существенным недостатком CSS3 является совместимость с браузерами. На данный момент работу с кодом CSS3 поддерживает только IE9, Firefox 8 и 9, Chrome, начиная с версии 15 и Safari 5.1 и выше. Неудивительно, что Chrome и Safari стараются поддерживать совместимость с CSS3: компании Google и Apple хотят полностью отказаться от использования технологии Flash на своих браузерах для мобильных и настольных устройств. Кроме этого, анимация CSS3 является единственной технологией, которая стабильно работает в операционных системах Android, iOS, BlackBerry OS6.

Приложения, о которых пойдет речь, позволят разработчикам создавать интерактивные анимированные веб-страницы HTML5. Для тех, кто занимался сведением страниц Flash или Silverlight, методология и интерфейс этих приложений покажутся знакомыми.

Быстрый обзор структуры SVG, группировки и связывания (переиспользования) элементов в SVG.

Существует 4 основных элемента, которые используются для определения, задания структуры и связей в SVG коде. Эти элементы делают переиспользование кода проще, сохраняя его чистым и читаемым.

Вот эти элементы: , , и .

Элемент (короткое от «group») используется для логической группировки набора связанных графических элементов. С точки зрения графических редакторов, таких как Adobe Illustrator, элемент имеет ту же функциональность, как и Group Objects. Можно также представлять группу как слой в графическом редакторе.

Группировка элементов полезна, когда мы хотим применить общий стиль, и особенно, если хотим анимировать группу элементов, сохраняя при этом их относительное расположение.

Элемент применяется для определения элементов, которые будут использоваться позднее. Определение элементов через полезно, когда вы хотите создать своего рода «шаблон», который будет использоваться несколько раз в документе. Элементы, определенные внутри не отображаются, пока не будут «вызваны» где-то в документе.

Элемент сочетает в себе преимущества и и , т.к. может использоваться в качестве группировки элементов, определяющих шаблон, на который можно ссылаться из любого места документа. В отличие от , как правило, не используются для определения шаблонов, а в основном используется, чтобы определить символы (например иконки), на которые имеются ссылки по всему документу.

Элемент имеет важное преимущество: он принимает атрибут , который позволяет масштабироваться внутри любого вьюпорта, в котором происходит отрисовка. Элемент используется для ссылки на другие элементы, определенные где-то в документе

Он позволяет повторно использовать существующие элементы, давая вам возможность, аналогичную копированию-вставке в графическом редакторе. Он может применяться для переиспользования как отдельного элемента, так и группы, заданной через , или

Элемент используется для ссылки на другие элементы, определенные где-то в документе. Он позволяет повторно использовать существующие элементы, давая вам возможность, аналогичную копированию-вставке в графическом редакторе. Он может применяться для переиспользования как отдельного элемента, так и группы, заданной через , или .

Для использования элемента передаем ссылку на него внутри атрибута, а также устанавливаем и . Вы можете применять стили к , и эти стили каскадно применятся к содержимому элемента.

Но откуда берется содержимое ? Где происходит клонирование? И как CSS работает с этим содержимым?

Прежде чем отвечать на эти вопросы, стоит упомянуть несколько статей для лучшего понимания этих элементов и атрибута , который использует :

  • Структурирование, группировка и привязка в SVG — элементы <g>, <use>, <defs> и <symbol>
  • Понимание координатной системы SVG (часть 1): viewport, viewBox и PreserveAspectRatio

SVG Animation With Text Tutorial | HTML CSS

489059

21913

786

00:18:53

05.12.2018

Check out my courses and become more creative!
🤍

Today we are going to create an SVG animation using stroke dash array and stroke dash offset to create some really cool effects.

We only need HTML and CSS for this effect. You can create the shapes and texts with Figma, Adobe XD or Adobe Illustrator.

Let me know if you want to see more complex SVG animations with tools like bodymoving/lottie.

Try to get creative and apply the path animations to different kinds of texts, shapes,etc.

Microphones I Use
Audio-Technica AT2020 — 🤍 (Amazon)
Deity V-Mic D3 Pro — 🤍 (Amazon)
BEHRINGER Audio Interface — 🤍 (Amazon)

Camera Gear
Fujifilm X-T3 — 🤍 (Amazon)
Fujinon XF18-55mmF2.8-4 — 🤍 (Amazon)

PC Specs
Kingston SQ500S37/480G 480GB — 🤍 (Amazon)
Gigabyte GeForce RTX 2070 — 🤍 (Amazon)
AMD Ryzen 7 2700X — 🤍 (Amazon)
Corsair Vengeance LPX 16GB — 🤍 (Amazon)
ASRock B450M PRO4 — 🤍 (Amazon)
DeepCool ATX Mid Tower — 🤍 (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K — 🤍 (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k — 🤍 (Amazon)
Logitech G305 — 🤍 (Amazon)
Logitech MX Keys Advanced — 🤍 (Amazon)

DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.

-~-~~-~~~-~~-~-
Follow my Twitter:
🤍

Please watch: «Should You Become A Software Engineer?»
🤍

-~-~~-~~~-~~-~-

Exporting SVGs From Graphics Editors And Optimizing Them

The three most popular vector graphics editors are:

  1. Adobe Illustrator,
  2. Inkscape,
  3. Sketch.

Adobe Illustrator is a paid application from Adobe. It is a highly popular editor, with a nice UI and many capabilities that make it the favorite of most designers.

Inkscape is a popular free alternative. Even though its UI is not as nice as Illustrator’s, it has everything you need to work with vector graphics.

Sketch is a Mac OS X-only graphics app. It is not free either, but it has been making the rounds among designers lately and gaining popularity, with a lot of resources and tools being created recently to improve the workflow.

Choose any editor to create your SVGs. After choosing your favorite editor and creating an SVG but before embedding it on a web page, you need to export it from the editor and clean it up to make it ready to work with.

I’ll refer to exporting and optimizing an SVG created in Illustrator. But the workflow applies to pretty much any editor, except for the Illustrator-specific options we’ll go over next.

To export an SVG from Illustrator, start by going to “File” → “Save as,” and then choose “.svg” from the file extensions dropdown menu. Once you’ve chosen the .svg extension, a panel will appear containing a set of options for exporting the SVG, such as which version of SVG to use, whether to embed images in the graphic or save them externally and link to them in the SVG, and how to add the styles to the SVG (by using presentation attributes or by using CSS properties in a element).

The following image shows the best settings to choose when exporting an SVG for the web:

The reasons why the options above are best are explained in Michaël Chaize’s excellent article “Export SVG for the Web With Illustrator CC.”

Whichever graphics editor you choose, it will not output perfectly clean and optimized code. SVG files, especially ones exported from editors, usually contain a lot of redundant information, such as meta data from the editor, comments, empty groups, default values, non-optimal values and other stuff that can be safely removed or converted without affecting the rendering of the SVG. And if you’re using an SVG that you didn’t create yourself, then the code is almost certainly not optimal, so using a standalone optimization tool is advisable.

Several tools for optimizing SVG code are out there. Peter Collingridge’s SVG Editor is an online tool that you input SVG code into either directly or by uploading an SVG file and that then provides you with several optimization options, like removing redundant code, comments, empty groups, white space and more. One option allows you to specify the number of decimal places of point coordinates.

(View large version)

Peter’s optimizer can also automatically move inline SVG properties to a style block at the top of the document. The nice thing about it is that, when you check an option, you can see the result of the optimization live, which enables you to better decide which optimizations to make. Certain optimizations could end up breaking your SVG. For example, one decimal place should normally be enough. If you’re working with a path-heavy SVG file, reducing the number of decimal places from four to one could slash your file’s size by as much as half. However, it could also entirely break the SVG. So, being able to preview an optimization is a big plus.

Peter’s tool is an online one. If you’d prefer an offline tool, try SVGO (the “O” is for “optimizer”), a Node.js-based tool that comes with a nice and simple drag-and-drop GUI. If you don’t want to use an online tool, this one is a nice alternative.

The following screenshot (showing the path from the image above) is a simple before-and-after illustration of how much Peter’s tool optimizes SVG.

Notice the size of the original SVG compared to the optimized version. Not to mention, the optimized version is much more readable.

After optimizing the SVG, it’s ready to be embedded on a web page and further customized or animated with CSS.

Debug

Для облегчения отладки взгляните на   атрибутов вашего объекта Vivus. Это содержит отображение вашей анимации. Если вы используете современный браузер, я рекомендую

, чтобы получить хороший вывод массива, который облегчит вашу отладку.

JavaScript

const logo = new Vivus(‘myLogo’, { type: ‘scenario-sync’ });
// Свойство ‘map’ содержит все отображения SVG
console.table(logo.map);

1
2
3

constlogo=newVivus(‘myLogo’,{type’scenario-sync’});

// Свойство ‘map’ содержит все отображения SVG

console.table(logo.map);

Демо на русском
Бонус:
https://msurguy.github.io/triangles/

Вам должно быть интересно Создание эффекта раскрывания (Reveal Effects) при прокрутке с помощью aos.js

Примеры использования SVG волны для оформления перехода между секциями

1. Использование SVG волны для оформления нижней границы элемента.

<style>
.banner {
  position: relative;
}
.banner__content {
  background: url('background.jpg');
  background-size: cover;
}
.banner svg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.banner svg path {
  fill: #fff;
}
</style>

<!-- BANNER -->
<section class="banner">
  <div class="banner__content">
    <h1>Добро пожаловать на сайт</h1>
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1440 180"><path d="M0 43.418h288c96 0 192 0 288 26.7 96 26.3 192 80.3 288 69.3s192-85 288-117.3c96-31.7 192-21.7 240-16l48 5.3V180H0z" /></svg>
</section>

В этом примере мы достигли данный эффект следующим образом:

  1. Расположили SVG изображение над элементом относительно его нижней границы. Чтобы это выполнить мы установили элементу абсолютное позиционирование, а – относительное. После этого положение определили с помощью CSS свойств и , а размер — посредством .
  2. Скрыли часть картинки, над которой расположен . Для этого мы просто залили его контур цветом фона страницы, в данном случае .

2. Создание перехода с использованием нескольких волн.

<style>
.banner__content {
  background: linear-gradient(180deg, #7125ce 0%, #150044 100%);
  padding-top: 8%;
  padding-bottom: 8%;
}
.banner svg {
  width: 100%;
  fill: #150044;
}
</style>

<!-- BANNER -->
<section class="banner">
<div class="banner__content">...</div>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1280 140"><path d="M0 51.76c36.21-2.25 77.57-3.58 126.42-3.58 320 0 320 57 640 57 271.15 0 312.58-40.91 513.58-53.4V0H0z" fill-opacity=".2"/><path d="M0 24.31c43.46-5.69 94.56-9.25 158.42-9.25 320 0 320 89.24 640 89.24 256.13 0 307.28-57.16 481.58-80V0H0z" fill-opacity=".8"/><path d="M0 0v3.4C28.2 1.6 59.4.59 94.42.59c320 0 320 84.3 640 84.3 285 0 316.17-66.85 545.58-81.49V0z"/></svg>
</section>

3. Пример, в котором волне добавлена анимация с помощью CSS

Рейтинг
( Пока оценок нет )
Editor
Editor/ автор статьи

Давно интересуюсь темой. Мне нравится писать о том, в чём разбираюсь.

Понравилась статья? Поделиться с друзьями:
Люкс-хост
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: