I am making pure css editor.
Try to here . https://css.easylogic.studio
Let’s take a look at the new CSS Editor.
This editor is for editing CSS Gradient. So basically, all the functions are controlled by CSS. The tool is able to fill in the more convenient functions and complete the final result.
Now I want to introduce some features.
Editing CSS Layer
Div element can be used as a layer type. The image below shows a “border-radius” setting of 70px.
The layer tree on the left side shows the setting information of the selected layer on the right side.
There are tabs such as Page, Property, Fill, Text, Shape, Transform, 3D, and CSS. Each tab has many UIs that can be set at Layer level.
Page Tab
Page Tab has the setting of the page area to be displayed at the rear most end. It is usually used to determine the size of the area to be drawn. The clip function allows you to make objects invisible outside the area.
3D, Perspective, OriginX, and Origin Y are settings for giving 3D effects. I will explain in detail next.
Property Tab
You can set the most basic properties of the layer.
- Background color
- Name, ID, CLASS
- Width, Height, X, Y
- Rotate, Opacity, Blend Mode
- Border Width, Radius
It’s intuitive, so you can get it right when you touch the tool.
In the case of Rotate, the selected area remains and only the object rotates. This will be explained later on the Transform tab.
Fill Tab
The Fill Tab has settings for filling the layer with colors.
BoxShadow, Filter, and Backdrop Filter.
BoxShadow has a similar configuration to the UI in Chrome Devtool and can be applied by configuring multiple buttons at the same time by pressing the plus button.
The individual colors used in BoxShadow are applied by clicking on the color and setting the color in the upper color picker.
The Backdrop Filter is a filter-like property that gives you something like the background transparency effect of iOS.
Text Tab
The Text Tab controls the settings for the Text to be placed in the Layer.
There are basic settings such as Text Color, Font Size, Font Weight, Size and Line Height, and an input form to input text directly.
Finally, you can apply Text Shadow and have a UI similar to Box Shadow. You can add as many as you like.
The only text option clips text. Let’s look at the image below. Clipping is discussed in more detail below.
Shape Tab
The Shape Tab is where you can set the clip-path for the layer.
The shapes that can be applied to the clip-path include five shapes: circle, ellipse, inset, polygon, and svg.
For other shapes except SVG, editor is supported. Below is a polygon type editor. Each editor is discussed in more detail below.
Transform Tab & 3D Tab
Let’s take a look at Transform and 3D as the value of one property, transform.
You can set properties for the 2D transform that css has. This applies to the transform attribute, which can change the way the original object’s position is left intact.
You can set Rotate, Scale, SkewX, SkewY, TranslateX, and TranslateY properties for 2D conversion.
You can also set the 3D format function in the transform settings.
Settings for 3D are preserve-3d, Perspective, RotateX, RotateY, RotateZ, ScaleX, ScaleY, ScaleZ, TranslateX, TranslateY, and TranslateZ.
CSS Tab
So far, the CSS Tab has the ability to convert the properties of one layer into CSS code.
Especially, since the changed setting values are applied directly in the editing UI, it is possible to immediately see what kind of property I am currently changing.
So far, we’ve covered the default settings for Layer. (At present, it is only DIV, but I wonder if I can set various HTML tags (image, video, etc …) afterwards.)
Editing Gradient
Now let’s look at the Gradient function, which is created by tilting my heart.
In fact, I tried to create a Gradient editor but it was became the CSS Editor. Ahh
Add Gradient
Gradient is defined as Background Image type in CSS. linear-gradient, radial-gradient, and conic-gradient. So basically you need a layer.
The first time you access https://css.easylogic.studio, I’ve created a red linear gradient on the base layer to make it easier to use.
Now let’s put a real Gradient.
Select Gradient from the tab on the left. Here are some things you can do to set the background-image property.
Select the desired gradient and look at the main screen.
Image addition is currently being created. If you click on it, you are ready to put the image, so please write it later. Note that the images in the image icons are also created using the gradient function.
All of the icons used throughout the site were created using the gradient feature.
Let’s look at repeater-linear in Linear.
A linear-gradient with the same interval repeats entered. Now you can see some UIs to better manipulate the gradient.
Select image
Select color stop
Drag control for linear gradient
The left box allows you to move the position of the background-image and the right box allows you to adjust the angle of the linear-gradient. I will not explain. Let’s turn around.
So far, it was a simple UI introduction. On the next page, I will create various gradients.
If you want to make CSS Gradient easily, please use this editor.
gradient sample: https://www.easylogic.studio
github: https://github.com/easylogic/css
