I am trying to incorporate css styles associated with particular div class names using node.style. I can get the styles to work individually but I am trying to implement multiple styles that span within one another using the div classes mentioned. I am wondering if there is a way of doing this using an easier method or can it be done at all?
var node = document.createElement("wall-post");
var image = new Image();
image.src = obj.picture;
node.appendChild(image);
node.style=' display: inline-block;margin: 15px;margin-top: 30px; border-radius: px;overflow-y: hidden;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);float:left;';
document.body.appendChild(node);
The style property on an element isn't a string, it's an object with properties for the styles. You set them individually.
node.style.display = 'inline-block';
node.style.margin = '15px';
node.style.marginTop = '30px';
node.style.borderRadius = /*?? Your question just has 'px' */;
node.style.overflowY = 'hidden';
node.style.boxShadow = '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)';
node.style.float = 'left';
Note that you use the camelCase version (well, or node.style["margin-top"] = "...").
Alternately, if you want to completely replace the style, you can do that by using setAttribute to replace the style entirely:
node.setAttribute('style', ' display: inline-block;margin: 15px;margin-top: 30px; border-radius: px;overflow-y: hidden;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);float:left;');
All of that aside: In general, supplying style information in JavaScript code isn't a great pattern to follow. Create a descriptive class, then use that class on the element.
You can also use node.className = "yourclass" and use css to define the styling of that class
.yourclass {
display: inline-block;
margin: 15px;
margin-top: 30px;
border-radius: px;
overflow-y: hidden;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
float:left;
}
The style property is related to the style attribute which accepts, as its value, the body of a CSS rule-set. It associates those rules with the particular element.
Selectors, including class selectors, appear outside the rule-set's body and cannot be included in a style attribute. (It doesn't make sense to do so anyway, the style attribute is associated with a specific element, so there is no point is selecting a different one from that context).
Related
I have a box-shadow in my css as:
.className {
transform: translateY(0);
box-shadow:
inset 0 0 60px whitesmoke,
inset 20px 0 80px #f0f,
inset -20px 0 80px #0ff,
inset 20px 0 300px #f0f,
inset -20px 0 300px #0ff,
0 0 50px #fff,
-10px 0 80px #f0f,
10px 0 80px #0ff;
}
I would like to apply this shadow using jQuery INSTEAD (so I can later implement dynamic colors). My current javascript is:
$('.className').css({
"box-shadow": 'inset 0 0 60px whitesmoke'
})
Which applies one side of the shadow with no issues. When I try to add the other shadows separated by commas in css, nothing happens. I tried adding all the comma values on one line as follows:
$('.className').css({
"box-shadow": 'inset 0 0 60px whitesmoke, inset 20px 0 80px #f0f,...'
})
But that didn't work. I also tried using spaced instead of commas and that also didn't work. Is there any way to convert this multi-comma value shadow box into one parameter that can be accepted by jQuery's .css?
If not... how can I convert the css into an acceptable format to be passed into jQuery's .css method?
Thanks.
Must have made a syntax error as it works fine with the comma approach. See Temani's fiddle: jsfiddle.net/autq9p13
Thanks.
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>
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);
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
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