{"id":16333,"date":"2022-08-18T10:53:36","date_gmt":"2022-08-18T08:53:36","guid":{"rendered":"https:\/\/govie.de\/help\/css-custom-design\/"},"modified":"2022-11-03T11:28:01","modified_gmt":"2022-11-03T10:28:01","slug":"css-custom-design","status":"publish","type":"docs","link":"https:\/\/govie-editor.de\/en\/help\/css-custom-design\/","title":{"rendered":"CSS &#8211; Custom Design"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"16333\" class=\"elementor elementor-16333 elementor-15706\" data-elementor-post-type=\"docs\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-926722d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"926722d\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6215250\" data-id=\"6215250\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-e96789e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e96789e\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-f332082\" data-id=\"f332082\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0cbb207 elementor-widget elementor-widget-heading\" data-id=\"0cbb207\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">CSS - Basics<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-6c60acf elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6c60acf\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-bd4bec4\" data-id=\"bd4bec4\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4acc30f elementor-widget elementor-widget-text-editor\" data-id=\"4acc30f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><b>Cascading<\/b><b> Style<\/b><b> Sheets<\/b>, or CSS for short, is used to customize the appearance of HTML elements without changing their functionality.<\/p>\n<p>  For example, the appearance of a title or button can be changed.<\/p>\n<p>In the example, 2 buttons are created, but only one button is changed using CSS.<\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-b38466c\" data-id=\"b38466c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-06c0476 elementor-widget elementor-widget-text-editor\" data-id=\"06c0476\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"background-color: rgba(0, 106, 255, 0);\">If a class has been assigned to the HTML element, the element can be selected and visually changed using CSS. This class then serves in CSS as a so-called  <\/span><b style=\"background-color: rgba(0, 106, 255, 0);\">Selector:<\/b><\/p>\n<p>An overview of all CSS selectors can be found here: <a href=\"https:\/\/www.w3schools.com\/cssref\/css_selectors.asp\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/www.w3schools.com\/cssref\/css_selectors.asp<\/a><\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-e88a6e8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e88a6e8\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-b9192f8\" data-id=\"b9192f8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ad680d0 elementor-widget elementor-widget-code-highlight\" data-id=\"ad680d0\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <style>\r\n      .button {\r\n        background-color: #4caf50;\r\n        color: white;\r\n        padding: 15px 32px;\r\n        text-align: center;\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <h2>CSS Buttons<\/h2>\r\n    <button>Default Button<\/button>\r\n    <button class=\"button\">Styled Button<\/button>\r\n  <\/body>\r\n<\/html>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-51fb60d\" data-id=\"51fb60d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-37b4dec elementor-widget elementor-widget-html\" data-id=\"37b4dec\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t <div class=\"brlbs-cmpnt-container brlbs-cmpnt-content-blocker\" data-borlabs-cookie-content-blocker-id=\"default\" data-borlabs-cookie-content=\"PGlmcmFtZSBzcmM9Imh0dHBzOi8vY29kZXNhbmRib3guaW8vZW1iZWQvbW9kZXN0LXdhdGVyZmFsbC1oZjBleXg\/Zm9udHNpemU9MTQmYW1wO2hpZGVuYXZpZ2F0aW9uPTEmYW1wO3RoZW1lPWRhcmsiIHN0eWxlPSJ3aWR0aDoxMDAlOyBoZWlnaHQ6NTAwcHg7IGJvcmRlcjowOyBib3JkZXItcmFkaXVzOiA0cHg7IG92ZXJmbG93OmhpZGRlbjsiIHRpdGxlPSJtb2Rlc3Qtd2F0ZXJmYWxsLWhmMGV5eCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGFtYmllbnQtbGlnaHQtc2Vuc29yOyBjYW1lcmE7IGVuY3J5cHRlZC1tZWRpYTsgZ2VvbG9jYXRpb247IGd5cm9zY29wZTsgaGlkOyBtaWNyb3Bob25lOyBtaWRpOyBwYXltZW50OyB1c2I7IHZyOyB4ci1zcGF0aWFsLXRyYWNraW5nIiBzYW5kYm94PSJhbGxvdy1mb3JtcyBhbGxvdy1tb2RhbHMgYWxsb3ctcG9wdXBzIGFsbG93LXByZXNlbnRhdGlvbiBhbGxvdy1zYW1lLW9yaWdpbiBhbGxvdy1zY3JpcHRzIj48L2lmcmFtZT4=\" ><div class=\"brlbs-cmpnt-cb-preset-a\"> <p class=\"brlbs-cmpnt-cb-description\">You are currently viewing a placeholder content from <strong>Default<\/strong>. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.<\/p> <div class=\"brlbs-cmpnt-cb-buttons\"> <a class=\"brlbs-cmpnt-cb-btn\" href=\"#\" data-borlabs-cookie-unblock role=\"button\">Unblock content<\/a> <a class=\"brlbs-cmpnt-cb-btn\" href=\"#\" data-borlabs-cookie-accept-service role=\"button\" style=\"display: none\">Accept required service and unblock content<\/a> <\/div> <a class=\"brlbs-cmpnt-cb-provider-toggle\" href=\"#\" data-borlabs-cookie-show-provider-information role=\"button\">More Information<\/a> <\/div><\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<div class=\"elementor-element elementor-element-00c71bb elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"00c71bb\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-b2d7f93 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b2d7f93\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-f91d429\" data-id=\"f91d429\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-47fed61 elementor-widget elementor-widget-heading\" data-id=\"47fed61\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">CSS in Govie Editor<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-87ff267 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"87ff267\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-13da83a\" data-id=\"13da83a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-007cb12 elementor-widget elementor-widget-text-editor\" data-id=\"007cb12\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>On the left side of the Properties Panel, under Special Effects\/Advanced Visuals, you will find CSS with a small input mask. There you can simply copy the respective CSS snippet into it.<\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-ac1b777\" data-id=\"ac1b777\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-78e8ffa elementor-widget elementor-widget-image\" data-id=\"78e8ffa\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/govie-editor.de\/wp-content\/uploads\/Govie_CSS_Feld.jpg\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"Govie_CSS_Feld\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MTU3NDUsInVybCI6Imh0dHBzOlwvXC9nb3ZpZS1lZGl0b3IuZGVcL3dwLWNvbnRlbnRcL3VwbG9hZHNcL0dvdmllX0NTU19GZWxkLmpwZyJ9\">\n\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"391\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"attachment-large size-large wp-image-15745 lazyload\" alt=\"\" sizes=\"(max-width: 800px) 100vw, 800px\" title=\"\" data-src=\"https:\/\/govie-editor.de\/wp-content\/uploads\/Govie_CSS_Feld-1024x501.jpg\" data-srcset=\"https:\/\/govie-editor.de\/wp-content\/uploads\/Govie_CSS_Feld-1024x501.jpg 1024w, https:\/\/govie-editor.de\/wp-content\/uploads\/Govie_CSS_Feld-300x147.jpg 300w, https:\/\/govie-editor.de\/wp-content\/uploads\/Govie_CSS_Feld-150x73.jpg 150w, https:\/\/govie-editor.de\/wp-content\/uploads\/Govie_CSS_Feld-768x375.jpg 768w, https:\/\/govie-editor.de\/wp-content\/uploads\/Govie_CSS_Feld.jpg 1299w\">\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<div class=\"elementor-element elementor-element-cc96d2f elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"cc96d2f\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-7c65cd5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7c65cd5\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-313553d\" data-id=\"313553d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-519eae3 elementor-widget elementor-widget-heading\" data-id=\"519eae3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">External CSS editor<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-016da2c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"016da2c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-fecb895\" data-id=\"fecb895\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-64f13b3 elementor-widget elementor-widget-text-editor\" data-id=\"64f13b3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>For a short time now, there is an own <a href=\"https:\/\/3dit-tools.s3.eu-central-1.amazonaws.com\/GovieStyleEditor\/index.html\" target=\"_blank\" rel=\"noopener nofollow\">CSS editor<\/a>, with which the CSS can be entered much more comfortably and tested live on the Govie. However, this requires the govie to be shared or published beforehand to create a share link. This sharelink can then be inserted in the CSS editor. At the beginning, one of the templates can be selected to see which property the respective CSS effect changes.<\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-8717762\" data-id=\"8717762\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2a14796 elementor-widget elementor-widget-image\" data-id=\"2a14796\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/govie-editor.de\/wp-content\/uploads\/CSS_Share_DE.jpg\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"CSS_Share_DE\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MTkyMjEsInVybCI6Imh0dHBzOlwvXC9nb3ZpZS1lZGl0b3IuZGVcL3dwLWNvbnRlbnRcL3VwbG9hZHNcL0NTU19TaGFyZV9ERS5qcGcifQ%3D%3D\">\n\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1029\" height=\"533\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"attachment-full size-full wp-image-19221 lazyload\" alt=\"\" sizes=\"(max-width: 1029px) 100vw, 1029px\" title=\"\" data-src=\"https:\/\/govie-editor.de\/wp-content\/uploads\/CSS_Share_DE.jpg\" data-srcset=\"https:\/\/govie-editor.de\/wp-content\/uploads\/CSS_Share_DE.jpg 1029w, https:\/\/govie-editor.de\/wp-content\/uploads\/CSS_Share_DE-300x155.jpg 300w, https:\/\/govie-editor.de\/wp-content\/uploads\/CSS_Share_DE-1024x530.jpg 1024w, https:\/\/govie-editor.de\/wp-content\/uploads\/CSS_Share_DE-150x78.jpg 150w, https:\/\/govie-editor.de\/wp-content\/uploads\/CSS_Share_DE-768x398.jpg 768w\">\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-8668fac elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8668fac\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-5845ba9\" data-id=\"5845ba9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ad379c6 elementor-widget elementor-widget-image\" data-id=\"ad379c6\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/govie-editor.de\/wp-content\/uploads\/CSS_Editor.jpg\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"CSS_Editor\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MTU4MTAsInVybCI6Imh0dHBzOlwvXC9nb3ZpZS1lZGl0b3IuZGVcL3dwLWNvbnRlbnRcL3VwbG9hZHNcL0NTU19FZGl0b3IuanBnIn0%3D\">\n\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1786\" height=\"1060\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"attachment-full size-full wp-image-15810 lazyload\" alt=\"\" sizes=\"(max-width: 1786px) 100vw, 1786px\" title=\"\" data-src=\"https:\/\/govie-editor.de\/wp-content\/uploads\/CSS_Editor.jpg\" data-srcset=\"https:\/\/govie-editor.de\/wp-content\/uploads\/CSS_Editor.jpg 1786w, https:\/\/govie-editor.de\/wp-content\/uploads\/CSS_Editor-300x178.jpg 300w, https:\/\/govie-editor.de\/wp-content\/uploads\/CSS_Editor-1024x608.jpg 1024w, https:\/\/govie-editor.de\/wp-content\/uploads\/CSS_Editor-150x89.jpg 150w, https:\/\/govie-editor.de\/wp-content\/uploads\/CSS_Editor-768x456.jpg 768w, https:\/\/govie-editor.de\/wp-content\/uploads\/CSS_Editor-1536x912.jpg 1536w\">\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<div class=\"elementor-element elementor-element-4e006a2 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"4e006a2\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-1c1a037 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1c1a037\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-abbc38d\" data-id=\"abbc38d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-49cabff elementor-widget elementor-widget-heading\" data-id=\"49cabff\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How do I find the elements I want to change with CSS?<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-6d4a831 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6d4a831\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-2ab4fa1\" data-id=\"2ab4fa1\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b60299e elementor-widget elementor-widget-text-editor\" data-id=\"b60299e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>First of all, <b>press F12<\/b> to open the developer console. Then click on the <b>viewport with the select element<\/b> function. This leads to the outer container DIV element.<\/p>\n<p>The ID for the container the canvas sits in is <strong>container<\/strong>.<\/p>\n<p>So you can easily address it via <strong>#container<\/strong> and change the background with <em>#container {background:blue}<\/em> , for example.<\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9607e63 elementor-widget elementor-widget-image\" data-id=\"9607e63\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/govie-editor.de\/wp-content\/uploads\/Govie_CSS_Container-1.gif\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"Govie_CSS_Container\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MTU4MDIsInVybCI6Imh0dHBzOlwvXC9nb3ZpZS1lZGl0b3IuZGVcL3dwLWNvbnRlbnRcL3VwbG9hZHNcL0dvdmllX0NTU19Db250YWluZXItMS5naWYifQ%3D%3D\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1774\" height=\"1005\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"attachment-full size-full wp-image-15802 lazyload\" alt=\"\" title=\"\" data-src=\"https:\/\/govie-editor.de\/wp-content\/uploads\/Govie_CSS_Container-1.gif\">\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<div class=\"elementor-element elementor-element-cdb999f elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"cdb999f\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-cabab88 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"cabab88\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-8be8695\" data-id=\"8be8695\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0870289 elementor-widget elementor-widget-heading\" data-id=\"0870289\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How can I replace the logo?<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-f3ae0ae elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f3ae0ae\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-2a2a25a\" data-id=\"2a2a25a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5794151 elementor-widget elementor-widget-text-editor\" data-id=\"5794151\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div>The logo can be hidden or changed using the<b> .logo <\/b>selector. The size of the logo can be controlled via the <span style=\"font-weight: bolder;\">width <\/span>.<\/div>\n<div> <\/div>\n<div><strong>.logo {<\/strong><br \/> <strong> content: url(<\/strong><span style=\"font-weight: bolder;\">IMAGEURL<\/span><strong>);<\/strong><br \/><strong>  width: 10%;<\/strong><br \/><strong>}<\/strong><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-f920fd0\" data-id=\"f920fd0\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1277d97 elementor-widget elementor-widget-image\" data-id=\"1277d97\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/govie-editor.de\/wp-content\/uploads\/Govie_CSS_Logo.gif\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"Govie_CSS_Logo\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MTU3NDcsInVybCI6Imh0dHBzOlwvXC9nb3ZpZS1lZGl0b3IuZGVcL3dwLWNvbnRlbnRcL3VwbG9hZHNcL0dvdmllX0NTU19Mb2dvLmdpZiJ9\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1906\" height=\"971\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"attachment-full size-full wp-image-15747 lazyload\" alt=\"\" title=\"\" data-src=\"https:\/\/govie-editor.de\/wp-content\/uploads\/Govie_CSS_Logo.gif\">\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-a426913 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a426913\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-5c08dca\" data-id=\"5c08dca\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fc538a0 elementor-widget elementor-widget-heading\" data-id=\"fc538a0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Can I change the foreground or background?<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-95b8de6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"95b8de6\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-0c5cb4c\" data-id=\"0c5cb4c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9f3a280 elementor-widget elementor-widget-text-editor\" data-id=\"9f3a280\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div>Frames or animated effects can be displayed in the foreground. The #scene-foreground selector is used for this purpose.<\/div>\n<div>\n<pre><code\/><\/pre>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b4aa204 elementor-widget elementor-widget-code-highlight\" data-id=\"b4aa204\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>#scene-foreground {\nbackground-image: url(IMAGEURL);\nbackground-size:100% 100%;\n}\n\n#scene-background {\nbackground-image: url(IMAGEURL)\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-93434bd elementor-widget elementor-widget-image\" data-id=\"93434bd\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/govie-editor.de\/wp-content\/uploads\/Govie_CSS_Foreground.gif\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"Govie_CSS_Foreground\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MTU4MDgsInVybCI6Imh0dHBzOlwvXC9nb3ZpZS1lZGl0b3IuZGVcL3dwLWNvbnRlbnRcL3VwbG9hZHNcL0dvdmllX0NTU19Gb3JlZ3JvdW5kLmdpZiJ9\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1774\" height=\"969\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"attachment-full size-full wp-image-15808 lazyload\" alt=\"\" title=\"\" data-src=\"https:\/\/govie-editor.de\/wp-content\/uploads\/Govie_CSS_Foreground.gif\">\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<div class=\"elementor-element elementor-element-10c9534 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"10c9534\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-73c8193 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"73c8193\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-7d34053\" data-id=\"7d34053\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d02a83b elementor-widget elementor-widget-heading\" data-id=\"d02a83b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Image editing - CSS as post effect<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-fbc412a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"fbc412a\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-7ce46aa\" data-id=\"7ce46aa\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0e95391 elementor-widget elementor-widget-text-editor\" data-id=\"0e95391\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Images can also be manipulated via CSS filters without having to switch back to Photoshop. However, some of the operations are very computationally intensive because they are performed every frame.<\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0ecaff3 elementor-widget elementor-widget-code-highlight\" data-id=\"0ecaff3\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>filter: saturate(3); \nfilter: grayscale(100%); \nfilter: contrast(160%); \nfilter: brightness(0.25); \nfilter: blur(3px); \nfilter: hue-rotate(180deg);<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7a6954d elementor-widget elementor-widget-image\" data-id=\"7a6954d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/govie-editor.de\/wp-content\/uploads\/Govie_CSS_Filter_Saturation_Compress.gif\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"Govie_CSS_Filter_Saturation_Compress\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MTYzMjIsInVybCI6Imh0dHBzOlwvXC9nb3ZpZS1lZGl0b3IuZGVcL3dwLWNvbnRlbnRcL3VwbG9hZHNcL0dvdmllX0NTU19GaWx0ZXJfU2F0dXJhdGlvbl9Db21wcmVzcy5naWYifQ%3D%3D\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1774\" height=\"969\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"attachment-full size-full wp-image-16322 lazyload\" alt=\"\" title=\"\" data-src=\"https:\/\/govie-editor.de\/wp-content\/uploads\/Govie_CSS_Filter_Saturation_Compress.gif\">\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<div class=\"elementor-element elementor-element-a332149 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"a332149\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ec0e0c1 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"ec0e0c1\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-90ef6ed elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"90ef6ed\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-faa7740\" data-id=\"faa7740\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a0aceb9 elementor-widget elementor-widget-heading\" data-id=\"a0aceb9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Animated labels<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-83cd73b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"83cd73b\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-a6a7cf0\" data-id=\"a6a7cf0\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8242594 elementor-widget elementor-widget-text-editor\" data-id=\"8242594\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Keyframes can be used to create animations in CSS. This animation can then be attached to any element using the <b>animation property<\/b>. In this example, the 2D media area is moved out from left to right using CSS as soon as the respective slide is clicked.<\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aec9e22 elementor-widget elementor-widget-code-highlight\" data-id=\"aec9e22\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>.DraftEditor-root {\r\n    padding: 12px !important;\r\n}\r\n \r\n.rte-content {\r\n    height: auto !important;\r\n    position: relative !important;\r\n    border-radius: 0px 0px 10px 0px;\r\n    animation: moveright 1s forwards;\r\n}\r\n \r\n@keyframes moveright {\r\n    from {left: -100%;}\r\n    to {left:0%;}\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d6819de elementor-widget elementor-widget-image\" data-id=\"d6819de\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/govie-editor.de\/wp-content\/uploads\/Govie_CSS_Animated_Label.gif\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"Govie_CSS_Animated_Label\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MTYxNzEsInVybCI6Imh0dHBzOlwvXC9nb3ZpZS1lZGl0b3IuZGVcL3dwLWNvbnRlbnRcL3VwbG9hZHNcL0dvdmllX0NTU19BbmltYXRlZF9MYWJlbC5naWYifQ%3D%3D\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1774\" height=\"969\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"attachment-full size-full wp-image-16171 lazyload\" alt=\"\" title=\"\" data-src=\"https:\/\/govie-editor.de\/wp-content\/uploads\/Govie_CSS_Animated_Label.gif\">\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CSS &#8211; Basics Cascading Style Sheets, or CSS for short, is used to customize the appearance of HTML elements without changing their functionality. For example, the appearance of a title or button can be changed. In the example, 2 buttons are created, but only one button is changed using CSS. If a class has been [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":[],"doc_category":[46,59],"doc_tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/govie-editor.de\/en\/wp-json\/wp\/v2\/docs\/16333"}],"collection":[{"href":"https:\/\/govie-editor.de\/en\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/govie-editor.de\/en\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/govie-editor.de\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/govie-editor.de\/en\/wp-json\/wp\/v2\/comments?post=16333"}],"version-history":[{"count":0,"href":"https:\/\/govie-editor.de\/en\/wp-json\/wp\/v2\/docs\/16333\/revisions"}],"wp:attachment":[{"href":"https:\/\/govie-editor.de\/en\/wp-json\/wp\/v2\/media?parent=16333"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/govie-editor.de\/en\/wp-json\/wp\/v2\/doc_category?post=16333"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/govie-editor.de\/en\/wp-json\/wp\/v2\/doc_tag?post=16333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}