CSS3 : Shining Gradient Text Effect with Shining Gradient Effect Background

[englianhu]

I tried to refer to below references to set the styling chunk :

• make my current gradient background shining
• make my current text gradient and shining

but there has problem which are:

• class.output = 'bg-primary' only support either gradient text or gradient background color
• how to make the text and backgound shining

Reference:

• Style knitr Code Output Appearance in HTML with Custom CSS Classes
• Tableau 100 Color Palettes
• Shining Text Effect CSS3

/* https://bookdown.org/yihui/rmarkdown-cookbook/chunk-styling.html */
.bg-primary {
  color: #FFD64D;
  background: linear-gradient(to bottom, #375E97 0%, #4897D8 100%);
}

.shine {
    background: #FFD64D -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, yellow)) 0 0 no-repeat;
    -webkit-background-size: 150px;
    color: $text-color;
    -webkit-background-clip: text;
    -webkit-animation-name: shine;
    -webkit-animation-duration: $duration;
    -webkit-animation-iteration-count: infinite;
    text-shadow: 0 0px 0px golden-rod;
}

knitr::opts_chunk$set(class.source = 'bg-success', class.output = 'bg-primary')

Above image shows gradient backgound color with static text color (both without shining).

---

By filing an issue to this repo, I promise that

• [x] I have fully read the issue guide at https://yihui.org/issue/.
• [x] I have provided the necessary information about my issue.
  • If I'm asking a question, I have already asked it on Stack Overflow or RStudio Community, waited for at least 24 hours, and included a link to my question there.
  • If I'm filing a bug report, I have included a minimal, self-contained, and reproducible example, and have also included xfun::session_info('knitr'). I have upgraded all my packages to their latest versions (e.g., R, RStudio, and R packages), and also tried the development version: remotes::install_github('yihui/knitr').
  • If I have posted the same issue elsewhere, I have also mentioned it in this issue.
• [x] I have learned the Github Markdown syntax, and formatted my issue correctly.

I understand that my issue may be closed if I don't fulfill my promises.

[cderv]

Hi @englianhu,

class.* allows you to add classes (one or many) to different part of the output. Are the classes correctly apply in your case ?

I am not sure to follow - is this a CSS question ? or is there an issue with knitr ?

Thanks.

[englianhu]

/* https://stackoverflow.com/a/66029010/3806250 */
h1 { color: #002C54; }
h2 { color: #2F496E; }
h3 { color: #375E97; }

/* https://bookdown.org/yihui/rmarkdown-cookbook/chunk-styling.html */
.gradient {
  color: #FFD64D;
  background: linear-gradient(to bottom, #002C54 0%, #4CB5F5 100%);
  /*background-image: linear-gradient(to right,golden,golden, yellow, yellow);*/
  /*-webkit-background-clip: text;*/
  /*display: inline-block;*/
  /*padding: 14px;*/
  /*-webkit-text-fill-color: transparent;*/
  /*font-family: 'Stay Out Regular';*/
}

.shine {
    background: #FFD64D -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, yellow)) 0 0 no-repeat;
    -webkit-background-size: 150px;
    color: $text-color;
    -webkit-background-clip: text;
    -webkit-animation-name: shine;
    -webkit-animation-duration: $duration;
    -webkit-animation-iteration-count: infinite;
    text-shadow: 0 0px 0px golden-rod;
}

knitr::opts_chunk$set(class.source = 'bg-success', class.output = 'gradient')

By refer to below links (Reference), is there any simple method to fit multi-functions .gradient and .shine into a class?

knitr::opts_chunk$set(class.source = 'bg-success', class.output = c('shine', 'gradient'))

I tried to fit two classes class.output = c('shine', 'gradient')) as above but the output only shows shine despite the ordering of vector element.

---

Reference :

• Add a CSS class to single code chunks in RMarkdown
• Customizable functions to run before / after a code chunk, tweak the output, and manipulate chunk options

[cderv]

I tried to fit two classes class.output = c('shine', 'gradient')) as above but the output only shows shine despite the ordering of vector element.

I can't reproduce on my side

dir.create(tmp_dir <- tempfile())
owd <- setwd(tmp_dir)
xfun::write_utf8(
  c(
    "---",
    "title: test",
    "output: html_document",
    "---",
    "",
    "```{r, class.output = c('shine', 'gradient')}",
    "1+1",
    "```"),
  "test.Rmd"
)
rmarkdown::render("test.Rmd", quiet = TRUE)
rvest::html_element(xml2::read_html("test.html"), ".shine")
#> {html_node}
#> <pre class="shine gradient">
#>  [1] <code>## [1] 2</code>
setwd(owd)
unlink(tmp_dir)

As you see above, the html document contains correctly a <pre> with both class added, as expected.

Can you share a full reproducible example ? Thanks.

[englianhu]

Tried to record a Short MV, and then what is next step ?

Below are test.Rmd content

---
title: "Test"
author: "®γσ, Lian Hu"
date: "5/11/2021"
output: html_document
---

## Styling Setting

```{css}
/* https://stackoverflow.com/a/66029010/3806250 */
h1 { color: #002C54; }
h2 { color: #2F496E; }
h3 { color: #375E97; }

/* https://bookdown.org/yihui/rmarkdown-cookbook/chunk-styling.html */
.gradient1 {
  background: linear-gradient(155deg, #F9BA32 0%, #FFEB94 100%);
}

.gradient2 {
  color: #FFD64D;
  background: linear-gradient(155deg, #002C54 0%, #4CB5F5 100%);
  /*background-image: linear-gradient(to right,golden,golden, yellow, yellow);*/
  /*-webkit-background-clip: text;*/
  /*display: inline-block;*/
  /*padding: 14px;*/
  /*-webkit-text-fill-color: transparent;*/
  /*font-family: 'Stay Out Regular';*/
}

/* refer from https://codepen.io/fazlurr/pen/qbWMRv */
$duration: 5s;
$text-color: rgba(255, 255, 255, 0.3);
$bgr-color: #333;
html {
    background-color: $bgr-color;
    text-align: center
}

body {
    padding-top: 3em;
}

.shine {
    background: #222 -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;
    -webkit-background-size: 150px;
    color: $text-color;
    -webkit-background-clip: text;
    -webkit-animation-name: shine;
    -webkit-animation-duration: $duration;
    -webkit-animation-iteration-count: infinite;
    text-shadow: 0 0px 0px rgba(255, 255, 255, 0.5);
}

knitr::opts_chunk$set(class.source = 'gradient1', class.output = c('shine', 'gradient2'))

Pretty Output

# Generate n observations from a mixture of two Gaussian 
# distributions
n     = 50           # Size of the sample to be generated
w     = c(0.6, 0.4)  # Weights
mu    = c(0, 5)      # Means
sigma = c(1, 2)      # Standard deviations
cc    = sample(1:2, n, replace=TRUE, prob=w)
x     = rnorm(n, mu[cc], sigma[cc])
x

[cderv]

So I believe you have an issue on how to use an example you found on the web in a R Markdown document. There is no issue with knitr per se.

The example you found here: https://codepen.io/fazlurr/pen/qbWMRv is a SCSS file and not a CSS. You can notice the $var: value; that are a sign of this. .scss file are working with SASS (https://sass-lang.com/) and you cannot use this a css directly - it is source code that needs to be compiled to CSS .scss -> SASS -> .css This means you can't use this content in a .css file or in the css knitr's engine.

Luckily for you, there is a sass R 📦 that allows to use SASS with R, and there is since recently support in R Markdown directly. There are several ways to do it, one of them is to use the scss chunk engine. See https://bookdown.org/yihui/rmarkdown-cookbook/eng-sass.html

So if I change

```{css}

to

```{scss, echo = FALSE}

then the content of the chunk will be processed by sass before being inserted as CSS in the doc. This should allow you to use the example you found.

You can learn more on SASS here: https://rstudio.github.io/sass/ Obviously you need the sass 📦 to be installed for this to work.

For next time, please follow the issue guide (https://yihui.org/issue/) : for general question not directly related to an issue or feature request of the package, ask first on Q&A website like https://community.rstudio.com or Stackoverflow.

Hope it helps.

[github-actions[bot]]

This old thread has been automatically locked. If you think you have found something related to this, please open a new issue by following the issue guide (https://yihui.org/issue/), and link to this old issue if necessary.