Technical Architect || Microsoft MVP || 13x Microsoft Certified Professional

Kristine Kolodziejski [MVP]

Citizen Developer MyRole

Hot News Focus

Power Apps

[URL] Worldwide Content Releastionship

<div><div data-sp-canvascontrol="" data-sp-canvasdataversion="1.0" data-sp-controldata="&#123;&quot;position&quot;&#58;&#123;&quot;layoutIndex&quot;&#58;1,&quot;zoneIndex&quot;&#58;1,&quot;sectionIndex&quot;&#58;1,&quot;sectionFactor&quot;&#58;12,&quot;controlIndex&quot;&#58;0&#125;,&quot;controlType&quot;&#58;3,&quot;id&quot;&#58;&quot;0b589017-2915-4cee-b526-f03971e47257&quot;,&quot;webPartId&quot;&#58;&quot;d1d91016-032f-456d-98a4-721247c305e8&quot;,&quot;rteInstanceId&quot;&#58;&quot;e8c2aa0d-7d8f-4586-a717-bc0f048a6fac&quot;,&quot;addedFromPersistedData&quot;&#58;true,&quot;reservedHeight&quot;&#58;417,&quot;reservedWidth&quot;&#58;1178&#125;"><div data-sp-webpart="" data-sp-webpartdataversion="1.11" data-sp-webpartdata="&#123;&quot;id&quot;&#58;&quot;d1d91016-032f-456d-98a4-721247c305e8&quot;,&quot;instanceId&quot;&#58;&quot;0b589017-2915-4cee-b526-f03971e47257&quot;,&quot;title&quot;&#58;&quot;Image&quot;,&quot;description&quot;&#58;&quot;Add an image, picture or photo to your page including text overlays and ability to crop and resize images.&quot;,&quot;audiences&quot;&#58;[],&quot;serverProcessedContent&quot;&#58;&#123;&quot;htmlStrings&quot;&#58;&#123;&#125;,&quot;searchablePlainTexts&quot;&#58;&#123;&#125;,&quot;imageSources&quot;&#58;&#123;&quot;imageSource&quot;&#58;&quot;/sites/M365-CDN/SiteAssets/SitePages/Content-20745/110723761-shutterstock_2100976468.jpg&quot;&#125;,&quot;links&quot;&#58;&#123;&#125;,&quot;customMetadata&quot;&#58;&#123;&quot;imageSource&quot;&#58;&#123;&quot;siteId&quot;&#58;&quot;40ef054e-5ec7-4552-ac92-09bbd4faa5e1&quot;,&quot;webId&quot;&#58;&quot;35f81bac-1b1d-4f8c-a038-0302a1a6ae55&quot;,&quot;listId&quot;&#58;&quot;870ffa3e-eb32-4905-82ab-9e57adb99968&quot;,&quot;uniqueId&quot;&#58;&quot;28a68fc3-71fe-46ff-b341-27a9ef80c872&quot;,&quot;width&quot;&#58;2048,&quot;height&quot;&#58;1280&#125;&#125;&#125;,&quot;dataVersion&quot;&#58;&quot;1.11&quot;,&quot;properties&quot;&#58;&#123;&quot;id&quot;&#58;&quot;e38eae88-283c-441c-9876-1a7bb0bc2747&quot;,&quot;linkUrl&quot;&#58;&quot;&quot;,&quot;isInlineImage&quot;&#58;true,&quot;siteId&quot;&#58;&quot;40ef054e-5ec7-4552-ac92-09bbd4faa5e1&quot;,&quot;webId&quot;&#58;&quot;35f81bac-1b1d-4f8c-a038-0302a1a6ae55&quot;,&quot;listId&quot;&#58;&quot;870ffa3e-eb32-4905-82ab-9e57adb99968&quot;,&quot;uniqueId&quot;&#58;&quot;28a68fc3-71fe-46ff-b341-27a9ef80c872&quot;,&quot;imgHeight&quot;&#58;1280,&quot;imgWidth&quot;&#58;2048,&quot;imageSourceType&quot;&#58;2,&quot;resizeCoefficient&quot;&#58;0.53140916808149408,&quot;resizeDesiredWidth&quot;&#58;626,&quot;alignment&quot;&#58;&quot;Center&quot;,&quot;fileName&quot;&#58;&quot;shutterstock_2100976468.jpg&quot;,&quot;fixAspectRatio&quot;&#58;false,&quot;overlayText&quot;&#58;&quot;&quot;,&quot;altText&quot;&#58;&quot;&quot;&#125;,&quot;containsDynamicDataSource&quot;&#58;false&#125;"><div data-sp-componentid="d1d91016-032f-456d-98a4-721247c305e8"></div><div data-sp-htmlproperties=""><img data-sp-prop-name="imageSource" src="/sites/M365-CDN/SiteAssets/SitePages/Content-20745/110723761-shutterstock_2100976468.jpg" data-sp-cust-siteId="40ef054e-5ec7-4552-ac92-09bbd4faa5e1" data-sp-cust-webId="35f81bac-1b1d-4f8c-a038-0302a1a6ae55" data-sp-cust-listId="870ffa3e-eb32-4905-82ab-9e57adb99968" data-sp-cust-uniqueId="28a68fc3-71fe-46ff-b341-27a9ef80c872" data-sp-cust-width="2048" data-sp-cust-height="1280" /></div></div></div><div data-sp-canvascontrol="" data-sp-canvasdataversion="1.0" data-sp-controldata="&#123;&quot;controlType&quot;&#58;4,&quot;id&quot;&#58;&quot;e8c2aa0d-7d8f-4586-a717-bc0f048a6fac&quot;,&quot;position&quot;&#58;&#123;&quot;layoutIndex&quot;&#58;1,&quot;zoneIndex&quot;&#58;1,&quot;sectionIndex&quot;&#58;1,&quot;sectionFactor&quot;&#58;12,&quot;controlIndex&quot;&#58;1&#125;,&quot;addedFromPersistedData&quot;&#58;true&#125;"><div data-sp-rte=""><p>In this video, the long-anticipated implementation of glassmorphism is finally revealed. By demonstrating a quick and straightforward method, viewers learn how to apply glassmorphism to their projects in just 10 seconds using only 2 lines of code. Despite the technique's simplicity, the video extends to 11 minutes, allowing for an in-depth exploration of this feature and additional related content.<br><br></p><h3>In this Video</h3><ol><li>0&#58;00 Intro</li><li>0&#58;59 Overview</li><li>2&#58;13 Option 1 - white theme</li><li>6&#58;55 Hack - Claymorphism Generator by Michal Malewicz</li><li>7&#58;49 Option 1 continued</li><li>8&#58;51 Option 2 - dark theme</li><li>10&#58;57 Outro<br><br></li></ol><div tabindex="-1" data-cke-widget-wrapper="1" data-cke-filter="off" class="cke_widget_wrapper cke_widget_block cke_widget_inlineimage cke_widget_wrapper_webPartInRteInlineImage cke_widget_wrapper_webPartInRteClear cke_widget_wrapper_webPartInRteAlignCenter cke_widget_wrapper_webPartInRte" data-cke-display-name="div" data-cke-widget-id="0" role="region" aria-label="Inline image in RTE. Use Alt + F11 to go to toolbar. Use Alt + P to open the property pane."><div data-webpart-id="image" class="webPartInRte webPartInRteAlignCenter webPartInRteClear webPartInRteInlineImage cke_widget_element" data-cke-widget-data="%7B%22classes%22%3A%7B%22webPartInRteInlineImage%22%3A1%2C%22webPartInRteClear%22%3A1%2C%22webPartInRteAlignCenter%22%3A1%2C%22webPartInRte%22%3A1%7D%7D" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="inlineimage" data-instance-id="0b589017-2915-4cee-b526-f03971e47257" title=""></div></div><h3>What is&#160;Glassmorphism?</h3><p>Glassmorphism is a modern user interface (UI) design trend that has gained popularity in recent years. The term itself is a blend of &quot;glass&quot; and &quot;morphism,&quot; reflecting the style's key characteristics.&#160;</p><p>Glassmorphism is characterized by a &quot;frosted glass&quot; aesthetic, where UI elements have a semi-transparent, blurred, glass-like background that allows elements behind to be partially visible. This effect creates a layered, depth-like perception, which is often paired with light colors and subtle gradients.</p><p>This style also typically includes a backdrop-filter CSS property, creating a blur effect, and border highlights to emphasize the &quot;glassy&quot; feel. It's a design trend you might see in modern web design, mobile apps, or operating system UIs.</p><p>As of my knowledge cutoff in September 2021, it's crucial to note that not all browsers fully support backdrop-filter or other features necessary for glassmorphism, so some fallback design or feature detection may be required when using it in web development.</p><p><br></p><h3><br></h3></div></div><div data-sp-canvascontrol="" data-sp-canvasdataversion="1.0" data-sp-controldata="&#123;&quot;controlType&quot;&#58;0,&quot;pageSettingsSlice&quot;&#58;&#123;&quot;isDefaultDescription&quot;&#58;true,&quot;isDefaultThumbnail&quot;&#58;true,&quot;globalRichTextStylingVersion&quot;&#58;0,&quot;rtePageSettings&quot;&#58;&#123;&quot;contentVersion&quot;&#58;4&#125;,&quot;isEmailReady&quot;&#58;false&#125;&#125;"></div></div>

Power Apps GLASSMORPHISM UI is here

Well this is my favourite discovery of Power Apps so far We've been waiting for it for SO LONG, and now finally this (and a lot more things) are possible.