Element (background-image) opacity, but no border opacity - javascript

I know how to do border opacity, how to do background image opacity, but I would like to have an element without border opacity, having backround-image opacity on. I don't want to modify image in image editor, so I am looking for opacity set by CSS. Possible?
In my CSS below I want to modify "disabled" status with sharp no-opacity border. Please advice...
Example of use: this fiddle
button style:
div.button, div.button:hover
{
background: none;
border: 2px solid #6C7B8B;
border-radius: 8px;
clear: none;
color: transparent;
cursor: pointer;
display: inline-block;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
float: none;
height: 24px;
margin-bottom: 0px;
margin-left: 3px;
margin-right: 0px;
margin-top: 7px;
opacity: 1;
-moz-opacity: 1;
outline: none;
overflow: hidden;
padding: none;
vertical-align: top;
width: 24px;
}
click effect:
div.button:active
{
left: 1px;
position: relative;
top: 1px;
}
extra style for status DISABLED:
div.disabled, div.disabled:hover
{
cursor: default;
filter: alpha(opacity=50);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
opacity: 0.50;
-moz-opacity: 0.50;
}
div.disabled:active
{
left: 0px;
position: relative;
top: 0px;
}
extra style for status ON:
div.on, div.on:hover
{
border: 2px solid #007FFF;
}

You're just in the same situation as CSS: set background image with opacity? - you want to have a transparent background, but non-transparent content (to whom the border counts).
So as in CSS3 there is nothing such a background-image-opacity, you can only build a transparent image or position two elements over each other, the lower containing the image (as suggested by the answers there).
But in your case it would be enough to shade the image. This could for example been done by using transparent image from the beginning, but change the underlaying background-color. Or you'd use
<div class="button" title="Zoom!"><img src="icon.gif" alt="glasses" /></div>
with
div.button.disabled img { opacity: .5; }
which makes more sense semantically, too. You should get away from those inline styles.
(updated fiddle)

You could dim the background image through semi transparent pseudo-element placed on top of the button, but not the border:
div.button {
...
position: relative;
}
div.disabled:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
background: rgba(255,255,255,0.7);
border-radius: 6px;
}
Please note that I suggest this just because I like challenges, I still think Bergi's answer is the "right way" of doing it.
http://jsfiddle.net/NECyg/

Related

Animation hover on button in css to expand background color in horizontal and when leave coming strangulate in the center

