Archive

- Posts Tagged ‘CSS’

CSS Properties Which Inherits from Ancestors

There are many properties which inherits from their ancestors. Very well know are Font and font-* properties. Many other CSS properties inherits from their ancestors and we should know them, if you write CSS. This helps in avoiding duplication and also keeping CSS file size in check. Less lines of… (Continue)

Best Way to use Font Awesome Icons

I have already written two posts about using Font-Awesome. Now this posts in not about getting icons on web page but about using their CSS and Font file in best possible way (as I know!).
Instead of calling directly their file on CDN, get all font-awesome provided css and club… (Continue)

Adding Href Attribute Value after Link for Print Style

There is general style convention people follow for links in print style CSS. In print style css, we add href value of link just after <a> tag so that on print paper, link look like below:

instead of below:
Syntax Highlighter
Above link is having href but on printed paper,… (Continue)

Nice BlockQuote Design in CSS

HTML element Blockquote has their own unique design by default but that uniqueness is not sufficient most of the time. So, we developers add our own design to that by using image for quote or something else.
Here is nice looking CSS for <BlockQuote> element design:

blockquote {
background: #f9f9f9;… (Continue)

A Lightweight CSS Framework from Yahoo!

Yahoo! has come with lightweight CSS framework. Yahoo! is good in bringing heavy and buggy software to us but now Yahoo! is trying to keep with time and developed new PureCSS CSS framework that it targets as lightweight, easy to use. Very important point is that it is Open Source.… (Continue)

CSS LESS Compiler in PHP

Here is a LESS Compiler written in PHP. When I read about this first time and glanced through the documentation then I liked these things:
Loved this checkedCompile() method which will check if file is already compiler or not !
$less->checkedCompile(“input.less”, “output.css”);
If the file is compiled but older than… (Continue)

Negative Text-Indent CSS Alternative to Hide Text

For Search Engines, we used to use negative text-indent at few places. Using text-indent, we want to hide text for normal viewers (by sending text off screen) and display image but for search engines and assistive technologies, we add text to the element. Most common place to do this was… (Continue)

Using Font Awesome 4 for Getting Icons

Font Awesome is a awesome font that saves you from thinking about how and from where you will get those awesome Icons for you blog or website. This post is about getting Icons on page using Font Awesome fonts only and without any images.
Previously I have written post about… (Continue)

How to Apply :hover to :before and :after Elements?

The post is about applying :hover CSS effect to content generated using :before and :after elements. This is easy to get tricked when you occasionally code CSS. When you apply CSS to their parents then that will get applied to their :after and :before elements as well.
We cannot write… (Continue)

Normalize.css Vs Reset.css? Which One to Use?

We have two kind of CSS utilities to use when we start any web development projects. One is Reset.css and another newer one is normalize.css.
Reset.css resets every design applied to HTML elements by browsers. Normalize.css try to normalize those design across browsers.
Which one is more reliable?
Reset.css is… (Continue)