USER MANUAL
Custom CSS

15min
Sometimes it’s enough to simply style existing elements from CCS properties that we don’t support directly. It’s best to use the CSS field in the style inspector for this:
﻿
﻿
CSS properties entered here will end up in the same CSS rules as the CSS generated by Antetype. So, the properties will behave like those generated by Antetype. States, widgets etc. everything works the same.
The simplest example would be a basic cell and the generated CSS (schematic, the CSS selectors are a little different): We enter the following into the CSS field in the inspector:
Text
|
text-transform: uppercase;
-webkit-text-decoration: underline dotted red;
text-transform: uppercase;
-webkit-text-decoration: underline dotted red;
﻿
The generated CSS then looks like this:
CSS
|
#zelle {
    /* created by Antetype: */
    background-color: red;
    width: 20px;

    /* then you have the extra properties: */
    text-transform: uppercase;
    -webkit-text-decoration: underline dotted red;
}
#zelle {
    /* created by Antetype: */
    background-color: red;
    width: 20px;

    /* then you have the extra properties: */
    text-transform: uppercase;
    -webkit-text-decoration: underline dotted red;
}
﻿
As you can see from the example, you have to make sure that you use CSS that works in the desired browsers. The values entered are always written at the end so it’s possible to overwrite generated CSS (but you should know what you’re doing).
Note
!important is currently not supported. No syntax validation is undertaken. For technical reasons, the block isn’t simply copied in as text, the CSS style object is changed. This means that you can only currently use properties that are supported by Safari/WebKit.
﻿
﻿
﻿
Useful Properties
Text Transform
Text
|
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
﻿
﻿
Text Overflow
For this to work, the text must be inside the HTML field and not in the text field.
Text
|
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
﻿
﻿
Backdrop Filter
Text
|
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
﻿
﻿
Filter
Text
|
filter: drop-shadow(-5px -5px 17px rgba(0,0,0,0.42));
-webkit-filter: drop-shadow(-5px -5px 17px rgba(0,0,0,0.42));
-moz-filter: drop-shadow(-5px -5px 17px rgba(0,0,0,0.42));
filter: drop-shadow(-5px -5px 17px rgba(0,0,0,0.42));
-webkit-filter: drop-shadow(-5px -5px 17px rgba(0,0,0,0.42));
-moz-filter: drop-shadow(-5px -5px 17px rgba(0,0,0,0.42));
﻿
﻿
User Select
Text
|
user-select: none;
-webkit-user-select: none;
user-select: none;
-webkit-user-select: none;
﻿
﻿
Letter Spacing
Text
|
letter-spacing: 3px;
letter-spacing: 3px;
﻿
﻿
Scroll Snap
Text
|
scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
﻿
﻿
Position Sticky
Text
|
position: sticky;
position: -webkit-sticky;
top: 0;
position: sticky;
position: -webkit-sticky;
top: 0;
﻿
﻿
Updated 03 Mar 2023
Did this page help you?
TABLE OF CONTENTS