Hi, I want to use these css: ```h1 span{ width:100%; position:relative } h1 span:before{ ...

# compose-web

[Ji Sungbin]

Hi, I want to use these css:

h1 span{
    width:100%;
    position:relative
}

h1 span:before{
	background:linear-gradient(45deg,#fc5c7d,#6a82fb,#fc5c7d);
	width:100%;
	height:100%;
	display:block;
	position:absolute;
	content:"";
	mix-blend-mode:screen
}

🧵…

[Ji Sungbin]

My Compose Web code:

Span({
    classes(AppStylesheet.h1Span)
    style {
        width(100.percent)
        position(Position.Relative)
    }
}) { ... }

object AppStylesheet : StyleSheet() {
    val h1Span by style {
        before style {
            width(100.percent)
            height(100.percent)
            display(DisplayStyle.Block)
            position(Position.Absolute)
            background("linear-gradient(45deg,#fc5c7d,#6a82fb,#fc5c7d)")
            property("content", "")
            property("mix-blend-mode", "screen")
        }
    }
}

Did i write it correctly?

[Chrimaeon]

did you apply the style in the “container” composeable like

import org.jetbrains.compose.web.css.Style

Div {
  Style(AppStylesheet)
  Span({
    classes(AppStylesheet.h1Span)
    style {
        width(100.percent)
        position(Position.Relative)
    }
  }) { ... }
}

[Ji Sungbin]

Yes, I did it at the root.

fun main() {
    setContent {
        Style(AppStylesheet)
        IntroScreen()
    }
}

full-code: https://github.com/sungbinland/conference-2023/tree/feat/intro-cover/src/jsMain/kotlin/day/sungbinland

IntroScreen() in screen folder.