I'm wanting to do a d3 transition based on style based in the css. However I am not able to do it for the box-shadow. Have I made a mistake or is it not supported?
var first = d3.select('.first'),
second = d3.select('body').append('div').attr('class', 'second').style('display', 'none'),
color = second.style('box-shadow');
first.transition().duration(3000).style('box-shadow', color);
.first {
width: 100px;
height: 100px;
box-shadow: 0px 0px 4px 1px gray inset;
}
.second {
width: 100px;
height: 100px;
box-shadow: 0px 0px 4px 1px blue inset;
}
Here is the example in fiddle:
http://jsfiddle.net/zasDK/4/
Here is a working example that works with background-color (I based my code on this one):
http://jsfiddle.net/linssen/zasDK/
The problem is that you are getting the canonical form of the box-shadow style when you are retrieving it using D3. This is "rgb(0, 0, 255) 0px 0px 4px 1px inset" in this case, and quite different from how you specified it in your CSS. Now D3 doesn't know how to interpolate between the strings
0px 0px 4px 1px gray inset
and
rgb(0, 0, 255) 0px 0px 4px 1px inset
and nothing happens. It works if you explicitly specify the new style in the same format as the first, see this fiddle.
However, this doesn't really give you the transition you want in this case. One approach to fixing this is to use a different way of declaring the style (see paulitto's answer), but this may not be possible depending on what other styles you're using. The second way of fixing this is to use a custom style tween. In particular, you only need to interpolate the colours here as the rest stays constant. In code, this looks like this.
first.transition().duration(3000)
.styleTween("box-shadow", function() {
var i = d3.interpolate("gray", "blue");
return function(t) {
return "0px 0px 4px 1px " + i(t) + " inset";
};
});
Complete demo here.
If you only want to make transition for shadow color, you can use the fact that it inherits color css property.
Change your css to this:
.first {
width: 100px;
height: 100px;
box-shadow: 0px 0px 4px 1px inset;
color: gray;
}
.second {
width: 100px;
height: 100px;
box-shadow: 0px 0px 4px 1px inset;
color: blue;
}
And animate color instead of box-shadow:
first.transition().duration(3000).style('color', color);
See updated fiddle
Related
I have this in CSS :
#box:target {
box-shadow: 0px 0px 20px black;
}
On a "parent" page (page1), I have a button that makes you go to another page : "page2.html#box". So the #box:target is applied when I the page is loaded.
But with a button on the page1, I activate a function which purpose is to change the #box:target properties. I'm looking for a way to change this in javascript. Not :focus.
Notice to Readers
This Answer Concerns the Original Post First Draft
The OP has been edited to an entirely different question. So if this answer is confusing, you'll need to review the edits. I apologize for any inconvenience.
:target
You do not need JavaScript for simple style switch. It appears that you have misunderstood the requirements needed to implement :target pseudo-class.
Requirements
Two <a>nchor tags and a tag of any type as the target.
<a>ON</a> <a>OFF</a> <section>SECTION</section>
One <a> will "turn on" the new <section> style and the other <a> will "turn it off".
Next, the <section> needs an #id. Both <a> need an href attribute. The values of each href is different from the other and is specific (see comment below this example):
ON OFF <section id="S">SECTION</section>
ON: Must be ☝ OFF: Must be a ☝
the #id of target: #S "non-jumping" value #/
In the CSS, add two rule sets:
The first one is the target tag at default (OFF):
#S { width: 44vw; height: 44vw; border: 4px solid #444 }
The second one is the target tag activated (ON). Suffix the :target pseudo-class:
#S:target { text-shadow: 4px 4px 4px 4px #444; }
Here's what the HTML layout should look like more or less:
ON OFF <section id="S">SECTION</section>
Demo
html,
body {
font: 900 10vh/1 Consolas;
}
a {
color: blue;
}
a:hover,
a:active {
color: cyan;
}
#B {
box-shadow: 12px 5px 8px 10px inset rgba(0, 0, 0, 0.4);
border: 6px inset rgba(0, 0, 0, 0.8);
width: 40vw;
height: 40vh;
font-size: 20vh;
text-shadow: 4px 7px 2px rgba(0, 0, 0, 0.6);
}
#B:target {
box-shadow: 12px -5px 4px 4px rgba(0, 0, 0, 0.4);
text-shadow: 4px -3px 0px #fff, 9px -8px 0px rgba(0, 0, 0, 0.55);
}
<a href="#B" class='on'>ON_</a><a href="#/" class='off'>OFF</a>
<figure id='B' class='box'>
<figcaption>BOX</figcaption>
</figure>
I am working on the table data. I fixed the table header and left column using jQuery. It works fine but When I am scrolling the table the border is flickering. If we apply the background color is white then the border is hidden. How can we stop the flickering the borders while scrolling the table. Please help me. Thanks in advance.
Here my code in JSfiddle https: //jsfiddle.net/j41acpmx/65/
The problem is with the relative position and the border is left behind making to flicker. Two ways to solve this matter.
First way is with CSS and remove table's th border from the beginning and make th background white for better visibility.
https://jsfiddle.net/pfysr0be/
Second way is to subtract the border width when positioning the fixed th elements.
Your current border is 2px so, I subtracted 2px from css top property at line 115. This will push th 2 pixels up.
if(settings.head)
{
this.find("thead tr > *").css("top", parseInt(top)-2);
...
}
Ok, you can also change your CSS to this.
Adding box inset shadows to th to solve with 2 pixels missing when floating.
#parent {
height: 300px;
width: 300px;
}
.table{
border-collapse: collapse;
}
td{
border-top: 2px solid;
background: white;
padding: 5px;
}
th{
background: white;
padding: 5px;
-webkit-box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 1);
box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 1);
}
Jsfiddle link: https://jsfiddle.net/af2quek5/
hi is there anyone can give me some advice on how to replicate the image you see into pure css font+style?
i tryed this: JSFIDDLE
css
*{
font-family: 'Asap', sans-serif;
font-size:130px;
color:#444;
font-weight:bold;
letter-spacing:-3px;
}
body{
background:url('http://img.ly/system/uploads/007/221/887/large_antani.png') no-repeat left 190px ;
}
img{
width:auto;
height:auto;
}
a{
text-shadow:
3px 3px 0 #fff,
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff,
0px 2px 2px #ccc, 0px 4px 4px #ccc,0px 6px 6px #ccc;
}
html
<a>asd</a>
any suggestion appriciated.
If also you think it's not possible to replicate this please, tell me, cause if not possible i'm wasting time on it, and i will use image instead of pure css.
NB: for the text gradient color i know css is not possible, so i'm planning to use somenthing like this : https://github.com/mrnix/pxgradient
but the huge problem to me it's making the text-shadow appearing as in the image
Thanks!
I changed your text-shadow to:
text-shadow: 0 0 0 20px white, 4px 4px 4px 20px #ccc;
It will only work on browsers that support text-shadow spread (which to my knowledge is just IE10), but it is a closer match to the effect in the image.
It's not possible to get the gradient from light-blue to slightly-darker-blue in the text colour, unfortunately, so you'll have to pick a solid colour that works best for you.
Of course, for a cross-browser compatible solution, images are your best bet.
Personally i think you should go for an image in this case. Definitely for such a simple png, it is not worth the effort imo, and you will have the best cross browser support. And I also believe that when it comes to logo's, you need full cross browser compatibility. It is what defines your brand, and the way people will recognize you, so no variations should be allowed.
If you insist on 'coding' your logo, I think you should go for an svg for the closest possible match. I would probably replicate the logo in Illustrator (if you do not have it there already) and save it as an svg from there. Integrating it in a webpage should be easy then...
Here's the closest replica for that image.
Duplicate anchor is needed as -webkit-background-clip: transparent; clips out the shadow as well while making gradient effect on text. Yes, this isn't cross-borwser compatible.
HTML:
<div class="replica">
<a class="link">asd</a>
<a class="shadow">asd</a>
</div>
CSS:
.replica {
position: relative;
}
a {
font-style:italic;
background: -webkit-gradient(linear, left top, left bottom, from(#99FFFF), to(#0DC4F3));
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
a.link {
position: absolute;
left:0;
top:-2px;
background: -webkit-gradient(linear, left top, left bottom, from(#99FFFF), to(#0DC4F3));
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
a.shadow {
text-shadow: 3px 3px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0px 2px 2px #ccc, 0px 4px 4px #ccc, 0px 6px 6px #ccc;
}
If you wanted to get crazy and possibly slow down everything, you can use jquery to make a text shadow for every angle.
follow this fiddle to try it
I just did some jquery to make a shadow for every specific angle... IT IS SLOW, I'm sure even worse with more elements... but there it is.
function stroke(thisEle) {
var spread = 10; // how far you want the stroke to be
var shadows = []; //Start an array for every textshadow
for(var i = 0; i <= 361; i++){ //For every angle
var angle = i;
var pointX = spread*(Math.sin(angle)); //find the direction
var pointY = spread*(Math.cos(angle)); //of the text shadow
if(i == 361){ //Give one last text shadow that is black underneath
var shadow = '20px 20px 20px black';
} else {
var shadow = pointX + 'px ' + pointY + 'px 0 white';
}
shadows.push(shadow); //Add this shadow to the array
}
thisEle.css({
textShadow: shadows //show all shadows (SLOW)
});
}
$('a').each(function(){ //for each - do everything above
var thisEle = $(this);
stroke(thisEle);
});
Then, to do the gradient, just follow this tutorial: http://css-tricks.com/snippets/css/gradient-text/ (NOTE CSS3 AND WEBKIT ONLY)
Otherwise, try something like this: http://webdesignerwall.com/tutorials/css-gradient-text-effect
I want to have this button pressed effect in css. I mean for example lets say I press a button then I want to change its css so that it looks pressed. Here is something that I tried. But it's not working. I used example from a site. But the button's size gets smaller and it looks different. Here is the link for the code http://jsfiddle.net/goku/GdD34/
.pressed{
position:relative;
top: 3px;
color: #fqq;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
input.happy {
background-image: url(/img/happy.png);
background-color: transparent;
background-repeat: no-repeat;
border: none;
width: 64px;
height: 64px;
margin: 10px;
cursor: pointer;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
box-shadow: 0px 3px 5px #000;
-moz-box-shadow: 0px 3px 5px #000;
-webkit-box-shadow: 0px 3px 5px #000;
}
$('.happy').click(function() {
alert('hello');
$('.happy').attr('class','pressed');
});
<input type="button" class="happy">
Just used the :active pseudo-class.
input.happy:active { /* Your style */ }
This is happening because you're replacing the class and not adding a new one. you should use :
$('.happy').addClass('pressed');
Instead of :
$('.happy').attr('class','pressed');
Because when u do that you remove all the css you previously applied to it. Your other option it to add the width/height or any other css to the pressed class.
There are a few things in your code (fiddle):
I guess you want to use a javascript framework (like jQuery), you did not select one in the fiddle.
You have a typo in the fiddle, inside the function it says $('happy') so no element will be found.
You remove the class "happy" within the javascript and replace it with pressed. Maybe you want to apply both $('.happy').attr('class', 'happy pressed'); But then for change .pressed to input.pressed and move below .happy
Perhaps you don't want all buttons to change, use use $(this).attr(...) inside the function
I'd suggest you change the order of your CSS, the and the JS to:
<style>
input.happy {
background-image: url(/img/happy.png);
background-color: transparent;
background-repeat: no-repeat;
border: none;
width: 64px;
height: 64px;
margin: 10px;
cursor: pointer;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
box-shadow: 0px 3px 5px #000;
-moz-box-shadow: 0px 3px 5px #000;
-webkit-box-shadow: 0px 3px 5px #000;
}
input.happy.pressed{
position:relative;
top: 3px;
color: #fqq;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
</style>
<script>
$(function(){
$(".happy").click(function(){
$(this).addClass("pressed");
});
});
</script>
<input type="button" class="happy">
Note, the "$(function(){" bit says "do this after page load". "addClass" will add the class to the list of classes for an element, but the event must be assigned after the DOM has loaded.
Also, you must use '$(this)' instead of '$(".happy")' inside the click function as to only apply the style to the button that was clicked.
You had some syntax errors.
Best event for this isn't .click(), its .mousedown();
When you click the Button without Releasing:
$('.happy').mousedown(function() {
$('.happy').attr('class','pressed');
});
I believe now it's working : http://jsfiddle.net/HKZ7M/
Then when you release the mouse, give it back the old class.
When you Click the Button then Release it
$('.happy').mousedown(function() {
$('.happy').attr('class','pressed');
$('.pressed').mouseup(function() {
$('.pressed').attr('class','happy');
});
});
It's working : http://jsfiddle.net/Xx2Gn/
Important Note: The .pressed button is smaller than the .happy button, when you release the mouse you have to make sure that the pointer will be above the new .pressed button, that's why you must make them the same size.
Based on the following tiled layout: http://jsfiddle.net/bzCbh/7/
Could anyone suggest a solution for adding a drop shadow to the unclicked element so it appears as though there's depth under the tiles ?
Thanks
** Apologies, the solution here lay in adding a class rule containing box shadow only to the current tile layer & also: .layer .tile img { position: relative;} Position Relative stopped the box-shadow overlapping onto neighbouring elements. **
This can be done with CSS:
.element{
box-shadow:0 0 10px #999;
}
.element.clicked{
box-shadow:0 0 0 #999
}
And the JS:
$('.element').on('click', function(){
$(this).addClass('clicked');
}
This is straight CSS3... make sure you include browser prefixes for cross-browser compatibility.
Check out the jQuery Shadow Plugin http://syddev.com/jquery.shadow/
Depending on the browsers you need to support, you could use the CSS3 Box-Shadow property:
.tile {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
}