Glass Effect Utility

The glass utility creates a glass morphism effect on elements:

---

source

test_glass_basic_examples

 test_glass_basic_examples ()

Test glass morphism effect utility.

# Glass effect utility
glass = SingleValueFactory("glass", "Creates a glass morphism effect on the element with backdrop blur and semi-transparent background")  # Glass morphism effect

def test_glass_basic_examples():
    """Test glass morphism effect utility."""
    # Test basic usage
    assert str(glass) == "glass"
    
    # Test calling syntax
    assert str(glass()) == "glass"
    
    # Test with modifiers
    assert str(glass.hover) == "hover:glass"
    assert str(glass.lg) == "lg:glass"
    assert str(glass.dark) == "dark:glass"
    
    # Test chained modifiers
    assert str(glass.hover.md) == "md:hover:glass"
    assert str(glass.dark.hover.lg) == "lg:hover:dark:glass"
    
    # Test group and peer modifiers
    assert str(glass.group("hover")) == "group-hover:glass"
    assert str(glass.peer("checked")) == "peer-checked:glass"

# Run the test
test_glass_basic_examples()

Practical Examples

Test with FastHTML components to show practical usage:

---

source

test_glass_fasthtml_examples

 test_glass_fasthtml_examples ()

Test practical usage patterns with FastHTML components.

def test_glass_fasthtml_examples():
    """Test practical usage patterns with FastHTML components."""
    from fasthtml.common import Div, Button, H1, P, Span
    from cjm_fasthtml_tailwind.core.base import combine_classes
    from cjm_fasthtml_tailwind.utilities.borders import border
    from cjm_fasthtml_tailwind.utilities.effects import shadow, opacity
    from cjm_fasthtml_tailwind.utilities.spacing import p
    from cjm_fasthtml_tailwind.utilities.backgrounds import bg_linear
    from cjm_fasthtml_daisyui.components.actions.button import btn
    from cjm_fasthtml_daisyui.components.data_display.card import card
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, text_dui
    
    # Create a glass card with dark mode support
    glass_card = Div(
        P("Glass morphism effect"),
        cls=combine_classes(
            glass,
            bg_dui.base_100.opacity(30),
            text_dui.base_content,
            p(6)
        )
    )
    assert "glass" in glass_card.attrs['class']

    # Create a glass card with opacity
    glass_card_opacity = Div(
        P("Glass morphism effect with opacity"),
        cls=combine_classes(
            glass,
            bg_dui.base_100.opacity(30),
            text_dui.base_content,
            p(6),
            opacity(95)
        )
    )
    assert "glass" in glass_card_opacity.attrs['class']
    assert "opacity-95" in glass_card_opacity.attrs['class']

    return Div(
        glass_card,
        glass_card_opacity,
        style="background-image: url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp"
    )

# Run the test
test_glass_fasthtml_examples()

<div style="background-image: url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp">
  <div class="glass bg-base-100/30 text-base-content p-6">
    <p>Glass morphism effect</p>
  </div>
  <div class="glass bg-base-100/30 text-base-content p-6 opacity-95">
    <p>Glass morphism effect with opacity</p>
  </div>
</div>

test_func = test_glass_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()