I am participating in the Code nuggets experience, details: Show your creative code blocks
π’ hey! Hello, everyone, I am a medical examiner, a treatment department front-end code ape π, dialogue with the code, listen to the voice of their heart, looking forward to your praise π and pay attention to β
What is the food virtual streamer keyboard? The keyboard is not divided into what axis, when the keyboard has food system? Can eat?
Nonsense not much to say, please today’s leading role π
How’s thatοΌ Isn’t it flashy? Actually I am a teacher in yuan public class of this effect on see, first saw couldn’t help to addicted to π, especially like, that have to do a, I on the basis of the keyboard with a breathing the effect of light, feel more cool, is worth every one of us has π, come with me to realize a belong to own cool π« keyboard
Look at the grid layout
Since harken in ’94. Vimleti and Bert Pos decided to work together on CSS and it’s been 27 years now, older than me, haha! Layout has always been the most important feature. Float and clear were used in the past, but floating was mostly used to surround text images, and layout was obviously not the right thing to do. Today, keyboard layouts are mainly implemented using grid layouts.
The code block
1. Create a raster container
Grid layout is the first step is to create a grid container, this is like elastic box layout defined in elastic container, they will be a parent element is defined as the grid or elastic container, the container is generated after the grid layout, all of its child elements for grid elements, and the child elements of elastic container is elastic element, seen in this way, a grid layout with a lot of concepts from the elastic box model. The preferred option is to add display: grid to elements that require a grid container,
2. Set the containerlineandcolumn
Grid-template-columns and grid-template-rows, as shown in the figure below:
The repeat function is a shorthand form for simplifying the value of a repeat when a certain number of rows or columns are reached. There are several other ways to do this:
3. Gaps between cells
We can use gap to set the width between cells, which is a compound property, row-gap to set the row gap, column-gap to set the column gap.
4. Internal alignment of cells
By default, cells are stretched horizontally and vertically to fit the entire cell. See GIF π
We can justify horizontal items:center or justify vertical items by using align-item:center. The values are the same: Start left | | end right in the center | stretch stretching (default)
By the way, it’s still a compound property, and we can set vertical and horizontal arrangements using place-items: Center
5. Cell location
By default, each cell is exclusive to one cell, but we can change this by setting grid-area so that one number occupies four cells
Grid-area: indicates the start line number/start line number/end line number/end line number
π’ Example: Set the class namespan2The child elementsgrid-area: 1/2/-2/4;
Ok, the above is the streamer keyboard knowledge points, but grid layout or have a lot of knowledge, I will not introduce, start our keyboard implementation πβοΈ
HTML structure setup
The structure and layout is very simple. The whole is a keyboard. Each key is a key, which contains text and ICONS
Make it fancy with CSS
Based on the above information, first set the style for the whole keyboard
Then we get the following pattern
The next thing we need to do is set the style of each key
Then the keyboard became such, have a bit of feeling π, at least like a key, do not worry, still not over! π
We found that some keys are relatively long, at this time only need to let individual keys occupy more grid line, here can write a special button size class name, and then to change the keys can be added π
At this point, we get something like this, ahem! It’s almost there, but not enough color. Here we go! Add color π
Color handling is still handled by special class names, which can be added to the desired keys
Come and see what you get! Ha-ha, it smells like that, but it needs to be adjusted
Next, use the following data to color the keyboard background and make the keys glow
Add the following style to the class name key
At this point, the result is πππ
The last step is to add a breathing light to the keyboard. You can use CSS3 animation to do this
π ok! Done, the last step is complete, and you have your own virtual streamer keyboard, ha ha πβοΈ,
π ok, the above is my share, I am the medical examiner, looking forward to your likes π and follow β, of course, welcome to join the front-end hunter technology exchange group π, add my wechat to the home page, I will pull you into the group, together with the technology and all outside the code of communication