We Keep Coding

See beyond grayscale/saturation using CSS or Javascript/jQuery

Summary of what I'm trying to achieve: I want to make my entire website in grayscale or saturation 0 and a div which follows the cursor to display the colors under that "mask" or div which acts like a mask.
I tried different approaches for this but I can't get it. I tried using CSS, with filter property or backdrop-filter. I tried finding the solution with Google Web Designer
In GWD the mask works just in one way, not like in photoshop.For example, in photoshop you can pun a top layer to remove the saturation than put a mask on it and reverse the mask to for it to apply outside the area created.
mask in pohotoshop
But in GoogleWebDesigner the mask is only applied on the area created, you can reverse it mask in googlewebdesigner
Do you have other suggestions how to approach this ? another method

This is possible using a combination of clip-path (documentation) and backdrop-filter (documentation). These are both quite new, so check whether they are suitable for you browser support requirements.
Most of the explanation is in the code comments, but a basic summary:
Fix an element over the entire document, and use backdrop-filter to make everything greyscale.
Use clip-path to only apply that filter to a rectangle in the center.
Use JS to offset the element so that the center remains over the cursor.
// This simply listens for mouse movenet and sets the CSS variables to the current X/Y
const cursor = document.querySelector(".cursor")
addEventListener('mousemove', e => {
cursor.style.setProperty("--x", `${e.pageX}px`);
cursor.style.setProperty("--y", `${e.pageY}px`);
});
/* This body style is just an example to make the demo work, it is not relevant to the solution*/
body {
min-height: 100%;
background-image: linear-gradient(45deg, #ff002f 10%, #2bcc33 10%, #2bcc33 20%, #0c12cc 20%, #0c12cc 30%, #0ddec6 30%, #0ddec6 40%, #d0db00 40%, #d0db00 50%, #ff002f 50%, #ff002f 60%, #2bcc33 60%, #2bcc33 70%, #0c12cc 70%, #0c12cc 80%, #0ddec6 80%, #0ddec6 90%, #d0db00 90%, #d0db00 100%);
background-size: 141.42px 141.42px;
}
/* This container covers the page and prevent the mask from blocking clicks or making the page scrollable*/
.cursorContainer {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
pointer-events: none;
}
.cursor {
/* These are set by JS and used to keep the box over the cursor */
--x: 0px;
--y: 0px;
/* These are each half of the box's width and height respectively */
--boxX: 60px;
--boxY: 40px;
/* These work out the boundries of the clip path from the sizes above */
--boxUpperX: calc(50% + var(--boxX));
--boxLowerX: calc(50% - var(--boxX));
--boxUpperY: calc(50% + var(--boxY));
--boxLowerY: calc(50% - var(--boxY));
position: fixed;
height: 200vh;
width: 200vw;
/* Use the variables above to keep this over the cursor */
left: calc(-100% + var(--x));
top: calc(-100% + var(--y));
/* Apply the greyscale filter to the webpage behind this element */
backdrop-filter: grayscale(1);
/* Only apply that filter to this area (Basically a thick rectangle with a gap for the colour to appear through) */
clip-path: polygon(0% 0%, 0% 100%, var(--boxLowerX) 100%, var(--boxLowerX) var(--boxLowerY), var(--boxUpperX) var(--boxLowerY), var(--boxUpperX) var(--boxUpperY), var(--boxLowerX) var(--boxUpperY), var(--boxLowerX) 100%, 100% 100%, 100% 0%);
}
<div class="cursorContainer">
<div class="cursor"></div>
</div>

Responsive obtuse-angled triangle css

I've been searching for answers about this.
Is it possible to make an responsive obtuse-angled triangle in html/css or JS?
I would like to make a triangle such as this:
obtuse-angled triangle example :
I do know how to make triangles with the border trick, but i can't figure out how to make the otuse-angled one.
I hope you guys can help and have a smart trick.
Best regards
Joachim

Here is a simply way using linear-gradient:
body {
margin:0;
height:100px;
background:linear-gradient(to top right,transparent 50%, blue 51%) 0 0/20% 100% no-repeat,
linear-gradient(to top left,transparent 50%, blue 51%) 100% 0/calc(80% + 1px) 100% no-repeat;
}

Use borders of different widths
div {
margin: 1em auto;
height: 0;
width: 0;
border-color: red transparent transparent transparent;
border-style: solid;
border-width: 250px 250px 0px 50px;
}
<div></div>

How to create an triangle shape (fixed height, width=100%) with background

I have a graphic background, and I need to display a colored triangle in the top left corner (independing the resolution).
Can I create a triangle shaped element using only HTML/CSS/JS with width = 100% and height = 200px with background = red?
I can create it by IMG with width=100%, but I was hoping for a better solution than resizing an image.
The solution needs to be compatible with IE7+ and using browser's versions (more than 2%).
Thanks

Because you can't create a border which has a percentage, try using vw (viewer width) instead. So:
.triangle{
width: 0;
height: 0;
border-bottom: 600px solid blue;
border-left: 100vw solid transparent;
}

Vw units aren't supported by IE8, you will need to use a JS fallback for browsers that don't support these units.
Here is a jQuery script that sets the border-width according to the window size and adjusts it on window resize. Tested in IE8 (IE tester) :
$(document).ready(function() {
function triangle() {
var width = $('#wrap').width(),
border = width / 4;
$("#wrap .tr").css({
"border-left": border + "px solid #fff",
"border-bottom": border + "px solid transparent"
});
}
triangle();
$(window).on('resize', triangle);
});
body {
background: #fff;
}
#wrap {
position: relative;
min-height: 500px;
background: teal;
}
.tr {
position: absolute;
left: 0;
top: 0;
border-left: 200px solid #fff;
border-bottom: 200px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrap">
<div class="tr"></div>
</div>

To expand on web-tiki's answer, I think this is actually what you're going for:
$(document).ready(function() {
function triangle() {
$("#wrap .tr").css({
"border-left": $('#wrap').width() + "px solid #fff",
"border-bottom": "200px solid transparent"
});
}
triangle();
$(window).on('resize', triangle);
});
body {
background: #fff;
}
#wrap {
position: relative;
min-height: 500px;
background: teal;
}
.tr {
position: absolute;
left: 0;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrap">
<div class="tr"></div>
</div>

I think it would be best to use background instead of borders:
.my-triangle {
width: 100%;
height: 200px;
background: linear-gradient(to left top, transparent 50%, red 50%);
}
<div class="my-triangle"></div>
Note that in order for it to be cross-browser compatible you will need to fiddle around with CSS prefixes, IE filters and SVG. (I don't readily have access to IE so I'll leave that one for you, but it would be something along these lines:)
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, transparent), color-stop(0.5, transparent), color-stop(0.5, #FF0000), color-stop(1, #FF0000));
background-image: -webkit-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: -moz-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: -ms-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: -o-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: linear-gradient(to top left, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);

Just take a div element, give a class name 'triangle-topleft', and write the below given css
.triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
color of border-top would be the div's background color..Here it's red.
For more triangle structures, follow this link..
[http://css-tricks.com/examples/ShapesOfCSS/][1]

Image in placeholder html?

Can I do something like this with pure html and if needed css and javascript:
And when the mouse focuses, it becomes like this:
So I was thinking of an image placeholder. Am I on the right track, or is there a better/more simpler or more straightforward method?
EDIT: Just out of pure curiosity, how would I accomplish this using JavaScript, as all the current answers are all CSS-related?

From my knowledge this is simply CSS background image.
http://www.w3schools.com/cssref/pr_background-image.asp
Have it look there, you can accomplish this by setting its position like here: http://www.w3schools.com/cssref/pr_background-position.asp
You can also change the background image depend on if the item is focused or not simply showing the back ground image when focused and hiding it when its not like:
#item:focus{
bacground image code here
}
More details on focus here: http://www.w3schools.com/cssref/sel_focus.asp
And some focus usage example: http://www.mozilla.org/access/keyboard/snav/css_usage.html
UPDATE WITH RESOURCE - THANKS #MrMisterMan
http://developer.mozilla.org/en/CSS/background-image
http://developer.mozilla.org/en/CSS/background-position
JAVASCRIPT:
Using JavaScript add the attribute to your element like below:
This will call your function when it has focus and pass it the input element.
Also you can detect onfocusout
Hope this helps, any questions just ask :)

