Public
snipts » css
showing 1-20 of 187 snipts for css
-
∞ link like button
a:active { position: relative; top: 1px; }
-
∞ Make IE resize images smoothly
img {-ms-interpolation-mode:bicubic;}
-
∞ ie colspan bug
<style type="text/css"> .colspan { width: auto; } </style> .... <td colspan="n" class="colspan">...</td> <!-- or --> <td colspan="n" style="width: auto;">...</td>
-
∞ css image hover
.image { /* image properties */ } .image:hover { -o-transition-duration: .33s; -o-transition-property: border, color, opacity, -moz-opacity; -webkit-transition-duration: .33s; -webkit-transition-property: border, color, opacity, -moz-opacity; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }
-
∞ Useful mixins for SASS
// Bunch of useful mixin functions for sass =bgImg(!img,!x = 20px,!y = 10px,!attach = "scroll",!repeat = "no-repeat") background-position = !x !y background-repeat = !repeat background-attachment = !attach background-image: url(#{!img}) =boxShadow(!x = 5px,!y = 5px,!blur = 5px,!color = #000) -webkit-box-shadow = !x !y !blur !color -moz-box-shadow = !x !y !blur !color box-shadow = !x !y !blur !color =borderRadius(!radius = 5px) -moz-border-radius = !radius -webkit-border-radius = !radius -khtml-border-radius = !radius border-radius = !radius =singleCornerRadius(!side,!vert,!width = 5px) -moz-border-radius-#{!vert}#{!side} = !width -webkit-border-#{!vert}-#{!side}-radius = !width border-#{!vert}-#{!side}-radius = !width // set global borders. Border radius can also be set =border(!width = 1px,!style = "solid",!color = #000,!radius = 0) border = !width !style !color +borderRadius(!radius) // Use noSideBorder() to kill a side after setting the global border() mixin above. // This method results in smaller css once it is converted as the width/style/color is only set once. =noSideBorder(!side) border-#{!side}: 0 =noSideBorderRadius(!side) +singleCornerRadius(!side,"top",0) +singleCornerRadius(!side,"bottom",0)
-
∞ // Create Dropdown from Select (CSS)
select.select{display:none;} dl.dropselector{margin:0 10px 0 0;} .dropselector dd,.dropselector dt,.dropselector ul{margin:0px;padding:0px;} .dropselector dd{position:relative;} .dropselector a,.dropselector a:visited{color:#816c5b;outline:none;text-decoration:none;} .dropselector a:hover{color:#5d4617;} .dropselector dt a:hover{border:1px solid #d0c9af;color:#5d4617;} .dropselector dt a{background:#e4dfcb url(arrow.png) no-repeat scroll right center;border:1px solid #d4ca9a;display:block;height:14px;padding-right:20px;padding:10px;width:auto;} .dropselector dt a span{cursor:pointer;display:block;} .dropselector dd ul{background:#e4dfcb none repeat scroll 0 0;border:1px solid #d4ca9a;color:#C5C0B0;display:none;left:0px;list-style:none;padding:5px 0px;position:absolute;min-width:170px;top:2px;width:100%;} .dropselector span.value{display:none;} .dropselector dd ul li a{padding:5px;display:block;} .dropselector dd ul li.current a{background-color:#d0c9af;color:#5d4617;} .dropselector dd ul li a:hover{background-color:#d0c9af;} .dropselector img.flag{border:none;margin-left:10px;vertical-align:middle;} .flagvisibility{display:none;}
-
∞ Issue with vertical-align. temporarily using propietary browser elements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> #wrapper { display:inline; vertical-align:middle; width:100%; height:100%; } #container { margin:auto; height:465px; width:960px; -moz-box-shadow:0 1px 10px #777; -moz-border-radius:10px; } </style> </head> <body> <div id="wrapper"> <div id="container"> </div> </div> </body> </html>
-
∞ centrado de una plantilla
#wrapper { margin: 0 auto; width: 922px; }
-
∞ css2clever translator. Simple and functional.
#!/usr/bin/python # -*- coding:utf-8 -*- #-------------------------------------- # # data: 30/11/2009 # author: italo moreira campelo maia # http://italomaia.com # http://eusouolobomau.blogspot.com/ # #-------------------------------------- import os, sys, time import clevercss as clever def parse(filepath): if filepath.endswith(".clever"): with open(filepath) as file: data = file.read() return clever.convert(data) def write(filename, data): with open(filename, 'w') as file: file.write(data) def write_clever(cfile, verb=False): data = parse(cfile) if verb: print "CLEVER FILE: ", cfile print "------------------------------------------" print "" print data print "" write("%s.css" % cfile[:-7], data) print ("%s.css criado." % cfile[:-7]) def print_help(): print "USAGE:" print "clever2css -c *.clever - cria" print "clever2css -c arquivo.clever - cria" print "clever2css -w *.clever - cria e observa por atualizações" print "clever2css -w arquivo.clever - cria e observa por atualizações" print "clever2css -q *.clever - modo simples" print "clever2css -q arquivo.clever - modo simples" print "clever2css -p *.clever - modo verborrágico" print "clever2css -p arquivo.clever - modo verborrágico" print "clever2css -q -p -c *.clever" print "clever2css -q -p -c arquivo.clever" def main(args): LIST=True WATCH=False CREATE=False PRINT=False if "-h" in args: print_help() exit(0) # quiet if "-q" in args: args.pop(args.index("-q")) LIST=False # create if "-c" in args: args.pop(args.index("-c")) CREATE=True if "-w" in args: args.pop(args.index("-w")) WATCH=True # print if "-p" in args: args.pop(args.index("-p")) PRINT=True if args: if LIST: print "" print "PROCESSANDO:" for arg in args: print "- %s" % arg print "" if any([WATCH, CREATE]): if WATCH: tdict = {} while True: for arg in args: ftime = os.path.getmtime(arg) if tdict.get(arg, False)!=ftime: tdict[arg]=ftime write_clever(arg, PRINT) time.sleep(0.5) elif CREATE: for arg in args: write_clever(arg, PRINT) else: print "Nada a fazer." if __name__=="__main__": main(sys.argv[1:])
-
∞ afeedapart.com CSS
/* Eric Meyer's CSS reset (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded) */ html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, del, em, img, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* Clearfix (http://www.positioniseverything.net/easyclearing.html) */ .group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .group { display: inline-block; } /* \*/ * html .group {height: 1%; } .group { display: block; } /* */ .promo { color: #333333; font: 46px Georgia, Serif; line-height: 55px; margin: 100px auto; text-align: center; } .promo h1 { margin-left: -70px; } .promo h2 { font-size: 28px; font-style: italic; color: #888; margin-left: 100px; margin-top: -15px;} .promo a { border-bottom: 1px dashed #999999; color: #999999; text-decoration: none; } .promo a:hover { border-bottom: 1px solid #333333; color: #333333; text-decoration: none; } .promo .sub { font-size: 16px; margin-top: 20px; padding: 50px 50px 0; line-height: 26px;} .promo .sub span { margin: 0 10px; white-space: nowrap; } .promo .afa-link { font-size: 72px; display: block; margin: 40px 20px; padding-bottom: 20px; border-bottom: 5px dashed #999999; text-decoration: none;} .promo .afa-link:hover { text-decoration: none !important; border-bottom: 5px dashed #333; } /* Generic */ .left {float: left;} .right {float: right;} .disabled {display: none;} em {font-style: italic;} strong {font-weight: bold;} body a {color: #999999; text-decoration: none; border-bottom: 1px dashed;} body a:hover {color: #333333; border-bottom: 1px solid;} /* Structure */ body {background-color: #F9F8F3; color: #333333; font: 18px "Georgia", Serif;} #frame {margin: 0 auto; width: 910px;} /* Header */ #header {padding: 20px 15px; } #header h1 {font-size: 46px;} #header h1 a {border: 0; color: #333333; text-decoration: none;} #header h1 a:hover {color: #999999;} #subtitle {color: #999999; font-size: 18px; font-style: italic; margin-top: -3px; } #countdown-container { color: #5AAEF1; margin-top: -5px; font-size: 12px;} #activity-indicator { padding-right: 5px; } #retweet-control, #links-control { margin-top: -1px; font-size: 12px; margin-left: 1em; } /* Nav */ #nav, #feed {float: left;} #nav li.nav a { border-bottom: 0; color: #999999; display: block; font-size: 26px; padding: 15px 0 15px 25px; text-decoration: none; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; } #nav li.nav a:hover {background-color: #EBE8DB; border-bottom: 0;} #nav li.nav a.active {background: #D1CCBC url('/media/images/arrow.gif') center right no-repeat; color: #333333;} .dev-message { font-style: normal !important; color: #666; } .dev-message em { color: #222; } /* Footer */ #footer {color: #999999; font-size: 14px; font-style: italic; line-height: 1.6em; padding: 25px; width: 174px;} /* Feed */ #feed { background-color: #EBE8DB; min-height: 400px; padding: 25px 10px; padding-top: 10px; width: 665px; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; } #feed ul {margin: 0;} #feed li {border-top: 1px dotted #D1CBBB; margin: 0; padding: 10px; -moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px;} #feed li:first-child {border-top: 0;} #feed li:last-child {margin-bottom: 0;} #feed li.new {background-color: #CDEAC9;} #feed li.retweet {background-color: #dcd9cd;} #feed .tweet-text, .photos {font-size:14px; float: left; line-height: 1.3em; margin-left: 15px; width: 572px;} #feed .profile-image { border-bottom: 0; display: block; float: left; height: 48px; margin-top: 5px; position: relative; width: 48px; -moz-background-size: 48px 48px; -moz-border-radius: 5px; -webkit-background-size: 48px 48px; -webkit-border-radius: 5px; } #feed li.retweet { display: none; } .posted {font-size: 12px; line-height: normal; margin-top: 7px; color: #666;} /* Sessions */ .sessions-title, .sessions-subtitle {background-color: #5AAEF1; border-radius: 5px; font-size: 26px; font-style: italic; padding: 15px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-bottom: 3px; line-height: 1.3em;} .sessions-title a {color: #333;} .sessions-subtitle {background-color: #D1CBBB; font-size: 16px; margin-bottom: 10px;} .sessions li {padding: 0 !important;} .sessions li:last-child {margin-bottom: 10px !important;} .sessions li a { border-bottom: 0; border-radius: 5px; color: #333333; display: block; margin: 0; padding: 15px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .sessions li a:hover {background-color: #D2CCBC;} .sessions li a span.time {color: #999999; display: block; margin-left: 10px; margin-top: -2px;} .sessions li a span.counts {color: #999999; display: block; margin-top: 5px;} .sessions li.dimmed { opacity: .30; -ms-filter: "alpha(opacity=30)"; } .conference-title:hover { background-color: #4483B6 !important; color: #FFF; } .new-tweet { background-color: #fbf6d7; } .speaker-tag { padding: 0 0 0 10px; margin-bottom: -3px; }
-
∞ Easy css hacks using SASS
//Easy CSS Hacks using SASS // In most cases, you'll never need the 3rd, or 4th hacks here. #idtag * html & //IE6 and below cssstyle: value * first-child+html & //IE7 only cssstyle: value html>body & //IE7,IE8, and modern browsers cssstyle: value html:first-child & //Opera only 9 and below cssstyle: value
-
∞ CSS font-face embedding
@font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('Graublau Web Regular'), local('Graublau Web'), url('GraublauWeb.otf') format('opentype'); } /* From “Bulletproof @font-face syntax” at paulirish.com. */
-
∞ RGB CSS Opacity
h1 { background: transparent url(black50.png); background: rgba(0, 0, 0, 0.5) none; } div { color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); border: 10px solid rgba(255, 255, 255, 0.3); }
-
∞ Minimal HTML5 CSS Reset (for SASS)
// minimal reset with html5 * vertical-align: baseline font-family: inherit font-style: inherit font-size: 100% border: none padding: 0 margin: 0 h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl margin: 0 0 16px li, dd, blockquote margin-left: 20px table border-collapse: collapse border-spacing: 0 article, aside, dialog, figure, footer, header, hgroup, nav, section display: block nav li, nav ul margin: 0 padding: 0 list-style: none q:before, q:after content: ''
-
∞ Simple Adjustable Gutter Grid system for LessCSS
// Simple Adjustable Gutter Grid for LessCSS (NOT TESTED! But should work) // For a 960px width, !grid = 80px = 12 columns; 60px = 16 columns // gutter is base gutter. You can change the gutter per element. See Grid mixin @pageWidth: 960px; @grid: 80px; @gutter: 20px; //used for page wrapper .container { width: @pageWidth; margin: 0 auto; } // Grid mixin functions sets size and width of element boxes. Function variables are as follows // @col = number of columns, // @gutterLeft = size of left gutter // @gutterRight = size of right gutter //gridFlush sets gutter via padding, gridFloat formed by margin .gridBase {float: left; overflow: hidden; display: inline;} .gridFlush(@col: 1,@gutterLeft: @gutter/2, @gutterRight = @gutter/2){ padding-left: @gutterLeft; padding-right: @gutterRight; width: @col * @grid - @gutterRight - @gutterLeft; .gridBase; } .gridFloat(@col: 1,@gutterLeft: @gutter/2, @gutterRight = @gutter/2){ margin-left: @gutterLeft; margin-right: @gutterRight; width: @col * @grid - @gutterRight - @gutterLeft; .gridBase; } // first is only required if you want to clear a row of elements which did not equal total width .first { clear: both;}
-
∞ Simple Adjustable Grid Mixin for SASS
// Simple Adjustable Gutter Grid // For a 960px width, !grid = 80px = 12 columns; 60px = 16 columns // gutter is base gutter. You can change the gutter per element. See Grid mixin !pageWidth = 960px !grid = 80px !gutter = 20px //used for page wrapper =container width = !pageWidth margin: 0 auto /* Grid mixin function sets size and width of element boxes. Function variables are as follows !col = number of columns, !gutterLeft = size of left gutter !gutterRight = size of right gutter // gridFlush gutter is formed via padding, gridFloat formed by margin =gridBase float: left overflow: hidden display: inline =gridFlush(!col = 1,!gutterLeft = !gutter/2, !gutterRight = !gutter/2 ) padding-left = !gutterLeft padding-right = !gutterRight width = !col * !grid - !gutterRight - !gutterLeft +gridBase =gridFloat(!col = 1,!gutterLeft = !gutter/2, !gutterRight = !gutter/2) margin-left = !gutterLeft margin-right = !gutterRight width = !col * !grid - !gutterRight - !gutterLeft +gridBase // first is only required if you want to clear a row of elements which did not equal total width =first clear: both
-
∞ CSS element inheritance spotter (for LessCSS))
/* used for testing where element bounding boxes are. Only works in modern browsers and IE8 */ //written for LessCSS. NOT Tested! Should work though body *:hover { outline-style: dotted; outline-width: 2px; outline-color: #ee3; *:hover { outline-color: #bb3; *:hover { outline-color: #883; *:hover { outline-color: #553; *:hover { outline-color: #333; *:hover { outline-color: #000; }}}}}}
-
∞ CSS element inheritance spotter
/* used for testing where element bounding boxes are. Only works in modern browsers and IE8 */ body *:hover { outline-style: dotted; outline-width: 2px; outline-color: #ee3; } body *:hover *:hover { outline-color: #bb3; } body *:hover *:hover *:hover { outline-color: #883; } body *:hover *:hover *:hover *:hover { outline-color: #553; } body *:hover *:hover *:hover *:hover *:hover { outline-color: #333; } body *:hover *:hover *:hover *:hover *:hover *:hover { outline-color: #000; }
-
∞ CSS element inheritance spotter (for SASS)
//Used for testing where the outline for boxes are. Only works in modern browsers and IE8 //This is written in SASS body *:hover outline-style: dotted outline-width: 2px outline-color: #ee3 *:hover outline-color: #bb3 *:hover outline-color: #883 *:hover outline-color: #553 *:hover outline-color: #333 *:hover outline-color: #000
-
∞ opacity css
.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }



HTML, XHTML, and CSS