Develop Reference

How to use div class style elements in node.style?

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).

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);

Remove outer box-shadow and keeping only inset shadow

I want to remove all the outer shadows of all elements but keep the inset shadows. If I do $('*').css({'box-shadow':'none'}); then it will remove all box-shadows, both inset and outer. How can I keep all inner shadows?

You should change your shadow to inset instead, but you will have to know what the previous values where, something rough like this may work:
var prevShadow = $('#myDiv').css('box-shadow');
$('#myDiv').css('box-shadow', prevShadow + ' inset');

Just make the outer color transparent
box-shadow:inset 0px 0px 10px red, 0px 0px 10px transparent
Or just assign a class to the element(s) with !important
<div class="something"></div>
.something {
box-shadow:inset 0px 0px 10px red !important;
}
Or just re-do the box shadow all together
$('.changeBoxShadow').click(function (e) {
$('.hasBoth').css('box-shadow', 'inset 0px 0px 10px red');
});
<div class="hasBoth"></div>
<p> <a class="changeBoxShadow">Change Box Shadow</a></p>
Fiddle for you

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

Adding a drop shadow to elements not yet clicked

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;
}