Over|View: CSS

Showing posts with label CSS. Show all posts

Wednesday, 30 December 2015

Compress css within PHP using PHP

COMPRESS CSS

Create a style.php file, not style.css.
paste this code.

<?php ob_start ("ob_gzhandler"); header("Content-type: text/css; charset: UTF-8"); header("Cache-Control: must-revalidate"); $offset = 60 * 60 ; $ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT"; header($ExpStr); ?> body { color: red; }
css goes here as always...

Then call this stylesheet with php file name, see below...thats it.

string ob_gzhandler ( string $buffer , int $mode )

ob_gzhandler() is intended to be used as a callback function for ob_start() to help facilitate sending gz-encoded data to web browsers that support compressed web pages. Before ob_gzhandler() actually sends compressed data, it determines what type of content encoding the browser will accept ("gzip", "deflate" or none at all) and will return its output accordingly. All browsers are supported since it's up to the browser to send the correct header saying that it accepts compressed web pages. If a browser doesn't support compressed pages this function returns `FALSE`.

Friday, 26 December 2014

Corner Ribbon Using CSS

CORNER RIBBON

HTML SOURCE

CSS SOURCE

.wrapper { margin: 50px auto; width: 280px; height: 370px; background: white; border-radius: 10px; -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); box-shadow: 0px 0px 8px rgba(0,0,0,0.3); position: relative; z-index: 90; } .ribbon-wrapper-green { width: 85px; height: 88px; overflow: hidden; position: absolute; top: -3px; right: -3px; } .ribbon-green { font: bold 15px Sans-Serif; color: #333; text-align: center; text-shadow: rgba(255,255,255,0.5) 0px 1px 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); position: relative; padding: 7px 0; left: -5px; top: 15px; width: 120px; background-color: #BFDC7A; background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45); color: #6a6340; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); box-shadow: 0px 0px 3px rgba(0,0,0,0.3); } .ribbon-green:before, .ribbon-green:after { content: ""; border-top: 3px solid #6e8900; border-left: 3px solid transparent; border-right: 3px solid transparent; position:absolute; bottom: -3px; } .ribbon-green:before { left: 0; } .ribbon-green:after { right: 0; }

Monday, 16 June 2014

How to style table using CSS?

No explanation needed for you buddy :)
This is as simple as you see here..

Table 1

Html code for Table 1

<table id="gradient-style" summary="Meeting Results">
<thead>
<tr>
<th scope="col">Employee</th>
<th scope="col">Division</th>
<th scope="col">Suggestions</th>
<th scope="col">Rating</th></tr>
</thead>

<tfoot>
<tr><td colspan="4">Give background color to the table cells to achieve seamless transition</td></tr>
</tfoot>

<tbody>
<tr><td>Stephen C. Cox</td><td>Marketing</td><td>Make discount offers</td><td>3/10</td></tr>
<tr><td>Josephin Tan</td><td>Advertising</td><td>Give bonuses</td><td>5/10</td></tr>
<tr><td>Joyce Ming</td><td>Marketing</td><td>New designs</td><td>8/10</td></tr>
<tr><td>James A. Pentel</td><td>Marketing</td><td>Better Packaging</td><td>8/10</td></tr>
</tbody>
</table>

CSS code for Table 1

Table 2

Html code for Table 2

<table id="pattern-style-a" summary="Meeting Results">
<thead>
<tr>
<th scope="col">Employee</th>
<th scope="col">Salary</th>
<th scope="col">Bonus</th>
<th scope="col">Supervisor</th></tr>
</thead>
<tbody>
<tr><td>Stephen C. Cox</td><td>$300</td><td>$50</td><td>Bob</td></tr>
<tr><td>Josephin Tan</td><td>$150</td><td>-</td><td>Annie</td></tr>
<tr><td>Joyce Ming</td><td>$200</td><td>$35</td><td>Andy</td></tr>
<tr><td>James A. Pentel</td><td>$175</td><td>$25</td><td>Annie</td></tr>
</tbody>
</table>

CSS code for Table 2

Table 3

Html code for Table 3

<table id="pattern-style-b" summary="Meeting Results">
<thead>
<tr>
<th scope="col">Nation</th>
<th scope="col">Capital</th>
<th scope="col">Language</th>
<th scope="col">Unique</th>
</tr>
</thead>
<tbody>
<tr><td>Japan</td><td>Tokyo</td><td>Japanese</td><td>Karate</td></tr>
<tr><td>South Korea</td><td>Seoul</td><td>Korean</td><td>Ginseng</td></tr>
<tr><td>China</td><td>Beijing</td><td>Mandarin</td><td>Kung-Fu</td></tr>
<tr><td>Indonesia</td><td>Jakarta</td><td>Indonesian</td><td>Batik</td></tr>
</tbody>
</table>

CSS code for Table 3

Menu bar