Add:
Code
Short description
Tags

Like: create mysql user Like: mysql, bash, server

public

add it or cancel

Public snipts » css

showing 1-20 of 187 snipts for css

∞ link like button
```
a:active {
  position: relative;
  top: 1px;
}
```
```
css
```
1

link like button
```
a:active {
  position: relative;
  top: 1px;
}
```
copy | embed

0 comments - tagged in
- css
posted by curosio on Feb 02, 2010 at 3:17 a.m. EST
∞ Make IE resize images smoothly
```
img {-ms-interpolation-mode:bicubic;}
```
```
css
```
1

Make IE resize images smoothly
```
img {-ms-interpolation-mode:bicubic;}
```
copy | embed

0 comments - tagged in
- css,
- ie
posted by nell on Jan 27, 2010 at 3:47 p.m. EST

∞ 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>

html

<style type="text/css">
.colspan {
  width: auto;
}
</style>
....
<td colspan="n" class="colspan">...</td>

<!-- or -->
<td colspan="n" style="width: auto;">...</td>

copy | embed

0 comments - tagged in

posted by tayhimself on Jan 21, 2010 at 3:13 p.m. EST

∞ 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;
}

css

.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;
}

copy | embed

0 comments - tagged in

posted by d13t on Jan 19, 2010 at 7:42 a.m. EST

∞ 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)

css

// 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)

copy | embed

0 comments - tagged in

posted by catcubed on Jan 02, 2010 at 9:50 p.m. EST

∞ // 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;}

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;}

copy | embed

0 comments - tagged in

posted by styledev on Jan 01, 2010 at 6:17 p.m. EST

∞ 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>

html

<!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>

copy | embed

0 comments - tagged in

posted by frusdelion on Dec 23, 2009 at 9:06 a.m. EST

∞ centrado de una plantilla
```
#wrapper { 
 margin: 0 auto;
 width: 922px;
}
```
```
css
```
1

centrado de una plantilla
```
#wrapper { 
 margin: 0 auto;
 width: 922px;
}
```
copy | embed

0 comments - tagged in
- css
posted by gcort on Dec 17, 2009 at 2:58 p.m. EST

∞ 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:])

python

#!/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:])

copy | embed

0 comments - tagged in

posted by italomaia on Dec 11, 2009 at 11:39 a.m. EST

∞ 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; }

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; }

copy | embed

0 comments - tagged in

posted by pkarl on Dec 08, 2009 at 3:07 p.m. EST

∞ 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

//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

copy | embed

2 comments - tagged in

css,
hack,
ie,
sass

posted by catcubed on Dec 02, 2009 at 3:39 p.m. EST

∞ 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. */

css

@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. */

copy | embed

0 comments - tagged in

posted by azote on Dec 02, 2009 at 10:30 a.m. EST

∞ 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);
}

css

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);
}

copy | embed

0 comments - tagged in

css,
transparent

posted by curosio on Dec 01, 2009 at 5:25 a.m. EST

∞ 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

// 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: ''

copy | embed

0 comments - tagged in

posted by catcubed on Nov 26, 2009 at 3:43 p.m. EST

∞ 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;}

css

// 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;}

copy | embed

0 comments - tagged in

posted by catcubed on Nov 26, 2009 at 3:12 a.m. EST

∞ 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

// 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

copy | embed

0 comments - tagged in

posted by catcubed on Nov 25, 2009 at 8:54 p.m. EST

∞ 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

/* 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; 
}}}}}}

copy | embed

0 comments - tagged in

posted by catcubed on Nov 25, 2009 at 7:27 p.m. EST

∞ 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

/* 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; }

copy | embed

0 comments - tagged in

css,
testing

posted by catcubed on Nov 25, 2009 at 7:24 p.m. EST

∞ 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

css

//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

copy | embed

0 comments - tagged in

posted by catcubed on Nov 25, 2009 at 7:21 p.m. EST

∞ opacity css

.transparent_class {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

css

.transparent_class {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

copy | embed

0 comments - tagged in

posted by chawei on Nov 25, 2009 at 9:34 a.m. EST

1 2 3 4 ... 7 8 9 10 next ››

A good css read

HTML, XHTML, and CSS

Public snipts » css

A good css read

Top 40 public tags