If you only need to support the latest Browser use this:
HTML:
<input placeholder="Google Custom Search" type="search" name="q">
CSS:
#myInput::-webkit-input-placeholder {
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput::-moz-placeholder {
/* Firefox 19+ */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput:-moz-placeholder {
/* Firefox 18- */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput:-ms-input-placeholder {
/* IE 10- */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
JSFiddle
Browser Support

If you need an image (google logo in the question) you should set the placeholder image as the background of the text field:
input.search {
background-image: url("placeholder.gif");
background-repeat: no-repeat;
}
input.search:focus {
background-image: none;
}
Note: :focus is a pseudo-class in css, which is activated on focus

You may use just CSS.
You can give a solid border with say 4px width.
You can make round corners foor your input using moz-border or webkit-border radius.
You can use a border background image.
here you can read about css3 borders http://www.w3schools.com/css3/css3_borders.asp
You may try
input {
border:2px solid #dadada;
border-radius:7px;
font-size:20px;
padding:5px;
}
input:focus {
outline:none;
border-color:#9ecaed;
box-shadow:0 0 10px #9ecaed;
}
Here is the working fiddle

Best way to make text look fading away

I am creating an image effect where the text at the bottom of a paragraph fades away
This is the effect I'm trying to achieve:
I have some working HTML & CSS which achieves this look but I am looking to see if there is a better way to achieve this effect? I've often found that there are HTML tricks to do what I want that I dont know of.
I'm open to using JQuery if it has the ability to do this effect but a native HTML CSS effect would be best. Plus is my solution cross browser?
<html>
<head>
<title> </title>
<style type="text/css">
<!--
body {
background-color: blue;
text-align: center;
margin: 0 auto;
padding: 0 auto;
}
#mainContent {
width: 800px;
height: 500px;
margin: 0 auto;
padding: 0 auto;
}
.textContainer {
width: 800px;
height: 500px;
margin: 0 auto;
padding: 0 auto;
position: relative;
}
.recipeContentOverlay {
z-index: 5;
position: absolute;
left: 0;
top: 80px;
}
-->
</style>
</head>
<body>
<div id="mainContent">
<div class="textContainer">
<h2 class="recipeText">Ingredients:</h2>
<p class="recipeText">Have you ever had broccoli rabe (pronounced "rahb" or "rah-bee" depending on where you are from)? I have sort of a love hate relationship with it. It looks like broccoli, but it doesn't taste like it. Broccoli rabe can sometimes be so bitter, even with blanching, there's no amount of vinegar or bacon that can save it. But bitterness heightens flavors</p>
<img class="recipeContentOverlay" src="images/overlay.png" width="100%" height="200px"/>
<!-- The idea is to get the above image to sit slightly over the top of the above "p" element so that some of the text
fades away. Is there a better way to acheive the same look/effect? -->
</div>
</div>
</body>
</html>

You can achieve this with Cufon, a legal way to embed [almost] any font into a webpage through Javascript. You'd just include the Cufon API as usual, and your Javascript code would look like this:
Cufon.replace('.paragraph', { color: '-linear-gradient(black, blue)' });
What this does is select the element with class "paragraph" (CSS selectors can only be used if you have a library that supports it on your webpage too, like jQuery and sets its color to a linear gradient. In this case I made it go from black to blue so that by the end it blends in with your background color (according to the image you showed us, that is).
I'll get a live demo up soon.
Fair warning though, text fading into the background is not exactly user friendly. It's up to you whether you'd like to continue using it. I do admit it's a nice effect, but only when it's still perfectly legible.

Try something like this. Basically we use CSS gradients and opacity to set the color.
http://jsfiddle.net/V45LW/
You can use a site like this one to help with getting the css written. Basically what you do is absolutely position a div at end of paragraph of fixed height. We apply a gradient opacity change to it.
div.fade {
position: absolute;
bottom: 0;
height: 45px;
width: 100%;
background: -moz-linear-gradient(top, rgba(125,185,232,0) 0%, rgba(30,87,153,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,185,232,0)), color-stop(100%,rgba(30,87,153,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
}