CSS Media Queries for All Devices and Browsers

Published on

Following table demonstrates CSS media queries for all browsers in action.¬†CSS Media Queries for All Devices and Browsers /* Smartphones (portrait and landscape) ———– */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* STYLES GO HERE */ } /* Smartphones (landscape) ———– */ @media only screen and (min-width : 321px) … Continue reading CSS Media Queries for All Devices and Browsers

How to create a table with fixed header and scrollable body using the bootstrap 3

Published on

Scrollable table with fixed header in bootstrap HTML table with 100% width, with vertical scroll inside tbody Here is the working solution HTML <table class=”table table-striped”> <thead> <tr> <th>Make</th> <th>Model</th> <th>Color</th> <th>Year</th> </tr> </thead> <tbody> <tr> <td class=”filterable-cell”>Ford</td> <td class=”filterable-cell”>Escort</td> <td class=”filterable-cell”>Blue</td> <td class=”filterable-cell”>2000</td> </tr> <tr> <td class=”filterable-cell”>Ford</td> <td class=”filterable-cell”>Escort</td> <td class=”filterable-cell”>Blue</td> <td class=”filterable-cell”>2000</td> </tr> … Continue reading How to create a table with fixed header and scrollable body using the bootstrap 3

How to convert a bitmap font (.FON) into a truetype font (.TTF)?

Published on

Use FontForge + Autotrace then make some corrections manually. First integrate Autotrace in Fontforge, see Autotracing bitmaps in FontForge. Here is how I have done it, as I wasn’t able to use the win32 version of FontForge: Download, unzip and start Portable Ubuntu Tres. It’s a special linux version that works under Windows! Choose System->Administration->Add/Remove … Continue reading How to convert a bitmap font (.FON) into a truetype font (.TTF)?

How to make a transparent text cut out of a background effect

Published on

Although this is possible with CSS, a better approach would be to use an inline SVG with SVG masking. This approach has some advantages over CSS : Much better browser support: IE10+, chrome, Firefox, safari… This doesn’t impact SEO as spiders can crawl SVG content (google indexes SVG content since 2010) CodePen Demo : SVG … Continue reading How to make a transparent text cut out of a background effect

How to style the color, size and shadow of icons from Font Awesome’s Icons?

Published on

http://fortawesome.github.io/Font-Awesome/examples/ <i class=”icon-thumbs-up icon-3x main-color”></i> Here I have defined a global style in my CSS where main-color is a class, in my case it is a light blue hue. I find that using inline styles on Icons with Font Awesome works well, esp in the case when you name your colors semantically, i.e. nav-color if … Continue reading How to style the color, size and shadow of icons from Font Awesome’s Icons?