Shulou(Shulou.com)06/01 Report--

This article is about how to use CSS online fonts and D3 to implement Google. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Code interpretation

Defines a dom with only 1 empty element that does not contain any text:

Introducing the font file, ProductSans is a sans serif font created by Google specifically for branding:

@ importurl ("https://fonts.googleapis.com/css?family=Product+Sans");"

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

}

To make logo with pseudo elements, note that the content of content is not "Google", but "google_logo":

.logo:: before {

Content:'google_logo'

Font-size:10vw

}

Set the font and use the online font just introduced, and the "google_logo" text on the page has been replaced with a monochrome logo pattern:

Body {

Font-family:'productsans'

}

Define color variables:

: root {

-- blue:#4285f4

-- red:#ea4335

-- yellow:#fbbc05

-- green:#34a853

}

Set the text mask effect to color the text:

.logo:: before {

Background-image:linear-gradient (

Toright

Var (--blue) 0% Magi var (--blue) 26.5%

Var (--red) 26.5% Magi var (--red) 43.5%

Var (--yellow) 43.5% Magi var (--yellow) 61.5%

Var (--blue) 61.5% Magi var (--blue) 78.5%

Var (--green) 78.5% Magi var (--green) 84.5%

Var (--red) 84.5% Magi var (--red) 100%

)

-webkit-background-clip:text

-webkit-text-fill-color:transparent

}

At this point, the production of Googlelogo is complete, and then the production of googol information shows that the name of Google comes from the word googol with the meaning of 1 followed by a large number of 100 zeros.

Add a line of descriptive text and a container to hold numbers in dom, which contains five numbers, and a color variable is specified in the inline style of each number:

ThenameofGoogleoriginatedfromamisspellingoftheword "googol", thenumber1followedby100zeros.

one

0

0

0

0

Style the description text:

.desc {

Font-size:1.5vw

Font-weight:normal

Color:dimgray

Margin-top:2em

}

Style the number:

.zeros {

Font-size:3vw

Font-weight:bold

Margin-top:0.2em

Text-align:center

Width:25.5em

Word-wrap:break-word

}

Color the numbers:

.zerosspan {

Color:var (--c)

}

Fine-tune the margin of the number "1" so that it does not get too close to the following "0":

.zerosspan:nth-child (1) {

Margin-right:0.2em

}

At this point, the static layout is complete, and then the numbers are processed in batches with d3.

Introduce the d3 library and remove the number child element of .zeros in dom:

Eventually we will display 100 zeros on the page, each of which has a different color, and the color of the adjacent numbers will be different in order to be beautiful.

So, first define a function to get the color, which can take any of the four colors of the Googlelogo color match, and has a parameter that represents the excluded color. When this parameter is specified, the color is removed from the four optional colors, and then one color is randomly selected from the remaining three colors:

FunctiongetColor (excludedColor) {

Letcolors=newSet (['blue','red','yellow','green'])

Colors.delete (excludedColor)

ReturnArray.from (colors) [Math.floor (d3.randomUniform (0charge colors.size) ())]

}

Then, define two constants, ZEROS is an array of 1000s, ONE is an object that stores the number 1, it has two attributes, and number indicates that its value is 1, and its color is blue:

ConstZEROS=d3.range (100) .map (x = > 0)

ConstONE= {number:1,color:'blue'}

Next, by iterating through the ZEROS array with the reduce function, a new array numbers is returned, which has 101 elements (1 and the 100 zeros that follow it), each of which is an object containing number and color attributes:

Letnumbers=ZEROS.reduce (function (numberObjects,d) {

NumberObjects.push ({

Number:d

Color:getColor (numberobjects [numberObjects. Length-1] .color)

})

ReturnnumberObjects

}, [ONE])

Then, using numbers as the data source, batch create dom elements with d3, and write the color information in the inline style:

D3.select ('.zeros')

.selectAll ('span')

.data (numberObjects)

.enter ()

.append ('span')

.style ('--d.color, (d) = > `style (--${d.color}) `)

.text ((d) = > d.number)

Finally, fine-tune the margin of the content so that the whole content is centered:

.logo {

Margin-top:-10vh

}

Thank you for reading! On "how to use CSS online fonts and D3 to achieve Google information map" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.