Commits

Marlo Simon Noval committed ba1d3a8

Added =imagereplace in css snippets

  • Participants
  • Parent commits 841c9d3

Comments (0)

Files changed (9)

File snippets/css/=imagereplace/Dwyer Method.snippet

+${1:#image} {width: ${2:0}px; height: ${3:0}px; background-image: url(${4})}

File snippets/css/=imagereplace/Fahrner Method.snippet

+${1:#image} {width: ${2:0}px; height: ${3:0}px; background-image: url(${4})}
+$1 span {display: none}

File snippets/css/=imagereplace/Leahy Langridge Method.snippet

+${1:#image} {height: 0 !important; overflow: hidden; padding-top: ${2:0}px; width: ${3:0}px; background: url(${4}) no-repeat}

File snippets/css/=imagereplace/Levin Method.snippet

+${1:#image} {width: ${2:0}px; height: ${3:0}px; position: relative}
+$1 span {background: url(${4}); position: absolute; height: 100%; width: 100%}
+$1 span {display: block; width: 0; height: 0; overflow: hidden}

File snippets/css/=imagereplace/Lindsay Method.snippet

+${1:#image} {color: white; font-size: 1px; width: ${2:0}px; height: ${3:0}px; background: url(${4}) no-repeat}

File snippets/css/=imagereplace/Phark Method.snippet

+${1:#image} {width: ${2:0}px; height: ${3:0}px; background: url(${4}); text-indent: -9999px}

File snippets/css/_readme.html

+#
+# Image Replacement Techniques
+# http://www.mezzoblue.com/tests/revised-image-replacement/
+# http://css-tricks.com/css-image-replacement/
+#
+# Author       : C.Z. Robertson
+# Description  : Named after Todd Fahrner and popularized by Douglas Bowman and Jeffrey Zeldman.
+# Issues       : Most screen readers will not pick up the text when it is not rendered on-screen, nothing shows up under "images off, css on" scenarios, semantically meaningless <span>s necessary.
+# HTML         : <h1 id="image"><span>Image Replacement Technique</span></h1>
+# Trigger Desc : f for Fahrner
+snippet =irf
+	${1:#image} {width: ${2:0}px; height: ${3:0}px; background-image: url(${4})}
+	$1 span {display: none}
+# 
+# Author       : Mike Rundle
+# Description  : Referred as the Phark Method
+# Issues       : Nothing shows up under "images off, css on" scenarios, doesn't work in IE5.
+# HTML         : <h1 id="image">Image Replacement Technique</h1>
+# Trigger Desc : p for Phark
+snippet =irp
+	${1:#image} {width: ${2:0}px; height: ${3:0}px; background: url(${4}); text-indent: -9999px}
+#
+# Author       : Seamus Leahy and Stuart Langridge
+# Issues       : Nothing shows up under "images off, css on" scenarios, box model hack required to work in IE5.  # HTML         : <h1 id="image">Image Replacement Technique</h1>
+# Trigger Desc : s for Seamus or Stuart
+snippet =irs
+	${1:#image} {height: 0 !important; overflow: hidden; padding-top: ${2:0}px; width: ${3:0}px; background: url(${4}) no-repeat}
+#
+# Author       : Leon Dwyer
+# Issues       : Doesn't solve images off/css on, still requires extra span.
+# HTML         : <h1 id="image"><span>Image Replacement Technique/<span></h1>
+# Trigger Desc : d for Dwyer
+snippet =ird
+	${1:#image} {background-image: url(${2}); width: ${3:0}px; height: ${4:0}px}
+	$1 span {display: block; width: 0; height: 0; overflow: hidden}
+#
+# Author       : Levin Alexander
+# Issues       : Extra empty span, transparent images don't hide text.
+# HTML         : <h1 id="image"><span></span>Image Replacement Technique</h1>
+# Trigger Desc : a for Alexander
+snippet =ira
+	${1:#image} {width: ${2:0}px; height: ${3:0}px; position: relative}
+	$1 span {background: url(${4}); position: absolute; height: 100%; width: 100%}
+#
+# Author       : Russ Weakley
+# Description  : Referred as the Lindsay Method
+# Issues       : Doesn't solve images off/CSS on, doesn't work on anything but flat-colour backgrounds.
+# HTML         : <h1 id="image">Image Replacement Technique</h1>
+# Trigger Desc : l for Lindsay
+snippet =irl
+	${1:#image} {color: white; font-size: 1px; width: ${2:0}px; height: ${3:0}px; background: url(${4}) no-repeat}
+# End of Image Replacement Techniques

File snippets/css/url.snippet

-url('${1:../images/}${2}')${3}
+url(${1:../images/}${2})${3}

File syntax/snippet.vim

 syn match snippet '^snippet.*' transparent contains=multiSnipText,snipKeyword
 syn match multiSnipText '\S\+ \zs.*' contained
 syn match snipKeyword '^snippet'me=s+8 contained
-syn match snipError "^[^#s\t].*$"
+" syn match snipError "^[^#s\t].*$"
 
 hi link snipComment   Comment
 hi link multiSnipText String
 hi link placeHolder   Special
 hi link tabStop       Special
 hi link snipCommand   String
-hi link snipError     Error
+" hi link snipError     Error