CSS

Use CSS to hide text, but still show background

2013/01/26 – 4:13 pm

If I have HTML like this:
<a class="facebook" href="https://www.facebook.com/">Facebook</a>
I can use this CSS
a#facebook{
background:#666;/*add facebook image background here*/
text-indent:-999999px;
display:block;
overflow: hidden;
width:100px;/*match with your facebook background's width*/
height:100px;/*match with your facebook background's height*/
}

Note that, It is not a good practice because if user disable image, but not css, it will be no text to tell them what is in that space

By pak | Comments (0)

Full Page Background with CSS3

2012/10/21 – 2:10 pm

Make background always cover the entire browser’s windows use CSS below.
background:url(your_backgdound_image.jpg) no-repeat 0 0 fixed;
background-size:cover;

the key is “background-size” must be “cover”. Cover mean background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.

By pak | Also posted in Web & Graphic Tools | Comments (0)

First, Last Selector

2011/05/19 – 10:08 am

add class to “first” and “last” element of its parent for better control across browsers.
Read More »

By pak | Also posted in BLOG, jQuery | Comments (0)

Import / Embedding font by CSS

2011/04/10 – 10:48 am

let say i want to use “Raleway” from Google web fonts

  1. download the font
  2. un-zip and ftp it
  3. CSS:
    @font-face{
    font-family:raleway;
    src:url(locationOfYourFontOnServer/Raleway-Thin.ttf);
    }
    or you can link your CSS to google font library, read more here!
By pak | Also posted in BLOG | Comments (0)

Target Mac or PC and its Browsers

2011/03/24 – 7:25 pm

Target Mac or PC

this will add class = mac or pc in the <body> depend on user machine.
Read More »

By pak | Also posted in BLOG, jQuery | Comments (0)

Limit Content to Display by CSS (only)

2011/03/23 – 5:26 pm


li{
height: 46px;/*any number - can apply to width as well*/
overflow: hidden;
text-overflow: ellipsis;
}

By pak | Also posted in BLOG | Comments (0)

CSS Dropdown Menu Part1 – Using List

2011/03/02 – 12:02 pm

I will make it as simple, as short as I can.
(Later tutorial I will integrate some jquery effect with the menus.)

By pak | Comments (0)

Simple Scrollable Areas

2011/02/25 – 4:25 pm

Scrollable areas can be done easy without using iframe, but using only what already lies within HTML and CSS.
Read More »

By pak | Comments (0)

Simple CSS Template (SEO friendly) part1

2011/02/25 – 3:58 pm

I will keep it short and I hope it will be easy to understand.

For this example, I want to have

Read More »

By pak | Comments (0)