Develop Reference

Modify :target in javascript

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>

How can I adjust a box-shadow at points along an edge?

In Material Design, shadows are intelligently applied based on their height. How can I emulate this?
Example: A toolbar with a 6px shadow overlaps a card with a 4px shadow. The shadow should only be 2px on top of the card, but 6px everywhere else.
JavaScript solutions are fine.

Firstly, I would like to point out that in most cases, the shadow should be below the card but not on top, this is to give a sense of elevation.
Guidelines related to shadows in material design could be found HERE.
To create an "imbalanced" shadow, you could do this:
box-shadow: H V B S C;
Where H: horizontal offset, V: vertical offset, B: blur, S: spread, C: color
For example:
div {
box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.35);
width: 100px;
height: 100px;
padding: 20px;
}
<div class="div"></div>
A more "realistic" and advanced example could be found in w3schools's website. It uses multiple shadows together: box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

Change Navbar Header Color on Resize

I'm very new to front-end coding. I'm creating my own responsive website using Bootstrap 3.
When I resize my browser window to simulate the size of a phone screen, I want the nav bar color (nav header color?) to change to white on Menu Icon click.
I want it to stay transparent on page load and that is working. I want the header to change to white while scrolling and that is also working. When the hamburger menu icon is clicked, the collapsible nav header drops down to reveal the menu items, but the background remains transparent, causing the menu items to lay on top of the content below.
I wrote the following script but it doesn't seem to work. Does anyone have suggestions?
<script>
var windowsize = $(window).width();
$(window).resize(funtion() {
windowsize = $(window).width();
if (windowsize < 440) {
$("#myNavbar").click(function () {
$(".navbar-header").css({"background-color": "#ffffff", "-webkit-box-shadow": "0px 1px 4px 0px rgba(180, 180, 180, 0.5)", "-moz-box-shadow": "0px 1px 4px 0px rgba(180,180,180, 0.5)", "box-shadow": "0px 1px 4px 0px rgba(180,180,180, 0.5)"});
});
};
});
</script>

You can use Media Queries in your CSS file for what you need.
#media screen and (max-width: 300px) {
nav {
background-color: #ffffff;
}
}

Since you are only changing the color on click, you don't need a window.resize() event.
<script>
$("#myNavbar").click(function () {
windowsize = $(window).width();
if (windowsize < 440) {
$(".navbar-header").css({"background-color": "#ffffff", "-webkit-box-shadow": "0px 1px 4px 0px rgba(180, 180, 180, 0.5)", "-moz-box-shadow": "0px 1px 4px 0px rgba(180,180,180, 0.5)", "box-shadow": "0px 1px 4px 0px rgba(180,180,180, 0.5)"});
}
});
</script>
I would suggest changing the dynamic CSS to use a class though too. The JS would change to $(".navbar-header").addClass("active"); and you can define the active class in your css files.

Using media queries is the best way to make a css property dependent on the screen size.
Here is some code that might suit your needs:
.nav-bar {
#media only screen and (max-width: 420px) {background:#fff;}
}
This makes the nav-bar white if the screen width is 420px or less.

I'd do this via a class toggle in JS and a CSS media query.
JS -
$("#myNavbar").click(function() {
$(".navbar-header").toggleClass('.active-nav')
});
CSS -
#media only screen and (min-width:440px) {
.navbar-header.active-nav {
background-color: #ffffff;
-webkit-box-shadow: 0px 1px 4px 0px rgba(180, 180, 180, 0.5);
-moz-box-shadow: 0px 1px 4px 0px rgba(180, 180, 180, 0.5);
box-shadow: 0px 1px 4px 0px rgba(180, 180, 180, 0.5);
}
}

Try the following:
$("#myNavbar").click(function () {
$(".navbar-header").addClass("navbar-header-mobile");
});
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
.navbar-header-mobile {
background-color: #ffffff;
-webkit-box-shadow: 0px 1px 4px 0px rgba(180, 180, 180, 0.5);
-moz-box-shadow: 0px 1px 4px 0px rgba(180,180,180, 0.5);
box-shadow: 0px 1px 4px 0px rgba(180,180,180, 0.5);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You just need to add something that removes it on the phone if you want.

Solved the issue. Its not just the header color, I needed to change the collapsible menu background as well. So I used the same logic I used for header color. Capturing the click function of the collapsible nav bar and toggling the colors. Here is my final piece of code:
<script>
$(function (){
$(".navbar-toggle").click(function() {
if ($(window).width() < 440) {
$(".navbar-collapse").toggleClass("menuActive");
$(".navbar-header").toggleClass("menuActive");
}
});
});
</script>

Roughly like this, on click when res is less than 440 the navbar will be white :-
<script>
$('.navbar').click(function() {
$(this).toggleClass('open');
});
</script>
#media only screen and (max-width: 440px) {
.navbar.open {
background-color: #ffffff;
-webkit-box-shadow: 0px 1px 4px 0px rgba(180, 180, 180, 0.5);
-moz-box-shadow: 0px 1px 4px 0px rgba(180,180,180, 0.5);
box-shadow: 0px 1px 4px 0px rgba(180,180,180, 0.5);
}
}
<div class="navbar"></div>

CSS Values in a D3 Transition box shadow

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

CSS/ Javascript - replicate the image style with css3 or javascript (stickers style)

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