Develop Reference

How to freeze the table header and left column without flickering the border

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/

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

Button press effect not working in css

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.

a box with a *pointer* with just CSS?

How do we use just CSS to achieve the effects shown in this image: http://i.stack.imgur.com/smWmQ.gif (I'm sure that image is created with CSS because I visited that site with images disabled in Chrome)

Here is a simple very efficient way of doing it.
Fiddle
UPDATE:
Here is an example:
the html
<div>
<span class='tip'></span>
</div>
the css
div {
height: 30px;
width:50px;
}
.tip {
display:block;
width:1px;
heigth:20px;
border-left: 30px solid #fff;
border-right: 30px solid #fff;
border-top: 25px solid #F00;
}

There is something similar I took from the jQuery Ketchup plugin.
The CSS looks like this:
.box span {
border-color: rgba(255, 0, 0, 0.6) transparent -moz-use-text-color;
border-left: 0 solid transparent;
border-right: 15px solid transparent;
border-style: solid solid none;
border-width: 10px 15px 0 0;
display: block;
height: 0;
margin-left: 10px;
width: 0;
}
.box ul {
background: none repeat scroll 0 0 rgba(255, 0, 0, 0.6);
border-radius: 5px 5px 5px 5px;
color: #111111;
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
line-height: 16px;
list-style: none outside none;
margin: 0;
padding: 10px;
text-align: left;
}
The according HTML:
<div class="box">
<ul>
<li>Content</li>
</ul>
<span></span>
</div>
Also have a look at the JSFiddle.

The triangle you see is just a box, often with no size, with really degenerate and different border-widths. For example to make an upward-pointing triangle, you would make a make a box like so:
top
_____
left| / \ |right
|/___\|
bottom
The box has no size, a top-border-width of 0, and non-zero values for the other widths. The border-color of the left and right and top are transparent, so you can't see those triangles. All you can see is the bottom border.
Working example: http://jsfiddle.net/NnGyv/
Unfortunately, you cannot use percentages with border widths, or else you could achieve a reusable CSS class definition.

Most browsers can do this automatically with HTML5 validation. You won't have much control over how it looks but it's 1000x easier to code and works without Javascript.
If you want more visual control there's jQuery Tools Validator. Although this uses Javascript it should fall back to HTML5 if Javascript is disabled.

The original site may be using HTML5.
HTML5 has some pretty neat features for client-side form validation. This looks very much like Chrome's take on an input box with the "required" attribute set. You'll also note a placeholder (another HTML5 attribute).
jsFiddle example. You can find out more information from Dive into HTML5.