Example on codepen: http://codepen.io/anon/pen/sbHAc/

Relevant CSS

    ol {
      border   : 1px #d8d8d8 dashed;
      position : relative;
    }
    
    ol:after {
      content  : &quot;&quot;;
      position : absolute;
      z-index  : 1;
      bottom   : 0;
      left     : 0;
      pointer-events   : none;
      background-image : linear-gradient(to bottom, 
                        rgba(255,255,255, 0), 
                        rgba(255,255,255, 1) 90%);
      width    : 100%;
      height   : 4em;
    }

---

Resulting effect

![enter image description here][1]


if the browser supports the `pointer-events`  property  (all major browsers except `IE&lt;=10`) then  the text under the gradient will be also selectable/clickable.


  [1]: http://i.stack.imgur.com/YB8Xd.png

I (personally) find that using a secondary element as an &quot;overlap&quot; works pretty well. I do this by defining a new `tag`. This makes it really easy to add the desired *fade out* effect to any element you want using `&lt;fade/&gt;` at the end.

&lt;!-- begin snippet: js hide: false console: true --&gt;

&lt;!-- language: lang-css --&gt;

    div {
        position: relative;
    }

    fade {
        position: absolute;
        bottom: 0px;

        display: block;
      
        width: 100%;
        height: 50px;
      
        background-image: linear-gradient(to bottom, 
            rgba(255, 255, 255, 0), 
            rgba(255, 255, 255, 0.9)
        100%);
    }

&lt;!-- language: lang-html --&gt;

    &lt;div&gt;
        text
        &lt;br&gt;
        text
        &lt;br&gt;
        text
        &lt;fade/&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

Giving the `fade` element an `absolute` position with a `gradient` background works just as expected. As long as you remember to set the parent&#39;s position to `relative`.

    &lt;style&gt;
    .fade {
        position: relative; 
        bottom: 4em;
        height: 4em;
        background: -webkit-linear-gradient(
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 1) 100%
        ); 
        background-image: -moz-linear-gradient(
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 1) 100%
        );
        background-image: -o-linear-gradient(
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 1) 100%
        );
        background-image: linear-gradient(
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 1) 100%
        );
        background-image: -ms-linear-gradient(
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 1) 100%
        );
    }
    &lt;/style&gt;

Here is an example for you http://jsfiddle.net/nrgx7/ 

We can use this [link][1] to `add a new event` to `Google Calendar` by `parameters`

    https://www.google.com/calendar/render?
    action=TEMPLATE&amp;
    text=EventName&amp;
    dates=20131206T050000Z/20131208T060000Z
    &amp;location=EventLocation&amp;
    sprop=name:Name&amp;
    sprop=website:EventWebite&amp;
    details=EventDetail&amp;
    sf=true&amp;
    output=xml


But I can&#39;t find any documentation about these parameters.

Does anyone know where&#39;s it?

  [1]: https://www.google.com/calendar/render?action=TEMPLATE&amp;text=EventName&amp;dates=20131206T050000Z/20131208T060000Z&amp;location=EventLocation&amp;sprop=name:Name&amp;sprop=website:EventWebite&amp;details=EventDetail&amp;sf=true&amp;output=xml

What parameters are required to create an &quot;Add to Google Calendar&quot; link?

Below is my string that is getting printed out with the below code -

	jsonString = data.decode(&quot;utf-8&quot;)
    
	print jsonString
	
