Tag: css

Python one liner for css file compression

I need a script to compress css file, and I wrote this python one liner to do this. It removes unnecessary white space and strip comments.

python -c 'import re,sys;print re.sub("\s*([{};,:])\s*", "\\1",
re.sub("/\*.*?\*/", "", re.sub("\s+", " ", sys.stdin.read())))'

Create nice looking blockquote with jquery and css

EDIT: you can now do the same with just css, here is a demo

If you want to create nice looking blockquotes on your web page here is simple plugin.

nice looking blockquote

First basic css

.quote {
    font-size: 2em;
    font-family: Times New Roman, times, serif;
    position: relative;
}
.quote p {
    margin: auto;
    text-align: justify;
}
.quote span {
    font-size: 4em;
}
.quote span.open {
    position:absolute;
    top:-0.35em;
    left:0;
}
.quote span.close {
    position:absolute;
    bottom: -0.8em;
    right: 0;
}

code for the plugin

$.fn.quote = function(params) {
    $(this).addClass('quote');
    var width = params && params.width ? params.width : 400;
    $(this).css('width', width);
    $(this).html('<p>' + $(this).html() + '</p>');
    $(this).find('p').css('width', width - 120);
    $(this).append('<span class="close">&rdquo;</span>');
    $(this).prepend('<span class="open">&ldquo;</span>');
};

create basic html

<blockquote>Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Nulla sed dolor nisl, in suscipit justo. 
Donec a enim et est porttitor semper at vitae augue.
</blockquote>

And run the plugin

$(document).ready(function() {
    $('blockquote').quote({'width': 500});
});

The default width is 400 px

lt