em-px-em
Jul28

em-px-em

Compare the differences between EM and PX em pixels ex pixels .093em 1px .17ex 1px .19em 2px .25em 2.66667px .25ex 1.53333px .28em 3px .3em 3.2px .3ex 1.8px .33em 3.53333px .33ex 2px .47em 5px .5em 5.33333px .5ex 3px .67em 7.13333px .67ex 4px .75em 8px .75ex 4.53333px .83ex 5px 1em 10.06667px 1ex 6px 1.5em 16px 1.5ex 9px 2em 21.3333px 2ex 12px 2.5em 26.6667px 2.5ex 15px 2.67ex 16px 3em 32px 3ex 18px 3.5em 37.3333px 3.5ex 21px 4em 42.6667px 4ex 24px 4.5em 48px 4.5ex 27px 5em 53.3333px 5ex 30px 5.33ex 32px 8ex 48px 10em 106.667px 10ex...

Read More
Place IFRAME content inside to a Predefined Position
Nov22

Place IFRAME content inside to a Predefined Position

Generally we call a IFRAME content from external site, it will display whole content of external site. Some times we want to display particular area from the IFRAME, at that time we can user the following steps. CSS #my-div { width : 400px; height : 200px; overflow : hidden; position : relative; } #my-iframe { position : absolute; top : -100px; left : -100px; width : 1280px; height : 1200px; } HTML <div id="my-div"> <iframe src="http://www.example.com" id="my-iframe" scrolling="no"></iframe>...

Read More

CSS Box-Shadow:Inset

You’ve gotta appreciate the imageless design elements the CSS box-shadow property makes possible. No more slicing up 3 jpgs to recreate the depth so easily gained in Photoshop. Lately, we’ve been using box-shadow:inset on some Paravel jobs, and I’ve seem some clever uses out there on the intertubes. This property is compatible with Webkit (Safari & Chrome), Firefox, Opera, and IE9, so there’s no reason to hold off using it as an enhancement on the page you’re working on right now. A reasonable way to circumvent this issue would be to wrap the image in a div or a span element and employ some basic z-indexing. See the example code provided below. While this method gets the job done, I wonder if it’d be sensible to update the CSS Working Draft to allow for inset shadows to be displayed on top when applied directly to an image. Despite the inconsistency, it seems intuitive to me and would ultimately lead to cleaner, simpler markup. <a class="inset"><img class="image" src="at-t-8525-pda-1.jpg"></a> .inset{ box-shadow:inset 0px 0px 5px rgba(0,0,0,.5); -webkit-box-shadow:inset 0px 0px 5px rgba(0,0,0,.5); -moz-box-shadow:inset 0px 0px 5px rgba(0,0,0,.5); width:135px; height:135px; display:block; } img.image{ z-index: -1; position: relative; } Get worked files...

Read More
What’s the Difference?
Jan13

What’s the Difference?

What’s the difference between .container div { } and div.container { }? It’s great you are asking questions like this Paul. The answer is very important to understanding CSS, because these two selectors select very different things. This is pretty similar to this question from a while back. Perhaps a good way to explain their difference is reason them out in “plain English”. .container div “Select any div element that is a child of any element with a class name of “container” div.container “Select any div element that has a class name of “container” They key difference between them is the space. A space in a CSS selector has very special meaning. It means that the part of the selector that occurs right of the space is within (a child of) the part of the selector to the left. This doesn’t apply to your second example, because it has no space. The second concept at work here is what is called tag qualifying, which can be a bit confusing. The tag qualified selector is div.container. It means that it will select only <div> elements with a class name of “container” and no other elements. Remove the div and you have .container which is nearly the same thing only will select any element with that class name. A tag qualified selector has ever-so-slightly more specificity. Personally, I rarely ever use tag qualified selectors. They are less flexible and technically less...

Read More
'