And below is the string that got printed out on the console - 

    {&quot;description&quot;:&quot;Script to check testtbeat of TEST 1 server.&quot;, &quot;script&quot;:&quot;#!/bin/bash\nset -e\n\nCOUNT=60   #number of 10 second timeouts in 10 minutes\nSUM_SYNCS=0\nSUM_SYNCS_BEHIND=0\nHOSTNAME=$hostname      \n\nwhile [[ $COUNT -ge \&quot;0\&quot; ]]; do\n\necho $HOSTNAME\n\n#send the request, put response in variable\nDATA=$(wget -O - -q -t 1 http://$HOSTNAME:8080/heartbeat)\n\n#grep $DATA for syncs and syncs_behind\nSYNCS=$(echo $DATA | grep -oE &#39;num_syncs: [0-9]+&#39; | awk &#39;{print $2}&#39;)\nSYNCS_BEHIND=$(echo $DATA | grep -oE &#39;num_syncs_behind: [0-9]+&#39; | awk &#39;{print $2}&#39;)\n\necho $SYNCS\necho $SYNCS_BEHIND\n\n#verify conditionals\nif [[ $SYNCS -gt \&quot;8\&quot; &amp;&amp; $SYNCS_BEHIND -eq \&quot;0\&quot; ]]; then exit 0; fi\n\n#decrement the counter\nlet COUNT-=1\n\n#wait another 10 seconds\nsleep 10\n\ndone\n&quot;}
	
But when I load this out using python `json.loads` as shown below- 

	jStr = json.loads(jsonString)
	
I am getting this error -

	ERROR Invalid control character at: line 1 column 202 (char 202)


I looked at char 202 but I have no idea why that is causing an issue? char 202 in my notepad++ is `e` I guess.. Or may be I am calculating it wrong

Any idea what is wrong? How do I find out which one is causing problem.

**UPDATE:-**

    jsonString = {&quot;description&quot;:&quot;Script to check testtbeat of TIER 1 server.&quot;, &quot;script&quot;:&quot;#!/bin/bash\nset -e\n\nCOUNT=60   #number of 10 second timeouts in 10 minutes\nSUM_SYNCS=0\nSUM_SYNCS_BEHIND=0\nHOSTNAME=$hostname      \n\nwhile [[ $COUNT -ge \&quot;0\&quot; ]]; do\n\necho $HOSTNAME\n\n#send the request, put response in variable\nDATA=$(wget -O - -q -t 1 http://$HOSTNAME:8080/heartbeat)\n\n#grep $DATA for syncs and syncs_behind\nSYNCS=$(echo $DATA | grep -oE &#39;num_syncs: [0-9]+&#39; | awk &#39;{print $2}&#39;)\nSYNCS_BEHIND=$(echo $DATA | grep -oE &#39;num_syncs_behind: [0-9]+&#39; | awk &#39;{print $2}&#39;)\n\necho $SYNCS\necho $SYNCS_BEHIND\n\n#verify conditionals\nif [[ $SYNCS -gt \&quot;8\&quot; &amp;&amp; $SYNCS_BEHIND -eq \&quot;0\&quot; ]]; then exit 0; fi\n\n#decrement the counter\nlet COUNT-=1\n\n#wait another 10 seconds\nsleep 10\n\ndone\n&quot;}
    
    print jsonString[202]

Below error I got - 

    KeyError: 202



Invalid control character with Python json.loads

![enter image description here][1]


  [1]: http://i.stack.imgur.com/2DyF2.png

Is it possible to achieve this with just one div (no background images/foreground images/layers)?


How to fade the edge of a div with just CSS?

<p><img src="http://i.stack.imgur.com/2DyF2.png" alt="enter image description here"></p>
<p>Is it possible to achieve this with just one div (no background images/foreground images/layers)?</p>


I am using dreamweaver to create a website and I thought of just using Photoshop to create backgrounds. I decided to do so only because in case I&#39;d choose to change the button name easily by just editing the codes, I could just refer to the code. If I would construct buttons using Photoshop, I wouldn&#39;t be able to edit the Texts in those buttons or in any element easily.

So my question is simple, How do I create a button that has a simple inline style making it transparent leaving the value of the button still visible.

    .button {     
        background-color: Transparent;
        background-repeat:no-repeat;
        border: none;
        cursor:pointer;
        overflow: hidden;        
    }

It still leaves a border shade after your click it.

How to make a transparent HTML button?

Can you underline a text on hover using css?  (Like the behavior of a link but not an actual link.)

1.  you have the following text  Hello work
2.  when you hover your mouse over the text it underlines it using css

(the text is not a link)


Text that shows an underline on hover

Select option padding not working in chrome

    &lt;style&gt;
    select option { padding:5px 0px; }
    &lt;/style&gt;    
    &lt;select&gt;
    &lt;option&gt;1&lt;/option&gt;
    &lt;option&gt;2&lt;/option&gt;
    &lt;option&gt;3&lt;/option&gt; 
    &lt;/select&gt;

Select option padding not working in chrome

If I direct refer to `font-awesome.css` in _layouts page. it will work

    &lt;link href=&quot;~/Content/font-awesome-4.0.3/css/font-awesome.css&quot; rel=&quot;stylesheet&quot; /&gt;

But I used in `BundleConfig.cs`. Icon is not showing. 

     bundles.Add(new StyleBundle(&quot;~/Content/css&quot;).Include(
                            &quot;~/Content/font-awesome-4.0.3/css/font-awesome.css&quot;,
                            &quot;~/Content/bootstrap.css&quot;,                        
                             &quot;~/Content/body.css&quot;,
                            &quot;~/Content/site.css&quot;,
                            &quot;~/Content/form.css&quot;
                         ));

and also I observed browser console have error to font directory.
`Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:51130/fonts/fontawesome-webfont.woff?v=4.0.3`

what could be the problem?
 

font-awesome not working bundleconfig in MVC5

I want to know about uses of png files. There are two formats available for *png images*; one is **png8** and the another one is **png24**. 

I would like to know that if I use either type in my `html` page, will there be any error? Or is this only quality matter?

Content Type	Original Author	Original Content on Stackoverflow
Question	antonpug	View Question on Stackoverflow
Solution 1 - Css	Fabrizio Calderan	View Answer on Stackoverflow
Solution 2 - Css	Aleksander Azizi	View Answer on Stackoverflow
Solution 3 - Css	user3439263	View Answer on Stackoverflow

How to fade the edge of a div with just CSS?

Css Problem Overview

Css Solutions

Solution 1 - Css

Solution 2 - Css

Solution 3 - Css

Invalid control character with Python json.loads

What parameters are required to create an "Add to Google Calendar" link?

Attributions