Archive

- Posts Tagged ‘CSS’

Adding Wrapper Element or Class to Sidebar Widget Content

I was looking for a way to add a CSS class to WordPress Widget Content area. For textWidget, I see a particular class class=”textwidget” is available for every text widget but content area class and element is not same for other widget type.
I got this for adding wrapper around… (Continue)

CSS LESS: How to do Looping?

The CSS LESS code output 5%, 10%, 15%… 100%. This is what I wanted to generate with LESS. This code on Stackoverflow provided some clue about “How to Loop” in LESS but it was not working. I have updated there as well.

@iterations: 100;

.loopingClass (@index) when (@index > 0)… (Continue)

Font Awesome Examples Without Bootstrap Framework

Update: Use of Font Awesome the easier way: Using Font Awesome 4 for Getting Icons.
Font Awesome is developed for Bootstrap FrontEnd Framework. It includes 370 icons and most of them are free. It is svg images so font is good in any display. I will present two ways to… (Continue)

CSS Icon Set Revolution

A revolution has come that is about building Icon set in pure CSS. It may look like a magic first time. How CSS only can produce Icon set.
CSS Icon set has a distinct advantage. It avoids loading images which are used to load various icons. Even sprite image was… (Continue)

How to Use Google’s Adsense Code for Responsive Design?

In days of responsive design, two resources are out there which need special attention. One is images and another is any Ad code you or client may be using on Website or Blog. This is because they can be difficult to customize. This article is about customizing AdSense code to… (Continue)

What is Box-Sizing:Border-Box and other Values?

Box sizing affect how Box Size will be rendered. Box size can include padding and border or it can exclude border and padding while taking height and width. It is here to solve your measurement problem of Block element.
I know you have calculated box (div/p) size earlier if you… (Continue)

CSS: Z-index is Not Working

If you are tired of correcting z-index and it is still not working then check the following points in your CSS code:
1. z-Index only works for positioned elements:
So, value with position:absolute, position:relative, or position:fixed will respond to z-Index.
2. If you are setting z-index to menu kind of… (Continue)

CSS Overlay: Text at the Bottom of Image or Text Ribbon

Here is a working sample with code for CSS overlay on Images. It is not using any JavaScript library. It is just HTML and CSS. It is very simple to create. Just you need to adjust the css for making the alignment very specific if you HTML is different. Important… (Continue)

nth-Child and Two class selector

I recently used nth-child() selector and two class selector.
Uses of nth-child() is simple. Just need to remember the small syntax. The below CSS will make table’s row alternate in color. Table’s id is poslist as used here.
#poslist tr:nth-child(even) {background: #DDD;}
#poslist tr:nth-child(odd) {background: #FFF}

I need to use… (Continue)