css Questions

How to create an arbitrary sized matrix in css grid

August 8, 2024
user21141188
2 Answers

I want to create an arbitrary n x n matrix using CSS Grid. My HTML structure is: <div class="matrix"> <div class="matrix-corner"></div> <div class="matrix-header-row">Header1</div> <div class="matrix-header-row">Header2</div> <div class="matrix-header-col">Header1</div> <div class="matrix-header-col">Header2</div> <div class="matrix-row"> <div class="matrix-cell">100%</div> <div class="matrix-cell">50%</div> </div> <div class="matrix-row"> <div class="matrix-cell">50%</div>…

VIEW QUESTION

How can I use CSS to create a background that fades in from left and finishes on the right?

August 8, 2024
MirrenM
2 Answers

I would like the component content (background and text) to fade in from the left using opacity or other effects. I want it to begin from the left and fade in to full opacity ending on the right. However opacity…

VIEW QUESTION

How to grow an isometric rectangular box properly with HTML and CSS?

August 8, 2024
Ryan Peschel
2 Answers

It is convenient for isometric grids to start at the top like this: I have the following code to draw a "3d" isometric box: body { display: flex; justify-content: center; align-items: center; } .plane { position: relative; width: 600px; height:…

VIEW QUESTION

Html – How to vertically center a horizontal line to the first line of a multiline paragraph using CSS?

August 8, 2024
Coder
2 Answers

I have a layout where I need to position a horizontal line next to a multiline paragraph. The line should be vertically centered to the first line of the paragraph, not to the entire paragraph. I've tried using CSS Flexbox…

VIEW QUESTION

Html – how to get smooth transition when adding active class in CSS

August 7, 2024
Mohammad Yahyaa
2 Answers

Here is a simple program with 4 divs that change color when you click on it.No matter what i do the divs always change color with a jerk and not smoothly. I have tried applying transition on other properties as…

VIEW QUESTION

Html – How to customize the color of mat checkbox in mat select options

August 7, 2024
Saurabh
2 Answers

How to customize the color of mat checkboxes in mat select options as seen below <mat-form-field appearance="fill" style="width:49%"> <mat-label>Select Group</mat-label> <mat-select [(ngModel)]="groupNames" name="group" multiple> <mat-option *ngFor="let group of GroupList" [value]="groupName"> {{groupName}} </mat-option> </mat-select> </mat-form-field> I tried inspecting the elements and…

VIEW QUESTION

Html – Flip card every time the content is changes

August 7, 2024
Rohaib Razzaq
2 Answers

I want to flip the card every time the content of my box changes i.e after every second or minute or hour or day passes. I have tried applying transform and rotate properties directly to boxes but it is not…

VIEW QUESTION

Html – How can I use the onClick functionality of one component inside another component in React?

August 7, 2024
Abhrajit Saha
2 Answers

I am creating a whatsapp clone. For showing profile picture, I have made a card component which is accessed from a top_bar component. function Show_dp(prop){ return( <div id="box"> <div id="dp"> <img src={prop.image}></img> </div> <div id="buttons"> <div className="buttons_dp"> <FontAwesomeIcon className="ico" fontSize="1.5em"…

VIEW QUESTION

Css – Relative positioned <span> inside a <p> element

August 7, 2024
Stuck Overflow
2 Answers

I need a span to be displayed as a marker BENEATH important texts on my page. It should have been positioned at the bottom of the p element - but it does not. Can someone tell me what's wrong in…

VIEW QUESTION

Html – Navbar hovering font color in listed items

August 7, 2024
pineapple
2 Answers

I have a navbar on a website, of which I want the background color to be yellow and text black. And when having a mouse over an item, the background would be black and the text yellow. My problem is…

VIEW QUESTION