So i have my image on my webpage. In my css code, i have a transition for a :hover (glow appears), which works fine, and i want to add a stroke on :active. Here's my code :
#bb
{
top: 55%;
left: 6%;
opacity: 0.85;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#bb:hover
{
opacity: 1;
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.75);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.75);
box-shadow: 0px 0px 20px rgba(255,255,255,0.75);
}
#bb:active
{
opacity: 1;
border: 10px solid rgba(87,87,87,0.8);
}
my problems are the following : how do i get the stroke to appear around the image without moving it, and how do i get it to stay "active" without having to hold the click on the image?
You can use CSS box-sizing:border-box;. Write like this:
#bb:active
{
opacity: 1;
border: 10px solid rgba(87,87,87,0.8);
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
Check this http://jsfiddle.net/4g6d9/
A border occupies space, so adding a border normally displaces an element. If you use the outline property instead of border, no displacement takes place—but the outline will appear on top of anything that would otherwise appear in the same place, i.e. may cover other content.
The meaning of :active has various interpretations in different browsers. To make specific things happen (as cross-browser as possible) on keyboard or mouse events, you need to use JavaScript.
Related
Ok, so i have a little bit of a weird problem.
I have been working on a little website for a school project and i needed a panel of buttons on the side.
So i made some divs and made them link to my other pages and so on.
But then a weird problem came up. The area where i could click my divs was not confined to the area of the margin, but it went out to the full length of the page's horizontal axis, but not the vertical.
I have tried searching around for some kind of solution to this problem, but can't seem to find any. I have also tried to change the margin of my divs, but nothing seems to work.
This is the HTML code for my div and the link
<a href="main.html">
<div class="MenuTop">
<p id="MenuTextOn">Forside</p>
</div>
</a>
And this is the CSS code associated with that div element.
.MenuTop {
position: relative;
border-width: 3px;
border-style: solid;
border-color: black;
width: 70px;
height: 60px;
border-radius: 15px 30px;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
background: -webkit-linear-gradient(bottom right, gray, #F0F0F0);
margin: 15px;
It should be noted that i'm new to this, but understand the basic principles.
Thanks for helping in advance! :D
You don't need to put a div inside an a element, just style the a starting with a display:block (to have it as a div by default):
Let's also organise better the CSS
.MenuTop {
/* positioning */
position: relative;
/* box-model */
display: block;
width: 70px;
height: 60px;
margin: 15px;
border-width: 3px;
border-style: solid;
border-color: black;
/* style */
background: -webkit-linear-gradient(bottom right, gray, #F0F0F0);
border-radius: 15px 30px;
opacity: 1;
/* effects */
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
Have a look here: https://jsfiddle.net/7063nkfg/
Read about inline and block elements in HTML - http://www.impressivewebs.com/difference-block-inline-css/
P.S.You don't need to put DIV and P tags into A, this will make your code difficult to read and undestand.
Make it all simplier, with styles:
html:
<div>
Text1
Text2
Text3
</div>
css:
a.menu {
display: block;
box-sizing: border-box;
padding: 15px;
width: 70px;
height: 60px;
/* other styles */
}
Check out the Shopify login page and note the checkbox (it's green). I've been inspecting away but can't figure out how they're doing this. I did figure out the real checkbox is hidden behind this one (via float: left). But this thing is not an image. No idea how they pulled that off. Any CSS geniuses care to take a look?
As i understand it , they reduce the width and height of the real checkbox and used label:before pseudo element instead:
here is the code they used to create their custom checkbox :
.marketing-checkbox-label:before, .marketing-radio-label:before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 20px;
width: 20px;
background-color: white;
border-radius: 4px;
border: 1px solid #e5e5e5;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
-webkit-transition: border-color 150ms ease;
-moz-transition: border-color 150ms ease;
transition: border-color 150ms ease;
}
I want to make a circle, where you can hover over it and then it change from picture 1 to 2. I can do that, but when the transition is finished it goes back to the .circle class, instead of staying at second picture.
So is there anyway to make it stay at second picture, as long as im still having my mouse over the picture.
Is there also a way to make it change from second to first picture, when i remove my mouse from it ?
.circle{
width: 250px;
height: 250px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #333333;
box-shadow: 10px 10px rgba(0,0,0,0.4);
-moz-box-shadow: 10px 10px rgba(0,0,0,0.4);
-webkit-box-shadow: 10px 10px rgba(0,0,0,0.4);
-o-box-shadow: 10px 10px rgba(0,0,0,0.4);}
}
.circle-:hover{
-webkit-animation: second 2s; /* Chrome, Safari, Opera */
animation: second 2s;
}
#-webkit-keyframes second {
from {background: url("../images/circle-picture1");}
to {background: url("../images/circle-picture2");}
}
Add animation-fill-mode: forwards; and its prefixed variants to your .circle:hover class.
This causes the target to "retain the computed values set by the last keyframe encountered during execution."
More info on MDN
How do I have the properties of a declaration apply to an element after the CSS3 transitions end? I have something like:
.something {
background: blue;
padding: 10px 0px;
background-clip: content-box;
transition: box-shadow 300ms;
}
.something:hover {
box-shadow: 0px 0px 3px blue;
padding: 0px;
margin: 10px 0px;
}
I'd like the padding and margin properties in the :hover declaration to be applied after the transition is done in 300ms.
you can add a delay like this:
transition: box-shadow 300ms, padding 300ms 400ms;
The box-shadow transition will start on hover and last 300ms, and the padding will start after 400ms and again last 300ms.
.something {
background: blue;
color: white;
padding: 0px;
background-clip: context-box;
transition: box-shadow 300ms, padding 300ms 400ms;
}
.something:hover {
box-shadow: 0px 0px 3px blue;
padding: 10px;
margin: 10px 0px;
}
<div class='something'>Something</div>
Article on CSS-Tricks
You can achieve this by placing another element inside or outside .something and applying padding and margin transitions to the new element, but with transition-delay value set to the time equal or greater than time of your initial box-shadow transition.
So, for instance:
<div class="immediate">
<div class="later">
I can haz transitions.
</div>
</div>
And CSS:
.immediate {
background: #eeb;
transition: box-shadow 300ms;
}
.immediate:hover {
box-shadow: 0 0 3px black;
}
.later {
margin: 0;
padding: 10px 0;
transition: all 400ms;
transition-delay: 300ms;
}
.later:hover {
margin: 10px 0;
padding: 0;
}
This will perform the box-shadow transition in 300ms, and afterwards margin and padding in 400ms (you can set this transition time to 0 if that's the effect you're looking for).
You can try it on jsFiddle: http://jsfiddle.net/gTVVk/2/
EDIT: Duncan Beattie's answer will do just fine, unless you need to perform different transitions on the same property. Otherwise there's no point to overcomplicate things with nested divs.
When using #Duncan Beattie´s solution one property will override the other.
This should work:
transition: box-shadow 300ms linear, padding 300ms linear 400ms;
Syntax:
transition: [property] [duration] [timing-function] [delay], ... more property-transitions
Assuming an element is at 100% saturation, opacity, etc... how can I have its background become slightly lighter when it is hovered?
The use case is that I'm allowing a user to hover over any element on a page. I don't want to go around determining each colors equivalent at 80% opacity.
One method is to change the opacity: 0.4 but I only want the background to change.
It's a long time ago but you can do something like this:
.element {
background-color: red;
}
.element:hover {
box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}
You can change the 100px into a number you want. I took a large one to cover the whole element.
It isn't a very beautiful solution but it works!
Here an example: http://jsfiddle.net/6nkh3u7k/5/
Here's an easy way to do it:
.myElement:hover {
filter: brightness(150%);
}
I'm using box-shadow property to control the brightness of the background color, by placing a translucent overlay
Example:
.btn {
background-color: #0077dd;
display: inline-flex;
align-content: center;
padding: 1em 2em;
border-radius: 5px;
color: white;
font-size: 18px;
margin: 0.5em;
cursor: pointer;
}
.btn.brighten:hover {
box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.3);
}
.btn.darken:hover {
box-shadow: inset 0em 0em 0em 10em rgba(0, 0, 0, 0.3);
}
<span class="btn brighten">Brighten on Hover</span>
<span class="btn darken">Darken on Hover</span>
you should use the RGBa method (background-color:rgba(R,G,B,alpha);) to do this:
.element{
background-color:rgba(0,0,0,1); /*where 1 stands for 100% opacity*/
}
.element:hover{
background-color:rgba(0,0,0,0.5); /*where 0.5 stands for 50% opacity*/
}
FIDDLE
AND if you strongly need to make it work in IE8 or lower too here is how it comes:
.element:hover{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE6 & 7 */
zoom: 1;
}
note that the startColorstr and endColorstr values are built like this #AARRGGBB (where AA is the Alpha channel) and must be the same if you don't want a gradient effect from a color to another.
I would use a :after pseudo-element instead of a conventional background. It's supported in IE8, where rgba() isn't.
HTML:
<div class="hoverme">
<p>Lorem ipsem gimme a dollar!</p>
</div>
CSS:
.hoverme {
position: relative;
}
.hoverme:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #fff;
z-index: -1;
}
.hoverme:hover:after {
background-color: #ddd;
}
or something like that.
http://caniuse.com/#search=%3Aafter
For a smoother result, add a CSS3 transition:
.hoverme:after {
-webkit-transition: all 0.3s ease-out; /* Chrome 1-25, Safari 3.2+ */
-moz-transition: all 0.3s ease-out; /* Firefox 4-15 */
-o-transition: all 0.3s ease-out; /* Opera 10.50–12.00 */
transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
The previous snippet was copied and pasted from http://css3please.com
http://jsfiddle.net/ghodmode/6sE9E/
You can do this with only CSS using filter: brightness(); but it is only currently supported in WebKit browsers. See http://jsfiddle.net/jSyK7/
You want to change the background-color lightness of any element that is hovered without using opacity. Unfortunately. I don't think this is possible without setting specific background-color values for your hovers.
The use case is that I'm allowing a user to hover over any element on
a page. I don't want to go around determining each colors equivalent
at 80% opacity.
There is one alternative that I can think of but it would require a translucent PNG overlay on the entire element, which will also cover any of the element's contents. Thereby not solving your problem.
Related Question: Dynamically change color to lighter or darker by percentage CSS (Javascript)