Snipt.net is closing on December 31st, 2016

For more information, please visit this blog post.

snipt

Ctrl+h for KB shortcuts

Text only

CSS Triangle Firefox issue

Firefox can sometimes generate a weird gradient on CSS triangles.
Replace the border-style inset by outset and you're good to go
https://snipt.net/embed/81b2b4b6a8d4440f42cd7768098b1dfe/
https://snipt.net/raw/81b2b4b6a8d4440f42cd7768098b1dfe/
81b2b4b6a8d4440f42cd7768098b1dfe
text
Text only
2
2016-12-06T11:26:51
True
False
True
Dec 07, 2013 at 07:19 AM
/api/public/snipt/99096/
css-triangle-firefox-issue
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a>Firefox can sometimes generate a weird gradient on CSS triangles. </span><span id="L-2"><a name="L-2"></a>Replace the border-style inset by outset and you&#39;re good to go </span></pre></div> </td></tr></table>
border, css, triangle

CSS

border radius

1
2
3
4
5
6
7
-moz-border-radius-topleft:     25px;
-moz-border-radius-topright:    25px;
-webkit-border-top-left-radius: 25px;
-webkit-border-top-right-radius: 25px;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-radius: 25px 25px 0px 0px;
https://snipt.net/embed/9743e72e498002d59e392acf72a8ff38/
https://snipt.net/raw/9743e72e498002d59e392acf72a8ff38/
9743e72e498002d59e392acf72a8ff38
css
CSS
7
2016-12-02T14:28:00
True
False
False
/api/public/snipt/40981/
border-radius-8
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a> <a href="#L-5">5</a> <a href="#L-6">6</a> <a href="#L-7">7</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nt">-moz-border-radius-topleft</span><span class="o">:</span> <span class="nt">25px</span><span class="o">;</span> </span><span id="L-2"><a name="L-2"></a><span class="nt">-moz-border-radius-topright</span><span class="o">:</span> <span class="nt">25px</span><span class="o">;</span> </span><span id="L-3"><a name="L-3"></a><span class="nt">-webkit-border-top-left-radius</span><span class="o">:</span> <span class="nt">25px</span><span class="o">;</span> </span><span id="L-4"><a name="L-4"></a><span class="nt">-webkit-border-top-right-radius</span><span class="o">:</span> <span class="nt">25px</span><span class="o">;</span> </span><span id="L-5"><a name="L-5"></a><span class="nt">border-top-left-radius</span><span class="o">:</span> <span class="nt">25px</span><span class="o">;</span> </span><span id="L-6"><a name="L-6"></a><span class="nt">border-top-right-radius</span><span class="o">:</span> <span class="nt">25px</span><span class="o">;</span> </span><span id="L-7"><a name="L-7"></a><span class="nt">border-radius</span><span class="o">:</span> <span class="nt">25px</span> <span class="nt">25px</span> <span class="nt">0px</span> <span class="nt">0px</span><span class="o">;</span> </span></pre></div> </td></tr></table>
border, css, radius

Objective-C

setting border on UIView

	self.layer.borderColor = [UIColor whiteColor].CGColor;
	self.layer.borderWidth = 2;
https://snipt.net/embed/ec4f36fefff7a630c71909b118d96030/
https://snipt.net/raw/ec4f36fefff7a630c71909b118d96030/
ec4f36fefff7a630c71909b118d96030
objective-c
Objective-C
3
2016-12-04T15:02:54
True
False
False
/api/public/snipt/24425/
setting-border-on-uiview
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a> <span class="nb">self</span><span class="p">.</span><span class="n">layer</span><span class="p">.</span><span class="n">borderColor</span> <span class="o">=</span> <span class="p">[</span><span class="bp">UIColor</span> <span class="n">whiteColor</span><span class="p">].</span><span class="bp">CGColor</span><span class="p">;</span> </span><span id="L-2"><a name="L-2"></a> <span class="nb">self</span><span class="p">.</span><span class="n">layer</span><span class="p">.</span><span class="n">borderWidth</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span> </span></pre></div> </td></tr></table>
border, uiview

CSS

border radius

1
2
3
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
https://snipt.net/embed/3f20fd1fc12a428181a7780353de0c47/
https://snipt.net/raw/3f20fd1fc12a428181a7780353de0c47/
3f20fd1fc12a428181a7780353de0c47
css
CSS
3
2016-12-02T14:28:11
True
False
False
/api/public/snipt/23450/
border-radius-6
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nt">-webkit-border-radius</span><span class="o">:</span> <span class="nt">8px</span><span class="o">;</span> </span><span id="L-2"><a name="L-2"></a><span class="nt">-moz-border-radius</span><span class="o">:</span> <span class="nt">8px</span><span class="o">;</span> </span><span id="L-3"><a name="L-3"></a><span class="nt">border-radius</span><span class="o">:</span> <span class="nt">8px</span><span class="o">;</span> </span></pre></div> </td></tr></table>
border, css, css3

CSS

Remove Firefox Link Border

a:active { outline: none; }
a:focus { -moz-outline-style: none; }
https://snipt.net/embed/fd4d5d45ff6a73392656ce1ef6a3a4e5/
https://snipt.net/raw/fd4d5d45ff6a73392656ce1ef6a3a4e5/
fd4d5d45ff6a73392656ce1ef6a3a4e5
css
CSS
2
2016-12-02T14:28:19
True
False
False
/api/public/snipt/6144/
remove-firefox-link-border
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nt">a</span><span class="nd">:active</span> <span class="p">{</span> <span class="nb">outline</span><span class="o">:</span> <span class="nb">none</span><span class="p">;</span> <span class="p">}</span> </span><span id="L-2"><a name="L-2"></a><span class="nt">a</span><span class="nd">:focus</span> <span class="p">{</span> <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="nb">outline-style</span><span class="o">:</span> <span class="nb">none</span><span class="p">;</span> <span class="p">}</span> </span></pre></div> </td></tr></table>
border, css, firefox
Copyrighted, illegal, or inappropriate content? Email [email protected].