yangauthier
commented
2 years ago As a complement to my request, here is the CSS I copied from the Adirondack css :
.remark-slide-content.smokescreen > h1, .remark-slide-content img[src~=smokescreen] { background-color: rgba(0, 0, 0, 0.7); } .remark-slide-content.smokescreen > h1, .remark-slide-content.smokescreen > h2, .remark-slide-content.smokescreen > h3 { color: white; text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8), 8px 8px 20px rgba(0, 0, 0, 0.9); } @media print { .remark-slide-content.smokescreen { -webkit-print-color-adjust: exact; -webkit-filter: opacity(1); } } .remark-slide-content.fogscreen > h1 { background-color: rgba(255, 255, 255, 0.7); } .remark-slide-content.fogscreen > h1, .remark-slide-content.fogscreen > h2, .remark-slide-content.fogscreen > h3 { color: black; text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.5), 8px 8px 20px rgba(0, 0, 0, 0.2); } @media print { .remark-slide-content.fogscreen { -webkit-print-color-adjust: exact; -webkit-filter: opacity(1); } } .remark-slide-content.fit-h1 h1 { height: 1.25em; overflow: hidden;
But here is what I get :
Hi, I visited the HTML/CSS/JS examples section of the wiki. There's the example of a Remark presentation with Story's theme with apron & al. What I'd like to achieve is to have slide like in the Haikudeck app, i.e. a background picture with a title and a dark / light shaded semi-transparent background. I've seen this can be achieved in Remark with the smokescreen / fogscreen classes (as explained here). But I'm not a programmer and I can't get the CSS to work properly in my Remark presentation. Would there be someone here to help me ? Thanks !
Smokescreen effect :
Fogscreen effect :