Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I'm trying to build a css class which has the same style of another one with the :hover property.
The problem is that only when I'm over the element the style is applied and not where I specify the new class.
This is my try:
.body_cal .cell_cal:hover .bg_cal,
.body_cal .cell_cal .bg_cal .hover_cal {
opacity: 0.2;
transition: .3s ease-in;
}
I would like that by adding the hover_cal class I'd get the same result as moving the mouse over it.
You can achieve the same effect by placing .hover_cal in the same order as the .cell_call:hover pseudo class:
.body_cal .cell_cal:hover .bg_cal,
.body_cal .hover_cal .bg_cal{
opacity: 0.2;
transition: .3s ease-in;
}
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed last month.
Improve this question
I am trying to create slider only with html/css. I'm using inputs and labels.
This is my css code. I'm moving my div to left when element is checked.
.firstCat:checked ~ .carousel-wrapper div { left: 360px; transition: left 0.3s ease-in-out; }
Is it the only way to create sider? Maybe you more elegant solution.
<input type="range" min="1" max="100" value="50" class="slider">
You can use input type "range".
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I have no idea how to go about this. I have tried to use an image, but can never get it to look right, but if I do it doesn't work well with other devices.
Here's what I'm trying to model after
thanks!
Just try to create a div with a height of 2px, with a linear-gradient background
<div class="br"></div>
.br {
height: 2px;
background: linear-gradient(YOUR COLORS HERE);
}
To create a radiant easily go to https://cssgradient.io/
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have very less knowledge of HTML and CSS. It was a success with creating the lines as a straight line. Not getting that how it can be modified the lines diagonally and straight. Not sure is it possible to create like below using coding. Appreciate your help.
enter image description here
A very rudimentary design, you could expand on it later...
.a {
transform: rotate(30deg);
border-left: 6px solid green;
height: 500px;
}
</style>
<div class="a">
</div>
The line turn is made through the "transform" property.
-FruDe
try transform property f.e.
transform: rotate(20deg);
to rotate objects and get diagonally line
https://www.w3schools.com/cssref/css3_pr_transform.asp
use transform you can learned about that in w3school
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
.description {
opacity: 0.5;
margin: 30px;
}
<h3 class="description">aaaaaaa</h3>
<h3 class="description">bbbbbbb</h3>
I have a code like this and the output looks like this
How can I make both of the h3 description opacity 0.5?
You have a Unicode Character 'IDEOGRAPHIC SPACE' (U+3000) within the first h3 tag:
<h3　class="description">aaaaaaa</h3>
Between the h3 and the class, remove this and it will work
https://jsfiddle.net/m685fL0j/
If you paste the first H3 into
https://www.url-encode-decode.com
You will see the character:
%3Ch3%E3%80%80class%3D%22description%22%3Eaaaaaaa%3C%2Fh3%3E
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I currently have a Bootstrap webpage with a color background image.
I want the image to start out grayscale and then gradually fade into color once the page loads (not hover).
What is the best way to do this with CSS/HTML?
You could achieve this with CSS keyframe animations.
You would want to expand on the following:
#keyframes greyscale-fade-in {
0% { -webkit-filter: grayscale(100%); }
100% { -webkit-filter: grayscale(0%); }
}
.image-selector {
animation: greyscale-fade-in 1s ease-in forwards;
}
The keyframes control how you want the image to be adapted as the page loads.
The animation value needs to be told which keyframes to use (greyscale-fade-in), how long you want the animation to last for (1s is 1 second), what time of transition you would like (ease-in).
The forwards parameter tells the animation to only run from 0% to 100% and not to go back from 100% to 0%.
The animation rule needs to be applied to a selector that targets your image, so make sure your <img> or the wrapper <div> has a class that you can target.
For more information on animations, you should read: https://developer.mozilla.org/en-US/docs/Web/CSS/animation