Public
snipts » css 
showing 1-20 of 193 snipts for css
-
∞ center div both horizontal and vertical
.className{ margin:0 auto; width:200px; height:200px; } .className{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px; } $(window).resize(function(){ $('.className').css({ position:'absolute', left: ($(document).width() - $('.className').outerWidth())/2, top: ($(document).height() - $('.className').outerHeight())/2 }); }); // To initially run the function: $(window).resize(); -
∞ CSS rounded corners
-webkit-border-radius: 6px; -moz-border-radius: 6px; -moz-border-radius-topleft: 6px; -webkit-border-top-left-radius: 6px; -moz-border-radius-topright: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-bottomleft: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-bottomright: 6px; -webkit-border-bottom-right-radius: 6px;
-
∞ CSS transparency for all browsers
.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }
-
∞ Reset style sheet.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; background:transparent;} body { font: 62.5%/1.5 Arial, sans-serif; color: #545454; background-color: #fff; } /*================================================================================= Link Styles =================================================================================*/ a:link, a:visited {color:#4477b0; text-decoration:none;} a:focus, a:hover, a:active {text-decoration:underline;} /*================================================================================= Heading Styles =================================================================================*/ h1 {font-size:1.8em; margin:1em 0;} h2 {font-size:1.6em; margin:1em 0;} h3 {font-size:1.4em; margin:1em 0;} h4 {font-size:1.2em; margin:1em 0;} h5 {font-size:1em; margin:1em 0;} /*================================================================================= List Styles =================================================================================*/ dl, ol, ul {margin:1em 0;} ol, ul {padding:0 0 0 2em;} li, dd {margin:.25em 0;} dt {font-weight:bold;} /*================================================================================= Table Styles =================================================================================*/ table {border-collapse:collapse; border-spacing:0;} th {font-weight:bold;} td, th {padding:.3em .5em; text-align:left;} /*================================================================================= General Styles =================================================================================*/ img {border:0;} p {margin:1em 0;} hr {display:none;} legend {padding:0 .5em;} blockquote {padding-left:2em;} em, ins, del {font-style:italic;} del {text-decoration: line-through;} fieldset {padding:0 1em; border:1px solid #666;} abbr, acronym, dfn {cursor:help; border-bottom:1px dotted #ddd;} code, kbd, pre {font-family:Courier, "Courier New", Tahoma, sans-serif;}
-
∞ for Dave
Modify your travel.html to have this: <img class="right" src="images/bostonoverview.jpg" width="300" height="400" alt="a pictue i took of Boston from the highest building" /> Add this to style.css: img.right { float: right; margin: 0 0 10px 10px; } -
∞ crossbrowseropacity
.crossbrowseropacity { background-color:#000; opacity: .75; /* W3C Standard: FF > 1.5, Opera, Safari */ -khtml-opacity: .75; /* Safari 1.x */ -moz-opacity: .75; /* FireFox<1.6 */ filter: alpha(opacity=75); /* IE<8 */ -ms-filter: "alpha(opacity=75)"; /* IE8 */ } .crossbrowseropacity * { /* CLEAR CHILDREN */ background-color:#000; opacity: 1; /* W3C Standard: FF > 1.5, Opera, Safari */ -khtml-opacity: 1; /* Safari 1.x */ -moz-opacity: 1; /* FireFox<1.6 */ filter: alpha(opacity=100); /* IE<8 */ -ms-filter: "alpha(opacity=100)"; /* IE8 */ }
-
∞ 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: ''
CSS: The Definitive Guide