I am trying learning basics of HTML/CSS. I learned about :hover in css, that when the cursor is hover the element, something happend according to the code written. Then, you can also use transition tag, to make the transformation take some time. But, when the cursor goes out of the element, it comes back to the original position, without making the transition, and that is horrible. Here is the code I wrote
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.required::before {
content: '';
display:block;
width: 10px;
height: 10px;
background-color: red;
border-radius:10px;
}
.required::after {
content: '';
display:inline-block;
width: 10px;
height: 10px;
background: blue;
margin-left: -20px;
}
.required:hover::after{
transform: translateX(100px);
transition: 1s;
}
</style>
</head>
<body>
<label class = required>Name</label>
</body>
</html>
When cursor hover, the cube moves, in a rime of 1s. Mouse out, it instantly returns in his first position. I would like that it returns in the position in the same amount of type. Hope I'm enought clear in my description. Thanks for your help
Put transition in .required::after because putting transition here make the hover effect to take a fix amount of time for start/end of effect while putting it in :hover make its start time as fix value while it don't specify its end time.
If want to apply transition on fix property use that property name before time in transition like here you can write transition: transform 1s; so transition will be applied on transform property value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.required::before {
content: '';
display: block;
width: 10px;
height: 10px;
background-color: red;
border-radius: 10px;
}
.required::after {
content: '';
display: inline-block;
width: 10px;
height: 10px;
background: blue;
margin-left: -20px;
transition: 1s;/*Put transition here*/
}
.required:hover::after {
transform: translateX(100px);
}
</style>
</head>
<body>
<label class="required">Name</label>
</body>
</html>
In addition to previous answers, which correctly tells you to move the transition property to .required::after, you also need to be careful using transform: 1s without property names. By default this will create transitions for ALL properties.
The problem is that the transition is set only for the pseudo element when the user is hovering so as soon as the hover stops the transition property goes back to the default - i.e. no transition.
Moving that transition setting into the non-hovered class setting means it is there whether hovering is takng place or not so the return will also transition.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.required::before {
content: '';
display: block;
width: 10px;
height: 10px;
background-color: red;
border-radius: 10px;
}
.required::after {
content: '';
display: inline-block;
width: 10px;
height: 10px;
background: blue;
margin-left: -20px;
transition: 1s;
}
.required:hover::after {
transform: translateX(100px);
}
</style>
</head>
<body>
<label class=r equired>Name</label>
</body>
</html>
Related
So I've watched a tutorial and discovered that to make customizable checkboxes what you do is basically: you put a div box after the actual input element, you disable the display value(set it to none) for the actual input element then you style the div box instead of the actual input element with the help of some pseudo-classes and pseudo-elements. although it completely works I'm unable to understand how exactly it works I've got questions like:
Since we set the display value of the actual checkbox input to "none" then how are we still able to check it?
When I change the element with the class "checkbox"(sort of like a container) label to div everything completely breaks why does this happen?
I've made a little animation to bulge the fake checkbox and then go back to the original size again when it's checked I want to do the same thing to the label which is the parent for both the real and fake checkboxes but as far as I know there isn't a way to select parent elements in CSS how can I fix this?
Here is the link to the tutorial in case you need it.
Here is my CSS and HTML codes:
.checkbox{
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: 50px;
cursor: pointer;
}
.checkbox_Input{
display: none;
}
.checkbox_Box{
width: 1.25em;
height: 1.25em;
border: 2px solid rgb(189, 189, 189);
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
flex-shrink: 0;
transition: background 0.15s, border-color 0.15s;
}
.checkbox_Box::after{
content: "\2714";
color: #ffffff;
font-size: small;
transform: scale(0);
transition: transform 0.4s;
}
.checkbox_Input:checked + .checkbox_Box{
background: #2266dc;
border-color: #2266dc;
animation: AnimateChecked 0.5s ease-in;
}
.checkbox_Input:checked + .checkbox_Box::after{
transform: scale(1);
}
#keyframes AnimateChecked{
50% {
width: 1.5em;
height: 1.5em;
}
100%{
width: 1.25em;
height: 1.25em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="checkbox.css">
<title>CheckBox</title>
</head>
<body>
<label class = "checkbox" for="MyCheckBox">
<input class = "checkbox_Input" type="checkbox" id="MyCheckBox">
<div class="checkbox_Box"></div>
Yes, Check The Checkbox
</label>
</body>
</html>
I think reading about the label element will give you better understanding of that element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
The label element is bound to the checkbox via the for attribute. When you click the label it triggers the checkbox despite it is hidden.
Again, the label element is a programmatically associated with the form elements (the checkbox in your case). If you change it to div it will lose its ability to bind with the form element.
For your last question I would just add the animation to the parent element (label) or wrap the text with an inline element (i.e. span) and add an animation to it as well.
How can I decrease the delay that occurs before advisory information is displayed via the html title attribute, without scripting?:
<p>
Hover over the icon at the end of this sentence
and notice the delay that occurs before the
advisory information is displayed.
<span title="Any way to make this instant?">ⓘ</span>
</p>
This would be a nice feature of HTML, if you could:
Adjust the delay.
Also display upon click (instead of just on hover).
I know how to achieve this with Javascript, so I'm only interested in HTML and CSS solutions.
To reduce the delay and show title instantly, you can do this with CSS ::after selector.
HTML: (Change title attribute to data-title)
<p>
Hover over the icon at the end of this sentence
and notice the delay that occurs before the
advisory information is displayed.
<span data-title="Anyway to make this instant?">ⓘ</span>
</p>
CSS:
span
{
position: relative;
}
span:hover::after
{
content: attr(data-title);
padding: 5px;
width: 250px;
border: 1px solid #000;
position: absolute;
top: 5px;
left: 5px;
background: #dc143c;
color: white;
}
Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span
{
position: relative;
}
span:hover::after
{
content: attr(data-title);
padding: 5px;
width: 250px;
border: 1px solid #000;
position: absolute;
top: 5px;
left: 5px;
background: #dc143c;
color: white;
}
</style>
</head>
<body>
<p>
Hover over the icon at the end of this sentence
and notice the delay that occurs before the
advisory information is displayed.
<span data-title="Anyway to make this instant?">ⓘ</span>
</p>
</body>
</html>
it can be achieved using label with hidden checkbox and using animation to control the delay, that'd trigger showing it on both click and hover, when clicked you need to click it again to hide it.
input {
display: none;
}
.tooltip-contents {
opacity: 0;
user-select: none;
}
input:not(:checked) + label:hover .tooltip-contents,
input:checked + label .tooltip-contents {
opacity: 1;
user-select: initial;
}
label:hover .tooltip-contents {
animation-name: show;
animation-duration: 1s;
}
#keyframes show {
0% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<input type="checkbox" id="tooltip-1">
<label for="tooltip-1">
click or hover here for tooltip
<p class="tooltip-contents">add your title text here</p>
</label>
I built a "sticky header" with html, jquery and css animation
All works fine. But one little thing doesn't work correctly.
For the case, that the stick header will be active, the background color of the menu switch from white to green (with animation).
Now I need a function, which switch the color back from green to white (with animation), if the header is no sticky anymore (=class sticky will remove).
How can I realize this?
var sticky = $("#header").offset().top
$(window).scroll( function() {
if ($(window).scrollTop() > sticky) {
$("#header").addClass("sticky");
} else {
$("#header").removeClass("sticky");
}
});
body {
height: 5000px;
background-color: #000;
margin-top: 100px;
}
#header {
background-color: #fff;
height: 50px;
width: 500px;
}
.sticky {
position: fixed;
top: 0;
background-color: #7ebd0b !important;
animation: switchColorToGreen .5s;
}
.sticky + .pageContainer {
padding-top: 130px;
}
#keyframes switchColorToGreen {
from {background-color: #fff;}
to {background-color: #7ebd0b;}
}
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<header id="header">
Menu 1
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
If you run the code snippet in your question it's working fine. Is there anything different on the actual site you want to use this?
EDIT:
You could try this:
.sticky {
position: fixed;
top: 0;
background-color: #7ebd0b !important;
}
#header {
background: white;
transition: 0.5s linear all;
}
You don't even need the keyframes like this.
You need to put the transition on something that stay on the element all the time so it can control the transition.
I have an issue creating a title for a web page.
Here is title:
<!DOCTYPE html>
<html>
<head>
<style>
.title {
border-top: 2px solid grey;
color: grey;
text-size:20px;
}
</style>
</head>
<body>
<div class="title">Düsseldorf markets</div>
</body>
</html>
I need to move the market word to the bottom and it should be displayed like that:
Düsseldorf
markets
Any idea how can I do it with the help of CSS only(i.e how can I change title CSS class to get desired view)?
You can use a CSS hack to acheive this if you really want to use CSS only. First, make the text disappear by setting it to the color of the background. Then use the before and after selectors to rerender the content.
However, easier would be to use span tags in your HTML, then make each of them have display: block to get a line break.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--font_size: 20px;
--text_col: grey;
--text_margin: 10px;
}
.title {
border-top: 2px solid grey;
font-size: var(--font_size);
color: white;
}
.title:before {
content: "Düsseldorf";
color: var(--text_col);
position: absolute;
left: 10px;
top: var(--text_margin);
}
.title:after {
content: "markets";
color: var(--text_col);
position: absolute;
left: 10px;
top: calc(var(--font_size) + var(--text_margin));
}
</style>
</head>
<body>
<div class="title">Düsseldorf markets</div>
</body>
</html>
You can use padding-right with calculation. padding-right: calc(100% - 10ch); This is very simple, no complex.
.title {
border-top: 2px solid grey;
color: grey;
font-size: 20px;
padding-right: calc(100% - 10ch); /* Düsseldorf is 10 character */
box-sizing: border-box;
}
<div class="title">Düsseldorf markets</div>
A simple way to approach this - use a width property on a element. Then, by word-break rule (which is 'normal' by default and you don't need to specify this) words will be auto-wrap on next line, when there is no free place on container
here is demo
P.S. And you have a typo - did you mean font-size except for text-size?
I'm applying the strikeout tag:
<s>$5,000,000</s>
But the line is too low.. .it's about 1/4 from the bottom rather than through the middle. Any way I can modify this so it goes a bit more through the middle?
You can't do it with the strike tag OR the text-decoration:line-through style. The line position is built-in. You could roll your own style for that, but it would be a huge PITA.
I've cooked up this code which gives you total control over strike-through position and style:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
.mark {
border-bottom: 1px solid #000;
top: -9px; /* Tweak this and the other top in equal, but opposite values */
position: relative;
}
.offsetMark {
position: relative;
top: 9px; /* Tweak this and the other top in equal, but opposite values */
}
</style>
</head>
<body>
<div>
<p class="strikethrough">This is an <span class="mark"><span class="offsetMark">example</span></span> of how I'd do it.</p>
</div>
</body>
</html>
Eleven years later it is quite simple task:
s{
text-decoration: none;
position: relative;
}
s::before{
content: '';
width: 100%;
position: absolute;
right: 0;
top: calc( 50% - 1.5px );
border-bottom: 3px solid rgba(255,0,0,0.8);
}
old price: <s>$99.95</s>
Not with the strike tag, no. It's part of the rendering engine of the browser. For me (in Chrome) the line is rendered just above the middle.
This solution allows for padding, and uses the csss line-through property
It works for firefox, and chrome/ safari does it right anyway.
div.hbPrice span.linethroughOuter {
padding: 0 10px 0 0;
text-decoration: line-through;
position: relative;
}
div.hbPrice span.linethroughInner {
position: relative;
}
/* Firefox only. 1+ */
div.hbPrice span.linethroughOuter, x:-moz-any-link { bottom: 2px; }
div.hbPrice span.linethroughInner, x:-moz-any-link { top: 2px; }
and the mark up is something like...
<div class="hbPrice"><span class="linethroughOuter"><span class="linethroughInner">£1,998</span></span> £999</div>
The other solution is to add a background image of a line, and make it the same colour as the text.
2021 Solution
Normally, you would use text-decoration: line-through, but you currently can't change the position of a "line-through" line.
But fortunately, you can change the position of an "underline" thanks to the new CSS property text-decoration-offset.
Here is how it works:
.strike {
text-decoration: underline;
text-underline-offset: -.4em;
}
<p>Only <span class="strike">$199.99</span> $99.99!</p>
Although you may notice that the line seems a bit choppy. That's due to the relatively-new text-decoration-skip-ink which tries to hide the underline in places where it would overwrite the text. It's great for underlining, but fails as a strikethrough.
Luckily, we can turn that feature off, and along with some additional nice color and thickness properties, here's the final result:
.strike {
text-decoration: underline;
text-underline-offset: -.4em;
text-decoration-skip-ink: none;
text-decoration-color: red;
text-decoration-thickness: 2px;
color: gray;
}
<p>Only <span class="strike">$199.99</span> $99.99!</p>
Browser support is widespread with the current exception of Safari.
You could do something like this:
<div class="heading"><span>Test heading</span></div>
.heading {
position: relative;
text-align:center;
}
.heading:before {
background-color: #000000;
content: "";
height: 1px;
left: 0;
position: absolute;
right: 0;
top: 50%;
}
.heading span {
background-color: #fff;
display: inline-block;
padding: 0 2px;
position: relative;
text-align: center;
}
http://codepen.io/anon/pen/cLBls