I am trying to make same animated effect when hover on button.
First of all I want when hover on button to expand background color black in horizontal of button I belive might I shoud use any transation property?
Secondly When leave mouse hover on button background color strangulate like
border-radius in the center of the button.
I have did until now to created a class btn and put same styles in tag head like code below.
But when I leave mouse over on button background-color dont't strangulate in the center as I mentiod before.
<style>
body {
background: #2ecc71;
font-size: 62.5%;
}
.container {
padding: 2em;
}
/* GENERAL BUTTON STYLING */
button,
button::after {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
button {
background: none;
border: 3px solid #fff;
border-radius: 5px;
color: #fff;
display: block;
font-size: 1.6em;
font-weight: bold;
margin: 1em auto;
padding: 2em 6em;
position: relative;
text-transform: uppercase;
}
button::before,
button::after {
background: black;
content: '';
position: absolute;
z-index: -1;
}
button:hover {
color: #2ecc71;
}
.btn-3::after {
height: 0;
left: 50%;
top: 50%;
width: 0;
}
.btn-3:hover:after {
height: 100%;
left: 0;
top: 0;
width: 100%;
}
/* BUTTON 4 */
</style>
<body>
<div class="container">
<button class="btn-3">Button 3</button>
</div>
</body>
This is exactly what I want to create for button hover by the design UI/UX:enter link description here When hover display background-color: horizontal, after leave mouse hover coming background color strangulate in the center on the button.
By the Figma, I am talking for this button:[![enter image description here][2]][2]

popup remains in the occupied area although closed

I encounter the following problem: I made a simple implementation of a popup, but when I close it and put the cusrsor on the blank area where previously was the popup, I can now click there (in the blank area) and the popup appears again. That is, it seems as if it does not close and it remains in the area which previously it was occuping. Could please someone help me because i do not understand how to make it close permantly.
function fPopUp() {
var PopUp = document.getElementById("IDPopUp");
PopUp.classList.toggle("show");
}
/* Popup container - can be anything you want */
.popup {
position: absolute;
/*display: block;*/
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
/*display: none;*/
width: 500px;
background-color: grey;
color: #fff;
text-align: left;
border-radius: 6px;
padding: 8px 0;
z-index: 1;
bottom: 125%;
left: 50%;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<button id="bAbout" onclick="fPopUp()">PopUp</button>
<div class="popup" onclick="fPopUp()">
<span class="popuptext" id="IDPopUp">"some text"</span>
</div>
Using visibility: hidden will hide the element from sight but the element will still occupy its predetermined space on the document. To completely hide the element, you need to use display: none but this doesn't play well with animations.
Your code makes things much more complicated than they have to be, so allow me to make some amendments. Here are a few suggestions:
Put the id on the actual popup instead of its content. You're trying to show/hide the popup, not its text.
This is a rather simple animation, so a simple CSS transition will do just fine.
Use pointer-events: none to make your element unresponsive to mouse events. The element will still occupy the space it normally does, but nobody will know.
function fPopUp() {
IDPopUp.classList.toggle("show");
}
/* Popup container - can be anything you want */
.popup {
position: absolute;
cursor: pointer;
user-select: none;
pointer-events: none;
opacity: 0;
transition: opacity 1s;
}
/* The actual popup */
.popup .popuptext {
width: 500px;
background-color: grey;
color: #fff;
text-align: left;
border-radius: 6px;
padding: 8px 0;
z-index: 1;
bottom: 125%;
left: 50%;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup.show {
opacity: 1;
pointer-events: auto;
}
<button id = "bAbout" onclick = "fPopUp()">PopUp</button>
<div id = "IDPopUp" class = "popup" onclick = "fPopUp()">
<span class = "popuptext">"some text"</span>
</div>

How to create a smooth animated flowing button?

I'm planning to change all the input[type=submit]s & buttons in my website into this smooth animated flowing button.
So, how do I create this using HTML, JavaScript & CSS? Especially I made this GIF to post it in Stack Overflow. And I don't think, I've to post some codes in this question to explain it. :/
EDIT: I don't want exactly Curls effect with bottom right to top left. It should start affecting from the area I click. In the next GIF I've clicked in the middle. Now please see the affect.
I hope you can understand what I mean. It should start flowing to the outside from the exact area I click.
You can use hover.css, Checkout background transition in that
http://ianlunn.github.io/Hover/ .
If you want exactly like the one you posted. you can always try some trial and error with hover.css
you can easily make with simple css see this click
Hope this helps!
.button {
position: relative;
background-color: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
overflow: hidden;
}
.button:after {
content: "";
background: #90EE90;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
<button class="button">Click Me</button>
Please check this , hope it is helpful.
a {
padding: 20px 30px;
line-height:30px;
color:#fff;
font-size: 20px;
background:#ff0000;
text-decoration: none;
position: relative;
transition: all ease .6s;
overflow:hidden;
display: inline-block;
}
a span {
z-index:1;
position:relative;
}
a:after {
transform: scale(0);
background: #000;
position: absolute;
right:-200px;
bottom:-200px;
content:'';
border-radius: 100%;
transition: all ease .6s;
width: 400px;
height: 400px;
}
a:hover:after {
transform:scale(1);
transition: all ease .6s;
}
<span>Test</span>
can be achieved by a small tweak from "Abhitalks" answer from this question!
In html :
<div class="outer_box" id="btn">
<span>Button text</span>
<div id="dummy"></div>
</div>
css :
.outer_box{
background-color: transparent;
width: 400px;
height: 400px;
position: relative;
border: 1px solid silver;
text-align:center;
}
#dummy {
position: absolute;
top: 400px; left: 400px;
width: 1px; height: 1px;
background-color: gray;
z-index: -5;
}
Script :
$('#btn').on("click", function() {
$('#dummy').animate({
'width': '400px',
'height': '400px',
'top': '0px',
'left': '0px'
}, 500);
//and any action to be done on click :)
});

When the mouse hovers over an element I want to display a small snippet of text for example "Get Info"

So I have my button below, styled with CSS, and already declared as div in the html file. When the mouse hovers over it, I want to display a small snippet of text, e.g. "Get Info".
I tried selector #GetInfo :hover { but it changed all the style and position of my button.
How can I achieve this?
#GetInfo{
cursor: pointer;
width: 33.2px;
height: 33.2px;
display: inine-block;
z-index:1;
position: absolute;
background-color: rgba(219 ,63,63,.5);
text-align: center;
font-size:23px;
color: white;
top:19px;
right:19px;
}
Is that what you want?
#getInfo {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
#getInfo .yourTooltip {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
}
#getInfo .yourTooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
#getInfo:hover .yourTooltip {
visibility: visible;
opacity: 1;
}
<html>
<body>
<h1>Pass your mouse over the text below</h1>
<div id="getInfo">Your content goes here<span class="yourTooltip">Get info</span>
</div>
</body>
</html>
There is a title attribute to almost every HTML element. It shows a text while you hover over the element. Try this:
<input type="button" value="Button" title="I wonder what this red button do ..." />

Insert space at position in border line

I'm displaying a horizontal line using css :
.horizontalLineBottom {
border-bottom:solid #6E6A6B;
border-width:1px;
}
Can I space be insterted a specific position on this line ?
So
______________________________________________
becomes
______________________________ ___
Another solution using border-width:
.line {
width: 20px;
height: 1px;
padding: 0;
border-width: 0 100px 0 150px;
border-style: solid;
border-color: red;
}
http://jsfiddle.net/dfsq/Uttxy/1/
:after or :before psuedo class can help you. Like in this Fiddle:
div {
width:100px;
height:100px;
border:1px solid #000;
margin:50px;
background:yellow;
position:relative;
}
div:after {
content: '';
height:60px;
width:1px;
position:absolute;
top:20px;
left:-1px;
background:yellow;
}
No with border in a block (just a border for a block).
You can add a background-image, if it fits your needs.
You cannot achieve this directly through CSS.
I would suggest 2 solutions
1 ) you can use _ character and make it look like a line and insert space where ever you want and give color attribute through CSS.
2) Use two elements, with first element having some width and some margin-right.
The margin right will give you the required space
You could use a background gradient on the element: http://jsfiddle.net/q652t/
Then you could create as many as you like
.line {
margin: 10px;
height: 1px;
width: 400px;
background: -webkit-linear-gradient(
left, gray 10%, white 10%, white 40%,
gray 40%, gray 60%,
white 60%, white 80%,
red 80%, red 100%);
}
You can't do it directly, but with a small workaround using a pseudo element. The trick is to create a small overlay with the same background color as the background underneath your element.
.verticalLineBottom {
position: relative;
border-bottom: 1px solid #6E6A6B;
}
.verticalLineBottom:after {
content: "";
position: absolute;
right: 20px;
bottom: -1px;
width: 100px;
height: 1px;
background: #fff;
}
Example: http://jsfiddle.net/zxdS7/
Unfortunately, it does not work if the background behind your element has a pattern.
I created this code for you, this fakes the result you're looking for.
.stopped-line {
/* basic styles here */
width: 100px; /* this is mandatory */
position: relative;
}
.stopped-line:before {
position: absolute;
bottom: 0;
display: block;
width: 70%; /* width in percentage of the line */
content: " ";
height: 1px; /* thickness of the line */
background: #000; /* color of the line */
}
.stopped-line:after {
position: absolute;
bottom: 0;
left: 80%; /* Where should the second line start? */
display: block;
width: 20%; /* width in percentage of the line */
content: " ";
height: 1px; /* thickness of the line */
background: #000; /* color of the line */
}
JSBin: click

Categories